SQLite in Flex MobileWhen working with local data in mobile applications you might want to consider a SQLite database. Those are especially useful when working with large amount of data that you want to filter at runtime. Flex Mobile projects can simply take advantage of SQLite support in the Adobe AIR runtime. You could certainly write it from scratch - meaning you create a File instance and SQLConnection, set up event listeners, wait for the connection to open and set up a SQLStatement with a SQL query and more event listeners.

For most uses though there is a much easier approach using some simple SQLite wrapper classes myself and Robert Turrall wrote a while ago.

 

Just to illustrate how easy these wrapper classes make things for you when writing Flex Mobile projects look at the code below. These two lines do everything you need to open a connection to your database file and select all the records.

[cc lang="mxml"]

[/cc]

You can see that using the open event on the SQLite tag we can wire it up to automatically run the query that selects all the records from our database.

The only thing left to do is pass the result of the database query to a component to display it in our mobile application. In this case I'll be using a List component and assigning the data property of the query instance when the result event fires

[cc lang="mxml"]

import mx.collections.ArrayCollection;

private function onSelectResult():void { data_list.dataProvider = new ArrayCollection(select_query.data); }

]]

Posted
AuthorPeter
4 CommentsPost a comment

There are times when writing mobile apps that you want to have more fine grained control over the software keyboard and Flex 4.5 makes this very easy.

Any object based on InteractiveObject now has a needsSoftKeyboard property, setting this to true will cause the virtual keyboard to come up on the device whenever the instance is given focus.

For example here we have a Button component where we can set the needsSoftKeyboard property to true. As soon as it gets focus when clicked the soft keyboard will trigger. By default the Button component obviously doesn't have this behaviour.

 

[cc lang="mxml"]

[/cc]

 

Apart from setting the needsSoftKeyboard property you can also control it through an ActionScript call. In the example below we trigger the soft keyboard to appear as soon as the view is ready.

[cc lang="mxml"]

[/cc]

 

When the virtual keyboard triggers there are a few events that fire. The first one is "softKeyboardActivating" that indicates the keyboard is about to open and "softKeyboardActivate" which is dispatched right after the keyboard is made available. Likewise there is a "softKeyboardDeactivate" event that gets fired after the virtual keyboard is dismissed.

The SoftKeyboardEvent that gets triggered has two interesting properties, one is triggerType and can have either a value of "contentTriggered" (when the keyboard was triggered through ActionScript) or "userTriggered" when it was triggered through user interaction.

Another property we can get through the event is relatedObject, which is a reference to the InteractiveObject instance that is responsible for triggering the soft keyboard.

[cc lang="mxml"]

private function onActivate(evt:SoftKeyboardEvent):void { trace("Soft keyboard is now active"); trace("Trigger: "+evt.triggerType); trace("Related object: "+evt.relatedObject); }

private function onDeactivate(evt:SoftKeyboardEvent):void { trace("Soft keyboard has been dismissed"); trace("Trigger: "+evt.triggerType); trace("Related object: "+evt.relatedObject); }

]]

Posted
AuthorPeter
7 CommentsPost a comment

If you've been playing around with the Flex 4.5 mobile features, one of the great new things is the ability to easily navigate between different screens. For this you can use the navigator object and push or pop a view in your application.

There are a few extra things you can define when navigating between views and one of them is what type of transition should be used. I'll show the following example where I started from a new Flex Mobile project using the "View-Based Application" template.

In the first view that gets generated I'll simply add a backgroundColor property and set it to red and put a button on the stage.

[cc lang="mxml"]

[/cc]

The next thing to do is create a second view in the views package that we can transition to, I'll call it SecondView.mxml and give it a blue color and a button to navigate back.

[cc lang="mxml"] [/cc]

In the Flex mobile development video I did a little while back I showed the basics of navigating to a different view. That is exactly what we'll do here as well. Back in the first view we'll add a click handler to the button.

[cc lang="mxml"]

[/cc]

If you remember the first argument in pushView is a reference to the view class you want to navigate to. The second and third arguments have to do with passing data to the next view and the basics of that were covered in the video as well.

The last argument however is what we'll need here, it lets you pass in an instance of a ViewTransitionBase class. There are a few transitions that come with Flex 4.5 and you could obviously build you own by extending this base class.

In this case I'll use the built-in FlipViewTransition that adds a nice 3D effect while navigating between views, I'll set the duration of the transition to 1 second. The FlipViewTransition supports two different transition types "card" and "cube" - the first one is more of a 2D turning effect while the other one rotates around an axis giving a more distinct 3D feel, I'll go for "cube" here.

[cc lang="mxml"] [/cc]

The only thing left to do is add the same code to SecondView.mxml but use navigator.popView instead to navigate back and change the direction property of the transition. This direction property takes up, down, left and right values so you have quite a few options to how you want this transition to look.

[cc lang="mxml"]

[/cc]

You can now test and run the application and you should see the following result:

Download source code (zip file - 7Kb)

