WEAVE 05.09 – AIR-Anwendung lokaler Datenbank

Bookmark-Anwendung mit AIR

Die Adobe Integrated Runtime (AIR) ermöglicht die Entwicklung plattformübergreifender Webanwendungen für den Desktop, wie sie zum Beispiel von eBay oder AOL eingesetzt werden. Mit dem folgenden Quellcode von Simon Widjaja können Sie in rund drei Stunden eine kleine Anwendung zur Verwaltung von Bookmarks entwickeln.

1// Value Object definieren

{{Listing com.simonwidjaja.workshop.BookmarkVO}}

  1. package com.simonwidjaja.workshop
  2. {
  3.   [Bindable]
  4.   public class BookmarkVO
  5.   {
  6.     public var id:int;
  7.     public var url:String;
  8.     public var title:String;
  9.     public var description:String;
  10.  
  11.     public function BookmarkVO( object:Object=null ):void {
  12.       if ( object ) {
  13.         id = object.id;
  14.         url = object.url;
  15.         title = object.title;
  16.         description = object.description;
  17.       }
  18.     }
  19.   }
  20. }

2// Datenbankverbindung herstellen

{{Listing: DatabaseConnector (1)}}

package com.simonwidjaja.workshop
  1. {
  2.   import flash.data.SQLConnection;
  3.   import flash.data.SQLResult;
  4.   import flash.data.SQLStatement;
  5.   import flash.filesystem.File;
  6.  
  7.   public class DatabaseConnector
  8.   {
  9.     [Bindable] public var bookmarks:Array = new Array();
  10.  
  11.     private var conn:SQLConnection;
  12.     private var firstTimeFlag:Boolean;
  13.  
  14.     private static var _instance:DatabaseConnector;
  15.     public static function getInstance() Icon Biggrin in WEAVE 05.09 – AIR-Anwendung lokaler Datenbank atabaseConnector {
  16.       if ( !_instance )
  17.         _instance = new DatabaseConnector( new SingletonEnforcer() );
  18.       return _instance;
  19.     }
  20.  
  21.     public function DatabaseConnector( singleton:SingletonEnforcer ) {
  22.     }
  23.  
  24.     public function connect():void {
  25.       var file:File = File.applicationStorageDirectory.resolvePath( „Datenbank“ );
  26.       trace( „file.nativePath: „+file.nativePath );
  27.       firstTimeFlag = ( file.exists ) ? false : true;
  28.       conn = new SQLConnection();
  29.       conn.open( file );
  30.       if ( firstTimeFlag ) createTable();
  31.       //else                fetchAllBookmarks();
  32.     }
  33.  
  34.     private function createTable():void {
  35.       var statement:SQLStatement = new SQLStatement();
  36.       statement.sqlConnection = conn;
  37.       statement.text = „CREATE TABLE bookmarks ( id INTEGER PRIMARY KEY AUTOINCREMENT, „ +
  38.           „url CHAR(200), title CHAR(200), description CHAR(1000) );“;
  39.       statement.execute();
  40.     }
  41.     // Hier folgen spŠter die CRUD-Methoden
  42.   }
  43. }
  44. class SingletonEnforcer {}

Um sicherzustellen, dass unsere Datenbank wie gewünscht angelegt wird, können wir testweise die connect()-Methode direkt in unserem MXML-Dokument wie folgt ausführen:

  1.     <![CDATA[
  2.      import com.simonwidjaja.workshop.DatabaseConnector;
  3.      DatabaseConnector.getInstance().connect();
  4.    ]]>
  5.   </mx:Script>

Plugin, um das Ergebnis zu prüfen beziehungsweise direkt auf der Datenbank arbeiten zu können: SQLite Manager

3// Datensätze lesen und schreiben

  1.  public function fetchAllBookmarks():void {
  2.       var statement:SQLStatement = new SQLStatement();
  3.       statement.sqlConnection = conn;
  4.       statement.text = „SELECT * FROM bookmarks;“;
  5.       statement.execute();
  6.       var result:SQLResult = statement.getResult();
  7.       var bookmarks:Array = new Array();
  8.       for each ( var entry:Object in result.data ) {
  9.         bookmarks.push( new BookmarkVO( entry ) );
  10.       }
  11.       this.bookmarks = bookmarks;
  12.     }
  13.  
  14.     public function saveBookmark( bookmark:BookmarkVO, action:String ):void {
  15.       var statement:SQLStatement = new SQLStatement();
  16.       statement.sqlConnection = conn;
  17.       if ( action==“update“ ) {
  18.         statement.text = „UPDATE bookmarks SET url=:url, title=:title, description=:description WHERE id=:id“;
  19.         statement.parameters[„:id“] = bookmark.id;
  20.       }
  21.       else {
  22.         statement.text = „INSERT INTO bookmarks (url, title, description) VALUES (:url, :title, :description);“;
  23.       }
  24.       statement.parameters[„:url“] = bookmark.url;
  25.       statement.parameters[„:title“] = bookmark.title;
  26.       statement.parameters[„:description“] = bookmark.description;
  27.       statement.execute();
  28.       fetchAllBookmarks();
  29.     }
  30.  
  31.     public function deleteBookmark( bookmark:BookmarkVO ):void {
  32.       var statement:SQLStatement = new SQLStatement();
  33.       statement.sqlConnection = conn;
  34.       statement.text = „DELETE FROM bookmarks WHERE id=:id;“;
  35.       statement.parameters[„:id“] = bookmark.id;
  36.       statement.execute();
  37.       fetchAllBookmarks();
  38.     }

