Moods, Tutorials

Flex mobile in the browser

30 Comments 23 August 2011

Flex mobile in the browser

Since Flex 4.5, you have had the ability to develop and export your projects as Android, iOS and PlayBook mobile applications that behave as native ones. You can also export your Flex mobile project as AIR desktop apps. Just open Flash builder, open your project and choose Project >  Export release build. You can then export a “Signed AIR package for installation on desktop”, which means a classic .air file. Yesterday, a customer wanted to know how to run a Flex mobile application in a desktop web browser. Of course, I answered “Why would you do this ?”, and he gave me some good reasons. His mobile application is connected to a CMS on the backend. Administrators of the application will be able to edit the content of the mobiles apps in a web application. Wouldn’t it be nice to get a live preview in the browser ? When you think of it, a Flex mobile project exports a SWF, so we should be able to run it as a web app. Of course, all the AIR APIs such as the accelerometer, or the SQLite access would be disabled, but we could have a live preview. And it’s always a challenge for a mobile developer to demonstrate their work. Usually, they just record and publish a video of their app. We’ll see in this tutorial how to create a Flex mobile project with Flash Builder 4.5.1, and how to publish it as a classic web application. Just follow these steps:

1. Create a Flex Project (not a Flex mobile project)

2. Use the default SDK Flex 4.5.1

3. On the “Build Paths” tab, click the “Add SWC” button and add the mobilecomponents.swc library available in the following folder: Adobe Flash Builder 4.5/sdks/4.5.1/frameworks/libs/mobile/mobilecomponents.swc

4. Click Finish to create the empty web project.

5. You can now add a ViewNavigator component.

<?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"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:ViewNavigator id="vn" width="100%" height="100%"/>
</s:Application>

6. The framework is expecting a StageOrientationEvent which is only available in the AIR SDK. We’ll create an empty StageOrientationEvent event class. Create a new ActionScript class in your project. Put in the flash.events package and name it StageOrientationEvent. This class extends the Event class.

7. Copy/Paste this code in the StageOrientationEvent.as class

package flash.events
{
	public class StageOrientationEvent extends Event
	{
		static public const ORIENTATION_CHANGE:String = "orientationChange";
		static public const ORIENTATION_CHANGING:String = "orientationChanging";
 
		public function StageOrientationEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
	}
}

8. The skin class of the ViewNavigator component is missing some default states (landscape, portrait…). In the ViewNavigator tag, add a skinClass property. It will launch the New MXML Skin wizard window of Flash Builder to generate a new custom skin class. Click on Create Skin…

9. Name the skin ViewNavigatorSkin, and place it in a skins package. Click Finish.

10. In the newly generated Skin class, look for the <states> tag. By default, two states are declared: “normal” and “disabled”. Add four states: landscape, portrait, landscapeAndOverlay, portraitAndOverlay.

<s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
		<s:State name="landscape" />
		<s:State name="portrait" />
		<s:State name="landscapeAndOverlay" />
		<s:State name="portraitAndOverlay" />
</s:states>

11. Now you can use the ViewNavigator component but it won’t look like a mobile app. We need to use the Flex mobile theme. Right click your project and display the properties of your project. On the left, select the Flex Theme menu. Click on the “Import Theme…” button and select the mobile.swc library available in the theme folder of the Flex 4.5.1 framework. Click Add and select it.

12. To test your application, you need a view. Right-click your project and select “New MXML component”. It opens the wizard. Create a component “MyView” in the “views” package that extends the View class. Click Finish.

13. Go back to your main application file. Within your ViewNavigator tag, remove the reference to the skinClass and add a firstView parameter to load your view.

<s:ViewNavigator id="vn"  firstView="views.MyView" width="100%" height="100%"/>

14. Compile your project. You should get something like this screenshot:

15. You can also play with this twitter search client demo running in the browser:

CLICK ON THE IMAGE TO RUN THE SAMPLE (alternate version here)

 

Post to Twitter

Your Comments

