我知道如何使用dataProvider在List控件中显示数据,但是如果没有dataProvider的控件呢? TextInput,Label contorl?
我知道如何使用dataProvider在List控件中显示数据,但是如果没有dataProvider的控件呢? 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>
尝试在TextInput上使用 {dp.ID} 和 {dp.getItemAt(0).ID} ,但没有显示任何内容?
感谢。
如何使 TextInput id =“firstName”能够显示SQL数据?
答案 0 :(得分:1)
我认为您应该只将值赋给TextInput对象,或者使用另一个可绑定的字符串变量绑定到您在方法中分配的值。您应该在编译期间看到一个警告,当您执行getItemAt时,它将无法在该行上使用绑定。 dp.ID没有意义,因为dataprovider被输入为数组集合,而集合本身没有ID属性。绑定本质上是通过在调用属性的setter时创建事件调度来实现的,在幕后mxml编译器将为您标记为可绑定的属性添加setter和getter,并在调用setter时自动调度事件并且值具有改变。该事件被捕获并被设置为您“绑定”它的任何内容。我复制了下面的代码并进行了修改:
编辑(再次粘贴上面的代码,我从下面看到的两个选项):
选项1基于我最初看到的内容:
<?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>
选项2(假设您要根据列表中的selectedItem进行绑定):
<?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>