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?
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:
Option 2 (assuming that you want to bind based on the selectedItem in the list):