Pretty easy, right? If you're a little more experienced writing ActionScript you could write your own custom view transitions (I'll cover this in a future blog post). Have fun!
 

Posted
AuthorPeter
2 CommentsPost a comment

One of the common things you'll want to do when building mobile apps is add a splash screen. This is an image that shows up while the application is launching and gives a visual indication to the user in the 1 or 2 seconds it takes after clicking.

With the new Flex 4.5 mobile components this is now very easy to add and there are built-in properties that help you do this on Application, ViewNavigatorApplication and TabbedViewNavigatorApplication.

[cc lang="mxml"] [/cc]

Its great to have this splash screen there but how do we deal with different devices? Some devices might have much higher specs and launch the app in milliseconds, while on older devices it could take several seconds.

The best practice here is to add a minimum display time for the splash screen, that way you're sure that even on very fast devices the splash screen will be visible for at least x amount of milliseconds, giving the user the chance to briefly see it.

In the code example below we're setting the splash screen up to display for at least 2 seconds (so that means 2000 milliseconds).

[cc lang="mxml"] [/cc]

Another important thing to take into account when you release your application across devices is screen size and how your splash screen will scale. We've also got a property to set that and have a number of options.

  • none (default) - splash screen does not scale
  • letterbox - splash screen scales to the available screen size but maintains the aspect ratio
  • stretch - splash screen scales to fill the exact screen size (aspect ratio is ignored)
  • zoom - splash screen scales so it completely fills the available screen size (could go outside bounds and crop the image)

[cc lang="mxml"] [/cc]

 
This is just one of many new mobile features in Flex 4.5 that make it really easy to create applications. Have fun!
 

Posted
AuthorPeter
5 CommentsPost a comment

Sometimes I really wish I worked over in San Francisco -- now and again Adobe does these great meet ups, like recently happened with FlashCamp. They've put the video of the presentations online including a keynote by CTO Kevin Lynch and the following topics:

 
These are some really good in depth presentations that I can highly recommend you check out!
 

Posted
AuthorPeter
3 CommentsPost a comment

Despite the excellent ASDoc integration added in Flash Builder 4 beta, it seems its still not easy to export to HTML and you need to set it up yourself using an external tool configuration. I spent some time trying to figure it out and stumbled across a post by Seb Lee-Delisle that gives a good runthrough of how to set it up. Thought it would be useful to show how to set it up in Flash Builder 4 beta.

  • Go to Run > External Tools > External Tools Configurations
  • Select Program (left sidebar) and click the New button to create a new configuration
  • Give your configuration the name "ASDoc"
  • Set the location to "/Applications/Adobe Flash Builder Beta/sdks/4.0.0/bin/asdoc" (the default on Mac) on Windows the default is "C:\Program Files\Adobe Flash Builder Beta\sdks\4.0.0\bin\asdoc.exe"
     
  • For Working Directory you can set it to ${project_loc}, this is a variable that always point to the location of your current project
  • Finally you set up some arguments, assuming you put your code in the default "src" folder:
    -source-path src
    -doc-sources src
     
    Those arguments set your source directory and tell the ASDoc tool to recursively go through all classes in that folder and its subfolders and generate the documentation.

 

ASDoc setup
 

To run the ASDoc tool and export your documentation to HTML, select your project and click Run > External Tools > ASDoc. When its finished scanning your code and generating the documentation you'll find it in a folder in your project called "asdoc-output". Enjoy!
 

Posted
AuthorPeter
6 CommentsPost a comment

In case you didn't know yet, Flash Builder 4 beta (the product previously known as Flex Builder) is now available for download on labs.adobe.com, as is the beta for Flash Catalyst. I've been playing around with the public beta for a little bit and thought it was worth blogging some of my favorite features in this release when it comes to features in the IDE. Up until now I've only tested it with pure ActionScript projects, so might discover some more gems later on.

Generating getter/setter methods

This is a huge time saver, you can now just define your class properties, right-click and select Source > Generate Getter/Setter and you get a useful dialog allowing you to specify how you want that getter and setter method set up. You can make your class property private, rename it, specify if you want the getter and/or setter, set up its access modifier and even define where you want those generated methods to get added in your code.

Generate Getter/Setter

SWC introspection

If you work with library projects or third party SWC files you can now introspect those and figure out its packages, classes and methods. SWC files generated with Flash Builder 4 can also have their ASDoc comments embedded.

SWC introspection

ASDoc integration

ASDoc is a tool that comes with Flash Builder for generating documentation from Javadoc style comments in your Flash Builder projects. There's now a panel that shows the documentation for a selected property or instance, you also get a tooltip showing the documentation when you hover over them.

As mentioned earlier this also works with SWC files generated from Flash Builder 4, since those can now contain the ASDoc information (increases SWC filesize, but not filesize when exporting a release build).

ASDoc integration
 

Be sure to give Flash Builder beta a try yourself, I'm very pleased with what I've seen so far and am sure it will improve productivity significantly.
 

Posted
AuthorPeter
12 CommentsPost a comment