Mobile Flash Development

Fix A Problem: Cannot Run BlackBerry PlayBook Simulator on VMWare Player Due to "Insufficient Permissions"

2011-08-08T22:24:00.000-07:00

The BlackBerry PlayBook Simulator is a Virtual Machine image file that can run under VMWare Player.

The BlackBerry PlayBook Simulator is included with the BlackBerry Tablet OS SDK for Adobe AIR and is located in "C:\Program Files\Research In Motion\blackberry-tablet-sdk-1.1.0\BlackBerryPlayBookSimulator-1.0.6".

However if you just run VMWare Player and open the .vmx file then "Play" the VM image, you'll get an error message like this:

Error while powering on: Unable to open file "C:\Program 
Files (x86)\Adobe\Adobe Flash Builder 
Burrito\sdks\blackberry-tablet-sdk-1.0.1\BlackBerryPlayBookSimulator-1.0.1\BlackBerryPlayBookSimulator.vmdk": Insufficient permission to access file.

VMWare is also unable to change any Virtual Machine settings.

Solution:

To solve this problem, either:

Run VMWare Player as administrator. Right-click VMWare Player and choose "Run as administrator".
This will elevate its privileges, and allow VMWare Player to access everything in your computer.
Move out the BlackBerry PlayBook Simulator folder to your user home folder, and make sure to open the permissions to read/write.

Now... Enjoy your BlackBerry PlayBook development!

Learn more about tablet apps development with Adobe Flash/AIR, get Professional Flash Mobile Development: Creating Android and iPhone Applications.

How to "Downgrade" to Adobe Flex SDK 4.1 (AIR 2.0) in Flash Builder 4.5

2011-08-08T22:02:00.000-07:00

Intel AppUp Application Store does not yet accept Adobe AIR 2.6 / Flex 4.5 desktop applications (at least this is true as of 8 August 2011) because the Adobe InMarket SDK supports only up to AIR Runtime 2.5.

Here's how to "downgrade" the Adobe AIR SDK (actually, install an older version of Flex/AIR SDK) in Adobe Flash Builder 4.5:

Download Adobe Flex SDK here. Choose Adobe Flex SDK 4.1.
Extract the downloaded SDK somewhere in your User home folder.
In Flash Builder, click Window menu > Preferences.
Navigate to Flash Builder > Installed Flex SDKs.
Click Add... button then locate your old Flex SDK.

Now you need to configure your project to use the older Flex SDK.
Right-click your Flex project, navigate to Flex Compiler.
Then select the older Adobe Flex SDK version (Flex 4.1).

Now your AIR application should run with the InMarket SDK and can be successfully published to Intel AppUp application distribution channel.

To learn more on Adobe Flash/Flex/AIR applications development, get Flex 4 Cookbook.

How to Publish Adobe AIR 2.6 Application Created by Flash Builder 4.5 to Intel AppUp

2011-08-08T02:45:00.000-07:00

While Intel AppUp now supports (in beta) publishing Adobe AIR Applications to Intel AppUp store, the latest version supported is AIR 2.5 / Flex 4.1.

Flash Builder 4.5 bundles Flex 4.5 / Adobe AIR 2.6 and thus the applications cannot be used with Intel AppUp as of this moment with the following error:

Error: Unsupported AIR namespace in the 
application descriptor (-app.xml) file. Only 1.5.3, 2.0 and 2.5 
namespaces are supported in this version of licensing SDK.

at 
com.adobe.licensing.controllers::LicenseProvider()[/home/esbuilder/Melrose_-_1.0.1/1.0.1.153/fps/melrose/branches/melrose_1.0.1/components/licensing/ant-temp/com/adobe/licensing/controllers/LicenseProvider.as:320]

at 
ProviderLoader/fileIOErrorHandler()[/home/esbuilder/Melrose_-_1.0.1/1.0.1.153/fps/melrose/branches/melrose_1.0.1/components/licensing/ant-temp/com/adobe/licensing/ProviderLoader.as:61]

To resolve this at this time you have to download the very old Adobe Flex SDK 4.1 here: http://opensource.adobe.com/wiki/display/flexsdk/Downloads

Then use that Flex SDK in Flash Builder to build your Adobe AIR Application.

Now your application can be submitted to Intel AppUp successfully.

Hopefully Intel / Adobe will resolve this situation quickly and support AIR 2.6 / AIR 2.7 soon.

