3 Replies Latest reply on Jul 23, 2007 10:35 AM by ntsiii

    Newbie attempting to use Data Provider

    Darkpegasus5
      Hello everyone, I just downloaded Flex and am eager to learn but I'm having some difficulties finding any debugging tools to help me troubleshoot the code below. I basically grabbed the data provider example and tried to rework it for something I need but the cursor gets set to busy and the data never loads.


      <?xml version="1.0" encoding="utf-8"?>

      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300" creationComplete="qSrv.send()">

      <mx:Script>
      <![CDATA[
      import mx.rpc.events.InvokeEvent;
      import mx.managers.CursorManager;
      import mx.rpc.events.ResultEvent;
      import mx.rpc.events.FaultEvent;
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;

      [Bindable]
      private var questionsCol:ArrayCollection;

      // Gets called when HTTPService is invoked to
      // request the XML.
      private function qSrvInvokeHandler(event:InvokeEvent):void
      {
      // Display the busy cursor
      CursorManager.setBusyCursor();
      }

      // Gets called when the XML is successfully loaded.
      private function qSrvResultHandler(event:ResultEvent):void

      {
      // Save a reference to the list of questions
      questionsCol = event.result.MBTI.question;

      // Hide the busy cursor
      CursorManager.removeBusyCursor();
      }

      private function qSrvFaultHandler(event:FaultEvent):void
      {

      // There was an error in loading the XML
      Alert.show (event.fault.message);

      // Hide the busy cursor
      CursorManager.removeBusyCursor();
      }

      ]]>
      </mx:Script>

      <mx:HTTPService id="qSrv" url="data/questions.xml"
      invoke="qSrvInvokeHandler(event);"
      result="qSrvResultHandler(event);"
      fault="qSrvFaultHandler(event);" />
      </mx:Canvas>

      and the xml located in the data folder:
      <?xml version="1.0" encoding="UTF-8"?>

      <MBTI>
      <question>
      <description>
      You are almost never late for your appointments
      </description>
      </question>
      </MBTI>
        • 1. Re: Newbie attempting to use Data Provider
          Darkpegasus5 Level 1
          One thing I noticed was that it seems to time out unless I have more than one entry in the xml. So after I make sure there are 2 elements and add the following code I get a blank page?

          <mx:Panel width="100%">
          <mx:List
          id="questionsList" width="100%" rowCount="1"
          dataProvider="{questionsCol}"
          labelField="description"
          />
          </mx:Panel>
          • 2. Re: Newbie attempting to use Data Provider
            Darkpegasus5 Level 1
            Okay here is a different way of doing it. It doesn't seem to render properly if I have a canvas component and try to load the data, only if it's within the application directly. Below is the code I currently have, why does the label of the QuestionHBox always come up blank?

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:components="*" layout="absolute" creationComplete="qSrv.send()">

            <mx:Script>
            <![CDATA[
            import mx.rpc.events.InvokeEvent;
            import mx.managers.CursorManager;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var questionsCol:ArrayCollection;

            // Gets called when HTTPService is invoked to
            // request the XML.
            private function qSrvInvokeHandler(event:InvokeEvent):void
            {
            // Display the busy cursor
            CursorManager.setBusyCursor();
            }

            // Gets called when the XML is successfully loaded.
            private function qSrvResultHandler(event:ResultEvent):void

            {
            // Save a reference to the list of questions
            questionsCol = event.result.MBTI.question;

            // Hide the busy cursor
            CursorManager.removeBusyCursor();
            }

            private function qSrvFaultHandler(event:FaultEvent):void
            {

            // There was an error in loading the XML
            Alert.show (event.fault.message);

            // Hide the busy cursor
            CursorManager.removeBusyCursor();
            }

            ]]>
            </mx:Script>

            <mx:HTTPService id="qSrv" url="data/questions.xml"
            invoke="qSrvInvokeHandler(event);"
            result="qSrvResultHandler(event);"
            fault="qSrvFaultHandler(event);" />

            <mx:Model id="artwork" source="data/questions.xml"/>

            <mx:Panel title="Employee Factor Personality Assessment" height="95%" width="95%"
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

            <mx:Text width="100%" color="blue"
            text="Welcome Kim Garland"/>

            <mx:HBox borderStyle="solid" width="100%"
            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

            <mx:Button id="searchButton" label="Take Test"
            click="myViewStack.selectedChild=search;"/>
            <mx:Button id="cInfoButton" label="View Results"
            click="myViewStack.selectedChild=custInfo;"/>

            </mx:HBox>

            <!-- Define the ViewStack and the three child containers and have it
            resize up to the size of the container for the buttons. -->
            <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

            <!-- <components:TestQuestionsPart1 id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
            <mx:Label text="Test Part 1" color="#000000"/>
            </components:TestQuestionsPart1> -->

            <mx:Canvas id="search" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
            <mx:Label text="Test" color="#000000"/>
            <mx:TileList dataProvider="{questionsCol}" itemRenderer="QuestionHBox" />

            <!--<mx:Repeater dataProvider="questionsCol">

            <mx:Label text="name" />
            </mx:Repeater> -->
            </mx:Canvas>

            <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
            <mx:Label text="Test Results" color="#000000"/>
            </mx:Canvas>

            </mx:ViewStack>

            </mx:Panel>
            </mx:Application>

            QuestionHBox:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="20" scroll="false">
            <mx:Label text="{data.name}" width="700" fontSize="12" textAlign="left"/>
            <mx:RadioButtonGroup id="radiogroup1"/>
            <mx:RadioButton label="Yes" groupName="radiogroup1" height="100%"/>
            <mx:RadioButton label="No" groupName="radiogroup1" height="100%"/>
            </mx:HBox>

            questions.xml:
            <?xml version="1.0" encoding="UTF-8"?>

            <MBTI>
            <question>
            <name>You are almost never late for your appointments</name>
            </question>
            <question>
            <name>You are almost never late for your appointments</name>
            </question>
            </MBTI>
            • 3. Re: Newbie attempting to use Data Provider
              ntsiii Level 3
              You can't use "data" in a component renderer. Instead, override the set data() method.

              Find an example of an itemRenderer to copy.

              Additional suggersions:
              Specify resultFormat="e4x" to get your result as xml instead of the default nexted object structure.

              Lose mx:Model forever. Use mx:XML if you need to, but rarely will you.

              "cast" result to XML. (its not really a cast, but...)

              Some snippets below.

              Tracy
              Sample code using HTTPService, e4x, handler function to populate a list item.
              Also shows usage of AsyncToken.

              The DataGrid tag:
              <mx:DataGrid id="dg" dataProvider="{_xlcMyListData}" .../>


              The HTTPService tag:
              <mx:HTTPService id="service" resultFormat="e4x" result="onResult(event)" fault="..../>

              Script block declaration:
              import mx.rpc.Events.ResultEvent;
              [Bindable]private var _xlcMyListData:XMLListCollection;

              Invoke send:
              var oRequest:Object = new Object();
              oRequest.Arg1 = "value1";
              var callToken:AsyncToken = service.send(oRequest);
              token.callId = "myQuery1";

              Result Handler function:
              private function onResult(oEvent:ResultEvent):void {
              var xmlResult:XML = XML(event.result); //converts result Object to XML. can also use "as" operator
              var xlMyListData:XMLList = xmlResult.myListData; //depends on xml format, is row data
              _xlcMyListData = new XMLListCollection(xlMyListData); //wrap the XMLList in a collection
              trace(_xlcMyListData.toXMLString()); //so you can see exactly how to specify dataField or build labelFunction
              var callToken:AsyncToken = oEvent.token;
              var sCallId = callToken.callId; //"myQuery1"
              switch(sCallId) {
              case "myQuery1":
              doQuery2();
              break;
              ...
              }
              }//onResult