Developing iOS Applications with Flex 4.5

Setting Styles for iOS

CSS stylesheets are a great way for you to style your application; Adobe has provided the ability to use different CSS declarations according to rules defined in what is called the @media rule. Thanks to the ability to have conditional logic in your CSS using the @media rule, you can test for screen DPI or operating system. This makes it easy to style your application to meet the needs of any device.

The example below has some conditional logic to test for the application DPI as well as the operating system.

If the application DPI is less than 200, the Label font size will be set to 30 on all operating systems; if it is greater than or equal to 200 and less than 280, the font size will be set to 40; and if it is greater than or equal to 280, the font size will be set to 50.

There is also an operating system-specific CSS style defined for iOS devices. If the device is iOS, the ActionBar’s defaultButtonAppearance is set to beveled, which is the standard look on an iOS device.

The available values that you can test for with the application-dpi property are 160, 240, and 320. The available values that you can test for with the os-platform property are Android, iOS, Macintosh, Linux, QNX, and Windows.

Note

QNX is the BlackBerry Tablet operating system.

Using these properties, you can easily style your application to run on different operating systems and screen resolutions.

Figure 7-3 shows this application running on an iPhone 3, Figure 7-4 shows it on an iPod 4, and ...