18 Replies Latest reply on Mar 11, 2010 2:17 AM by Coder_BJK

    Flex List Item Refreshing

    Coder_BJK Level 1

      Hello,

       

      I'm coding mini chat application in Flex 3.0 with PHP & MySQL.  I can insert data which in TextInput, also i can get data from database, but i have a little bit problem. I've added a timer to refresh List item (List item is getting data in mysql). But i couldnt. I refreshed the ArrayCollection but it doesnt work.

       

      Here is the some codes of application.

       

      <mx:HTTPService id="db2" url="http://localhost/flex/list.php" result="resultHandler(event)" />

       

                  [Bindable]
                  var datalist:ArrayCollection;

       

                  private function resultHandler(e:ResultEvent):void {
                      datalist = db2.lastResult.data.chat;
                      lst.dataProvider = datalist;
                  }

       

       

      <mx:List labelField="tex" width="322" height="216" id="lst" editable="false" />

       

      What should i do ?

       

      Thanks

        • 1. Re: Flex List Item Refreshing
          Francisc Level 3

          Normally having an ArrayCollection dataProvider with the [Bindable] property set should always reflect data change.

           

          Try this:

           

          [Bindable] var datalist:ArrayCollection=new ArrayCollection();//if you instatiate the var in the creationComplete handler of your app you should remove it from here or from there

          private function resultHandler(e:ResultEvent):void

          {
               datalist = db2.lastResult.data.chat;
          }

           

           

          <mx:List labelField="tex" width="322" height="216" id="lst" editable="false" dataProvider="{datalist}"/>

          • 2. Re: Flex List Item Refreshing
            Coder_BJK Level 1

            Thanks for reply but it doesnt work. Here is the full flex code

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:utils="flash.utils.*" creationComplete="yukle();" horizontalAlign="center" verticalAlign="top">
                <mx:Script>
                    <![CDATA[
                        [Bindable] var datalist:ArrayCollection = new ArrayCollection;
                        import mx.rpc.events.ResultEvent;
                        import mx.controls.Alert;
                        import mx.collections.ArrayCollection;
                        import mx.events.CollectionEvent;
                        import mx.rpc.http.mxml.HTTPService;
                       
                        var tmr:Timer = new Timer(1000);
                       
                        private function yukle():void {
                            tmr.start();
                            tmr.addEventListener(TimerEvent.TIMER, refresh);
                            db2.send();
                        }
                       
                        private function refresh(e:TimerEvent):void {
                            db2.send();
                        }
                       
                        private function resultHandler(e:ResultEvent):void {
                            datalist = db2.lastResult.data.chat;
                            datalist.refresh();
                        }
                       
                        private function gonder(event:KeyboardEvent):void {
                               if (event.keyCode == 13) {
                                   if (msg.text != '') {
                                       db.send();
                                       msg.text = '';
                                       db2.send();
                                   }
                               }
                        }
                    ]]>
                </mx:Script>
               
                <mx:HTTPService id="db" url="http://localhost/flex/add.php" method="POST" >
                    <mx:request xmlns="">
                        <yazi>{msg.text}</yazi>
                    </mx:request>
                </mx:HTTPService>
               
                <mx:HTTPService id="db2" url="http://localhost/flex/list.php" result="resultHandler(event)" />

             

                <mx:Panel width="400" height="350" layout="vertical">
                    <mx:Form>
                        <mx:FormItem>
                            <mx:List labelField="teks" width="322" height="216" id="lst" editable="false" dataProvider="{datalist}" />
                        </mx:FormItem>
                        <mx:FormItem>
                            <mx:TextInput width="322" height="32" keyUp="gonder(event);" id="msg" />
                        </mx:FormItem>
                    </mx:Form>
                </mx:Panel>
            </mx:Application>

            • 3. Re: Flex List Item Refreshing
              Coder_BJK Level 1

              Can anyone help me ?

              • 4. Re: Flex List Item Refreshing
                Flex harUI Adobe Employee

                I don't see a result handler for the first httpservice

                • 5. Re: Flex List Item Refreshing
                  Bryan Dresselhaus Level 1

                  Should try:

                   

                  datalist = ArrayCollection(db2.lastResult.data.chat);

                  • 6. Re: Flex List Item Refreshing
                    Coder_BJK Level 1

                    datalist = ArrayCollection(db2.lastResult.data.chat); (it doesnt work)

                     

                    Here is the last condition of codes

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:utils="flash.utils.*" creationComplete="start();" horizontalAlign="center" verticalAlign="top">
                        <mx:Script>
                            <![CDATA[
                                [Bindable] var datalist:ArrayCollection = new ArrayCollection();
                                import mx.rpc.events.ResultEvent;
                                import mx.controls.Alert;
                                import mx.collections.ArrayCollection;
                                import mx.events.CollectionEvent;
                               
                                private function start():void {
                                    datalist.addEventListener(CollectionEvent.COLLECTION_CHANGE, dataChanged);
                                    db2.send();
                                }
                               
                                private function dataChanged(e:CollectionEvent):void {
                                    Alert.show('Data Changed');
                                }
                               
                                private function db2Result(e:ResultEvent):void {
                                    Alert.show('data came');
                                    datalist = db2.lastResult.data.chat;
                                    datalist.refresh();
                                    lst.invalidateList();
                                }
                               
                                private function dbResult(e:ResultEvent):void {
                                    Alert.show('data sent');
                                    db2.send();
                                }
                               
                                private function sendmsg(event:KeyboardEvent):void {
                                       if (event.keyCode == 13) {
                                           if (msg.text != '') {
                                               db.send();
                                               msg.text = '';
                                           }
                                       }
                                }
                            ]]>
                        </mx:Script>
                       
                        <mx:HTTPService id="db" url="http://localhost/flex/add.php" method="POST" result="dbResult(event)">
                            <mx:request xmlns="">
                                <yazi>{msg.text}</yazi>
                            </mx:request>
                        </mx:HTTPService>
                       
                        <mx:HTTPService id="db2" url="http://localhost/flex/list.php" result="db2Result(event)" />

                     

                        <mx:Panel width="400" height="350" layout="vertical">
                            <mx:Form>
                                <mx:FormItem>
                                    <mx:List labelField="teks" width="322" height="216" id="lst" editable="false" dataProvider="{datalist}" />
                                </mx:FormItem>
                                <mx:FormItem>
                                    <mx:TextInput width="322" height="32" keyUp="sendmsg(event);" id="msg" />
                                </mx:FormItem>
                            </mx:Form>
                        </mx:Panel>
                    </mx:Application>

                    • 7. Re: Flex List Item Refreshing
                      dzeikei Level 2

                      Try skipping the whole datalist variable and try:

                       

                       <mx:List labelField="teks" width="322" height="216" id="lst" editable="false" dataProvider="{db2.lastResult.data.chat}" />
                      


                      If it doesn't work, I would actually check if the data coming back from the backend is correct.

                      • 8. Re: Flex List Item Refreshing
                        Coder_BJK Level 1

                        It doesnt work. I'm sure that data is coming, because i put alert command when data comes and it works. But it still doesnt refresh. I dont know what i should do.

                        • 9. Re: Flex List Item Refreshing
                          dzeikei Level 2

                          I meant check if the data you get back from backend is indeed a 

                          different data. I don't see why it shouldn't work in the code you 

                          posted.

                          If all else fails, try cleaning your project, clear browser cache, 

                          restart flex builder and browser then try again. Sometimes compiler 

                          cache and browsers do weird stuff, especially firefox.

                          • 10. Re: Flex List Item Refreshing
                            Francisc Level 3

                            Flex Binding works, so the doubt should not be there.

                             

                            As dzeikei said, check to see if you get data in the way you think you do, including names of properties. Use the debugger for this.

                            • 11. Re: Flex List Item Refreshing
                              Matt Le Fevre Level 4

                              Coder_BJK wrote:

                               

                              Hello,

                               

                              I'm coding mini chat application in Flex 3.0 with PHP & MySQL.  I can insert data which in TextInput, also i can get data from database, but i have a little bit problem. I've added a timer to refresh List item (List item is getting data in mysql). But i couldnt. I refreshed the ArrayCollection but it doesnt work.

                               

                              Here is the some codes of application.

                               

                              <mx:HTTPService id="db2" url="http://localhost/flex/list.php" result="resultHandler(event)" />

                               

                                          [Bindable]
                                          var datalist:ArrayCollection;

                               

                                          private function resultHandler(e:ResultEvent):void {
                                              datalist = db2.lastResult.data.chat;
                                              lst.dataProvider = datalist;
                                          }

                               

                               

                              <mx:List labelField="tex" width="322" height="216" id="lst" editable="false" />

                               

                              What should i do ?

                               

                              Thanks

                               

                              try sending a datadump along with the HTTP service, for example:

                               

                              <mx:Script>
                              <![CDATA[
                              
                              [Bindable]
                              public var dataDump:String = "sdjkfhsjkdfh";
                              
                              ]]>
                              </mx:Script>
                              
                              <mx:HTTPService id="db2" method="POST" url="http://localhost/flex/list.php" result="resultHandler(event)">
                              <mx:request xmlns="">
                                          <dataDump>
                                              {dataDump}
                                          </dataDump>
                                      </mx:request>
                              </mx:HTTPService>
                              

                               

                              this prevents Flex from caching information from HTTPService requests, which appears to be your problem here.

                               

                               

                              I've had this problem alot in the past, including in my own mini-chat app i made using PHP&MySQL. What i've mentioned fixed the issue for me.

                              • 12. Re: Flex List Item Refreshing
                                Coder_BJK Level 1

                                Thanx for all replies but problem still exists.

                                 

                                I've cleared browser cache ( still doesnt work )

                                 

                                I've put dataDump ( still doesnt work )

                                 

                                I couldn solve the problem despite everything. I guess i'll be mad

                                 

                                if anyone write little bit example about this or solve the problem, i'll very happy.

                                 

                                (i can upload all files (mxml, php, sql) if anyone wants)

                                • 13. Re: Flex List Item Refreshing
                                  Francisc Level 3

                                  Yeah, post the Project Archive from Flex Builder and the PHP+SQL Dump.

                                   

                                  If you can provide those, I will recreate your enviroment on my PC and see what's wrong.

                                  1 person found this helpful
                                  • 15. Re: Flex List Item Refreshing
                                    dzeikei Level 2

                                    Try attaching a timestamp as a urlvariable so every call is an unique 

                                    Request. Eg. new Date().getTime()

                                     

                                    Browser may be assuming that list.php is a static page and returning 

                                    cached data.

                                    • 16. Re: Flex List Item Refreshing
                                      Coder_BJK Level 1

                                      I've attached it but didnt work. i'm not assuming that browser is sending cached data. Because when i send a message and run the project again, new data is coming. Can any problem be in flex ? I'm amazed from this condition

                                      • 17. Re: Flex List Item Refreshing
                                        Matt Le Fevre Level 4

                                        Here's a very grubby example of how to do it, it needs alot of tidying up but i'll leave you to do that

                                         

                                         

                                        Flex code:

                                         

                                        <?xml version="1.0" encoding="utf-8"?>
                                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                                            
                                            <mx:Script>
                                                <![CDATA[
                                                    import mx.rpc.events.ResultEvent;
                                                    
                                                    [Bindable]
                                                    public var dataDump:String = "jfhkjshfjksdf";
                                                    
                                                    import flash.utils.Timer;
                                                    import flash.events.TimerEvent;
                                        
                                                    private const MIN_MASK:String = "00";
                                                    private const SEC_MASK:String = "00";
                                                    private const MS_MASK:String = "000";
                                                    private const TIMER_INTERVAL:int = 10;
                                        
                                                    private var baseTimer:int;
                                        
                                                    private var t:Timer;
                                        
                                                    private function init():void {
                                                        getMessages.send();
                                                        t = new Timer(TIMER_INTERVAL);
                                                        t.addEventListener(TimerEvent.TIMER, updateTimer);
                                                        startTimer();
                                                    }
                                        
                                                    private function updateTimer(evt:TimerEvent):void {
                                                        var d:Date = new Date(getTimer() - baseTimer);
                                                        var min:String = (MIN_MASK + d.minutes).substr(-MIN_MASK.length);
                                                        var sec:String = (SEC_MASK + d.seconds).substr(-SEC_MASK.length);
                                                        var ms:String = (MS_MASK + d.milliseconds).substr(-MS_MASK.length);
                                                        
                                                        if (sec == "01")
                                                        {
                                                            getMessages.send();
                                                            stopTimer();
                                                        }
                                                    }
                                        
                                                    private function startTimer():void {
                                                        baseTimer = getTimer();
                                                        t.start();
                                                    }
                                        
                                                    private function stopTimer():void {
                                                        t.stop();
                                                        startTimer();
                                                    }
                                        
                                                    
                                                    public function handleMessages(evt:ResultEvent):void
                                                    {
                                                        msgList.dataProvider = evt.result.msg;
                                                    }
                                                    
                                                    public function clear():void
                                                    {
                                                        messageInput.text = "";
                                                    }
                                                    
                                                    [Bindable]
                                                    public var newMsg:String;
                                                    
                                                    public function newMessage():void
                                                    {
                                                        newMsg = messageInput.text;
                                                        sendMessages.send();
                                                    }
                                                    
                                                ]]>
                                            </mx:Script>
                                            
                                            
                                            <mx:HTTPService id="getMessages" method="POST" result="handleMessages(event)" url="http://localhost/getMsg.php">
                                                <mx:request xmlns="">
                                                    <dataDump>
                                                        {dataDump}
                                                    </dataDump>
                                                </mx:request>
                                            </mx:HTTPService>
                                            
                                            <mx:HTTPService id="sendMessages" method="POST" result="clear()" url="http://localhost/sendMsg.php">
                                                <mx:request xmlns="">
                                                    <message>
                                                        {newMsg}
                                                    </message>
                                                </mx:request>
                                            </mx:HTTPService>
                                            
                                            <mx:List id="msgList" x="10" y="10" width="382" height="399" labelField="message"/>
                                            <mx:Button id="sendBtn" x="327" y="417" label="Send Message" enabled="{messageInput.text != ''}" click="newMessage()"/>
                                            <mx:TextInput id="messageInput" x="10" y="417" width="309"/>
                                            
                                        </mx:Application>
                                        
                                        

                                         

                                        sendMsg.php

                                         

                                        <?php
                                            mysql_connect("localhost", "root", "test");
                                            mysql_select_db("quickcomm");
                                            
                                            $msg = mysql_real_escape_string($_POST["message"]);
                                            
                                            mysql_query("INSERT INTO chat (message) VALUES ('$msg')");
                                        
                                        ?>
                                        

                                         

                                        getMsg.php

                                         

                                        <?php
                                            mysql_connect("localhost", "root", "test");
                                            mysql_select_db("quickcomm");
                                            
                                            $result = mysql_query("SELECT * FROM chat");
                                        
                                            while($row = mysql_fetch_array($result))
                                            {
                                              echo "<msg><message>".$row["message"]."</message></msg>";
                                            }
                                        
                                        ?>
                                        

                                         


                                        here's the Database structure as well

                                        comm.JPG

                                         

                                         

                                        i've tested it on my computer and it works absolutely fine, so if it still doesn't work, you've got something else going wrong.

                                         

                                         

                                        Also, note what happens when you remove the dataDump from the HTTPService.

                                        • 18. Re: Flex List Item Refreshing
                                          Coder_BJK Level 1

                                          Yes it finally works

                                           

                                          But its so different and complicated from my codes, i try to understand these codes Thanks for all replies.