Flash-db

I was certainly very excited about the new SDK regarding to mobile development. Lately many clients ask about mobile support for their applications and slowly all projects become multi target (web, local, tablet, mobile) This imply a difficult migration, running around some CSS magic or even writing versions in Objective C to target IOS platform.

So is possible to develop once and deploy to any target? Well, not really, but with a good design, we’re almost there. The new SDK can target Android devices in his debut, and promise to support IOS devices (via cross-compiling to Objective C) and Blackberry Playbook in the near future (update in June … or probably is a fact when you read this)

The process is straightforward: you need to create a Flex Mobile Project or an ActionScript Mobile Project from the File menu and a wizard will help you target the correct device. As stated, currently only Android devices are available, but the concrete model doesn’t matter since you can change device target at any point (always inside Android family with version 2.2 Froyo at least) About UI there are a couple of mechanism that helps in adequate to the different screens and resolution:

- You should constrain or your containers, say a List, to keep a certain distance from borders instead of give a fixed size, this ensures an adaptable layout
- There’s a multi DPI mechanism to adapt to different screen density trough rescaling (typically 160, 240 and 320) so your UI remain the same. For bitmaps you can use the MultiDPIBitmapSource tag to provide different graphics for each

There are a few foundation components to navigate applications: View based application (default) and tabbed based application. The first one use a stack of screen to push and pop different applications screens, creating and destroying them on the fly so memory consumption doesn’t growth. Since screens are destroyed on demand, data persists because the application could be interrupted at any moment (because a call i.e) and you should be able to restore at the same point, or go back to a previous screen. Data is injected as the data property at any view. Tabbed applications works similarly, but instead of scrolling from screen to screen, you just tab between them.

Here’s a sample code of the Twitter Trends demo, showing the initial application template

<?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.TwitterTrendsHomeView"
persistNavigatorState="true">
  <s:actionContent>
    <s:Button id="refreshBtn" click="Object(navigator.activeView).refresh()">
    <s:icon>
      <s:MultiDPIBitmapSource source160dpi="@Embed('assets/refresh160.png')"
      source240dpi="@Embed('assets/refresh240.png')"
      source320dpi="@Embed('assets/refresh320.png')"/>
    </s:icon>
  </s:Button>
 </s:actionContent>
</s:ViewNavigatorApplication>

Another important thing to remark is that mobile aware components were updated to perform smooth on mobile devices, and in this sense should be considered “light” components, while web components are more resource intensive consumers, so are not a good choice for mobile apps. Articles emphasize in simple skins and programmatic itemrenderers (based on ActionScript, not on MXML) to gain a better performance.

Finally some thoughts about architecture. If you want to develop once and deploy to multiple target you can do … partially. All the business and services domain can be the same, but view will change between different targets. So suppose you want to have your web application available for mobiles, you can follow some MVP or MVC pattern (Model-View-Presenter or Model-View-Controller) so View related code keeps on each project, while data, business and services access can be shared. Almost all of the traditional Flex frameworks emphasize this structure, and if you follow some of them probably will not be difficult to adapt to this structure (if not, read flex frameworks)

To start on this topic, Adobe have many articles and examples, you can begin reading about the topics commented here but more in deep reading a mobile reference or check a list of examples as a basement for your own. We’re planning our own example very soon, so stay tuned.

Finally Flex SDK 4.5 leaves the beta state and was officially released with all the CS5.5 package. Changes are not major like in the transition between Flex 3 and Flash Builder 4, but it adds important features. First of all, the Datagrid component was moved to Spark namespace, probably one of the most used components when dealing with data. Other components like Image or XXX was moved as well, having more elements to choice in the goal of having a Spark only application. Anyway that’s not posible since a lot of elements are still in the Halo namespace whitout his Spark counterpart (Viewstack or the Charting elements) so coexistence will be still the rule.

Another exciting feature is the Mobile templates (for Android and IOs), that allows to create projects with a mobile profile, so you can target different devices around there. This opens a wide field to Flex developpers, building at the same time for web and mobile. Anyway you probably can’t reuse the same, since many components are very intensive in resource consuming and not the best for a restricted environment like the mobile platform. Will be true the phrase “one development, many targets”? Only partially, but we will write about this when testing the mobile profiles.

Another thing to note, specially for those moving Flex 3 applications to Flash Builder 4, and now to 4.5 is that some deprecated tags are not anymore supported (in example verticalAxisRenderer for charting) so instead of getting a warning, you get a compile error that prevents you to further go. For those wondering to move to Flash Builder 4.5 standalone application adding SDK 4.1 as a compile options, take into account that you can’t switch to design mode so are constrained to code-only view if you set SDK 4.1 for compile options.

There’s a special version for PHP developers that integrates with Zend server. Also Flash Builder adds the feature of code snippets, where you can add your favorite code to insert with just a couple of keys. In adition with code completition and autogeneration of handlers, the code editor is much more powerful and profesional

So welcome Flash Builder 4.5 and stay tunned, we will be doing some test around the new version, specially for mobile profiles

Goals

This a small serie featuring available frameworks in Flex. The main idea is to read documentation and write right away a small Multiple Choice application using each of the frameworks.
Probably you think this is a crazy approach, since frameworks needs some time to study and leverage your skills. But the goal is different and point to this questions:

- Is the framework easy to understand as a whole picture?
- Is documentation enough for a quick startup?
- Is there any tool/template to follow right away?

Here are our topics (in alphabetical order) :

• Cairgorm
• Mate
• Parsley
• PureMVC
• Robotlegs
• Swiz

There are probably some others around (and some others to arise) but this cover some of the most used when this article was writen.

Test Application

The test application we will build to test each of the frameworks is a simple Multiple Choice. This multiple choice will load its questions from an XML file and automatically will adjust itself for showing N questions. Also a timer (not mandatory, but to capture time and give a sense of speed) is visible. We will simulate a login into a database so we can simulate server side interactions, something very common at development stages. Screens are:

Login Screen

Quiz Screen

Result Screen

So the user should login to enter the application (any user/pass will fit, we’re only simulating back-end services), then answer multiple choice questions … when finishing, a result screen will show final results

Topics

Each chapter will focus on a framework and illustrate trough the multiple choice following this information:

• Short description of core elements
• Demo quiz application using the framework
• Conclusions (as highligths)

Disclaimer: I have used some of the frameworks at some extent, but will do my best in trying to recall my first impressions …. Also since this is a quick-read-and-use approach, probably I miss at some point some of the best practices, or even some approach from other framework translates to the new right away. If you’re confident with some of them, please post some coment to help enhance the experience.

Ok, enought for an introduction, let’s move to the first one: Swiz