Friday, May 11, 2012

KirSQLite - Flex AIR Database Manager: Part 10

In this tutorial we'll add a field that will display the latest executed SQL Statement to the user.

This feature may prove useful for many reasons. For example, the user might need to track the commands to be able to undo them. Or he'd like to check the database names before writing a manual SQL query. This will also be very useful to the developers (us!) for debugging.

Go to the VGroup with the TabNavigator in it and place this Box above the TabNavigator:

<mx:Box height="80" width="100%">
<s:VGroup paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" width="100%" height="100%">
<s:HGroup width="100%" verticalAlign="middle">
<s:Label width="100%">Latest SQL statement:</s:Label>
<s:Button width="100" label="View history" click="openHistory();" />
</s:HGroup>
<s:TextArea id="statementText" editable="false" width="100%" height="30"/>
</s:VGroup>
</mx:Box>

As you can see, the user sees a TextArea with an id of statementText, as well as a label and a button labeled "View history". The click event handler of the button is set to openHistory().

Declare a new array, sqlHistory:

private var sqlHistory:Array = [];

Add a new function lastStatement(), which receives a String value of the statement.

The function sets statementText's text to this value, and pushes it to sqlHistory array:

private function lastStatement(text:String):void {
statementText.text = text;
sqlHistory.push(text);
}

Now we call this function and pass the statement query text as the parameter each time we execute an SQLStatement object. You'll see it in the full code in the end of this tutorial.

Now, create a new TitleWindow in the Declarations tags. Give it an id of historyWindow, set its close event handler to closeHistoryWindow() and add a TextArea with an id "historyText".

<mx:TitleWindow id="historyWindow" title="SQL History" close="closeHistoryWindow();" showCloseButton="true">
<mx:Box width="100%" height="100%" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
<s:TextArea id="historyText" width="100%" height="100%" editable="false" />
</mx:Box>
</mx:TitleWindow>

Now create the openHistory() function. Here, we add the pop up, set its size, center it and loop through the array's values to add them to the text area:

private function openHistory():void {
PopUpManager.addPopUp(historyWindow, this);
historyWindow.width = width - 100;
historyWindow.height = height - 100;
PopUpManager.centerPopUp(historyWindow);
historyText.text = "";
for (var i:int = sqlHistory.length - 1; i >= 0; i--) {
historyText.appendText(sqlHistory[i] + "\n");
}
}

The closeHistoryWindow() function closes the window:

private function closeHistoryWindow():void {
PopUpManager.removePopUp(historyWindow);
}

Thanks for reading!

No comments:

Post a Comment