Search

 

August 2011
S M T W T F S
« Jul   Sep »
 123456
78910111213
14151617181920
21222324252627
28293031  

Tags

Archives


« | Main | »

Styling AIR applications for iOS – part 3

By Rich Tretola | August 22, 2011
6,748 views

Apple’s iOS operating system appears on several devices that support Adobe AIR compiled applications. This is a great thing however can lead to some challenges for multiple reasons. First, iOS devices range widely in their screen resolutions and pixel density of those screens. Second, Apple has pretty rigid requirements for the design of your application and routinely rejects applications for design reasons.

This series includes excerpts from my newest book titled Developing iOS Applications with Flex 4.5.

The first part demonstrated the MultiDPIBitmap property for including bitmaps that target screen densities.

The second part deals with setting styles for your iOS applications with CSS.

This part will show how to use the Capabilites class to deliver custom content based on the operating system or screen resolution.

So far you have seen how to use CSS to control some of the visual aspects of your application, but you may also wish to have only certain pieces of your application available to target specific devices or specific views created for specific devices. This is possible by utilizing the properties of the Capabilities class to determine operating system, screen resolution, and so on. The example below will serve a different home screen to the user depending on their device. This technique will allow you to target specific audiences with a custom experience. The firstView property of the View NavigatorApplication is bound to a function called getFirstView, which evaluates the Capabilities.version, and returns a different view based on the operating system.

The possible versions are:

Note: I could also have had just one main view file, and simply set the state of that file to be different based on the operating system.

You could also use other properties of the Capabilities class in the same manner. You may wish to look into Capabilities.screenDPI, Capabilities.screenResolutionX, Capabilities.screenResolutionY, and Capabilities.screenColor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="{getFirstView(Capabilities.version)}">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import views.*;
private function getFirstView(v:String):Class{
if(v.indexOf("AND") == 0){
return views.AndroidHomeView;
} else if (v.indexOf("IOS") == 0){
return views.IOSHomeView;
}
return views.GenericHomeView;
}
]]>
</fx:Script>
</s:ViewNavigatorApplication>

Topics: Adobe AIR, android, Flex, iOS | No Comments »

Comments