3 Replies Latest reply on Mar 8, 2007 11:34 AM by michael_ramirez44

    ValueObjects, Arrays and DataGrid assistance - working together

    arosequist
      Hi all, I've been working with Flex a couple weeks and am having trouble finding information on how to do pretty basic fundamental things, and I'm such a newb I'm having trouble getting the parts I need out of the more advanced examples I'm finding. I'm hoping someone can help and explain it at a level I can understand. :-)

      I have an app that displays a datagrid which is populated via array via a valueObject I created which is in turn populated via ColdFusion. When I click on a line in the datagrid and hit "select" I want to show a new page with futher information on that chosen item. In addition, when you click on an item in the datagrid, I have a label on my main page that I want to display the job title of the selected item.

      My structure is:

      main.mxml (has label that needs to refresh when datagrid item is selected)
      valueObjects (folder)
      Job.as
      views (folder)
      JobSearch.mxml (the datagrid)
      Timeline.mxml (the new page to display when datagrid item is selected)

      Here is the code:
      main.mxml
      This contains a label (lblJobName) that needs to refresh when the datagrid item is selected

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
      xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns="*"
      xmlns:v="views.*"
      layout="absolute"
      backgroundGradientColors="[#ffffff, #d0d0d0]">

      <mx:Script>
      <![CDATA[
      import valueObjects.Job;

      [Bindable]
      private var currentJob:Job;

      private function jobHandler(theItems:Object):void{
      currentJob = Job.buildJob(theItems);
      }
      ]]>
      </mx:Script>

      <mx:states>
      <mx:State name="timeline">
      <mx:RemoveChild target="{btnSelect}"/>
      </mx:State>
      </mx:states>

      <mx:HBox width="100%" x="10" y="90">
      <mx:Label text="Job:" fontSize="14" fontWeight="bold"/>
      <mx:Label text="{currentJob.job_title}" fontSize="14" id="lblJobName"/>
      </mx:HBox>

      <mx:ViewStack id="preTrafficNav" width="100%" height="100%" creationPolicy="all" x="10" y="112">
      <v:JobSearch id="jobsearch" width="100%" height="100%"/>
      <v:Timeline id="timeline" width="100%" height="100%"/>
      </mx:ViewStack>

      </mx:Application>

      ************************************

      Job.as (located in valueObjects folder)
      Returns the info from the job.cfc query

      package valueObjects{

      [RemoteClass(alias="components.job")]

      [Bindable]
      public class Job{

      public var job_id:Number = 0;
      public var job_code:String = "";
      public var job_title:String = "";
      public var conceptDate:String = "";

      public function Job(_jobID:Number, _jobCode:String, _jobTitle:String, _conceptDate:String){
      job_id = _jobID;
      job_code = _jobCode;
      job_title = _jobTitle;
      conceptDate = _conceptDate;
      }

      public function toString():String{
      return "[Job]" + this.job_title;
      }

      public static function buildJob(o:Object):Job{
      var j:Job = new Job(o.job_id, o.job_code, o.job_title, o.conceptDate);
      return j;
      }

      }
      }

      *************************************
      JobSearch.mxml
      This is the datagrid. I don't even know if I'm filling the datagrid correctly from my Job valueObject... I'm really confused about how the datagrid just seems to "magically" work. Anyway, when a new datagrid item is selected, nothing is happening...

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns:v="views.*"
      creationComplete="initApp()">

      <mx:RemoteObject id="myJobSQLs"
      destination="ColdFusion"
      source="PreTraffic.components.jobSQLs"
      fault="Alert.show(event.fault.faultString, 'Error');"
      showBusyCursor="true" >
      <mx:method name="getJobList" result="getJobList_Result(event)" />
      </mx:RemoteObject>

      <mx:Script>
      <![CDATA[
      import valueObjects.Job;
      import mx.controls.Alert;
      import mx.rpc.Fault;
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;
      import mx.collections.ArrayCollection;
      import mx.events.ListEvent;

      [Bindable]
      private var jobListDP:ArrayCollection = null;

      [Bindable]
      private var currentJob:Job;

      private function initApp():void {
      myJobSQLs.getJobList.send();
      }

      private function getJobList_Result(re:ResultEvent):void {
      jobListDP = new ArrayCollection();
      jobListDP = re.result as ArrayCollection;
      }

      private function jobHandler(theItems:Object):void{
      currentJob = Job.buildJob(theItems);
      }

      ]]>
      </mx:Script>

      <mx:Binding source="jobListDP" destination="jobList_dg.dataProvider"/>

      <mx:VBox width="100%" height="100%" id="vbox1">
      <mx:DataGrid id="jobList_dg" width="99%" height="90%">
      <mx:columns>
      <mx:DataGridColumn headerText="Job Code" dataField="job_code" width="100"/>
      <mx:DataGridColumn headerText="Description" dataField="job_title" />
      <mx:DataGridColumn headerText="Concept Date" dataField="conceptDate" width="100"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:VBox>
      </mx:Canvas>

      *************************

      Finally, when I hit the select button on the main.mxml I want my Timeline.mxml to "know" the item I've selected and return new information based on that item (haven't started writing this yet, trying to get the silly label to update first).

      Please let me know if you have questions, and I really really appreciate the help. I'm getting really frustrated. I'm a former asp.net developer so I don't even really know actionscript very well.

      April
        • 1. Re: ValueObjects, Arrays and DataGrid assistance - working together
          michael_ramirez44 Level 1
          You need an event handler to handle the itemClick event from your datagird.

          private function jobSelected( event:ListEvent ):void
          {
          }

          <mx:DataGrid id="jobList_dg" width="99%" height="90%" itemClick="jobSelected(event)">
          • 2. Re: ValueObjects, Arrays and DataGrid assistance - working together
            arosequist Level 1
            Thanks, Michael, but that didn't work either. But I had some thoughts and questions. As I said, I'm new to Flex and was not a .Net developer before this - so I'm really new to actionscript in general.

            I have a .cf file and then I have an .as (Job.as) that I (am hoping) compiles the information retrieved from the CF query. Then, in my .mxml page, I have:

            <mx:RemoteObject id="myJobSQLs"
            destination="ColdFusion"
            source="PreTraffic.components.jobSQLs"
            fault="Alert.show(event.fault.faultString, 'Error');"
            showBusyCursor="true" >
            <mx:method name="getJobList" result="getJobList_Result(event)" />
            </mx:RemoteObject>

            This appears like I'm taking the data for my datagrid directly from the .cf file and actually NOT getting the data from Job.as. Is this correct? If I'm trying to get the array from Job.as, then do I need that Remote Object bit at all?

            If it's not needed, do I need to do the Array thing in the Job.as file, or is that necessary at all? Basically, what is the code to populate the datagrid from the Job.as file? Because in my label, I'm pulling the name from the Job.as file, but I think the datagrid is populating directly from the .cf file - so I'm thinking that may be why it's not working correctly - the data is coming from different places and isn't matching up.

            I hope I explained myself correctly. If anyone is willing to help me straighten this all out in my head, I really appreciate it. I'm getting really frustrating. I'm finding lots of Flex examples and stuff out there, but none that seem to address specifically what I'm doing and I'm having difficulty bridging the gap.

            Thanks so much!

            April
            • 3. Re: ValueObjects, Arrays and DataGrid assistance - working together
              michael_ramirez44 Level 1
              I have used Flex with the following technologies: Amfphp(PHP), Fluorine(.NET), and FDS Express (Java) but I have not used Coldfusion. All these other technologies work the same so I will assume that Coldfusion does as well. You RemoteObject call is returing a collection of Job value objects. In your result handler loop through the event.result to check the Type of objects it contains.

              foreach( var x:* in event.result )
              {
              trace( x.toString() );
              }

              Your CF value object and your AS value object need to match and I think that your value objects need an empty constructor.

              Hope This Help!