Search

 

February 2012
S M T W T F S
« Nov    
 1234
567891011
12131415161718
19202122232425
26272829  

Tags

Archives

Flex 4.5 Mobile Applications : I Got you covered

By Rich Tretola | September 1, 20114,744 views

Interested in Adobe Flex 4.5 mobile application development for iPhone, iPad, Android, PlayBook? You can now get the information you need to develop for all 3 platforms that Adobe currently supports. Better yet, you can buy 2 and get the 3rd one FREE! Details below.

Buy 2, Get the 3rd FREE!

All orders over $29.95 qualify for free shipping within the US.

Buy two books direct from O’Reilly and get the third free by using code OPC10 in our shopping cart.


Topics: ActionScript 3, Adobe AIR, android, Announcements, blackberry, Flash Player, Flex, Flex Builder, iOS, iphone | No Comments »

My open letter to Tim Cook, Apple CEO

By Rich Tretola | August 25, 20116,137 views

Mr. Cook,

First, please accept my congratulations on your new position of Apple CEO.

As a proud member of the Adobe Flash platform development community and an Adobe Community Professional, I have struggled with my position on Apple. I have been using Apple OSX for nearly 10 years now and could not be happier with both the operating system and hardware that Apple provides in its laptop product line. However, I am also an Adobe developer who has lived in both Flash and Flex development for over 10 years and was upset to the point of anger when Apple made the decision not to include the Flash Player in its iOS operating system and even more so when the terms and conditions of iOS development was changed to force the shut down of Adobe’s AIR on iOS compilers.

The change back to again open the door for Adobe to package applications for iOS devices was a very welcomed change, however the continued block of the Flash Player from iOS devices is a continued point of contention.

No one would argue that on pre iPhone 4 devices the Flash Player suffered some performance issues. However, the power packed current iPhone 4 and future iPhone 5 as well as the iPad 2 and future iPads have enough power to easily support the Flash Player. In addition the battery life performance improvements that Adobe has accomplished have shown to be very promising on many modern Android devices.

As the new CEO, I am sure you want to make your mark on Apple to help distinguish yourself from previous CEOs. This is an excellent opportunity for you to rekindle Apple’s relationship with Adobe and finally bring the Flash Player to new iOS devices.

Thanks,
Rich Tretola

Topics: ActionScript 3, Adobe AIR, Announcements, Flash Player, Flex, iOS, iphone | 28 Comments »

Now Available: Developing iOS Applications with Flex 4.5

By Rich Tretola | August 24, 20115,056 views

Developing iOS Applications with Flex 4.5 is now available for only $12.99 for eBook.

Description
Developing iOS applications using Adobe Flex 4.5 for mobile will walk you through creating your Flex based iPhone/iPad application. Next, you will learn how to interact with the devices camera, gallery, accelerometer, GPS, multi touch display and native services using Adobe Flex 4.5. Finally, you will learn how to compile your application and deploy to the app store.

Table of Contents

  1. Chapter 1 Hello World

    1. Create a Flex Mobile Project

  2. Chapter 2 Application Layouts

    1. Blank Application

    2. View-Based Application

    3. Tabbed Application

  3. Chapter 3 Configuration Settings

    1. Configuration Settings

    2. Automatically Reorient

    3. Full Screen

    4. Automatically Scale Application for Different Screen Densities

    5. Aspect Ratio

    6. Additional Configuration Settings

  4. Chapter 4 Exploring the APIs

    1. Accelerometer

    2. GPS

    3. Camera UI

    4. Camera Roll

    5. Microphone

    6. Multitouch

    7. Busy Indicator

  5. Chapter 5 Working with the File System

    1. File System Access

    2. SQLite Databases

  6. Chapter 6 OS Interactions

    1. Open in Browser

    2. Create Text Message

    3. Create Email

    4. Place Call

    5. Splash Screen

    6. ViewMenu

    7. StageWebView

    8. Screen Options

  7. Chapter 7 Designing for iOS

    1. MultiDPIBitmap

    2. Setting Styles for iOS

    3. Using Capabilities

  8. Chapter Publish to iOS Installer

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

Styling AIR applications for iOS – part 3

By Rich Tretola | August 22, 20114,063 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 »

Styling AIR applications for iOS – part 2

By Rich Tretola | August 19, 20115,145 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 »


« Previous Entries Next Entries »