I hear of facebook getting a lot of flack because of how they manage (or purportedly don’t manage) their users’ privacy. I did this experiment a while back but haven’t had time to blog about it. The tedious task of taking screenshots and logging in and out of 3 different accounts on 2 different social networks seemed a bit too daunting. So instead of screenshots, I decided to illustrate :p feel free to recreate the scenarios yourselves though

I don’t know, maybe google has their reasons for implementing it the way they did. Which do you prefer?

If you’ve already gone to the trouble of verifying your account and getting early access to the new facebook timeline, you might want to share this awesome feature with your friends. If they’re the type that can’t be bothered to go through all the steps (or have concerns about the verification step), you can simply invite them as a developer and they too can get early access to facebook timeline.

If you want invites, find someone on your feed already talking about getting the timeline enabled and ask them to invite you. If they say they don’t know how, send them this post. They should let you know when they’ve finished #4. Then check out the section For the Invitee.

For the Inviter:

1. visit https://developers.facebook.com/apps and go to the app that you created to get verified and click on Edit Roles:

2. You can then add a new developer:

3. Type in your friend/s’ name/s

4. You should see this untill your friend accepts the developer request.

For the Invitee:

1. if your friend has finished inviting you, you’ll get this notification:

2. click on it and you’ll be taken to a page to install the developer app. Once finished, you should see a link that will ask you to confirm your developer request:

3. Once you’ve confirmed, go to the facebook homepage and you should see this notification on the top. Click Get It Now and enjoy Timeline!

I bought this app a while back because I really enjoyed the game and it was 99 cents. There was a free version which only had one puzzle so I paid for it because I enjoy it. Then now it seems they have released an update which made the paid version “totally free”.

I inherited my husbands iPhone 4 so I installed it but now I have the updated version of the app shitladen with ads!

Why didn’t he update the free version or better yet publish a totally new one with the ad support?!?

I want my 99 cents back!

//end rant

Click jacking happens when you visit a website that shows you content to mislead you into interacting with it. When you do, suddenly messages/wall posts/ etc (because this usually happens on facebook) get sent with your knowledge. Sometimes it can be an embarrassing post on your own wall, and sometimes annoying post to ALL your friends’ walls (which is a pain to delete).

We’ve seen those intriguing videos being posted around our friends’ walls and usually curiosity gets the better of us, so we *click*. It leads to a page that can either be a fake video page, or a fake captcha page, or who knows what these malicious folks come up with these days. So, if you’re the really curious type, or you have friends who really do post weird videos that you’re often interested in watching yourself, make it a habit to browse these links in private, so at least you’re safe from being possibly click jacked.

HOW

1.Download and install a browser that supports in-private browsing. I use either IE 8 for XP, IE9 for Win7 or Chrome

2. whenever you see a link to a video that you’d like to view and it doesn’t play directly within facebook (that is, it takes you to another page or opens a new window) right click on the link and select “Copy Shortcut” (IE) or “Copy link address” (chrome)

ght

3. To start a private session, hold Ctrl and shift then press P for IE and for chrome Ctrl+Shift+N. Your new browser windows should look like this:

IE 9

Chrome

4. Go to the address bar of your browser and press Ctrl+V and press enter. Already the link looks malicious, but since we’re in private and not logged into any accounts, there’s no risk of your accounts being compromised (unless you already have an in private session going on where you’re logged in)

The example above just redirects to google now so they’ve probably taken it down. But since it’s not loading a proper page, we can safely assume that that was a malicious link. At this point, I can either ignore any future posts of the friend who posted since he clearly easily falls into these things, or I can help him out by letting him know that there’s a link to a malicious site that’s been posted on his wall in case he’s not aware. And if you’re feeling extra helpful, teach them what you’ve learned about in private browsing. You can do your part to make the internet (well, maybe just facebook) a safer place.

Had the urge to build a new app recently when I came upon this. Since facebook doesn’t support mobiles in SG yet, I have to go with the credit card option. What’s going on? I’m not sure I want to give my cc info especially with all those click-jacking apps floating around. But now that I think about it, maybe those apps are the reason why facebook is putting this extra security measurement. Still though, I’m not comfortable with giving out CC information, too scared I’d end up with a bajillion facebook credits because I clicked a link. :/

I’m glad I created a lot of apps in the past, maybe I’ll try and recycle the ones I’m not going to use anymore…

