How Flex works with helping you develop and design for multiple screens is provide a concept of applicationDPI. This applicationDPI is baked into the spark mobile skins, available in css media queries, and available to you any where in your code. Flex also provides a mechanism to override the applicationDPI for your needs, I will get to this in a bit. First for an example of an application making heavy use of the applicationDPI check out Caltrain Times. It is currently running across Android, iOS, and BlackBerry Tablet OS (PlayBook).

I have also personally tested it across these devices:

What is Flex's Application DPI really?

Lets start with what its not. Its not a reflection of what the device's actual DPI, for example the DPI values in the above chart. What Flex does for developers is provide 3 classifications you build your application against. They values are 160, 240, and 320, but you can think of them as small, medium, and large. Its also important to think of the Flex three DPI classification approach as your way to define what your application looks like and how it acts not relative it directly to device DPI. I explain two examples of why this is important with my Caltrain Times application. First is how to handle incorrect DPI values from the OS level. Second is applying your look to a set of devices by customizing the DPI classification in Flex. I'll get to the detail of those two examples later in the article, first lets explain application DPI.

The definition, Flex's applicationDPI takes on two meanings. If you explicitly set the value your are telling Flex that this application is skin to applicationDPI=XXX (160,240, or 320) and for the application to automatically scale the SWF and contents to the ratio of XXX/runtimeDPI. The applicationDPI classification strings can be found in mx.core.DPIClassification. For more control of how your application looks for the different DPI's do not set this value. Then the value of applicationDPI is just a classification of 160, 240, or 320 (or some arbitrary value if you wanted to your own classification). By default Flex considers any device DPI of < 200 = 160, > 200 = 240 = < 280, and > 280 = 320. Now you can override the class mx.core.RuntimeDPIProvider, in the first case this controls the scaling, the second case it sets the applicationDPI value.

The rest of the post will make use of extending mx.core.RuntimeDPIProvider to handle incorrect DPIs from the OS and control the look between phones and tables.

Handling Incorrect DPIs

It just happens that on the Android devices depending on the OS and manufacturers there is a chance of the device reporting their DPI incorrectly. I address this problem in Caltrain Times application, specifically on the Motorola Atrix, in my custom extended mx.core.RuntimeDPIProvider class. The basis of my thoughts go back to the current landscape screen resolution and screen size values. I check the resolution threshold of 1024x600=614400 and screen size to figure out case that just don't make sense. Here is the code for screenSize and pixel checking:

In the case of a high resolution 4 inch Android device with incorrect DPI of < 220 you'll find that the screenSize is getting larger then 5 inches. In my application I just looked for any device that was larger then 4.3 screen size (might have to change that as phones get larger displays) and its screen resolution < 610000 with a report DPI of < 220. If all those criteria are found I force it to return a value of 240 which the correct value I want.

Here is the code (with some checks for the my desktop case in there too):

Note: The source code can be found at https://github.com/renaun/CaltrainTimes/blob/master/src/com/renaun/mobile/dpi/CustomDPIProvider.as.

Applying your look to a set of devices by customizing the DPI classification in Flex

In this example I use similar calculations to figure out if the device is of a tablet size. The reasoning for my Caltrain Times application is that I wanted to overrider the typical DPI classification of 160 for tablets to be rendered at the DPI classification of 240. For my application with the larger look on the bigger tablet screens it feels the screen out nicely and works well. Again I go into the custom runtime DPI class to do this. Here is the code:

The "pixelCheck < 1920000 && pixelCheck != 1296000" part is to handle running it through adl on my desktop. The rest probably makes sense, in the current device landscape tablets are typically larger then 7 inches and smaller then 11 inches with a resolution greater then 1024x600. If these values show up then I apply the DPI classification of 240.

Summary

The main take away is don't take the devices DPI at face value. If you want more control of your application across various devices make use of some classification constraints and check screen size, resolution, and DPI. It might seem like a bunch of work but this class can be used across applications and projects with minor tweaks depending on content requirements. Its also a good way to figure out if its a tablet or smartphone and outside of Flex DPI classification. Enjoy.

Check out my MAX 2011 talk where I go through Caltrain Times in more detail, as well as the source code available on github.com/renaun/CaltrainTimes.