30 Comments so far

  1. Mickey Mouse says:

    Why would anyone want to run a Flex Mobile app in a browser?…

  2. H. Berreziga says:

    As you say Michaël, the advantage of doing this is to present an overview of the application that does not have all the features, but which would avoid the deployment of a trial version exported as a native program on a mobile support. Very ingenious, so why not?..

  3. admin says:

    @Mickey. Hi Mickey Mouse, first I have to say that I’m a big fan of you. Your work is a great source of inspiration for all of us :) So why would you run a Flex mobile app in the browser ? To showcase your work, to enable a live preview connected to a distant backend such as a CMS, to quickly build a Flex 4 app based on the ViewNavigator application… more ideas guys ?

  4. admin says:

    @Hadj Great idea !

  5. As a freelancer, this could potentially save me a ton of frustration with showing my work to clients. Much easier to send a preview link than dealing with device provisioning, ad hoc builds, etc.

  6. Hugo says:

    The concept is fantastic to create demo versions without the user having to bother to install in the mobile.

    This could be a driver to increase downloads for free apps or sales for non-free apps.

    However, IMHO I think the real must common mobile apps are addicted to the unique features in the Adobe AIR as the use of SQLite, so creating web demo versions of these apps would require rewriting the code, so conceptually this is very good but in practical terms it will fails for the most cases.

  7. admin says:

    @Hugo. Indeed. It can also bu useful to validate a user experience with a client. In a chain of continuous integration, it could also be used for automated testing. I don’t know how to automate functional tests on a mobile device. This could be a solution to test the integrity of the services.

  8. Dimitri K. says:

    Another way to demo a mobile app is to export it as a Desktop AIR app.
    http://www.tricedesigns.com/2011/07/29/exporting-air-mobile-apps-as-desktop-apps/

    It’s not in the browser, but this way you still have access to AIR APIs, and it’s only a checkbox in FlashBuilder…

    Of course, if your client use an Android device, it’s as quick to send him the APK. But with iOS, sending a Desktop AIR file for quick demo/test could help you surviving in provisioning hell…

  9. Pablo says:

    These concept is really important!

    If the performance of these in a mobile device would be smooth it could help to developers to make enterprise apps outside of markets and stores.

    Not valid for ios devices because it havent flash but yes to all devices who have flash (android, blackberry, some windows tablets…)

    😉

  10. Mickey Mouse says:

    I see and I have to say that it does make sense put in this light. Otherwise, it makes none.

    Thank you.

  11. Nils says:

    Hi Michaël,

    First of all, thank you for your examples / demonstrations, always very useful, and source of inspiration. Very good job !

    I think your idea is brilliant, as you say, in order to show a mock-up to a customer for example.

    But it could be also very useful just to share pieces of code for mobile applications between developers.

    Nowadays, it is very frustrating to search help / tips on forum about mobile applications and not be able to just see the result “live”, as it is possible for browser-based Flex applications.

    In a way, your “trick” allows the community to share and show pieces of code dedicated to mobile applications in a very easy way.

    Thanks again,

    Nils

  12. Marc says:

    Hey, thats the feature im looking for!

    But: Whats with the alternative version link above? I only see the HTC phone but no app inside of that? Something wrong with my browser?

    Marc

  13. Marc says:

    Another Question: What, if my app is a TabbedViewNavigatorApplication? Is it also possible to run it in the browser?

    Thanks for the great blog :-)
    Marc

  14. admin says:

    @Marc It doesn’t work on Chrome, but it’s due to my poor HTML skills I guess :) I wanted to use a DIV container, but it only works on my Safari and firefox browser… I’ll work on a new HTML template

  15. Marc says:

    …at the risk of boring you, whats if i had a TabbedViewNavigatorApplication? Can you give me some hints? Its very important for me 😉

    Thanks a lot!
    Marc

  16. Hey its not working on chrome

  17. Brilliant post. Good man.

    I would suggest that the ViewNavigator be called ‘navigator’, as a lot of ViewNavigatorApplication type apps will include references to public variable ‘navigator’ with lines such as: FlexGlobals.topLevelApplication.navigator. Changing ‘vn’ to ‘navigator’ makes this transition easier (definitely in my case anyhow)

  18. admin says:

    @Praveen. It’s due to my html… I need to work on a better HTML template

  19. Jeff McLean says:

    Thanks for this, very helpful. Our client wants to demo the app in a browser.

  20. Saidi Reddy says:

    Hi i have one query could u please help me , Panel control not supported for Flex Mobile Project in Flash builder 4.5. There is any alternate control to add some data dynamically (using Actin Script). please help me thanks in advance …

  21. Fahim says:

    it is not running in browser i do same as above.
    tell me easy way.

  22. Peter D says:

    I actually just hit a technical brick wall when I needed to port my Mobile application to Desktop AIR as well as a Browser application. When the Browser app was showing nothing but a while screen I just about lost hope. Thanks for the tutorial it really was a life saver.

  23. Brian Bishop says:

    Hi

    This is class. Brilliant post. I used this system twice now to post demos of two components I was working on: a popup alert box and a stepped horizontal list.

    http://bbishop.org/blog/?p=502#more-502
    http://bbishop.org/blog/?p=529

    I could’nt figure out how you put the image in the html, so I just embedded it in the application stylesheet (not really a good workaround though – although it does mean that the device buttons can be configured

  24. Thanks for the post Michael.

    For some reason web projects don’t work with “s:TabbedViewNavigatorApplication” and you have to use “s:Application”. But then “s:Application” doesn’t then work in mobile devices! Does this not mean I need to still have two projects instead of one then?

    Thanks,
    David

    PS. Duplicate post, previous post cancelled out my MXML code!

  25. admin says:

    @David Yeah… I think you need two projects.
    Maybe you can use shared library to reuse and share the maximum of code.

  26. Amit says:

    I am new to Flex programming and have never programmed before on Adobe platforms. I am coming from Java / C++ background learning from your blog posts and videos, first of all thanks for all that bro, you are really gr8.

    I have followed all the steps of this post, still the app is nt running in any of the browser in my system i.e. chrome, IE and FireFox. Please help me out of this I really need it working asap. Thanks once again..

  27. Pablo says:

    Hi Michael,

    I followed your instructions for a tabbed application and I get a blank screen.

    Any idea?

    I did create an AIR project, deleted the src file and linked it to the Mobile project src. It compiled (by adding missing swc libs) and the mobile app run on the desktop.

    Then, I created a Flash project and repeat the steps. I replaced the TabbedViewNavigatorApplication with an Application, created an TabbebNavigatorViewSkin, added the missing states and so on.. but as I said I don’t see anything. A flash app is loaded (full white or black) and the context menu shows “movie not loaded…”.

    Thank you very much!
    Pablo

  28. ali says:

    Well that’s challenging and a really smart idea to share it with the community.

    Thanks a lot.

    I was a little disappointed by the fact that on the paper developping with flex leads to target many devices with the same codebase.

    But in facts, you have to choose on which kind of project/platform you will start.

    If you choose desktop flex app and need to translate it as mobile app, then you may be stuck and have to adapt a lot your app in another project which should look normal regarding the memory and performance issues with mobile devices.

    But If at the opposite, you target mobile platforms and then you need to adapt your developpment to desktop air ?

    The performance is no more an issue, because the starting target is weaker than desktop target.

    So reversing the way we think projects, first for mobile then for desktop is kind of a revolution. Something that most people are hardly accepting because of old uses.

    By the way thanks Michael, my question about standalone application for air has it really awaited answer namely “Captive runtime”. I asked you if this feature was on the way in june on SORIA(toulouse) and now we are there.


Trackbacks/Pingbacks

  1. My most important Twitter Messages #11 - Flash, Arduino, Programming | der hess - August 31, 2011

    […] How to create a #Flex mobile project with #Flash Builder, and publish it as a classic web app […]

  2. Cool Stuff with the Flash Platform - 8/30/2011 | Remote Synthesis - September 1, 2011

    […] evangelist Michael Chaize demonstrates how you can run your Flex mobile application in the browser. The use case given for this is being able to demonstrate some kind of preview of the application […]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2017 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes