STORE ALL YOUR FRIENDS’ AND FAMILY’S CONTACT INFORMATION IN A USEFUL AIR APPLICATION. LEARN HOW TO ADD, EDIT AND DELETE DATA IN AN SQLITE DATABASE IN PART 2 OF THIS TUTORIAL
In Part 1 we began coding an AIR contact manager with Flex and realised that the sheer amount of code meant we’d have to split it over two parts. So if you’re encountering this from scratch you’ll need to bear a couple of things in mind. Step 1 is in fact Step 16 in the overall tutorial. Find the code for Part 2 here and Part 1 here
Author: Simon Bailey | Originally appeared in Issue 146
1 Instantiate SQLQueries
In ContactManager, navigate to the onOpen() method and enter the text below to create a new instance of the SQLQueries class. Using the instance of the LConnector class, parse the SQLConnection in the SQLQueries constructor and add an OnContacts method to the CONTACTS_ARR event, dispatching the ArrayCollection of contacts.
private function onOpen( e:Event ):void
sqliteQueries = new SQLQueries( sqliteConnector.connection );
sqliteQueries.addEventListener( SQLQueries.CONTACTS_ARR, onContacts );
}
private function onContacts( e:AllContactsEvent ):void
{
}
2 Load contacts into wrapper
We need to parse the ArrayCollection of contacts to the ContactsWrapper. Enter the code below. Assign the contacts as the ContactList data grid’s data provider. In the onContacts() method in ContactManager, parse the contacts to setContacts().
public function setContacts( contacts:ArrayCollection ):void{
c_list.contact_dg.dataProvider = contacts;}
private function onContacts( e:AllContactsEvent ):void{
contactWrapper.setContacts( e.contacts );}
3 Display contact
In ContactWrapper, add a listener to the Select event on the ContactList component, calling a method named displayContact. The Contact variable is populated from the selectedContact reference assigned through mx:Binding in ContactList.
private function displayContact():void{
c_details.add = false;
c_details.edit = false;
c_details.contact = c_list.selectedContact;
}
4 Add, edit, delete
Still in the ContactWrapper class, enter the onClick() method. A switch statement analyses the eventName parsed and acts accordingly. Edit has two modes: edit, which transitions ContactDetails state, and save to retrieve edited contact details and saveContact().
private function onClick( eventName:String ):void
{
switch ( eventName )
{
case ‘edit’:
if( !c_details.edit ){
c_details.edit = true;
}
else
{
var contact:ContactVO = c_details.saveContact();
( contact.firstName != “” ) ? saveContact( contact ) : c_details.clear();
c_details.edit = false;
}
break;
case ‘add’:
c_details.edit = true;
c_details.add = true;
c_details.newContact();
c_list.deSelect();
break;
case ‘delete’:
if( c_list.contact_dg.selectedIndex != -1 ){
c_list.deSelect();
c_details.clear();
}
break;
}}
5 saveContact
If the contact has been edited, saveContact() is fired. This method expects a contact value object as its parameter and uses a custom event to dispatch the contact for storage. Add/edit is determined by the ContactDetails’ add Boolean.
private function saveContact( contact:ContactVO ):void{
if( !c_details.add ){
}
else
{
}
}
6 Creating custom events
We will create transparent background divs, with position: absolute set so they sit behind the content. Create the following class .background in the style sheet:
package events
{
import flash.events.Event;
import vo.ContactVO;
public class ContactEvent extends Event{
public var contact:ContactVO;
public function ContactEvent( _contact:ContactVO, type:String, bubbles:
Boolean=false )
{
super( type, bubbles );
this.contact = _contact;
}
public override function clone():Event
{
return new ContactEvent( contact, type, bubbles );
}}}
7 Overlaying content
Create two new ActionScript classes that extend Event in the events directory named ‘ContactEvent’ and ‘AllContactsEvent’. These custom events will be used to dispatch a contact value object around our application and an ArrayCollection of contacts.
<!– Dispatched Events –>
<mx:Metadata>
[Event(name=”closeWin”, type=”flash.events.Event”)]
[Event(name=”contactDelete”, type=”events.ContactEvent”)]
[Event(name=”contactEdit”, type=”events.ContactEvent”)]
[Event(name=”contactAdd”, type=”events.ContactEvent”)]
</mx:Metadata>
// Dispatched events to add, edit and delete
private static const CONTACT_DELETE:String = ‘contactDelete’;
private static const CONTACT_EDIT:String = ‘contactEdit’;
private static const CONTACT_ADD:String = ‘contactAdd’;
case ‘delete’:
if( c_list.contact_dg.selectedIndex != -1 ){
var e:ContactEvent = new ContactEvent( c_list.selectedContact as ContactVO, CONTACT_
DELETE, true );
dispatchEvent( e );
c_list.deSelect();
c_details.clear();
}
break;
var e:ContactEvent;
if( !c_details.add )
{
e = new ContactEvent( c_details.contact as ContactVO, CONTACT_EDIT, true );
}
else
{
e = new ContactEvent( c_details.contact as ContactVO, CONTACT_ADD, true );
}
dispatchEvent( e );
8 Listen for custom events
Edit the ContactWrapper component to listen for the dispatched custom events for Add,Edit and Delete. Create the three methods to handle the events and call the appropriate method in SQLQueries, parsing the contact value object stored in our custom event.
// Add contact
private function addContact( e:ContactEvent ):void
{
sqliteQueries.addContact( e.contact );
}
// Edit contact
private function editContact( e:ContactEvent ):void
{
sqliteQueries.editContact( e.contact );
}
// Delete contact
private function deleteContact( e:ContactEvent ):void
{
sqliteQueries.deleteContact( e.contact );
}
<!– Contact Manager wrapper –>
<view:ContactWrapper id=”contactWrapper”
width=”100%” height=”100%” x=”0” y=”0”
closeWin=”closeWindow( event )”
contactDelete=”deleteContact( event )”
contactAdd=”addContact( event )”
contactEdit=”editContact( event )” />
9 Modification queries
Add your final three methods to add, edit and delete data from our SQLite database.
// Edit a contact
public function editContact( _contact:ContactVO ):void
{
var _sql:String = “UPDATE records SET firstName=:firstName, “ +
“lastName=:lastName, “ +
“email=:email, “ +
“mobileTel=:mobileTel, “ +
“homeTel=:homeTel, “ +
“address=:address “ +
“WHERE contactID=:contactID”;
execute( _sql, contactResult, _contact, EDIT );
}// Add a contact
public function addContact( _contact:ContactVO ):void
{
var _sql:String = “INSERT INTO records (firstName, lastName, email, mobileTel,
homeTel, address) “ +
“VALUES (:firstName, :lastName, :email, :mobileTel, :homeTel, :address)”;
execute( _sql, contactResult, _contact );
}// Delete a contact
public function deleteContact( _contact:ContactVO ):void{
var _sql:String = “DELETE FROM records WHERE contactID=:contactID”;
execute( _sql, contactResult, _contact, DELETE );}
private function contactResult( e:SQLEvent ):void
{
getContacts();}}}
10 Drag window
Add a mouseDown Event Listener to the ContactWrapper instance, calling an onDrag() method. Within onDrag, call the startMove method on the NativeWindow class.
mouseDown=”onDrag( event )”
// Enable drag of app
private function onDrag(e:MouseEvent):void
{
stage.nativeWindow.startMove();
}
11 XML descriptor file
Here you outline the application identifier, file name, description and window settings for display purposes.
<?xml version=”1.0” encoding=”UTF-8”?>
<application xmlns=”http://ns.adobe.com/air/application/1.0”>
<id>ContactManager</id>
<filename>ContactManager</filename>
<name>Contact Manager</name>
<version>v1</version>
<description>Contact Manager application for managing all your friends and family
contact information.</description>
<initialWindow>
<content>[This value will be overwritten by Flex Builder in the
output app.xml]</content>
<title>Contact Manager</title>
<systemChrome>none</systemChrome>
<transparent>false</transparent>
</initialWindow>
</application>
12 Test your app
Click Run>Run ContactManager, then click Add and add some contact information into the details panel. Click Save, test, edit and delete. Now click Project>Export Release Build. Click Next>Create to build a new digital certificate. Click Next and ensure the XML file, contacts database and SWF file are selected, then click Finish. Finally, double-click your newly created AIR file. Select Install, keep the next window’s defaults and select Continue.
Nenhum comentário:
Postar um comentário