When going from MXML to ActionScript for item renderers or for performance reasons typically you use StyleableTextField instead of Label. StyleableTextField is a TextField with support for a subset of Label styles. StyleableTextField doesn't support styles through MXML or other typical fashions of the Label class. This means you typically to set the styles explicitly on the StyleableTextField, but then you have to know what styles are valid. There had to be another way. I didn't want to go through all the Flex CSS class properties I used in the MXML Label versions so I went looking for a solution to apply the styles through use of CSS class selectors. Now this is a solution and it works; but it might have performance implications for different types of content. In general it should work just fine if you are not changing the styles all the time.

Here is a screen shot of the item renderer with its selected state CSS changes.

Caltrain Times CSS applied to ActionScript ItemRenderer

To start I needed to figure out how StyleableTextField.getStyle() works.

This lets us know it first checks to see if there is a style assigned to the container object. This didn't work for me because I have multiple StyleableTextFields in the item renderer that needed different styles, as well as changing one of the StyleableTextFields dynamically. The class then checks for a styleDeclaration property, and if set it uses it to look up the style property value. This was the way I wanted to try out because I could use the Flex CSS class with out setting individual styles on objects.

The following code snippets are available in the com.renaun.caltrain.renderers.StationRendererAS file found in the http://github.com/renaun/CaltrainTimes repo.

Here is the initial setting of the styleDeclaration with the CSS class selector.

Then to dynamically change the styles at runtime I do this:

The lblStation.styleChanged(null); line of code sets the invalidateStyleFlag to true. This has to be done to allow styles to be set once lblStation.commitStyles(); is called.

This approach provides you with the ability to set various Flex CSS class selectors for different StyleableTextFields in your ActionScript item renderers. As well as let you change them up when you want.

There are a couple that I wanted to point out since I am out west in Nevada and know the guys down in LA.

This weekend:

MobileHackDays LA - http://losangeles.mobilehackdays.com/

Adobe is one of many sponsors for this event in LA running Sept 16-18th. I also know a team of Flash Platform developers that are attending as a team, "Team Adobe". Check out the guys from Almer|Blank that are sure to rock the event.

Michael, Hasan, Omar, Nolan, Tim

ReCommerce Hack Day - http://recommerceday.com/

Supported by the guys at Zappos.com. I will be checking this one out since its local.

Other Thoughts

There are others like this one in Las Vegas, NV, Las Vegas Startup Weekend. And a great website for both putting on a hackathon or getting info about other hackathons is http://hackatopia.com/. If you know of other mobile hack days or hackathon let me know below, I think its a great place for the community to get involved and learn a bunch.

Most of these you do not have to have a team to attend. They also usually encourage business, design, and developers to attend. Which makes for a great networking event as well.

If you do end up going to some of these events and build applications with Adobe products or the Flash Platform definitely let me know about it. Thanks, have fun hacking...

Adobe MAX is coming up in a few weeks and I will be speaking again at MAX. There has been some last minute changes and I will not be speaking on my original topic of Digital Fun in the Digital Home, but if you want to catch me talking about this topic come to the SCREENS conference later this year.

With the current focus on mobile development, I am excited to tell you what I will be talking about at MAX. I will be doing a detailed presentation about my process of building Caltrain Times across the different devices.

Title:
Design to Release: Building a multi screen mobile application

I will be covering the topic, not from a AIR/Flash Builder/Flex feature perspective, but from a higher level of how do get from start to finish with your mobile application. I will showcase the latest mobile features of Flash Builder and Flex as they played a critical role in different parts of my process. And this is not just development but the whole process, from design to release into the different mobile app stores. Come see me at MAX and definitely sign up for this session early.

The basic idea is to use Flash Professional and/or Flash Professional Project type in Flash Builder as the compilers. They compile the swf's, but do not handle the packaging of the mobile application.

Then you create a Flash Builder ActionScript Mobile Project that does the compiling and publishing out to mobile devices, with the compiling turned off. The compiler projects still put the debug symbols to allow debugging with the mobile project to work with full Flash Builder breakpoints and trace statement capabilities.

When you want to make a change, just make it in the Flash Professional Project in Flash Builder and it will compile the new swf to the ActionScript Mobile Project's bin-debug. Then you can launch it through the mobile project to test/debug.

Using Flash Builder's Mobile Workflow with Flash Professional Projects from Renaun Erickson on Vimeo.