jameslcs
Reputation: 265
How to display data using ArrayCollection (SQLite db) to a control that without dataProvider?
I know how to display data in a List control using dataProvider but what about control that don't have dataProvider e.g. TextInput, Label contorl?
I know how to display data in a List control using dataProvider but what about control that don't have dataProvider e.g. TextInput, Label contorl?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
creationComplete="view1_creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
private var db:File = File.userDirectory.resolvePath("users01.db");
private var conn:SQLConnection;
private var Stmt:SQLStatement;
[Bindable]private var dp:ArrayCollection = new ArrayCollection();
protected function view1_creationCompleteHandler(event:FlexEvent):void {
conn = new SQLConnection();
conn.addEventListener(SQLEvent.OPEN, openHandler);
conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
conn.openAsync(db);
}
private function openHandler(event:SQLEvent):void {
log.text += "Database opened successfully";
conn.removeEventListener(SQLEvent.OPEN, openHandler);
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "CREATE TABLE IF NOT EXISTS UserTable (" +
"userId INTEGER PRIMARY KEY AUTOINCREMENT," +
"userLevel," +
"firstName TEXT," + "lastName TEXT)";
Stmt.addEventListener(SQLEvent.RESULT, createResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
private function createResult(event:SQLEvent):void {
log.text += "\nTable created";
conn.removeEventListener(SQLEvent.RESULT, createResult);
showResult();
}
private function errorHandler(event:SQLErrorEvent):void {
log.text += "\nError message: " + event.error.message;
log.text += "\nDetails: " + event.error.details;
}
private function insertResult(event:SQLEvent):void {
log.text += "\nInsert completed";
showResult();
}
private function showResult():void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "SELECT * FROM UserTable";
Stmt.addEventListener(SQLEvent.RESULT, selectResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
private function selectResult(event:SQLEvent):void {
log.text += "\nSelect completed";
var result:SQLResult = Stmt.getResult();
listBox.dataProvider=new ArrayCollection(result.data);
}
protected function Save(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "INSERT INTO UserTable (firstName, lastName, userLevel)" +
"VALUES (:firstName, :lastName, :userLevel)";
Stmt.parameters[":firstName"] = firstName.text;
Stmt.parameters[":lastName"] = lastName.text;
Stmt.parameters[":userLevel"] = ID.text;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
protected function Delete(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text="DELETE FROM UserTable WHERE lastName = ?";
Stmt.parameters[0] = listBox.selectedItem.lastName;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
trace("record deleted");
}
protected function Update(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "UPDATE UserTable SET " +
"firstName=:firstName, " +
"lastName = :lastName " +
"WHERE userLevel = :userLevel2";
Stmt.parameters[":firstName"] = firstName.text;
Stmt.parameters[":lastName"] = lastName.text;
Stmt.parameters[":userLevel2"] = ID.text;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
]]>
</fx:Script>
<s:Label text="FirstName" top="8" left="5"/>
<s:TextInput id="firstName" left="-1" top="36" width="233" height="80"/>
<s:Label text="LastName" top="0" left="248"/>
<s:TextInput id="lastName" left="231" top="32" width="224" height="84"/>
<s:Label text="ID" top="0" left="483"/>
<s:TextInput id="ID" left="463" top="32" width="167" height="84"/>
<s:Button left="10" top="151" width="121" height="54" label="Save" click="Save(event)"/>
<s:Button left="139" top="151" width="146" height="54" label="Delete" click="Delete(event)" enabled="{listBox.selectedIndex != -1}"/>
<s:Button left="293" top="151" width="147" height="54" label="Update" click="Update(event)"/>
<s:List id="listBox" x="-1" y="265" width="641" height="167" itemRenderer="UserRenderer"></s:List>
<s:TextArea id="log" x="0" bottom="4" width="100%" height="221"/>
</s:View>
Try to use {dp.ID} and {dp.getItemAt(0).ID} on TextInput but nothing being display?
Thanks.
How to make TextInput id="firstName" able to display the SQL data?
Upvotes: 0
Views: 1450
Answers (1)
shaunhusain
Reputation: 19748
I think you should just assign the value to the TextInput object or else use another bindable string variable to bind to that you then assign in the method. You should see a warning in during compilation that it won't be able to use bindings on that line when you do the getItemAt I believe. dp.ID wouldn't make sense as the dataprovider is typed as an array collection and the collection itself has no ID property. Bindings essentially work by creating an event dispatch any time the setter for a property is called, behind the scenes the mxml compiler will add a setter and getter for the property you mark bindable and automatically dispatch an event when the setter is called and the value has changed. That event is captured and is set to whatever things you "bound" to it. I copied your code below and modified:
EDIT (pasted your code from above again, two options from what I see below):
Option 1 based on what I originally saw:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
creationComplete="view1_creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
private var db:File = File.userDirectory.resolvePath("users01.db");
private var conn:SQLConnection;
private var Stmt:SQLStatement;
[Bindable]private var dp:ArrayCollection = new ArrayCollection();
protected function view1_creationCompleteHandler(event:FlexEvent):void {
conn = new SQLConnection();
conn.addEventListener(SQLEvent.OPEN, openHandler);
conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
conn.openAsync(db);
}
private function openHandler(event:SQLEvent):void {
log.text += "Database opened successfully";
conn.removeEventListener(SQLEvent.OPEN, openHandler);
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "CREATE TABLE IF NOT EXISTS UserTable (" +
"userId INTEGER PRIMARY KEY AUTOINCREMENT," +
"userLevel," +
"firstName TEXT," + "lastName TEXT)";
Stmt.addEventListener(SQLEvent.RESULT, createResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
private function createResult(event:SQLEvent):void {
log.text += "\nTable created";
conn.removeEventListener(SQLEvent.RESULT, createResult);
showResult();
}
private function errorHandler(event:SQLErrorEvent):void {
log.text += "\nError message: " + event.error.message;
log.text += "\nDetails: " + event.error.details;
}
private function insertResult(event:SQLEvent):void {
log.text += "\nInsert completed";
showResult();
}
private function showResult():void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "SELECT * FROM UserTable";
Stmt.addEventListener(SQLEvent.RESULT, selectResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
private function selectResult(event:SQLEvent):void {
log.text += "\nSelect completed";
var result:SQLResult = Stmt.getResult();
listBox.dataProvider=new ArrayCollection(result.data);
if(result.data.length>0) //I ADDED THIS
firstName.text = result.data[0].firstName; //I ADDED THIS
}
protected function Save(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "INSERT INTO UserTable (firstName, lastName, userLevel)" +
"VALUES (:firstName, :lastName, :userLevel)";
Stmt.parameters[":firstName"] = firstName.text;
Stmt.parameters[":lastName"] = lastName.text;
Stmt.parameters[":userLevel"] = ID.text;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
protected function Delete(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text="DELETE FROM UserTable WHERE lastName = ?";
Stmt.parameters[0] = listBox.selectedItem.lastName;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
trace("record deleted");
}
protected function Update(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "UPDATE UserTable SET " +
"firstName=:firstName, " +
"lastName = :lastName " +
"WHERE userLevel = :userLevel2";
Stmt.parameters[":firstName"] = firstName.text;
Stmt.parameters[":lastName"] = lastName.text;
Stmt.parameters[":userLevel2"] = ID.text;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
]]>
</fx:Script>
<s:Label text="FirstName" top="8" left="5"/>
<s:TextInput id="firstName" left="-1" top="36" width="233" height="80"/>
<s:Label text="LastName" top="0" left="248"/>
<s:TextInput id="lastName" left="231" top="32" width="224" height="84"/>
<s:Label text="ID" top="0" left="483"/>
<s:TextInput id="ID" left="463" top="32" width="167" height="84"/>
<s:Button left="10" top="151" width="121" height="54" label="Save" click="Save(event)"/>
<s:Button left="139" top="151" width="146" height="54" label="Delete" click="Delete(event)" enabled="{listBox.selectedIndex != -1}"/>
<s:Button left="293" top="151" width="147" height="54" label="Update" click="Update(event)"/>
<s:List id="listBox" x="-1" y="265" width="641" height="167" itemRenderer="UserRenderer"></s:List>
<s:TextArea id="log" x="0" bottom="4" width="100%" height="221"/>
</s:View>
Option 2 (assuming that you want to bind based on the selectedItem in the list):
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
creationComplete="view1_creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
private var db:File = File.userDirectory.resolvePath("users01.db");
private var conn:SQLConnection;
private var Stmt:SQLStatement;
[Bindable]private var dp:ArrayCollection = new ArrayCollection();
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
conn = new SQLConnection();
conn.addEventListener(SQLEvent.OPEN, openHandler);
conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
conn.openAsync(db);
}
private function openHandler(event:SQLEvent):void {
log.text += "Database opened successfully";
conn.removeEventListener(SQLEvent.OPEN, openHandler);
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "CREATE TABLE IF NOT EXISTS UserTable (" +
"userId INTEGER PRIMARY KEY AUTOINCREMENT," +
"userLevel," +
"firstName TEXT," + "lastName TEXT)";
Stmt.addEventListener(SQLEvent.RESULT, createResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
private function createResult(event:SQLEvent):void {
log.text += "\nTable created";
conn.removeEventListener(SQLEvent.RESULT, createResult);
showResult();
}
private function errorHandler(event:SQLErrorEvent):void {
log.text += "\nError message: " + event.error.message;
log.text += "\nDetails: " + event.error.details;
}
private function insertResult(event:SQLEvent):void {
log.text += "\nInsert completed";
showResult();
}
private function showResult():void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "SELECT * FROM UserTable";
Stmt.addEventListener(SQLEvent.RESULT, selectResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
private function selectResult(event:SQLEvent):void {
log.text += "\nSelect completed";
var result:SQLResult = Stmt.getResult();
listBox.dataProvider=new ArrayCollection(result.data);
listBox.selectedIndex = 0; //I ADDED THIS
}
protected function Save(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "INSERT INTO UserTable (firstName, lastName, userLevel)" +
"VALUES (:firstName, :lastName, :userLevel)";
Stmt.parameters[":firstName"] = firstName.text;
Stmt.parameters[":lastName"] = lastName.text;
Stmt.parameters[":userLevel"] = ID.text;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
protected function Delete(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text="DELETE FROM UserTable WHERE lastName = ?";
Stmt.parameters[0] = listBox.selectedItem.lastName;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
trace("record deleted");
}
protected function Update(event:MouseEvent):void {
Stmt = new SQLStatement();
Stmt.sqlConnection = conn;
Stmt.text = "UPDATE UserTable SET " +
"firstName=:firstName, " +
"lastName = :lastName " +
"WHERE userLevel = :userLevel2";
Stmt.parameters[":firstName"] = firstName.text;
Stmt.parameters[":lastName"] = lastName.text;
Stmt.parameters[":userLevel2"] = ID.text;
Stmt.addEventListener(SQLEvent.RESULT, insertResult);
Stmt.addEventListener(SQLErrorEvent.ERROR, errorHandler);
Stmt.execute();
}
]]>
</fx:Script>
<!-- I ADDED STUFF HERE -->
<s:Label text="FirstName" top="8" left="5" />
<s:TextInput id="firstName" left="-1" top="36" width="233" height="80" text="@{listBox.selectedItem.firstName}" />
<s:Label text="LastName" top="0" left="248"/>
<s:TextInput id="lastName" left="231" top="32" width="224" height="84"/>
<s:Label text="ID" top="0" left="483"/>
<s:TextInput id="ID" left="463" top="32" width="167" height="84"/>
<s:Button left="10" top="151" width="121" height="54" label="Save" click="Save(event)"/>
<s:Button left="139" top="151" width="146" height="54" label="Delete" click="Delete(event)" enabled="{listBox.selectedIndex != -1}"/>
<s:Button left="293" top="151" width="147" height="54" label="Update" click="Update(event)"/>
<s:List id="listBox" x="-1" y="265" width="641" height="167" itemRenderer="UserRenderer"></s:List>
<s:TextArea id="log" x="0" bottom="4" width="100%" height="221"/>
</s:View>
Upvotes: 1
Related Questions
- Flex : arrayCollection in dataProvider
- Assigning arraycollection in component as dataprovider for datagrid in main app
- How to bind flex ArrayCollection's data in column of AdvancedDataGrid
- In Flash Builder 4.6: Displaying data from an Object in an ArrayCollection as a label
- Adobe Air: need help transferring data from sqlite to components
- Flex, Putting SQLite result into a ItemRenderer
- ArrayCollection of One Element as DataProvider
- Use a Global ArrayCollection in Flash Builder Mobile application?
- Data Grid not displaying data in array collection
- define a class implements ICollectionView, which can use as ComboBox or DataGrid's dataProvider(not build-in class)