Setting focus on a Flex app after its loaded

Every notice that after a Flex application is loaded by the browser that it doesn't have focus? So if your Flex application has a login screen, you actually have to grab the mouse and click somewhere on the Flex app for it to gain focus and for you to start typing. Well here is a quick and simple example of how to solve this problem on Firefox and IE. Doesn't work on Chrome and Safari...ah those bloody browsers again!

AIR using "Hero" beta running on Android video

Need I say more...great video that demos a simple AIR app running on Android 2.2. This is a beta version of AIR, which was built using a beta version of the next Flex SDK, codenamed "Hero". The presenter also goes thru most of the code, so this is a great peak into the future of Flex/AIR development for Android phones.


Ottawa Mobile Dev day recap

On Saturday I went to the Mobile Dev Day in Ottawa and here is a brief recap of what I saw.

Windows Phone 7
It was the last prez of the day and for me it was by far the most interesting, so you could say they saved the best for last. The presenter actually demoed a beta version of the phone (due out in Nov of this year) with all of its features and then proceeded to use Visual Studio to create a couple of simple apps and run them in the simulator to demonstrate a simple development cycle. A couple of the sample apps he built used the Azure services (provinded by MS for a monthly fee of $12 - dont quote me on that) to push information to the phone. The development was done in C# so easy for existing Windows developers to pick up on (or even Java developers like me!).

Adobe AIR on Android
Unfortunately there was no demo, just a look at sample code and what extra APIs are provided to AIR for the Android OS. Again this is just a beta, so you can try it out yourself by downloading the add-on here. Although you can access things like the Geolocation API and the Accelerometer, you cannot unfortunately access the phone's contacts or any over local data. Maybe in the next version.

Two words: Objective C. We had two presenters for the iPhone and although the apps looked great (like they always do), I can't say that programming in Objective C turns me on. It looks so archaic. Dealing with pointers? Remembering to free up memory? That's so 15 years ago! There is a glimmer of hope however, you can use PhoneGap to create HTML/JS/CSS apps and deploy them to the iPhone. But you have to have a Mac in either case to do iPhone development. Bah!


HTML/CSS not as intuitive

So you have the root container of your application and want to center it on the screen (regardless of screen resolution). How do you do that in HTML? I use Dreamweaver CS5, so I thought the CSS code hinting would make this easy for me to figure out. "position" property? Nope. There is a "vertical-align" property, but not "horizontal-align" property. "float" property maybe? Nope. How about "display"? Nadda, again.

Finally after some google I found this and it worked:

.rootContainer {
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;

So in essence a hack as I see it. The above CSS basically says take your container, makes it 1000 pixels wide, position it as 50% from the left border and then goes back 500 pixels (always half of the container's width) in the left direction. Basically it is doing a mathematical calculation for you. In 2010, shouldn't things be easier for you than this?

The equivalent in Flex you ask? If your container is nested within a Canvas, just set the horizontalCenter like so:


Simplicity. I love it. And in the case that the parent was a non-Canvas type container, then you could use:


Again, simplicity. You know just but looking at either one of those lines what the positioning of child elements is going to be.

The conclusion here is not to say that I don't want to learn, or that I am being lazy. Neither that a simple math calculation is beyond my abilities. It's to say that it is not intuitive! We use the word intuitive when talking about a user using a UI for the first time, how easy it is to figure out how to perform some task; well same goes for developers. In Flex it is easy to figure out how to position elements within a container, in HTML it is not so easily apparent.

Another one is the CSS "float" property. Allows you to push elements to the right or left. But top and/or bottom? No idea, haven't discovered that one yet :)

P.S.: Don't ever use the HTML <center> tag to center elements...it doesn't just center its immediate children, but children of children as well. Don't ask me what algorithm it uses!


Very nice UI design for Windows 7 tablet

Here is an article I came across today about a possible UI for the upcoming Windows 7 tablet. Very nice indeed!