Posts in Category "Uncategorized"

Developer Week Sessions

I’m giving 2 mobile related sessions at this year’s Adobe Developer Week. Here are my session titles, times and descriptions:

Multi-density and multi-platform authoring for smart phones and tablets with Flex 4.5 SDKTuesday, June 21, 2011 1:00 P.M. Pacific
Learn what multi-density on devices means, why it is important and how to leverage the support available in Flex 4.5 to address the challenges.

Creating performant skins and item renderers for mobile applicationsFriday, June 24, 2011 11:00 A.M. Pacific
Dive deep into skinning mobile components. We will demo creating a skin that looks like a native iOS component.

I’ve covered skinning and how to handle DPI a little bit here on my blog. My first session will provide an overview of the topic and I’ll go into more detail and show more example code and live demos.

The second session will cover mobile skinning in-depth. In particular, I’ll cover what’s different between MXML and ActionScript skinning for mobile as well as some of the trade-offs we’ve made in the Mobile theme for performance. I’ll also show examples of how to extend mobile skins and our mobile-optimized item renderers.

Even though it’s only noted in the 2nd session, I’ll likely demo an example iOS-based mobile theme in both sessions as an example of multi-screen mobile skin authoring.

Share on Facebook

Comparing CSS Media Queries vs. Application Scaling

If you haven’t heard of either of these features in Flex 4.5, here’s a quick summary:

  • CSS Media Queries - Conditionally apply styles at runtime based on the DPI and/or OS of the target device
  • Application Scaling – When the application specifies an applicationDPI value, Flex applies a scale factor to the root application. The result is an application designed for one DPI value scales to look good on another device with a different DPI value.

The Flex 4.5 reference covers the differences in the two approaches to adapting a mobile application based on DPI. The documentation also spells out the steps it takes to implement each approach.

Testing both approaches is also straightforward. Flash Builder 4.5 can simulate screen resolution and DPI when you run your application in ADL on your PC. However, it’s not the same as seeing the results on an actual device at the real physical size.

I’ve put together some quick examples to demonstrate each approach and I’ve taken a few photos of actual devices to see the final result. I have 3 devices, going left to right:

  • Motorola Droid Pro, 320×480, DPI Classification = 160
  • HTC EVO, 480×800, DPI Classification = 240
  • iPod Touch 4th Gen, 640×960, DPI Classification = 320

The picture below shows 3 different applications:

  1. Application scaling is turned ON (applicationDPI=160) in the main Application tag. What this means is that I’ve designed my application with 160 DPI devices in mind. Flex will scale the entire application by a scale factor based on the runtimeDPI classification. From left to right you can see 1x, 1.5x and 2x scaling.
  2. Application scaling is turned OFF (applicationDPI is not set). At each DPI, I’ve adjusted my slider to a fontSize value that is readable based on the runtimeDPI of the device.
  3. Application scaling is turned OFF (applicationDPI is not set) but I’ve set single explicit fontSize value that is used for all 3 DPI classifications. Do not do this. As you can see, if you set an explicit fontSize for all 3 DPI classifications, you’ll run into issues at one end or the other. In this case, fontSize 16 is far too small on the iPod Touch.

 

What I should have done in the last scenario is define CSS style rules with media queries that select a proper fontSize based on the DPI of the device. I’ll use a simple label as my next example. The code below has scaling turned off, but this time I’ve defined a stylename with different fontSize values per-DPI classification.

In my ViewNavigatorApplication, I’ve turned off scaling:

<s:ViewNavigatorApplication> <!-- scaling is OFF when applicationDPI is not set-->
  ...
</s:ViewNavigatorApplication>

 

And in my View, I’ve defined a stylename with bold and italic styles that apply at all DPI classifications. After that, I’ve defined overrides using CSS media queries. Notice that I only supplied a new fontSize value for 240 and 320. The first rule is applied at all DPIs. I’m able to omit a 160 DPI-specific rule because it gets it’s fontSize style from the first rule.

<s:View>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
/* applies to all DPIs */
.heading
{
  fontSize: 18;
  fontWeight: bold;
  fontStyle: italic;
}
@media (application-dpi: 240)
{
.heading
{
  fontSize: 28;
}
}
@media (application-dpi: 320)
{
.heading
{
  fontSize: 36;
}
}
</fx:Style>
...
<s:Label text="Heading Style, fontSize={fontSize}" styleName="heading"/>
</s:View>

 

The photo below shows my app running on all 3 devices. The Label with the “heading” stylename shows the correct DPI-specific fontSize on all 3 devices.

Share on Facebook

Video: How to Skin a TabbedViewNavigatorApplication

