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 2

By Rich Tretola | August 19, 2011
10,697 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.

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. Setting Styles for iOS | 101
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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?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="views.CSSSampleHomeView">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* dpi less than 200 */
@media (application-dpi: 160) {
s|Label {
fontSize: 30;
}
}
/* dpi greater than or equal to 200 and less than 280 */
@media (application-dpi: 240) {
s|Label {
fontSize: 40;
}
}
/* dpi greater than or equal to 280 */
@media (application-dpi: 320) {
s|Label {
fontSize: 50;
}
}
102 | Chapter 7: Designing for iOS
/* platform is iOS */
@media(os-platform:"IOS")
{
s|ActionBar
{
defaultButtonAppearance:beveled;
}
}
</fx:Style>
<s:navigationContent>
<s:Button label="Back"/>
</s:navigationContent>
</s:ViewNavigatorApplication>
iOS – shows beveled button
Android – shows standard button



The @media rule also supports operators, so that you can apply a style only if multiple conditions are present.

The and operator is supported—for example:

The or operator is supported by using a comma—for example:

The not operator is supported—for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/*
platform is iOS
dpi greater than 280
*/

@media (os-platform: "IOS") and (application-dpi: 320) {
s|Label {
fontSize: 100;
}
}
/*
platform is Android
dpi greater than or equal to 200 and less than 280
*/

@media (os-platform: "Android") and (application-dpi: 240) {
s|Label {
fontSize: 50;
}
}
/*
platform is iOS
dpi is less than 200
OR
platform is Android
dpi is less than 200
*/

Setting Styles for iOS | 105
@media (os-platform: "IOS") and (application-dpi:160),
(os-platform: "ANDROID") and (application-dpi: 160) {
s|Label {
fontSize: 30;
}
}
</fx:Style>
<s:Label text="Hello World"
horizontalCenter="0" verticalCenter="0"/>
</s:Application>

Topics: Adobe AIR, Flex, iOS | 2 Comments »

2 Responses to “Styling AIR applications for iOS – part 2”

  1. Vic Says:
    August 19th, 2011 at 12:09 pm

    I am surprised that people use mxml/spark vs pure .as for mobile.

    Reply to this comment

  2. Styling AIR applications for iOS – part 3 | EverythingFlex: Flex & AIR Says:
    August 22nd, 2011 at 8:11 am

    [...] Styling AIR applications for iOS – part 2 [...]

Comments