Ever since we got a new router to replace the one that broke down, we’ve been having trouble with wifi on Macs and iPads at home. Strange cause my win7 machine seemed to be doing fine. So it turns out that we had WEP security on and after searching through forums setting it so WPA or whatever the most secure settings are actually fixes it. No more problems with the wifi. Well, the range is still a problem. Not really sure where the best place is to put the router. Right now it’s in the bedroom, but then our XBOX in the living room can’t seem to get a stable connection Bah, we don’t play that much games anymore anyway..

Just in case I need to go through this again, here are the resources that I found useful.

Walk through on preparing your add-in for deployment

http://msdn.microsoft.com/en-us/library/bb332051.aspx

Enable Windows Installer Logging – if anything fails during deployment, this is useful for figuring out what went wrong.

http://support.microsoft.com/kb/223300

index.php

change: require(‘./wp-blog-header.php’); => require(‘wp-blog-header.php’);

xmlrpc.php

change: include(‘./wp-load.php’); => include(‘wp-load.php’);

UPDATE: One more thing, in order to enable publishing images through Windows Live Writer, you have to manually create the wp-content folder as well (or is it wp-content/uploads…)

In the course of my building our ROI app, I was trying to figure out how to wrap the legends of charts when the text gets too long.

This is what I get with the default chart.

You’ll see here, there’s a lot of waste of space for the legend when what I really want to see is more of the chart.  So first thing we’ll do is fix the width of the chart. To do that, Right Click on the chart, Edit Template then depending on whether you’ve already been fiddling with your chart template, either Edit Current or Edit a Copy

When you expand the template, you’ll see a grid within the grid that contains both the chart and the legend.

You’ll notice that the grid is split into two, a star sized column and an auto sized one. Since autosizing will adapt the column size to the content, we’ll need to change this to star sized as well. You can do that by clicking on the icon and change it to the unlocked lock symbol.

Now, you should be able to click on the triangle and resize the columns to your desired width ratios.

You’ll notice that when you do this, your legend area won’t have as much space as before and since the legend items aren’t formatted to wrap by default, the text gets cropped if you have long lines of text.

Return to the scope of the user control by clicking on this icon in your Objects and Timeline panel

Find one of your ColumnSeries (or whatever data series your chart is using) Right-click->Edit Additional Templates –> Edit LegendItemStyle –> Edit a Copy

Give your style a name, and choose where to define this style. This depends on where you will be using this style, if it’s only in this page, then you can choose document. If there are other pages, you think you’ll be using this style in, choose Application. If you want to be able to reuse this style in other applications ,choose Resource Dictionary, choose an existing one or create a new one if you don’t have one yet. This stores the style in a separate file which you can then later on import to your other projects.

Clicking on OK should then bring your designer to to the LegendItem template designer. If you expand the StackPanel, you’ll see that we have the Rectangle and Title elements. If you look into the xaml code, you’ll see that the Title element is template-bound to a property called Content.

In my case, since I know that the legend will only represent text content, I can simple delete the title element, replace it with a Textblock object and apply the same bindings. I can do that by first selecting the textbox, search for the text property in the search box of the Properties panel, then clicking on the small square beside the property to access advanced options.

We select Template Binding –> Content

One last thing to do is set the width of the TextBox since it’s currently auto sized and we can’t currently set the width to take up the rest of the unoccupied horizontal stackpanel space. If you want your legend to scale dynamically, you’ll need to change the stackpanel into a grid. To do this, right-click on the StackPanel in your Objects and Timeline panel –> Change Layout Type –> and select Grid

After this step, check on your Rectangle, most likely, the Width and Height properties will be reset to auto so you’ll want to give this a size.

-

For the grid itself, it’s Height and Width gets fixed so we’ll want to reset this to auto so the grid is free to resize as it’s content or container feels necessary.

Now we can add a grid line by clicking on the top portion of our grid, and right after where the Rectangle ends:

then toggle the grid property (by clicking on the lock icon) until we get Pixel sized.

We can leave the other column at star sized so it’ll take up the rest of the available space.

With the TextBox selected, make sure the Width and Height  is set to auto (if there is a value, you can use the button on the right of the field to set to auto), the HorizontalAlignment and VerticalAlignment are set to Justified and the margins are set to the distance you want.

Now when you go back up to the UserControl scope, you’ll see the TextWrap in effect. Looking at this though, I might want to change the alignment/margins so that the rectangle is aligned to top instead of in the middle just to make it look nicer.

To go back to editing the template, right click on the ColumnSeries –> Edit Additional Templates –> Edit Current –> Edit LegendItemStyle

In my case, I chose top aligned with a bit of a top margin.

Going back out to the UserControl scope, we’ll be able to see the effect.

