Wednesday, May 2, 2012

KirSQLite - Flex AIR Database Manager: Part 1

Today we will start working on a new application - an SQLite database manager.

The goal is to make a program, which can be used as a tool to create, view, edit, search through databases. The SQL database engine we're using is SQLite.

As usual, I am using FlashDevelop to create the program. I highly recommend you do the same. Remember to update your software to the latest available version. Do the same with Flex and AIR SDK too.

Go to Project > New Project. Create a new Flex 4 AIR Projector, name it KirSQLite.

Now find the Main.mxml file in the newly generated src folder in the project directory, and let's start creating the layout of our application.

We're going to use the native toolbar menu thing, so we'll need to create an XML object in the Declarations tags with the menu contents. Right now, I'll just add 2 main menu items - Database and Table, but as I work on the project, I'll continue adding more items and subitems. Let's just have this for now:

<fx:XML id="windowMenu">
<root>
<menuitem label="Database">
<menuitem label="New" key="n" controlKey="true" />
<menuitem label="Open" key="o" controlKey="true" />
<menuitem label="Save" key="s" controlKey="true" />
<menuitem label="Save As.." key="s" controlKey="true" shiftKey="true" />
</menuitem>
<menuitem label="Table">
<menuitem label="New" key="t" controlKey="true" />
<menuitem label="Edit" key="e" controlKey="true" />
<menuitem label="Delete"/>
</menuitem>
</root>
</fx:XML>

You can see that the id of the XML object is windowMenu. We'll use it to declare the native menu using menu tags like this:

<s:menu>
<mx:FlexNativeMenu dataProvider="{windowMenu}" showRoot="false" labelField="@label" keyEquivalentField="@key"/>
</s:menu>

Now let's move below the toolbar. Here I'm going to have the screen divided in two areas - the first one will be a vertical bar, which will contain the databases that are open right now, with all their tables. We're going to use a Tree object for this.

The second area will be a larger one, and will consist of a TabNavigator. Once again, let's add just some basic content for the component so that we can (and probably will) add and change it later. The current NavigatorContent objects of the TabNavigator container will be "Table contents", "Edit columns" and "Query".

Let's add content for the first NavigatorContent for now. This content will be a big AdvancedDataGrid object.

For now, let's add some placeholder data for the AdvancedDataGrid and the Tree objects, to see what the program is going to look like with actual content.

<s:HGroup gap="0" width="100%" height="100%">
<s:VGroup width="200" height="100%" gap="0">
<mx:Tree width="100%" height="100%" dataProvider="{testTree}" showRoot="false" labelField="@label"/>
</s:VGroup>
<s:VGroup width="100%" height="100%" gap="0">
<mx:TabNavigator width="100%" height="100%" paddingTop="0">
<s:NavigatorContent label="Table contents">
<mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{testData}">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="idnum" headerText="ID" />
<mx:AdvancedDataGridColumn dataField="firstname" headerText="First name" />
<mx:AdvancedDataGridColumn dataField="lastname" headerText="Last name" />
<mx:AdvancedDataGridColumn dataField="age" headerText="Age"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:NavigatorContent>
<s:NavigatorContent label="Edit columns">

</s:NavigatorContent>
<s:NavigatorContent label="Query">

</s:NavigatorContent>
</mx:TabNavigator>
</s:VGroup>
</s:HGroup>

You can see that I've bound the Tree object's dataProvider to "testTree", and the AdvancedDataGrid one's to "testData". These both objects are placed within the Declarations tags (along with windowMenu), and are simple XMLList and ArrayCollection objects:

<fx:Declarations>
<fx:XML id="windowMenu">
<root>
<menuitem label="Database">
<menuitem label="New" key="n" controlKey="true" />
<menuitem label="Open" key="o" controlKey="true" />
<menuitem label="Save" key="s" controlKey="true" />
<menuitem label="Save As.." key="s" controlKey="true" shiftKey="true" />
</menuitem>
<menuitem label="Table">
<menuitem label="New" key="t" controlKey="true" />
<menuitem label="Edit" key="e" controlKey="true" />
<menuitem label="Delete"/>
</menuitem>
</root>
</fx:XML>
<fx:XMLList id="testTree">
<root>
<treeitem label="Database1">
<treeitem label="Table1"/>
<treeitem label="Table2"/>
<treeitem label="Table3"/>
</treeitem>
</root>
</fx:XMLList>
<mx:ArrayCollection id="testData">
<fx:Object idnum="1" firstname="John" lastname="Jackson" age="32" />
<fx:Object idnum="2" firstname="Ted" lastname="Jacobson" age="25" />
<fx:Object idnum="3" firstname="Bob" lastname="Smith" age="33" />
</mx:ArrayCollection>
</fx:Declarations>

Full code so far:

<?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" showStatusBar="false">
   
<s:menu>
<mx:FlexNativeMenu dataProvider="{windowMenu}" showRoot="false" labelField="@label" keyEquivalentField="@key"/>
</s:menu>

<fx:Declarations>
<fx:XML id="windowMenu">
<root>
<menuitem label="Database">
<menuitem label="New" key="n" controlKey="true" />
<menuitem label="Open" key="o" controlKey="true" />
<menuitem label="Save" key="s" controlKey="true" />
<menuitem label="Save As.." key="s" controlKey="true" shiftKey="true" />
</menuitem>
<menuitem label="Table">
<menuitem label="New" key="t" controlKey="true" />
<menuitem label="Edit" key="e" controlKey="true" />
<menuitem label="Delete"/>
</menuitem>
</root>
</fx:XML>
<fx:XMLList id="testTree">
<root>
<treeitem label="Database1">
<treeitem label="Table1"/>
<treeitem label="Table2"/>
<treeitem label="Table3"/>
</treeitem>
</root>
</fx:XMLList>
<mx:ArrayCollection id="testData">
<fx:Object idnum="1" firstname="John" lastname="Jackson" age="32" />
<fx:Object idnum="2" firstname="Ted" lastname="Jacobson" age="25" />
<fx:Object idnum="3" firstname="Bob" lastname="Smith" age="33" />
</mx:ArrayCollection>
</fx:Declarations>

<s:HGroup gap="0" width="100%" height="100%">
<s:VGroup width="200" height="100%" gap="0">
<mx:Tree width="100%" height="100%" dataProvider="{testTree}" showRoot="false" labelField="@label"/>
</s:VGroup>
<s:VGroup width="100%" height="100%" gap="0">
<mx:TabNavigator width="100%" height="100%" paddingTop="0">
<s:NavigatorContent label="Table contents">
<mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{testData}">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="idnum" headerText="ID" />
<mx:AdvancedDataGridColumn dataField="firstname" headerText="First name" />
<mx:AdvancedDataGridColumn dataField="lastname" headerText="Last name" />
<mx:AdvancedDataGridColumn dataField="age" headerText="Age"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:NavigatorContent>
<s:NavigatorContent label="Edit columns">

</s:NavigatorContent>
<s:NavigatorContent label="Query">

</s:NavigatorContent>
</mx:TabNavigator>
</s:VGroup>
</s:HGroup>

</s:WindowedApplication>

We'll continue in the next part!

Thanks for reading!

No comments:

Post a Comment