Good luck!

To learn more on Adobe Flash/Flex/AIR applications development, get Flex 4 Cookbook.

References:

How to Parse RSS/Atom Feeds using ActionScript 3 / Adobe Flex

2011-06-20T10:44:00.000-07:00

Processing RSS/Atom Feeds is one very common use of XML parsing and HTTP/Web technology in Adobe Flex/AIR mobile applications.

Fortunately, ActionScript 3 Programming Language supports E4X, which is XML extensions on top of the programming language itself to make parsing and processing RSS Feeds or Atom documents (which are valid XML documents) very easy.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for parsing RSS/Atom Feeds XML using ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		overlayControls="false" tabBarVisible="true" title="Home"
		initialize="homeView_initializeHandler(event)">
	<fx:Declarations>
		<fx:XML id="detikRss2" source="samples/detik_rss2.xml"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import model.Article;
			
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.utils.StringUtil;
			
			[Bindable] private var articles:ArrayList = new ArrayList([]);
			
			protected function homeView_initializeHandler(event:FlexEvent):void
			{
				var newArticles: Array = [];
				for each (var el:XML in detikRss2..item) {
					var title:String = StringUtil.trim(String(el.title).replace(/\s+/g, " "));
					var body:String = StringUtil.trim(String(el.description).replace(/<.*?>/g, " ").replace(/\s+/g, " "));
					var article:Article = new Article(title, el.body);
					article.summary = new String(body).substr(0, 160);
					article.url = StringUtil.trim(el.link);
					article.imageUrl = StringUtil.trim(el.enclosure.@url);
					trace("Parsed", article);
					newArticles.push(article);
				}
				articles.source = newArticles;
			}
			
		]]>
	</fx:Script>
	<s:Scroller top="0" bottom="0" left="0" right="0">
		<s:DataGroup itemRenderer="renderer.ArticleRenderer" dataProvider="{articles}" width="100%">
			<s:layout>
				<s:VerticalLayout/>
			</s:layout>
		</s:DataGroup>
	</s:Scroller>
</s:View>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).

How to Design Text/Edit Input Boxes Neatly using FormLayout

2011-06-20T10:33:00.000-07:00

Designing text input dialogs and data editors should be easy, and Flex 4.5 provides FormLayout exactly for this purpose. Your labels and input/edit components will align nicely and re-layout automatically when the application is resized, when the user rotates the device orientation from portrait to landscape and vice versa.

Make sure to wrap the Group with FormLayout inside the Scroller Spark component, so the form items can use touch scrolling by swiping your finger on the screen. It's also necessary because forms that look great on portrait orientation may need to be scrolled vertically on landscape orientation.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for using FormLayout:

<?xml version="1.0" encoding="utf-8"?>
<!-- Manual posting of article, for development mode -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Post an article">
    <s:actionContent>
        <s:Button label="Randomize" click="randomizeBtn_clickHandler(event)"/>
        <s:Button label="Post" click="postBtn_clickHandler(event)"/>
    </s:actionContent>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import model.Article;
            import model.Persistence;
           
            import mx.binding.utils.BindingUtils;
            //var article:Object = {title: "Computer available", body: "Lenovo is releasing new laptop."};
            [Bindable] private var article:Article = new Article("Computer available", "Lenovo has released Y450 laptop.");
           
            protected function randomizeBtn_clickHandler(event:MouseEvent):void
            {
                var companies:Array = ["Microsoft", "Intel", "Google", "Apple"];
                article.title = companies[Math.floor(Math.random() * companies.length)] + " profits $" + Math.floor(Math.random() * 1000) + " millions";
            }
           
            protected function postBtn_clickHandler(event:MouseEvent):void
            {
                //validateNow();
                Persistence.instance.article.create(article);
            }
           
        ]]>
    </fx:Script>
    <s:Scroller top="0" bottom="0" left="0" right="0">
        <s:Group width="100%">
            <s:layout>
                <s:FormLayout/>
            </s:layout>
            <s:FormItem label="Title" width="100%">
                <s:TextInput text="@{article.title}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Summary" width="100%">
                <s:TextInput text="@{article.summary}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Body" width="100%">
                <s:TextArea text="@{article.body}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Published" width="100%">
                <s:TextInput text="@{article.pubDateStr}" width="100%"/>
            </s:FormItem>
            <s:FormItem label="Author" width="100%">
                <s:TextInput text="@{article.author}" width="100%"/>
            </s:FormItem>
            <s:FormItem label="URL" width="100%">
                <s:TextInput text="@{article.url}" width="100%"/>
            </s:FormItem>
        </s:Group>
    </s:Scroller>
