Flex Mobile Development – Building Tablet Apps – Full Example with Source Code!

October 31, 2011By 22 Comments

I just returned from RIA Unleashed where Christophe and I presented a Flex Mobile Boot Camp session. In this session we built an Expense Reporting application called XpenseIt, specifcally targeted for tablet devices. We originally presented a 4.5.1 version at MAX, but wanted to utilize all the awesome new components available in Flex 4.6.

We’re sharing the assets from this 3 hour lab HERE for those who could not attend and might want to work on it on their own with the lab guide, or even just grab the final project for reference. With the lab guide PDF is a starter fxp called XpenseItLab.fxp that contains some already coded resources (to save time) that you will use as a basis for further development using the lab guide. There’s also an XpenseItFinal.fxp that you can download to try out the final application or compare it to your work. The zip file contains all three of these assets for easier download.

The Flex 4.6 SDK features used in the application are:

  • SplitViewNavigator with state handling (uses new properties to put the first view in a Callout when in portrait mode due to screen space)
  • New Callout component
  • New CalloutButton component
  • New SpinnerList component (and corresponding SpinnerListContainer)
    – also a custom BindableSpinnerList component
  • New ToggleSwitch component
  • Dynamic Splash Screen
  • Soft Keyboard Type handling (showing the numeric soft keyboard for example)

In addition to these new features, we also show the use of the AIR Geolocation and CameraUI APIs and provide some handy encapsulated utilities using them. There’s a StatesUtil.as class that you should check out too that will allow you to handle differences with DPI, resolution, aspect ratio, OS etc, so pay extra attention to that and the states handling you can do with it to make your life easier when coding cross-platform!

If you’re looking for a Flex 4.5.1 version, we covered this in our Adobe MAX lab and the guide and project files are available here… You’ll see an extended version of the 4.5.1 application listed there as well that will show how you could potentially implement a simple login mechanism and a charts view for your expense reports.

Happy Coding ;)!!

Filed in: Flash Builder 4.5Flex 4.5Flex 4.5/MobileFlex 4.6Flex MobileMobile DevelopmentUncategorized Tags:

About the Author ()

Comments (22)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Flex 4.6 is out! | RIAgora | November 30, 2011
  1. Jane Deval-Arius says:

    Hi Holly,
    Thank you for this working sample project. Until now I use Chiedozi Acholonu’s lab project from Max2011 as to work the tablet development, your project takes several steps further.
    One suggestion though from developers like me who are used to code with an application framework (Cairngorm 3/Parsley in my case), I think it would be a more powerful sample project if an aplication framework is applied.

    • Hi Jane! Yes, it would be nice to have an additional sample application that uses a framework, but we wanted to keep it simple and not assume for teaching purposes. There is another Expense Tracking application on Adobe Devnet for mobile that has a very structured approach using a Model-View-Presenter pattern that you could apply a framework too and has some useful info:

      http://www.adobe.com/devnet/flex/articles/web-mobile-reference-apps.html

      Thanks!
      Holly

      • Jane Deval-Arius says:

        Hi Holly,
        I meant the use of application framework of the 2d generation (with advanced features such as IoC, Messaging like in Robotlegs or Parsley).
        I’ve been noticing for years that Adobe Evangelistes provide codes as simply as possible just to show a SDK feature or a programming technique without knowing that in many enterprise, the developer gets used to some kind of disciplines using frameworks. It was a surprise for me the first time I studied one of the sample project by Christophe Coenraets where archtectural patterns are never used and he still uses JDBC to code the java server. In real life, most of us no longer code like that !
        I know you joined recently Adobe, that’s why I suggest to you the idea that sample projects may somehow speak more to developers if they are coded like we do.

  2. Aphtk says:

    This is so awesome. Thanks for the example. When developing with Flex 4.5 we were using controls from the Eskimo project (pretty cool too). But these controls will work much better!

  3. Raffi says:

    Great post Holly, I am most excited about the 50% performance increase.

  4. Pulkit Gupta says:

    SplitViewNavigator throws an error if autoHideFirstViewNavigator = true. _popUpNavigatorSizeCache is not set before viewNavigatorPopUp_openHandler is invoked.

  5. Mark Fuqua says:

    Holly,

    I am waiting to be approved for the pre-release…actually started the tutorial first…couldn’t figure out why the auto complete wasn’t working :)

    Meanwhile, I am wondering if the following behavior is part of the spinner component or if you might want to do a tutorial showing how one might add it:

    Wondering if you could have two related spinner lists, like two related select lists in html. Spin to Maryland and the second spinner has all the counties in MD, spin to VA and the second spinner control then updates to have all the counties in VA.

    The second spinnerList could do a little spin when it updates its data…???

  6. Nimai says:

    just a request could you please zip the XpenseItLab and XpenseItFinal so that we may download the whole source without downloading the file separately.

    thanks

  7. Dushyandh says:

    Din know where to bring this up, but..My business requires a mobile portal assorting pages for every LOB. We’ve been doing that with Sencha and Cue – me frame works. Is there a possibility for this using Flex 4.5 ?

    I was wondering if we could use SWC as RSL to load pages dynamically. Not very sure if dynamic coding will be allowed. My Organization – is a complete IBM shop, and they have solutions for this using XDIME.

    http://mpademo.net:10040/wps/portal

    There are several other guys in marked doing this with HTML, JS / Jquery. But can we have a work around for this using Flex?

    Would really appreciate your help in this regard.

  8. José Adenaldo Bittencourt says:

    Very useul example Holly. It is helping me developing a new project using the new 4.6 SDK.

  9. Jasur says:

    Thank you Holly! I am Flash developer but not Flex guy. My small question: Can I use these new components in Flash Professional CS5.5 projects? If possible what classes(swc files) must be included to action script and where can I find ActionScript usage sample of component(not MXML). Appreciate your help.

  10. Moez says:

    Hi Holly,
    I want to know if I can develop without problem an ipad app where i can view pdf document which contrains links, videos,…

    Thank you

  11. Mirabel says:

    Hi.Today I bought a personal computer at one of your shop. May I have your cell phone number?

  12. Alaa says:

    hi,
    thank you for the great project it was a great help for me

    but why when i build it for my Galaxy Tab 10.1 it doesn’t load any items in the left menu, also it doesn’t save any new entries like when i tested it in Flash Builder 4.6

    and if you can help me in another matter
    how to make static menu in the left instead of the loaded one from the doa

  13. Prem says:

    I am having a problem with the CameraUI on the Galaxy Tab 10.1 . The problem is that between the camera.launch and MediaEvent.Complete the delay is about a minute and a half , any ideas on whats going on ?

  14. Ajay A. Mirgal says:

    Hi,

    Thanks for putting up such open and quick responding form.
    Here I have a query;

    Since I am planning to create a application Using TabbedViewNavigator; and will be using VideoPlayer component inside any of the tab view. also since VideoPlayer is depreciated from Flex 4.6 sdk; I would need to know how much advisable to do such practices. Is it really stuck me somewhere during development or any harms to the device using my app?

Leave a Reply