You can play around with how you want your legend to look and once your satisfied, it’s time to apply the style to the other series’. No you don’t to do that whole set of steps for each of them so don’t worry. Right click on the other column series-> Edit Additional Templates –> Edit LegendItemStyle –> and this time select ApplyResource and you should see the style you created in the previous steps and click on that. In my case, I named the style LegendItemStyle.

You’ll notice your legend automatically format itself the same way the previous column series did.

And that’s it!

Basically, click on all and then refresh. There will be a prompt that will ask you to confirm the creation of your default notebook on your Skydrive. After that’s done, you should be able to access your notes from the phone on http://office.live.com  I found the Personal (Web)

If it’s not in the recent documents, you might want to check “My Documents” cause that’s where I found mine.

So all that works perfect. But what I did discover is you can view and edit your existing notebooks too (though it’s a bit buggy). If you want to try it, go back to the home screen and start up Internet Explorer, then navigate to http://office.live.com

You can then navigate to the existing notebook you want to edit, and click on its icon.

That should then trigger the One Note app to open up the notebook:

You’ll then be able to navigate to the sections on that notebook and edit and sync as you please. One bug in this instance is the One Note app doesn’t seem to name the section right*, in this case the app says “Untitled Section” even though I have it named Project List on Skydrive. Making changes seems to still update the right section though. On another incident where I tried syncing a notebook with 4 sections, 3 of the sections ended up having the same name, even though they were named differently on the server. I’m sure they will send out an update to fix this problem soon.

Oh, and if you want to stop syncing (or want to try re-adding the notebooks to try and fix the section names) just tap on the trash bin icon at the bottom, that will prompt you to select the notebook to delete and it will stop syncing to your phone.

*UPDATE: Seems that the issue is fixed now. If you have any untitled sections, you can just delete and readd them to have them showing right.

Call me easily amused but there. So finally, I got my WP7, its an LG Optimus 7 (LG-E900)

Photo of LG taken with my iPhone 3G:

Photo of (iPhone viewing photo of LG taken with iPhone 3G) taken with LG.

I had wanted to do a whole unboxing thing but just right after I finished paying for the phone, I had to get on a conference call. I think my iPhone sensed it was being replaced because it refused to cooperate. Till now, I can’t seem to go anywhere but the contact list. Basically I couldn’t pull up the keypad to dial O_o. I had an idea to sms the number to someone (the F was the lucky recipient) so it can turn into a smart link that I can click to dial. Yes that worked, but then I was prompted for the conference passcode. Again, something was wrong with the keypad so for some reason, it wouldn’t respond to me pressing 9. I can’t reboot, no matter how long I press the power button, so now I’m just waiting for it to die. (that was just too amusing a story not to tell) So even though I hadn’t charged my new phone yet, I quickly unpacked it, put the simcard in, quickly clicked through the settings and joined the call.

So obviously, the first thing I’m going to say is that you can get it up and running quite quickly, although it could be faster if we had the option to skip the configs and go straight to calling. At least it doesn’t require you to plug it into a PC first before becoming usable.

First thing I did was sign in with my Live ID and configure my work email, which was pretty straight forward. I’m happy that it seems my zune pass is working ^_^ it’s a good thing this phone has 16gb then. I also got my avatar in xbox live peeking occasionally on the tile (very cute, I’m glad I have a cute avatar). I quickly tried the panorama shot: Actually, I wasn’t sure what it was doing which is why it’s a bit blurry.. and random.. that’s the inside of my room by the way.

So apparently, you start it up and then just pan around, no need to click, it actually does that for you once it detects it’s the right moment to. You’ll also be shown a visual guide where you should be moving your camera to. The scan search app also looks interesting. It allows you to view the restaurants and places in your immediate vicinity using augmented reality. I’d post pictures but I’ve yet to figure out how to take a screen shot in wp7.

I did manage to try out the Ring it feature on windowsphone.live.com. Map it didn’t work, I think its because I had my phone plugged in syncing when I triggered it.

Right now, I’m liking this purchase very much. Haven’t seen the Omnia 7 so I’m not sure the “nicer screen” is worth the wait. One thing that bothers me though is that I keep accidentally clicking the camera button, actually half click only so I don’t activate the camera. It’s just a bit annoying but I can live with it. The buttons are a bit too “clickety” too, but I guess it’s alright.

That’s it for me for now, I’ll need to figure out how to do a screen cap in wp7 before a more comprehensive review.

Earlier on, I tweeted about this but I had to take down the twitpic because I realized that it had my phone number on it (^_^). I received this message a while back and I couldn’t help but think: WTF. O_O

The real WTF was finding out that this is 99% likely a legitimate message although there is nothing AT ALL in these two messages that these are legitimate Singtel services.