</s:View>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).

How to use Create a List with Custom Layout Using DataGroup and itemRenderer (IDataRenderer implementation)

2011-06-19T08:31:00.000-07:00

In Adobe Flex 4.5 Mobile Spark Components, the DataGroup with Custom itemRenderer (IDataRenderer implementation) allows you to layout items in a list with additional formatting & styling.

If you wrap the DataGroup inside the Scroller Spark component, the list of items can then be touch scrolled by swiping your finger on the screen.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for the View that contains the DataGroup:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home" show="view1_showHandler(event)">
    
    <fx:Script>
        <![CDATA[
            import model.Article;
            import model.Persistence;
            
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
            
            [Bindable] private var articles:ArrayList = new ArrayList;
            protected function manualPostBtn_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(ManualPost);
            }
            
            protected function view1_showHandler(event:FlexEvent):void
            {
                var articles:Array = Persistence.instance.article.findAll();
                this.articles.source = articles;
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Scroller top="0" bottom="0" left="0" right="0">
        <s:DataGroup width="100%" itemRenderer="renderer.ArticleRenderer" dataProvider="{articles}">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
    <s:navigationContent>
        <s:Button x="39" y="22" label="Manual" click="manualPostBtn_clickHandler(event)"/>    
    </s:navigationContent>
    
</s:View>

Sample code for the itemRenderer (IDataRenderer implementation):

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    width="100%" height="120" implements="mx.core.IDataRenderer">
    <fx:Script>
        <![CDATA[
             private var _data:Object;

            [Bindable]
            public function get data():Object
            {
                return _data;
            }

            public function set data(value:Object):void
            {
                _data = value;
            }

        ]]>
    </fx:Script>
    <s:Label x="98" y="10" width="331" text="{data.title}"/>
    <s:Label left="98" right="10" top="36" bottom="36" fontSize="16"
             text="{data.summary}"/>
    <s:Label right="180" bottom="10" styleName="miniLink" text="Like"/>
    <s:Label right="80" bottom="10" styleName="miniLink" text="Comment"/>
    <s:Label right="10" bottom="10" styleName="miniLink" text="Share"/>
    <s:Image x="10" y="10" width="80" height="80" backgroundColor="#ff6666" />
</s:Group>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).

Design UI Prototypes for Android devices with Pencil

2011-05-26T23:10:00.000-07:00

Pencil is a user interface (UI) prototype visual designer for your applications. Pencil is cross platform and can run on Windows, Ubuntu/Linux, and Mac OS X.

Pencil supports stencils aka collections, many of them are free. One of them is very useful which is Android UI Stencils, see example screenshots below:

You can get Android UI stencil for Pencil from Pencil downloads page.

Note: In Ubuntu/Linux, before you can run Pencil you must first install xulrunner-1.9.2 runtime. Enter this command using Terminal :
sudo apt-get install xulrunner-1.9.2-gnome-support

Tip: To run Pencil on Ubuntu 11.04 Natty Narwhal 64-bit (which I use), if the standard "pencil" script doesn't work, you may need to create a launcher like this:

xulrunner-1.9.2 /opt/pencil/application.ini

Recommendation: To develop Android mobile applications using Flash Builder and Adobe AIR, check out Developing Android Applications with Adobe AIR (Adobe Developer Library).

Books on How to Develop Mobile Applications with Adobe Flash/Flex/AIR

2011-05-26T13:02:00.000-07:00

When you develop mobile Flash applications on Adobe AIR platform, your mobile application can support the most popular smartphone and tablet platforms:

iPhone (iOS)
iPad (iOS)
Android smartphones (Android 2.2 and later)
Android tablets (Android 2.2 and later)
BlackBerry smartphones (BlackBerry OS 7.0?)
BlackBerry PlayBook tablets (initial release bundles AIR 2.5 runtime)

Of course your application can also run on all desktop platforms: Windows, Linux/Ubuntu, and Mac OS X.

You can also use Adobe Flex UI widgets to make designing your application presentation easier. And there are many ActionScript libraries and examples available for your coding pleasure.

To develop mobile Flash applications easily, the following books are highly recommended for reference: