Search

 

July 2014
S M T W T F S
« Feb    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Tags

Archives

Styling AIR applications for iOS – part 2

By Rich Tretola | August 19, 20118,936 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 »

Announcing: Developing iOS Applications with Flex 4.5

By Rich Tretola | August 19, 20117,259 views

Announcing:
Developing iOS Applications with Flex 4.5

Ready to put your ActionScript 3 skills to work on iPhone and iPad apps? This hands-on book walks you through the process of creating an Adobe AIR application for iOS devices from start to finish, using the Flex 4.5
framework. Move quickly from a basic Hello World application to complex interactions with iOS APIs, and get complete code examples for working with device components—including the accelerometer, GPS, camera, gallery, and multitouch display.

This is an ideal resource for Flex developers of all levels.

Topics: ActionScript 3, Adobe AIR, Announcements, Flex, iOS, iphone | 5 Comments »

Styling AIR applications for iOS – part 1

By Rich Tretola | August 18, 20117,796 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 deals with bitmap resolutions for your iOS applications.

The resolution of an iOS device varies depending on the device. The devices with higher resolutions have a greater DPI (pixel density). To allow your application images to display correctly across these resolutions, you can use MultiDPIBitmapSource to define multiple versions of your bitmaps and ensure that the appropriate bitmap is used. The example below defines 3 versions of an image. The first is 36×36 pixels in size, the second is 54×54 pixels, and the third is 72×72 pixels. If the operating system’s DPI is less than 200 (like on the iPhone 3G), the 36×36 image will be used; if the DPI is greater than or equal to 200 and less than 280, the 54×54 will be used; and if the DPI is greater or equal to 280 (like on the iPhone 4), the 72×72 will be used.

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
<?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:Script>
<![CDATA[
import mx.core.FlexGlobals;
99
protected function button1_clickHandler(event:MouseEvent):void
{
log.text = "Image: " +
myImage.source.getSource(
FlexGlobals.topLevelApplication.runtimeDPI)
.toString() +
"\nDPI: " + Capabilities.screenDPI +
"\nResolution" +
Capabilities.screenResolutionX + " x " +
Capabilities.screenResolutionY;
}
]]>
</fx:Script>
<s:VGroup verticalCenter="0">
<s:Image id="myImage">
<s:source>
<s:MultiDPIBitmapSource
source160dpi="icons/logo36.png"
source240dpi="icons/logo54.png"
source320dpi="icons/logo72.png"/>
</s:source>
</s:Image>
<s:Button label="getSource" click="button1_clickHandler(event)"/>
<s:TextArea id="log"/>
</s:VGroup>
</s:Application>

The next post (part 2) will dive into using CSS to style your iOS application.

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

Adobe Edge – HTML5 Development Tool

By Rich Tretola | August 1, 201110,020 views

Adobe further embraces HTML5 with Adobe Edge. So, can we finally put the Flash vs HTML5 debate to bed? Any seasoned developer will tell you that there is room for many technologies and the correct one is defined by the use case and not just a popularity debate. Adobe has been preaching this for years now and the proof of their HTML5 support is now available for prerelease as the Adobe Edge product. Download it now here.

This timeline based product will allow you to developer rich HTML5 animations.



Click on the links below to see samples of Adobe Edge animations:

Topics: Announcements | 2 Comments »

eBook of the day: Developing BlackBerry Tablet Applications with Flex 4.5

By Rich Tretola | July 14, 20116,510 views


My book Developing BlackBerry Tablet Applications with Flex 4.5 is the O’Reilly eBook of the day. Use promo code DD232 and get it for only $9.99!

Just go to: Developing BlackBerry Tablet Applications with Flex 4.5

Topics: ActionScript 3, Adobe AIR, Announcements, blackberry, Flex | No Comments »


« Previous Entries Next Entries »