5

scris de:
Peter

Adobe AIR & Flash Tutorial

24.02.09

left_picIt’s time for a new tutorial. Now let’s move to the intermediate users who have basic knowledge of Adobe Flash and are starting to use Adobe AIR . Let’s build a little address book application using the power of Adobe AIR and a local database (note that this is just an introduction to air and local mysql lite databases).

First … What is Adobe AIR? Adobe AIR is a cross-platform runtime environment for building rich Internet applications using Adobe Flash, Adobe Flex, HTML, or Ajax, that can be deployed as a desktop application.

For this tutorial you will need at least Adobe Flash CS3 and the latest Adobe Air runtime for Flash. In order to start our application I’ve created a background movie clip called “back” , two buttons (one to add new contacts with an instance name of “plus” and one to close the application with an instance name of “xu“). In the first frame I have a combo box component with an instance name of “lister” , in the second frame two input text fields with the instance names of “nume” and “tel“. If you don’t want to create this for yourself you can download the start.fla file.
Pasul 1

Add the following code to the first frame of your movie:

stop();

//create a new sql connection
var conn:SQLConnection= new SQLConnection();
//add an event handeler for the open event
conn.addEventListener(SQLEvent.OPEN, openHandler);
//create the database if it doesn't exist, otherwise just opens it
var dbFile:File =File.applicationDirectory.resolvePath ("exemplu.db");
conn.openAsync(dbFile);

pasul2

Now add a new function that creates a table in the database. To do so, write the following code in the first frame of your application:

function openHandler(event:SQLEvent):void {
//create a new sql statement
var sql:SQLStatement=new SQLStatement();
//set the statement to connect to our database
sql.sqlConnection=conn;
//parse the sql command that creates the table if it doesn't exist
sql.text= "CREATE TABLE IF NOT EXISTS contacte(" +
"id INTEGER PRIMARY KEY AUTOINCREMENT, " +
"nume TEXT, " +
"telefon INTEGER)";
//add a new event listener to the sql when it completes creating the table
sql.addEventListener(SQLEvent.RESULT,retrieveData);
//call the execute function to execute our statement
sql.execute();
}

Pasul 3

The next step is to create the function that retrieves the data from the table in the database. Just write the following code in the first frame of your application:

function retrieveData(event:SQLEvent = null):void {
//create a new sql statemant
var sql:SQLStatement = new SQLStatement();
sql.sqlConnection=conn;
//this sql command retrieves all the fields from our
//table in the database and orders it by name

sql.text =  "SELECT id, nume, " +
"telefon " +
"FROM contacte ORDER BY nume";
//add a new event listener if there is data
//to display it

sql.addEventListener(SQLEvent.RESULT, selectHandler);
sql.execute();
}

Pasul 4

Now it is time to create the function that shows the contacts in the list component. To create it just insert in the first frame of your file the following code:

function selectHandler(event:SQLEvent):void {
//first we clear our list
lister.removeAll();
//the we create a result variable that holds
//all our contacts

var result:SQLResult=event.target.getResult();
//we check if results is not empty
if (result!=null&&result.data!=null) {
//and we add a new item to our list for
//each contact in our database

for (var i:Number = 0; i < result.data.length; i++) {
lister.addItem ({ label:result.data[i].nume + "-" +result.data[i].telefon
, nr:result.data[i].id });
}
}
}

Pasul 5

Now to add some code to our buttons :

plus.addEventListener(MouseEvent.CLICK,adder);
xu.addEventListener(MouseEvent.CLICK,closeapp);
back.addEventListener(MouseEvent.MOUSE_DOWN,drag);
//because my buttons are not real buttons
//but movieclips i need to set the
//buttonMode property to true

plus.buttonMode=true;
xu.buttonMode=true;

function adder(e:MouseEvent):void{
//remove the eventlistener and move to the
//next frame

plus.removeEventListener(MouseEvent.CLICK,adder);
nextFrame();
}

function closeapp(e:MouseEvent):void {
//close the application
NativeApplication.nativeApplication.exit();
}

function drag(e:MouseEvent):void {
//drag the application
this.stage.nativeWindow.startMove();
}

Pasul 6

You’ve finished the first frame, it’s time to go to the second frame where we add the contacts. Start by adding the next code:

//this line restricts the user input
//to just numbers in the phone input box

tel.restrict="0-9";
//add a new event listener to our plus button
plus.addEventListener(MouseEvent.CLICK,adder2);

Pasul 7

Now create the final function that adds a new contact in the database:

function adder2(e:MouseEvent):void {
//create a new sql statement variable
var sql:SQLStatement=new SQLStatement();
sql.sqlConnection=conn;
//the next sql command creates a new entry
//in the table contacte from our database

sql.text =  "INSERT INTO contacte(nume, " +
"telefon)" +
"VALUES(@nume, " +
"@telefon)";
//to insert variables into sql commnads
//we use the parameters definition

sql.parameters["@nume"]=nume.text;
sql.parameters["@telefon"]=tel.text;
//add a new event listener that calls the
//function that retrieves the data

sql.addEventListener(SQLEvent.RESULT,retrieveData);
sql.execute();
//go to frame no. 1
prevFrame();
//remove the eventlistener from our plus button
plus.removeEventListener(MouseEvent.CLICK,adder2);
}

