2 Replies Latest reply on Mar 26, 2011 1:48 PM by lazurens2011

    dataGrid to List transition

    lazurens2011

      Hello everybody,

      I have a challenge with the project that I still doing it, which is transition between dataGrid and List.

      More clearly, I have a list that displays it is Item from an xml file using "Model"

       

      The list

       

      <mx:List  id="CourseSourceList" dataProvider="{products}" labelField="title"

        change="list1_changeHandler(event,List(event.currentTarget).selectedItem)" x="103" y="77" height="350" width="198"/>

       

      and the list takes its source from a model as I told you here is the declaration :

       

      Declaration Tag

       

      <fx:Declarations>

      <fx:Model id="model" source="assets/Copyofdata.xml"/>

      <s:ArrayList id="products" source="{model.video}"/>

      <s:ArrayCollection id="coursesArray"/> <!--this array contains the rows of the dataGrid so I can access the row easily-->

      </fx:Declarations>

       

      As you see, I have also a dataGrid that takes it is informations fom database, what I want to do, is when I double click on an item in the dataGrid, the list changes and displays the items with the source of the xml file that is stored on the database.

       

      Do you have an idea about how to do this ?

       

      I tried this with the code below :

       

       

      Header 1

      <mx:DataGrid x="91" y="296" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAllCourseResult.lastResult}"

      showHeaders="false" doubleClickEnabled="true" doubleClick="play(event)" >

      <mx:columns>

      <mx:DataGridColumn headerText="img" dataField="img"/>

      <mx:DataGridColumn headerText="title" dataField="title"/>

      <mx:DataGridColumn headerText="description" dataField="description"/>

      </mx:columns>

      </mx:DataGrid>

      The script of the "play(event)" function:

      protected function play(event:Event):void

      {

      model.source = coursesArray[dataGrid.selectedIndex].src;

      CourseSourceList.dataProvider = coursesArray[dataGrid.selectedIndex].src;

      }

       

      The problem of this solution is that the source of the xml file is written on the List as an item, instead I need the "src" to be read as a source of the List to display the children of it as items in the List.

       

      Waiting for your reply,

      thanks,

        • 1. Re: dataGrid to List transition
          lazurens2011 Level 1

          any help or suggestion guys ? !

          • 2. Re: dataGrid to List transition
            lazurens2011 Level 1

            Hello everybody,

            I see that no one really care about this lol

            The good news is that I solved the problem after some essays , and theorically I will describe the solution that I presented in the first post by using "<fx:Model>" to connect physically to the XML file and then assign that to an array List where it will be the source to the list "dataProvider", that was a static call for a single file, and the goal was to connect dynamically throw a dataGrid by double clicking a row and the source of an XML file will be provided to the List control.

             

            The solution is by simply using an HttpService and here we go I'll paste the solution and if anyone has a problem can ask

             

            Col 1 (Action script)Col 2 (MXML code)

            import com.adobe.fiber.core.model_internal;

             

            import flashx.textLayout.events.ModelChange;

             

            import mx.controls.Alert;

            import mx.events.FlexEvent;

            import mx.events.ListEvent;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.events.ResultEvent;

             

            import org.osmf.events.MediaPlayerStateChangeEvent;

            import org.osmf.events.TimeEvent;

             

            protected function vpCompleteHandler(event:TimeEvent):void {

            myTA.text = "Video complete - restarting."

            }

             

            protected function vpMediaPlayerStateChangeHandler(event:MediaPlayerStateChangeEvent):void {

            if (event.state == "loading")

            myTA.text = "loading ...";

            if (event.state == "playing")

            myTA.text = "playing ...";

            }

             

            protected function list1_changeHandler(event:ListEvent, item:Object):void

            {

            var src:String = item.src;

            myVideoPlayer.source = src;

            }

             

            protected function dataGrid_creationCompleteHandler(event:FlexEvent):void

            {

            getAllCourseResult.token = courseService.getAllCourse();

            getAllCourseResult.addEventListener(ResultEvent.RESULT,onResult);

            }

            protected function onResult(event:ResultEvent):void

            {

             

            for (var i:int=0 ;i< event.result.length;i++){

            coursesArray.addItem(event.result[i]);

            }

             

            }

            protected function play(event:Event):void

            {

             

            loadGallery(coursesArray[dataGrid.selectedIndex].src);

             

            }

             

            //HttpService

             

            private var alert:Alert;

             

            private function loadGallery(src:String):void {

            httpService.url = src;

            httpService.send();

            }

            private function httpService_fault(evt:FaultEvent):void {

            var title:String = evt.type + " (" + evt.fault.faultCode + ")";

            var text:String = evt.fault.faultString;

            alert = Alert.show(text, title);

            xmlListColl.removeAll();

            }

             

            private function httpService_result(evt:ResultEvent):void {

            var xmlList:XMLList = XML(evt.result).video;

            xmlListColl = new XMLListCollection(xmlList);

            }

            ]]>

            </fx:Script>

            <s:ArrayCollection id="coursesArray"/>

            <mx:XMLListCollection id="xmlListColl" />

            <mx:HTTPService id="httpService"

            resultFormat="e4x"

            fault="httpService_fault(event);"

            result="httpService_result(event)" />

            </fx:Declarations>

             

            <s:TextArea id="myTA" width="450" height="25" enabled="false" x="308" y="435"/>

             

            <mx:List  id="CourseSourceList" dataProvider="{xmlListColl}" labelField="title"

              change="list1_changeHandler(event,List(event.currentTarget).selectedItem)" x="103" y="77" height="350" width="198"/>

            <s:VideoPlayer

            id="myVideoPlayer"

            width="450" height="350"

            loop="true"

            complete="vpCompleteHandler(event);"

            mediaPlayerStateChange="vpMediaPlayerStateChangeHandler(event);" x="308" y="77"/>

            <mx:DataGrid x="-2" y="308" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAllCourseResult.lastResult}"

            showHeaders="false" doubleClickEnabled="true" doubleClick="play(event)" >

            <mx:columns>

            <mx:DataGridColumn headerText="img" dataField="img"/>

            <mx:DataGridColumn headerText="title" dataField="title"/>

            <mx:DataGridColumn headerText="description" dataField="description"/>

            </mx:columns>

            </mx:DataGrid>