Thursday, June 7, 2012

KirSQLite - Flex AIR Database Manager: Part 37

In this tutorial we'll continue working on the Indices feature.

So far we have the indices displaying properly in the Tree, as well as two empty functions newIndex() and dropIndex().

When the user creates a new index, a window should pop up, where he would choose the name for his index, table, column (or columns) and check whether it should be a unique index.

First, declare a new ArrayCollection called indexTableColumns.

<mx:ArrayCollection id="indexTableColumns">

It will be used to store columns of a specific table, so that the user can select one or multiple columns.

Create a new TitleWindow object called indexWindow. Set its close event handler to closeIndexWindow(). Inside the container, add a TextInput with id "indexName", a CheckBox with id "indexUnique", a ComboBox with id "indexTableCombo" dataProvider {allTables} and labelField "name", a List object with id "indexColumnList" and dataProvider {indexTableColumns} and a Button with click event handler doNewIndex(); and enabled set to {indexColumnList.selectedIndex>-1}.

Also, set change event handler of indexTableCombo to updateIndexTableColumns():

<mx:TitleWindow id="indexWindow" title="Add a new index" close="closeIndexWindow();" showCloseButton="true">
<s:VGroup paddingTop="4">
<s:HGroup width="100%" verticalAlign="middle">
<s:Label>New index name: </s:Label>
<s:TextInput id="indexName" />
<mx:CheckBox label="Unique" id="indexUnique"/>
<s:HGroup width="100%" verticalAlign="middle">
<s:Label>Table: </s:Label>
<mx:ComboBox editable="false" id="indexTableCombo" dataProvider="{allTables}" labelField="name" width="100%" change="updateIndexTableColumns();"/>
<s:List allowMultipleSelection="true" width="100%" height="160" id="indexColumnList" dataProvider="{indexTableColumns}" />
<s:Button click="doNewIndex();" label="Add index" width="100%" enabled="{indexColumnList.selectedIndex>-1}" />

The closeIndexWindow() function closes the window:

private function closeIndexWindow():void {

Now, in newIndex(), we create and center this pop up, set default name for the index, loop through all the tables to add to allTables (which will then feed its data to indexTableCombo ComboBox). Then we call updateIndexTableColumns():

private function newIndex():void {
PopUpManager.addPopUp(indexWindow, this);

indexName.text = "UntitledIndex";

allTables = new ArrayCollection([]);
for (var u:int = 0; u < dbData..tb.length(); u++) {
var fullname:String = dbData..tb[u].@databaseName + "." + dbData..tb[u].@label;
allTables.addItem( { name: fullname, table: dbData..tb[u].@label, database: dbData..tb[u].@databaseName} );


This function, updateIndexTableColumns(), is called when the user selects a table, and when the columns are added and the first table is selected. Here we add values to indexTableColumns ArrayCollection by adding names of columns in the table to the array:

private function updateIndexTableColumns():void {
indexTableColumns = new ArrayCollection([]);
connection.loadSchema(SQLTableSchema, indexTableCombo.selectedItem.table, indexTableCombo.selectedItem.database);
var schema:SQLSchemaResult = connection.getSchemaResult();
for (var i:int = 0; i < schema.tables[0].columns.length; i++) {

The doNewIndex() function for now will just close the window:

private function doNewIndex():void {

Thanks for reading!

No comments:

Post a Comment