Pasul 8

Now you can test the application like you would normaly do (CTRL+Enter on windows or command+enter on Mac). This is how my finished application looks like on desktop.

finished

Now to publish the file as an Air application, so that other users can use the application, go to File>AIR Settings . A new window will appear; you can set whatever names in there but be sure to set the Window Style to Custom Chrome (transparent). Press the Publish AIR file button that creates an air installer file in the same directory where you’ve saved your .fla file. Here is the finished source file.

This tutorial is just to get you started on using Adobe AIR. It is not a complete application, because there are some missing functions. For example there is no checking to see that the users input is not empty. You can not delete or  modify a contact and the list could go on, the only limit is your imagination. If you want to add extra features to your application, you should use the same techniques shown in this tutorial. For more Sql commands you should use google or ask Maximilian to search what you want to modify in the database.

Articol favorit
22 comentarii        legatura permanenta, flux RSS comentarii
  1. vijay says:

    how about if I already have a database (for examle, mydb.sqlite), I dont want to create from the start, just read it from that database. Can I ?

  2. [...] Adobe AIR and Flash Tutorial In this tut, you will build a little address-book application using the power of Adobe AIR and a local database. [...]

  3. [...] Adobe AIR and Flash Tutorial In this tut, you will build a little address-book application using the power of Adobe AIR and a local database. [...]

  4. Matt says:

    missing the imports in the source file so the ‘finished’ files do not even run. Even after adding the imports, it did not work.

  5. [...] Adobe AIR 和 FLASH指南 [...]

  6. Matt says:

    Hello sorry to trouble you but would really appreciate it if you could help me out.

    I have followed and downloaded the source to the post you made on Adobe AIR & Flash Tutorial

    Everything works but I keep getting these error messages when I press the ‘+’ button after I try and add more contacts:

    Error: Error #3104: A SQLConnection must be open to perform this operation.
    at Error$/throwError()
    at flash.data::SQLStatement/checkAllowed()
    at flash.data::SQLStatement/checkReady()
    at flash.data::SQLStatement/execute()
    at air_db_fla::MainTimeline/retrieveData()[air_db_fla.MainTimeline::frame1:41]

    Is there any simple resolution to this?

    Many Thanks!

  7. [...] Adobe AIR 和 FLASH指南 [...]

  8. Rich says:

    thanks…nice example!

  9. [...] Adobe AIR and Flash Tutorial In this tut, you will build a little address-book application using the power of Adobe AIR and a local database. [...]

  10. AVNEET says:

    grea8 work man thanks for that i was searching it for a long…….

  11. Peter says:

    It looks like you didn’t open a connection to the database : conn.openAsync(dbFile); Try downloading the finished source files and compare it to the one you have.

  12. Jojo says:

    I find your tutorial very interesting but it throws an error :

    Error: Error #3104: A SQLConnection must be open to perform this operation.
    at Error$/throwError()
    at flash.data::SQLConnection/checkConnected()
    at flash.data::SQLConnection/begin()
    at personalsim_fla::MainTimeline/openHandler()[personalsim_fla.MainTimeline::frame1:54]
    Error #2044: Unhandled SQLErrorEvent:. errorID=3119, operation=open , message=Error #3119: Database file is currently locked. , details=

    I’va been looking for a solution but I really don’t find… could you help ?

  13. [...] Adobe AIR & Flash Tutorial [...]

  14. adam says:

    thank you so much.
    It’s tutorial great help me..

  15. Darío Gutiérrez says:

    Excellent this is I was looking for!

  16. Peter says:

    You can not create user defined functions with Adobe Air SQLite, at least for now.

  17. Edster says:

    Hello every one, nice post.

    Is it possible for one to create “user-defined functions” in the AIR runtime Embedded Database system ( SQLlite so far )? If yes… How?

  18. Peter says:

    Links are fixed now. What do you mean by “Is there any way to see the tables after they have been created?”… if you are looking to see the tables in Flash there is no way other than using sql commands, for more commands you should visit http://www.sqlite.org/index.html . If you are looking to see the structure of the database externally you should do a search for SQLite Database Browser, this is a freeware applications that lets you see the structure of the database.

  19. dave says:

    Great tutorial I have been looking all over for this really helpful, the links to the tutorial files take me to a page saying Error 404 – Not Found.

    Is there any way to see the tables after they have been created?

  20. Pete Mc says:

    Thanks for an easy straight forward intro to SQL in AIR!
    It’s a really nice surprise to discover how easy it is. I’ve always avoided databases as a rule, as there’s usually a developer I can lean on. I can see learning SQL by using AIR will be useful for building more advanced we projects aswell. Anyway, thankyou for spending the time to create this great tut!

Comentarii

Email-ul tau nu va fi publicat. Numele si email-ul sunt obligatorii.