Sunday, September 25, 2011

Creating a contact book using Flex, AIR and SQLite database: Part 1

This is the start of a tutorial series of making an SQLite database powered application with Flex AIR. Today we set the layout for our application and set up the SQL connection.

If you have followed my blog for some time, you might remember I wrote a series about making a reminder-type application with AIR. This is basically going to be the same typed application, but made using Flex instead. The final results may look a bit different, but mechanics will be the same.

First we will set everything up, create a layout and arrange the interface elements.

The application will consist of a List component, a form with 4 form items (First name, Last name, Phone and Email), and 3 buttons - Create new item, Save item and Delete item.

The List will contain all the entries we have in the database. To add a new entry, the user just hits the 'Create new item' button and a new item appears in the list (with the data that was input in the form items). The user can select an existing entry in the List, edit its fields and then click 'Save item' to apply the changes. Or, they can delete the entry from the database completely by hitting the 'Delete item' button.

Now that we know what elements our application will consist of, we can start building it. All that we need to do now is place the components on screen and give them IDs and labels. Also, remember to make the Delete item and Save item buttons disabled on start. Why? Because they should only be available if the user has an item selected in the List.

<s:HGroup width="500">
<s:List id="contactList" width="290" height="300"/>
<mx:Form>
<mx:FormItem><s:Button label="Create new item"/></mx:FormItem>
<mx:FormItem label="First name"><s:TextInput id="t_fname"/></mx:FormItem>
<mx:FormItem label="Last name"><s:TextInput id="t_lname"/></mx:FormItem>
<mx:FormItem label="Phone"><s:TextInput id="t_phone" restrict="0-9" /></mx:FormItem>
<mx:FormItem label="Email"><s:TextInput id="t_email"/></mx:FormItem>
<mx:FormItem><s:Button label="Save item" enabled="false" /><s:Button label="Delete item" enabled="false" /></mx:FormItem>
</mx:Form>
</s:HGroup>



Before we start adding functionality, we need to set up all the SQLite related stuff (this step will be very similar to the one in the AS3 AIR tutorial series). Firstly, we need to create the connection object:

private var connection:SQLConnection;

Then we add a new function called init(). There, we create a new File object for our database file, set the directory which we want to use for storage of this file. Then, we set the connection object we have to a new SQLConnection object. We add an event listener, listening for the SQLEvent.OPEN event and call the openAsync() method of the connection object (using the CREATE interaction method, because we are not only going to read from this file, but also add items to it).

private function init():void{
var dbFile:File = File.applicationStorageDirectory.resolvePath("database.db");
connection = new SQLConnection();
connection.addEventListener(SQLEvent.OPEN, onOpen);
connection.openAsync(dbFile, SQLMode.CREATE);
}

The init() function is called when the creationComplete event of the root object is dispatched, so we need to set the creationComplete property in that object to our init function:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       width="600" height="350"
                       creationComplete="init();"
                       >

Now we need to create that onOpen function that I mentioned when adding the event listener. In this function, we will create a new sql statement that we will use to create a new table if it doesn't exist. Execute it using the execute() method, add a responder function called selectItems (this is where we will write code to select items to display them on the list). In the selectItems function, for now just create some kind of a notification that shows us that the code works (I'll use the Alert class).

private function onOpen(evt:SQLEvent):void{
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, fname TEXT, lname TEXT, phone TEXT, email TEXT)";
stat.execute(-1, new Responder(selectItems));
}

private function selectItems(evt:SQLResult):void{
Alert.show("Items ready for selection!");
}

That's all for this part of the tutorial.

Here is the full code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
   width="600" height="350"
   creationComplete="init();"
   >
   
<fx:Script>
<![CDATA[
import flash.data.SQLConnection;
import flash.events.SQLEvent;
import flash.data.SQLMode;
import flash.filesystem.File;
import flash.net.Responder;
import flash.data.SQLStatement;
import mx.controls.Alert;
import flash.data.SQLResult;

private var connection:SQLConnection;

private function init():void{
var dbFile:File = File.applicationStorageDirectory.resolvePath("database.db");
connection = new SQLConnection();
connection.addEventListener(SQLEvent.OPEN, onOpen);
connection.openAsync(dbFile, SQLMode.CREATE);
}

private function onOpen(evt:SQLEvent):void{
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, fname TEXT, lname TEXT, phone TEXT, email TEXT)";
stat.execute(-1, new Responder(selectItems));
}

private function selectItems(evt:SQLResult):void{
Alert.show("Items ready for selection!");
}
]]>
</fx:Script>

<s:HGroup width="500">
<s:List id="contactList" width="290" height="300"/>
<mx:Form>
<mx:FormItem><s:Button label="Create new item"/></mx:FormItem>
<mx:FormItem label="First name"><s:TextInput id="t_fname"/></mx:FormItem>
<mx:FormItem label="Last name"><s:TextInput id="t_lname"/></mx:FormItem>
<mx:FormItem label="Phone"><s:TextInput id="t_phone" restrict="0-9" /></mx:FormItem>
<mx:FormItem label="Email"><s:TextInput id="t_email"/></mx:FormItem>
<mx:FormItem><s:Button label="Save item" enabled="false" /><s:Button label="Delete item" enabled="false" /></mx:FormItem>
</mx:Form>
</s:HGroup>

</s:WindowedApplication>

Thanks for reading!

Related:

Creating a contact book using Flex, AIR and SQLite database: Part 2
Creating a contact book using Flex, AIR and SQLite database: Part 3
Creating a contact book using Flex, AIR and SQLite database: Part 4
Creating a contact book using Flex, AIR and SQLite database: Part 5
Creating a contact book using Flex, AIR and SQLite database: Part 6
Creating a contact book using Flex, AIR and SQLite database: Part 7
Creating a contact book using Flex, AIR and SQLite database: Part 8
Creating a contact book using Flex, AIR and SQLite database: Part 9
Creating a contact book using Flex, AIR and SQLite database: Part 10
Creating a contact book using Flex, AIR and SQLite database: Part 11
Creating a contact book using Flex, AIR and SQLite database: Part 12
Creating a contact book using Flex, AIR and SQLite database: Part 13
Creating a contact book using Flex, AIR and SQLite database: Part 14
Creating a contact book using Flex, AIR and SQLite database: Part 15
Creating a contact book using Flex, AIR and SQLite database: Part 16

No comments:

Post a Comment