With all the phishing attacks that’s been happening for years, the IT Savvy-er of the netizens are doing their best to tell their friends and family not do download stuff from unknown sources and always check the domains of the sites you are accessing, etc. With the advent of 3G/mobile internet connectivity, people doing mobile banking, and so on, malicious attacks have been spreading to the mobile platform as well, as we’ve seen happening with the iPhone’s PDF vulnerability. We all have a part to play in helping each other keep our guards up against these issues, the Telco’s more so.

By doing something like this, they are basically saying “Yeah, we sometimes send you recommendations of services from a number that anyone can own” or “Yes, sometimes we offer free apps for download from website addresses with gibberish numbers and not even bother with a domain name” or “Yep, as long as there’s singtel in the web address that’s us!”. It’s very ironic how this is for a security & privacy application. No offense to WaveSecure, I know for a fact they’re a great product, McAfee does too. This was all good intention but sadly, poor execution.

How ugly can this get? If I were a malicious person who’s intelligent enough hack together an mobile app I could upload it to a domain like http://singtel.aimeegurl.com and send text messages to all the phone numbers I find, and say it’s an update to the software they’ve downloaded previously. The app can practically ask the user anything it wants since to the user, it’s their Telco’s app so of course they could trust them with their private information if they asked for it (Phishing++?) or if I were even more intelligent, I’d hack up an app that just straight away does nasty stuff without the users knowledge. Needless to say, possibilities are endless.

What’s done is done though. I’m sure investments were made on this project. Let’s hope no one exploits this. Meanwhile, the message still stands, NEVER download stuff from site domains that you don’t know for sure are legitimate, and just like in real life, there HAS to be proof of identity before complying to a request from someone who claims to be someone.

I’ve been using Desktop Connect for a bit and wanted to share my experiences.

First I did a speed test with my iPad. I called Singtel up yesterday and asked to have my 1Mbps data plan switched to the iPad data plan that’s supposedly 7.2Mbps. Maybe it hasn’t taken effect yet.

This is the screen shot of my usage prior to the remote session. I have turned off WiFi by the way.

So when you launch Desktop Connect (or Easy Connect I’m not really sure what the name is cause it’s listed Desktop Connect in the app store) I can see the machines that I have associated with my account. You’ll need to be running an application on your host machine and sign in with the same Google ID there too.

You’ll see here I’m logged in at 19:49.

For about 7 minutes I clicked on links, scrolled around, queued up a download.

After I disconnected, this is the screen shot of my data usage.

So for the quick browsing and initializing of download, it was about 6MB down for 7 minutes. Of course, your usage will probably depend on what you do during the session. Perhaps if you brows images, or even videos, or flash animations, you’d have higher consumption than when you’re only browsing through text.

One thing I’ve discovered is that it doesn’t work well when your host has an external monitor. I was trying to access my home machine from my iPad earlier and I had left it on with the external monitor attached. I couldn’t I could see what was going on on the screen but everytime I try to click or scroll, nothing happened. I discovered when I got home that although my PC brought all windows to the primary monitor, the mouse pointer was still on the other screen . So, remember to disconnect external monitors before you go out in order to let it function properly.

Another thing, if you’re using Win7 on your host machine, right clicking (there’s a button to toggle click mode to right or left click) to get the jumplist works on the host machine (since you can see the screen simultaneously on the host and ipad) but it doesn’t seem to render on the iPad. Strange.

Some folks have asked whether the multitouch functionality for Win7 works. Answer is no, the app actually maps out the mt gestures of the ipad for things like showing the toolbars, alt+tabbing. two-finger scroll works though not very well. No matter how small I make the movement, the window always seems to scroll all the way to the end.

All in all, I think it’s good enough to at least send some files from home that I’ve forgotten or set up a folder to sync with Windows Live Sync so I can access more files from anywhere, etc.

What started out as a rant about how Office Web apps doesn’t seem to work well with the ipad has become a rant about how the ipad, just like the mac, doesn’t have a decent blogging application.

Fine, the ipad seems to be marketed more as a content consuming and non-content creating device but my question is why? it’s a great form factor for writing on the go, its just a shame how the device seems to lack in terms of hardwawre (camera) and software (blogging app (& dvorak keyboard while I’m at it)) to enable such.

Okay so now to the supposedly main rant..

I thought it would be great to be able to access the office web apps through my iPad, getting word, excel and office for free but to my dismay, I’ve experienced some hiccups..

So first try heading down to http://office.live.com and signing in with your windows live id. Once your signed in, click on the “PC Site” at the bottom of the screen.

.