Developing skins for the TabbedViewNavigatorApplication isn’t too hard. You just have to know where to start. The diagram below shows the major pieces of a TabbedViewNavigatorApplication:

  1. TabbedViewNavigator – This is a skin part of the TabbedViewNavigatorApplication. The TabbedViewNavigator contains 1..N ViewNavigators. Each ViewNavigator is displayed as a tab in the tab bar.
  2. ViewNavigator – The ViewNavigator is used to push and pop views. Each button on the tab bar represents a single ViewNavigator. In a ViewNavigatorApplication (no tabs) there’s only 1 ViewNavigator.
  3. tabBar skin part – The tabBar skin part belongs to the TabbedViewNavigator. In the Mobile theme, the TabbedViewNavigatorSkin creates this skin part. What’s not so obvious is that this skin part is actually implemented as a ButtonBar, not as a TabBar. The tabBar can be any ButtonBarBase. We chose to use ButtonBar to implement first, middle and last button skins for our default Mobile theme.
  4. ButtonBarButton – Not much to say here. It’s a ButtonBarButton that gets it’s label and icon from the ViewNavigator.

Since the tabs are just a ButtonBar, we could declare a style rule using “s|ButtonBar” as the selector, but that would affect all ButtonBars in the application. Instead, we need to use advanced CSS as follows:

s|TabbedViewNavigator #tabBar
{
  chromeColor: #000000;
  color: #FFFFFF;
  skinClass: ClassReference("skins.TabbedViewNavigatorTabBarSkin");
}

Of course, the major detail I’m leaving out here is the actual TabbedViewNavigatorTabBarSkin. With a little work, I can get my application to look like this:


All it takes is a little bit of FXG and subclassing the existing skins used in the Mobile theme. Watch the video below for a quick explanation, or just download chirpie.fxp and try it out for yourself.

With the June update for Flex and Flash Builder coming soon, knowing your way around the Mobile theme, mobile skins and CSS will help you get started writing cross-platform applications quickly.

Share on Facebook

Flex Size and Scaling Issues on the Motorola Atrix

As more and more devices come out, we on the Flex team have occasionally seen platform-specific or device-specific bugs. One of the more visible ones is when flash.system.Capabilities.screenDPI reports the wrong value.

Flex Mobile applications use the screenDPI property for application scaling (when setting the applicationDPI property) or when choosing density-specific skins (i.e. not using the applicationDPI property). When this value is wrong, Flex component skins and layout will either be too big or too small for the screen.

Unfortunately, the Motorola Atrix with AIR 2.6 is incorrectly classified as a 160 DPI device. What you’ll see when running your application is that component skins are too small. The bug is logged as SDK-29999.

Luckily, Flex 4.5 provides a way to override the DPI classification at runtime. The spec for this is posted at http://opensource.adobe.com/wiki/display/flexsdk/Override+Default+Density+Mapping.

For the Atrix in particluar, we’ve attached a workaround to bug SDK-29999 and I’ve posted an example FXP project here. The AIR bug will be fixed in a future release of AIR.

Download: SDK29999.fxp

Share on Facebook

How To: Use Flex 4.5 with AIR 2.5 on the BlackBerry PlayBook

Update: Troubleshooting “AIR validation failed” message. See below.

Update 2: Using Flex 4.5.1 on the BlackBerry PlayBook

Update 3: RIM has announced BlackBerry Tablet OS 1.0.6 with AIR 2.7. The workaround mentioned below is no longer required.

As you might already know, the BlackBerry PlayBook from RIM will initially be shipping with AIR 2.5, not AIR 2.6 (this is to come later in an update to the device). Flex 4.5 SDK requires AIR 2.6 as the minimum supported runtime – this is because of specific feature support (such as soft keyboard) as well as bug fixes/performance improvements. We know however that a lot of you are eager to develop Flex 4.5 applications for BlackBerry Tablet OS, so I’d like to share an unsupported workaround that you can use in the meantime.

I’ve created a playbook_overrides.swc that monkey patches the release build of the Flex 4.5 SDK to remove all AIR 2.6 dependencies. This allows you to publish a Flex 4.5 application that targets AIR 2.5. Here are some instructions to get you started. Again, keep in mind that this is an unsupported hack until (1) AIR 2.6 is available on the PlayBook and (2) Flex and Flash Builder update to 4.5.x in June 2011.

Requirements

  • Flash Builder 4.5
  • BlackBerry Tablet SDK and Plugin 1.0.1
  • playbook_overrides.zip (Contains playbook_overrides.fxpl, playbook_overrides.swc and TwitterTrendsFinal.fxp example project)

Steps

  1. Create a new Flex Mobile project with BlackBerry Tablet OS as a target platform
  2. Add playbook_overrides to the library path. This SWC patches SDK and Mobile Theme classes to remove soft keyboard dependencies. Download: playbook_overrides.zip
  3. Open Project Properties > Flex Compiler
  4. Add “-swf-version=10″ in “Additional compiler arguments”
  5. Open Project Properties > Flex Build Packaging > BlackBerry Tablet OS > Advanced tab.
  6. Add “-forceAirVersion 2.5″
  7. Run/Debug to device or emulator