4// View zum Hinzufügen und Ändern

{{Listing com.simonwidjaja.workshop.EditView}}

  1.  
  2. <mx:Panel xmlns:mx=“http://www.adobe.com/2006/mxml“
  3.     xmlns:validator=“com.simonwidjaja.workshop.validator.*“
  4.     layout=“vertical“ width=“500“ height=“300“
  5.     paddingLeft=“25“ paddingTop=“25“ paddingRight=“25“
  6.     borderAlpha=“0.8“ title=“HinzufŸgen/Bearbeiten“>
  7.  
  8.   <mx:Script>
  9.     <![CDATA[
  10.      import mx.utils.ObjectUtil;
  11.      import mx.managers.PopUpManager;
  12.      import com.simonwidjaja.workshop.BookmarkVO;
  13.      import com.simonwidjaja.workshop.DatabaseConnector;
  14.  
  15.      [Bindable] public var bookmark:BookmarkVO;
  16.  
  17.      private function save():void {
  18.        bookmark.url = urlInput.text;
  19.        bookmark.title = titleInput.text;
  20.        bookmark.description = descriptionInput.text;
  21.        var action:String;
  22.        if ( bookmark.id )  action = „update“;
  23.        else                action = „insert“;
  24.        var databaseConnector:DatabaseConnector = DatabaseConnector.getInstance();
  25.        databaseConnector.saveBookmark( bookmark, action );
  26.        close();
  27.      }
  28.      private function close():void {
  29.        PopUpManager.removePopUp( this );
  30.      }
  31.    ]]>
  32.   </mx:Script>
  33.  
  34.   <mx:RegExpValidator source=“{ urlInput }“ property=“text“
  35.       expression=“^(https?://)[A-Za-z0-9]+[.][A-Za-z0-9]+“
  36.       noMatchError=“Keine gŸltige URL“ />
  37.  
  38.   <mx:Text text=“Bitte geben Sie die Eigenschaften des Bookmarks ein:“ />
  39.  
  40.   <mx:Form width=“100%“>
  41.     <mx:FormItem label=“URL“ width=“100%“>
  42.       <mx:TextInput id=“urlInput“ width=“100%“ text=“{ bookmark.url }“ />
  43.     </mx:FormItem>
  44.     <mx:FormItem label=“Titel“ width=“100%“>
  45.       <mx:TextInput id=“titleInput“ width=“100%“ text=“{ bookmark.title }“ />
  46.     </mx:FormItem>
  47.     <mx:FormItem label=“Beschreibung“ width=“100%“>
  48.       <mx:TextArea id=“descriptionInput“ width=“100%“ text=“{ bookmark.description }“ />
  49.     </mx:FormItem>
  50.   </mx:Form>
  51.  
  52.   <mx:ControlBar horizontalAlign=“right“>
  53.     <mx:Button label=“Abbrechen“ click=“close()“ />
  54.     <mx:Button label=“Speichern“ click=“save()“ />
  55.   </mx:ControlBar>  
  56.  
  57. </mx:Panel>

5// Zusammenfügen der einzelnen Elemente

{{Listing main.mxml}}

  1.  
  2. <mx:WindowedApplication xmlns:mx=“http://www.adobe.com/2006/mxml“
  3.     layout=“absolute“ minWidth=“800“ minHeight=“600“
  4.     creationComplete=“onCreationComplete()“>
  5.  
  6.   <mx:Script>
  7.     <![CDATA[
  8.      import mx.events.ListEvent;
  9.      import com.simonwidjaja.workshop.BookmarkVO;
  10.      import com.simonwidjaja.workshop.EditView;
  11.      import mx.managers.PopUpManager;
  12.      import com.simonwidjaja.workshop.DatabaseConnector;
  13.  
  14.      [Bindable]
  15.      private var connector:DatabaseConnector =  DatabaseConnector.getInstance();
  16.  
  17.      private function onCreationComplete():void {
  18.        connector.connect();
  19.      }
  20.      private function openEditView( action:String ):void {
  21.        var popup:EditView = PopUpManager.createPopUp( this, EditView, true ) as EditView;
  22.        popup.bookmark = ( myDataGrid.selectedItem ) ? myDataGrid.selectedItem as BookmarkVO : new BookmarkVO();
  23.        PopUpManager.centerPopUp( popup );
  24.      }
  25.      private function onDeleteClick():void {
  26.        var selectedBookmark:BookmarkVO = myDataGrid.selectedItem as BookmarkVO;
  27.        connector.deleteBookmark( selectedBookmark );
  28.      }
  29.      private function onDataGridChange( event:ListEvent ):void {
  30.        myHTML.location = ( event.itemRenderer.data as BookmarkVO ).url;
  31.      }
  32.    ]]>
Post Tags: , , , , , ,