Category Archives: Flash Builder

Using a SQLite database in Flex Mobile applications

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”]


[/cc]

Running the code above will query the database for all records and show it in the List component.

In a more advanced application you would set up more Query tags to correspond to different queries or maybe updating or deleting records from the database. Have fun!

 

Advertisements

Using a SQLite database in Flex Mobile applications

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”]


[/cc]

Running the code above will query the database for all records and show it in the List component.

In a more advanced application you would set up more Query tags to correspond to different queries or maybe updating or deleting records from the database. Have fun!

 

Controlling the soft keyboard in Flex Mobile applications

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”]

[/cc]

 

Finally, there might be uses cases where you want to prevent the default behaviour of a soft keyboard showing up. For example when you don’t want to show the soft keyboard when a TextInput component gets given focus. To do this you need to prevent the default behaviour in the softKeyboardActivating event.

[cc lang=”mxml”]

[/cc]

 

Controlling the soft keyboard in Flex Mobile applications

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”]

[/cc]

 

Finally, there might be uses cases where you want to prevent the default behaviour of a soft keyboard showing up. For example when you don’t want to show the soft keyboard when a TextInput component gets given focus. To do this you need to prevent the default behaviour in the softKeyboardActivating event.

[cc lang=”mxml”]

[/cc]

 

Defining a view transition for Flex Mobile applications

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!
 

Adding a splash screen to your Flex Mobile application

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!