Troubleshooting

  1. Crash on launch (application briefly appears in launcher, then closes).
    Make sure -swf-version=10 is set in additional compiler arguments.
  2. Blank or stuck on splash screen on launch
    Usually indicates a runtime error. Could indicate an AIR 2.6 dependency VerifyError.
  3. Error dialog when packaging: “error 102: invalid namespace http://ns.adobe.com/air/application/2.6.0 Error: AIR validation failed”
    Change the namespace in your /project/src/project-app.xml from “2.6.0″ to “2.6″

Next Steps

  • Refactor your project into 2 projects to target Android with AIR 2.6 support and BlackBerry Tablet OS with AIR 2.5 support simultaneously
  • Use the BlackBerry Tablet SDK for native controls in your Flex Mobile project
  • Try the TwitterTrendsFinal.fxp in the playbook_overrides.zip. This FXP already links playbook_overrides.swc and is ready to deploy. All it needs is an update to blackberry-tablet.xml to add the <author> and <authorId> of your debug token to deploy to a PlayBook.
Share on Facebook

Time for Something New

I haven’t been blogging all that much between MAX 2010 and now, but I’m happy to say that I’ll be writing a bunch of new content focusing on a combination of Flex 4.5 mobile examples as well as Flash Builder tips and tricks. Because of the shift, I’m changing my blog name from Flash Builder Tips and Tricks to Jason’s Flex Blog.

We’re all really excited to get Flex 4.5 and Flash Builder 4.5 out the door in May. I’m sure there will be a lot of questions for developing mobile applications with Flex 4.5. Hopefully you’ll find some answers here soon.

Share on Facebook

Burrito Feature: Plug-in Installer

In Flash Builder Burrito we simplified our installer options to default to the standalone version. For users with existing Eclipse environments, we still have the option to install Flash Builder as a plug-in.

After you’ve run the installer, find the plug-in utility:

Mac: /Applications/Adobe Flash Builder Burrito/utilities/FB_Burrito_Plugin_Utility.app
Win: C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\utilities\FB_Burrito_Plugin_Utility.exe

Following distributions are supported:

  • Eclipse IDE for Java EE Developers
  • Eclipse IDE for Java Developers
  • Eclipse Classic
  • Eclipse for PHP Developers

On Mac, make sure you’re using the 32-bit Cocoa distributions. Get more info on the system requirements page.

Share on Facebook

Burrito Feature: Text Navigation

Text navigation? Many users I’ve talked to know how big a fan I am of CamelCase support. In Flash Builder Burrito, we’ve added support in ActionScript, MXML and CSS for moving the cursor between sub-words and we’ve also added punctuation support. To use the feature on Mac use OPTION + ARROW LEFT/RIGHT and on use Windows CTRL + ARROW LEFT/RIGHT. You can combine this with SHIFT to select sub-words as well.

Before Burrito, this feature only used the platform OS navigation text functions. It wasn’t very consistent from left to right and it didn’t know about specific ActionScript, MXML and CSS punctuation.

Here are some use cases for using sub-word navigation:

  • Using the keyboard to move faster on a long line of code. Instead of just HOME, END, arrow keys or the mouse, you can use sub-word navigation to get to the correct word faster
  • Select parts of names faster for copying, editing or removing. For example, if I have “ActionBarButtionSkinBase” and I want to copy out “ButtonSkinBase”, I can use CTRL + SHIFT + ARROW LEFT 3 times to select just the text that I want. That’s a lot more convenient than pressing and holding ARROW LEFT or using the mouse.
Share on Facebook

Burrito Feature: File Associations

File associations? Not exactly a new idea for applications, but the recent release of Eclipse 3.6 allows us to add platform OS support for associating files with Flash Builder. That means opening a file in Finder or Spotlight on the Mac or Explorer on Windows will launch Flash Builder and open the file.

Depending on if you already have associations for .as and .mxml files, you may see this feature already enabled. To enable file associations, go to Preferences > Flash Builder > File Associations.

Share on Facebook

Burrito Feature: ActionScript Projects

Remember when setting up ActionScript-only AIR projects was a pain? Not anymore!

The updated File > New > ActionScript Project wizard now lets you choose between “Web” and “Desktop”. No more hack required.

Also, developers who’ve had to overlay the AIR 2.5 SDK in Flex 4 / Flash Builder 4, you’ll be glad to hear that there’s another new project wizard at File > New > ActionScript Mobile project. This project will setup an ActionScript-only mobile project that you can simulate on your desktop in AIR or push to a device just like a Flex Mobile project.

I’ll reiterate: The Burrito preview release ships with the Flex Hero SDK preview release which contains the public release of the AIR 2.5 SDK.

Share on Facebook