You can now proceed to either opening or creating a new document

So my experience with creating a new document was getting stuck at 95%. When I tried opening an old document, it just tanks my safari. not sure if its my account or my ipad but its what im seeing   hope it gets fixed eventually. I just think it would be very cool.

//painfully blogged on my ipad using a remote desktop connection to win7 with live writer, the best blogging software evah, and I say painfully because the first half of the blog post I was actually trying to touch type on this device.. eventually I succumbed to semi-hunt-and-peck also, I had to send those screenshots one by one over email so I could access them on the remoted win7 machine.

DISCLAIMER: I write this post more for myself because I tend to forget how to do things. There can very well be other proper ways of doing this, but this is the “good enough” solution, at least for me.

I was playing around with WPF again since it’s been a while. I wanted to customize the scrollbar and I found it was quite a task. I finally figured out a simple way of doing it.

The look I wanted was a simple, thin, vertical bar (I guess you could do the same with the horizontal bar.

1. So we start with a ScrollViewer that contains a RichTextBox(or whatever you want)

2. Now we proceed to EditTemplate –> Edit a Copy.

3. You’re probably already familiar with this dialog box. Give your template a Name when you click okay, by default, it’ll add this to your window’s xaml. But if you want to later on reuse this template, choose the option to define it in a Resource dictionary. Later on, all you’ll have to do is add that resource dictionary to your project and you’ll be able to apply the style to your ScrollViewer.

4. We’ll fix the VerticalScrollBar in this sample but you can very well do the same for HorizontalScrollBar. To start, right-click on PART_VerticalScrollBar and click on EditTemplate –> Edit a Copy. Again, you’ll be asked to select a name and where you want to save this style. This time, we’re editing the ScrollBar component (previously was the entire ScrollViewer).

5. If you expand the template that you’re presented with, you’ll see the elements below. In my case, I want to delete the two RepeatButtons since clicking anywhere above and below the Thumb more or less does the same thing.

5a. But lets say you wanted to edit the buttons, what we do, is draw out what we want the button to look like anywhere on the canvas. We’ll delete this later on. Here, we have a Grid that contains our desired button template.

5b. What we’ll do now is right-click on the grid and select Make Into Control. A dialog box will appear that will ask you to select which control you want this grid to magically turn into. You’ll notice above that the buttons for scrolling up and down are RepeatButtons, so we can type into the search box to find the component, click to select and we’ll name it into something we will recognize later on, in my case, ScrollUpButton.

5c. Now we’re editing the RepeatButton template. We can go ahead and delete the automatically generated ContentPresenter since we don’t need any content in our template.

5d. You’ll notice that you can also go into the states tab to edit the look of your button on different states.

5e. Once you’re done editing, you can go back to the Objects and Timeline tab and click on this button that will take you back to the ScrollbarTemplate

5f. Now to apply the style, select the first RepeatButton –> Edit Template –> Apply Resource –> ScrollUpButton (or whatever you named your template)

5g. You’ll now see the button with the style you’ve defined. Now remember to delete that Grid turned Repeat button that we used to create the style or else, it’ll become part of your template/application

6. Like I said, I’m deleting my up and down buttons because I don’t want them. You’ll notice that the grid this ScrollBar was defined in has Rows that hold the buttons and the thumb / track. I’ll need to delete the extra rows since I don’t need them now and I want the thumb and vertical bar to occupy the entire height. I tried deleting this through the designer but it only wreaked havoc (might be a user error) but I found the safest way to do this is to delete from the XAML code.  Click on this button in the upper right corner of your design canvas to show the xaml editor. (Now you know why I said XAML typing instead of XAML editing)

7. What I’ll do now is delete the 1st and 3rd row definitions.

8. Now I’ll see my scrollbar occupy the full height.

9. Next, I want to change the look of the ScrollBar’s thumb. You’ll see that the type of component this is is a Thumb. So we can do as we did with the Repeat button to style this. Make into Control only works on single objects so if you have several objects you want to include in your template, just right-click –> Group Into –> Grid to make them one.

10. Now you can follow the steps in 5b but this time, instead of RepeatButton, we select Thumb in the Make Into Control dialog.

11. Now continue with 5f to go back to ScrollBar template editing and apply the template to the Thumb object. You’ll now see our ScrollBar has changed. Again, remember to delete that extra thumb that we used to create the style.

12. One last thing. Maybe you don’t want your ScrollBar to be as thick as this. So using the button in 5e, go back up to the ScrollViewer template. With the PART_VerticalScrollBar selected, go to the Properties tab and scroll down to the Style property. You’ll see that it’s highlighted in green which means it’s being bound to a local resource.  

13. Click on Edit Resource

14. You’ll then see our style, and if with it selected, you scroll down the Properties tab to the Width property, again you’ll see that the Width property is bound.

15. Click on the Advanced Options button (that little square) and select Reset. You should then be able to put in whatever width you want.

16. Now when you click on the button in 5e. (Return scope button) it actually takes you to the topmost level which is the window. So you’ll have to do an Edit Template… on the ScrollViewer again to edit the ScrollViewerTemplate. (By the way, I’ve edited my Thumb template to make it look alright with a Width of 5, i.e., change the width of the topmost grid in the template to 5 and fixed the components inside to make it look good).

You’ll notice that the second column in the grid is set to auto-sized so you’ll want to click on that icon till it says pixel sized (locked lock)

17. With the handle selected (that inverted triangle there) you can now set the width property to what fits your template.

Now if you return scope to window, (5e), and run your app, you’ll now see your fully functional and newly styled ScrollViewer.

hmm.. looks like there’s one more property you need to set. With the PART_VerticalScrollbar selected, set the Background property to No brush.

This is the effect you will get. Note, I’ve also set the RichTextBox borders to zero to remove all borders.

And that’s it!

I’ve been on an app purchasing spree for a while so I had to update my iTunes account with an SG one. Recently though, MS has released a few apps that are US only: Windows Live Messenger & Bing. So what I did, I created another account with a US country (you can search how to create one without having to input credit card info). Once you have a new account, you can go to settings –> store and logout/login with your new account.

It’s a bit of a hassle though because once you’ve downloaded an app with one account, even if it’s available on both stores, you’ll have to be in the correct store to do an update. If that happens, just delete and re-download (of course, you’ll only want to do this with free apps.

So what to check out? For Windows Live Messenger, apart from the obvious social feed integration and IM, you should also check out the photos application that allows you to apply some basic effects to your photos before posting them onto skydrive, privacy setting settable to everyone or just you. <- new emoticon!

For the Bing app, there’s a new social tab that allows you to integrate with facebook and twitter so when you do a search, it searches your social feed as well.

Another new one is the Camera search. I thought this was really cool, you can search a barcode or cover art using your iPhone camera. I haven’t seen a successful search using the barcode yet since my camera is a bit crap. Perhaps 3GS users will have better luck.

So yes, now I have to figure out how to back up my apps to update to iOS4.
//Update: so it’s in iTunes: Right click on iTunes –> transfer purchases. Haven’t tried it yet though, I accidentally hit sync thinking it would prompt me for options on what to sync, now it’s just taking forever to backup. AND no cancel button.

To update your kindle, copy the files one by one to your kindle, trigger an update through the menu -> settings -> menu – update your kindle option

Do this for the files in the following order:

Update …. 2.3.3

Update … 2.3.4

Update_4311…490480060

your kindle may already intermediary updates already (mine was fresh at 2.3) so install the appropriate ones. Okay, I’m off to play with my newly updated kindle!

*For those who want to update, note that this update is for devices with serial numbers starting B003, i.e . the Global Wireless ones.

I stumbled on this when I logged into YouTube using the wrong password and found myself logged into an account where I had no activity/uploads whatsoever, when I distinctly remember adding favorites and uploads on my account. Apparently, this is what happened:

1. A while back I created a YouTube account with the username Foo, and uploaded, and favorited some videos on the site. When I created the account, I had linked it to an email address bar@live.com.sg.

2. At a later time, I created a gmail account Foo@gmail.com with a different password (password2).

3. At a much later time, I decided to create a YouTube account (by this time I had forgotten I already had one ) using my gmail credentials. When signing up, I had to put in Fuu as Foo was not available as a username, which I probably found strange but forgot about at that time.

4. I went back to using my former password by the time I wanted to login to YouTube again, so I put in login name Foo with the former password (password1) and then started favoriting videos.

5. After a while of YouTube inactivity, I one day decided to log back in, and absentmindedly put in my new password (password2). At first I panicked, I thought my account had been wiped out as there were no favorites nor uploads in my account. Then I noticed my account name Fuu. That’s when I tried logging in with my other password (password1), and sure enough, it took me to the account I was accustomed of using.

6. Just for fun, I changed my Foo (bar@live.com.sg ) password to be the same as my Foo@gmail.com (Fuu) password. Obviously, it goes to the former unless I specify Foo@gmail.com as my login name.

I just tried it out signing up test accounts (though I think I forgot my password after I changed again (or did I?) because I couldn’t login to my test account anymore) and the same thing happens.

The chances of this happening to 2 different people are I guess next to none. I wonder if the same happens with Flickr + Yahoo. Yahoo accounts take longer to sign up so I’m too lazy to test but my guess is yes. If I am right, I wonder what a good solution would be to prevent this from happening. If I’m wrong, I’m interested to find out what the fix is. I’m sure someone’s already figured it out with all these companies buying other companies.

Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features of Silverlight / Windows Phone 7 and Expression Blend to see how much can be done with what we have today.

There’s one annoying thing that I can’t figure out though: on the first scroll, you’ll notice from the video that the screen flickers. There’s probably something I’m doing wrong here but I just can’t figure it out yet

So I had set out to accomplish two things: Simulate the looping background and sections in the panoramic interface on windows phone and instead of flicking, let the user touch and drag the controls from left to right before switching. I was able to accomplish the two, but like I mentioned, there’s an annoying thing that happens on the first transition from state one to state two. Another thing that’s wrong with this sample is that, I shouldn’t be switching states right away on a drag to left or drag to right. You should be able to pan a bit and the screen holds to that position till you pan to a certain threshold before the interface snaps to the next section. But yeah, maybe next time.

The first challenge was implementing the drag to next state instead of the flick. I couldn’t really isolate this into either a trigger or an action as it’s actually a combination of both, therefore a behavior. Basically, depending on the sum of the left and right value of the users drag motion, I trigger either GoToNextState() or GoToPreviousState(). Code for these two were modified from http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack.

So I built a PanoramicPanningBehavior that has a few properties I can set.

First there are  the BackgroundElement, SectionsElement, TitleElement. I want them to be grouped so when it’s time for me to handle the drags, they don’t necessarily have to move at the same pace. That’s when the BackgroundMovementFactor and TitleMovementFactor come to play. Intstead of translating the background and title according to the value of the drag, I multiply it by the specified factor first. I’ve also let myself specify the StateGroup that has the states of our sections as described in my previous post, just in case you have other stategroups in the scene (though I haven’t tested this yet ^_^)

Now that I have the essential parts of my UI identified, I can now define what I want to do with them in my behavior when I start handling the events ManipulationDelta and ManipulationCompleted.

First for ManipulationDelta, I first check to see whether the parts are not null, and then based on the input factors, I apply them to the Translation.X property of the DeltaManipulation, or basically the change in the touch points and assign the value to the TranslateX properties of the CompositeTransform of the elements that have been identified through the properties. I think it’s better to read the code  

void RootVisual_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
     {
         if (!e.IsInertial)
         {
             if (BackgroundElement != null) {
                 var BG = getElement(BackgroundElement).RenderTransform as CompositeTransform;
                 BG.TranslateX += e.DeltaManipulation.Translation.X * BackgroundMovementFactor;

             }
             if (SectionsElement != null) {
                 var SE = getElement(SectionsElement).RenderTransform as CompositeTransform;
                 SE.TranslateX += e.DeltaManipulation.Translation.X;

             }
             if (TitleElement != null) {
                 var TE = getElement(TitleElement).RenderTransform as CompositeTransform;
                 TE.TranslateX += e.DeltaManipulation.Translation.X* TitleMovementFactor;
             }

         };
     }

If I wanted to run the project at this point, I’ll have to create a stateGroup and the section states in order for this not to go haywire. When I recreated the project, I actually added the panning behavior last. Next we’ll see the reason why I say this is meant more as an exercise for myself (and maybe for building demo apps) than production code. I think from this screenshot you can more or less figure out what I did.

Okay, so seeing as how you’re able to, from the leftmost part of your UI, be able to pan even more to the left to peek and even transit into the rightmost section, there had to be something there. And since I didn’t want to duplicate all the controls, I wanted to use WPF’s VisualBrush. Sadly, this isn’t available for Silverlight, however, I did find this: http://dotneteers.net/blogs/vbandi/archive/2009/03/26/discovering-silverlight-3-poor-man-s-visualbrush-behavior.aspx When I tested it out, it wasn’t as performant as WPF’s visual brush, but since I only needed to draw the UI once, I thought this would do.If we had the PathListBox in WP7, that would have been a better option too.

If you look at my visual tree, I basically created a brush for the background image(image), the TitleGrid and the ContentGrid (which you won’t see since I collapsed it because there were more stuff inside. Next, you’ll notice that these elements are inside a stack and before and after each of them is a Rectangle. Basically, I created identically sized rectangles that use as brushes the PoorMansVisualBrush.

To do this, after adding a reference to the PoorMansVisualBrush (which I’ve made a WP version of ), I select the Rectangle and temporarily choose, TileBrush, click on Advanced Options in the Fill property and select Convert to New Resource… This will prompt me with a dialog to create a new brush resource and I’ll name it accordingly. In this Case, I have BackgroundBrush.

Next, with the behavior selected, I set the properties accordingly. Most important to note is to set the UpdateIntervalDuration to 00:00:00 so that the behavior doesn’t waste resources by repainting the brush. Next, you’ll want to go to each of the rectangles and assign their fill properties to the BrushResources you created. Also remember to set the Stroke to No brush especially if you have background images that are supposed to seamlessly merge the leftmost and rightmost portions. Now the tedious part is doing this for all the rectangles.  

The last, and yet another tricky part is setting up the states. What you’re seeing here is pretty much the same as the last post where I have 3 states, to show my 3 sections. Note that when you position the states, you’ll want to position the actual to the middle/actual objects. It’ll probably be too difficult to set up using the rectangles with the brushes anyway since they don’t render at design time ^_^. Here, you’ll notice I’ve added custom transitions for when Section1State goes to Section3State and vice versa.

To do this, I’ll click on add transition button and select Section1State –> Section3State

In order to see what I’m doing better, I’ll switch to the Animation Workspace by pressing the function key [F6]. I’ve also minimized the stacks back so it’s easier to manage. With the transition to Section3State selected I’ll record a keyframe at the start, and end of the .5s transition.

When I record a key frame at the end, it’ll actually default to moving to the right most part of the actual controls which I changed to the one below. I’ve highlighted the outlines of the rectangles that mimic the actual controls.

Do the same for transitioning Section3State->Section1State. What will happen here is the application will play this custom transition animation to showing the visual brushes and when the transition is done, it’ll switch to the destination state where the real controls are visible.

Run the app to test and that’s it!

Again, not an ideal solution for production but at least I got to learn a few more useful things in Blend that might be useful in the future.

I’ve uploaded the code here so if you want to test it out, download the zip file, rightclick –> properties –> Unblock to avoid getting those dll not found / inaccessible errors.

To make things easier, I’ve made a behavior library for everyone to use that will handle flick gestures. I’ve also included a “GoToNextState” behavior which I based on http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack. If you want to follow along, you’ll need to download my behavior library. Also, if you don’t know where to get the Blend bits, check out this post: http://electricbeach.org/?p=460

So, let’s start by creating a new Windows Phone Application project in Blend 4.

You’ll be presented with a default layout. Obviously, your panoramic screen design will go outside the bounds of the “phone”. Layout your screen accordingly. This is what I did with mine.

Now that I have all my elements on screen, I’ll create 3 visual states, one for each active session. Let’s go into our States tab and add a state group called Sections. To do that, click on the icon with a green plus sign.

In the Sections state group, let’s add the 3 states and name them accordingly. For each state, let’s also move the Grid along the  x-axis.

We can also set the default transition to some built in easing functions to smooth out the user experience.

In my case, I used the back easing function but you can play around with the different functions to see what suits you. You can preview what the transitions look like by clicking on the Turn on transition preview button.

Okay, now we’re all set. The only thing left to do is enable state changing when a user flicks the screen either to the left or to the right. This is where we will be making use of the my WPBehaviorsLibrary. We’ll go into our asset library –> behaviors tab and you’ll find a behavior called GoToNextState and GoToPreviousState:

Drag and drop these two behaviors one by one to the LayoutRoot so that it looks like this:

With one of the behaviors selected, go into the property inspector. You have a few options you can set (Loop & UseTransitions) which are pretty self explanatory.

. You’ll notice there is also a trigger property. The default trigger type is an event trigger. Let’s go ahead and click New to select the FlickGestureTrigger.

When you click ok, you’ll find that the Gesture has a Direction property that you can set. Basically, we’re saying that the GoToPreviousState action gets fired when the user triggers a flick to the Right. Do the same for the GoToNextState behavior but with a flick to the Left.

And that’s it! Press f5 and select Windows Phone 7 Emulator, unless you’re lucky enough to have a Windows Phone 7 Device.

You’ll get something like this:

After reading some more on the UI Guidelines, they’ve mentioned a few things about the title like moving at a different speed from the sections, etc. so I’ve tweaked the animations a bit,and now I have the title outside the overall grid, animating it separately. I also have different easing functions on the first and last page from the middle one. The result is this:

You can get the code for this project as well as the library here. Also, although I’ve only managed to port  (i.e. copy paste) the States behavior from the Mix Behavior Pack to a Windows Phone behavior,  I’ve recompiled the pack to work with Silverlight 4. It’s in this folder as well.