Как отобразить данные с помощью ArrayCollection (SQLite db) для элемента управления, который без dataProvider?

Question

Я знаю, как отобразить данные в элементе управления List, используя dataProvider, но как насчет элемента управления, у которого нет dataProvider, например, TextInput, Label contorl?

Я знаю, как отобразить данные в элементе управления List, используя dataProvider, ноКак насчет элемента управления, который не имеет 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>

Попробуйте использовать {dp.ID} и {dp.getItemAt (0).ID} в TextInput, но ничего не отображается?

Спасибо.

Как заставить TextInput id = "firstName" отображать данные SQL?

Answer 1

Я думаю, вы должны просто присвоить значение объекту TextInput или использовать другую привязываемую строковую переменную для привязки к той, которую вы затем назначаете в методе. Во время компиляции вы должны увидеть предупреждение о том, что он не сможет использовать привязки в этой строке, когда вы выполните getItemAt, как я полагаю. dp.ID не имеет смысла, так как поставщик данных типизируется как коллекция массивов, а сама коллекция не имеет свойства ID. Привязки по сути работают, создавая отправку события каждый раз, когда вызывается установщик для свойства, за кулисами компилятор mxml добавляет установщик и получатель для свойства, которое вы помечаете как связываемое, и автоматически отправляет событие, когда вызывается установщик и значение имеет изменилось. Это событие фиксируется и устанавливается на то, что вы «привязали» к нему. Я скопировал ваш код ниже и изменил:

РЕДАКТИРОВАТЬ (снова вставил ваш код сверху, два варианта из того, что я вижу ниже):

Вариант 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 (при условии, что вы хотите связать на основе выбранного элемента в списке):

<?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>