8 Replies Latest reply on Jun 5, 2009 11:23 AM by rgadiparthi

    Flex is hard (or possibly I'm stupid)

    markFuqua

      OK, I've been trying to wrap my head around flex/actionscript for several weeks now.  My 45 year old brain hurts.  So here's where I am.  I have a datagrid that is populated via a coldfuison component via flashRemoting.  I have a form that successfully will add a new item to the database (lost a ton of hair on that one...couldn't 'get' the idea that i had to create an instance of the class, assign new values and pass the object to the coldfusion cfc...but eventually, it sunk in)...got the form to grow and shrink...and I am pretty sure I can pretty it up with some validation and nice transitions.  However, I am having some real trouble editing records from the datagrid.

       

      I want to populate the form with a row from the datagrid when the user clicks on the row...and it seems like it would be easy if my form were all text fields, but alas, four of them are combo boxes...plus in the form, the combo boxes are populated by four separate remoteObject calls to the database...so how do i set the selected value to reflect what is on the datagrid row...the text boxes seem pretty simple...but no matter what I try, I can't get the value to show correctly in the comboboxes.  I can get the combobox to be blank, or [object,object] or reflect no change...

       

      So, below is the code...the function I want to populate the form is:   private function editItemInsertHandler().  I'd really appreciate some help understranding what's going on/wrong.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          layout="vertical" applicationComplete="init()">
          <mx:Label text="Database of Estimate Items" fontSize="18">
             
          </mx:Label>
         
          <mx:Script>
          <![CDATA[
              import mx.rpc.events.ResultEvent;
              import mx.collections.ArrayCollection;
      //the following vars are for remote object tags below
              [Bindable]
              private var acEstimatesFixedItems:ArrayCollection;
              [Bindable]
              private var acJobType:ArrayCollection;
              [Bindable]
              private var acConstructionPhases:ArrayCollection;
              [Bindable]
              private var acItemType:ArrayCollection;
              [Bindable]
              private var acDefaultUnitType:ArrayCollection;
             
              private var EstimateItem:EstimatesFixedItems;
         
             
      //at start-up
          private function init():void
          {
              EstimatesFixedItemsGateway.getAll();
              JobEstTypeGateway.getAll();
              ContructionPhasesGateway.getAll();
              ItemTypeGateway.getAll();
              DefaultUnitTypeGateway.getAll();
          }
             
                     
      //the following functions are for handling the result events from remote objects
              private function resultHandler(event:ResultEvent):void
              {
                  acEstimatesFixedItems = new ArrayCollection(
                  event.result as Array)
              }
              private function jobTypeResultHandler(event:ResultEvent):void
              {
                  acJobType = new ArrayCollection(
                  event.result as Array)
              }
              private function ConstructionPhasesResultHandler(event:ResultEvent):void
              {
                  acConstructionPhases = new ArrayCollection(
                  event.result as Array)
              }
             
              private function ItemTypeResultHandler(event:ResultEvent):void
              {
                  acItemType = new ArrayCollection(
                  event.result as Array)
              }
             
              private function DefaultUnitTypeResultHandler(event:ResultEvent):void
              {
                  acDefaultUnitType = new ArrayCollection(
                  event.result as Array)
              }
             
              private function openAddForm():void
              {
                  AddForm.height = 250;
                  AddForm.width = 700;
              }
             
      //called when item clicked in datagrid       
              private function editItemInsertHandler():void
              {
                  openAddForm();
                  addEditItem.label = "Edit";
                  ConstructionPh.selectedItem.ConstructionPhaseId = dg.selectedItem.ConstructionPhase;
                 
                  ConstructionPh.selectedItem = dg.selectedItem.ConstructionPhase;
                 
                  ItemName.text = dg.selectedItem.ItemName;
              }
             
              private function addEditItemInsertHandler():void
              {
                  var dataEstimateFixedItem:EstimatesFixedItems = new EstimatesFixedItems();
                     
                     
                     
                      dataEstimateFixedItem.ConstructionPhase = ConstructionPh.selectedItem.ConstructionPhaseId;
                      dataEstimateFixedItem.JobEstimateType = JobEstimateType.selectedItem.JobTypeId;
                      dataEstimateFixedItem.ItemType = ItemType.selectedItem.ItemTypeId;
                      dataEstimateFixedItem.DefaultUnitType = DefaultUnitType.selectedItem.DefaultUnitTypeId;
                      dataEstimateFixedItem.ItemName = ItemName.text;
                      dataEstimateFixedItem.ItemDescription= ItemDescription.text;
                      //dataEstimateFixedItem.PricePerUnit = PricePerUnit.text;
                     
             
                  EstimatesFixedItemsGateway.save(dataEstimateFixedItem);
                  AddForm.height = 5;
                 
                 
              }
              private function addEditItemResultHandler():void
              {
                 
              }
             
             
                     
          ]]>
      </mx:Script>

       

      <mx:RemoteObject id="JobEstTypeGateway" destination="ColdFusion"
          source="Estimate.cfcs.JobEstTypeGateway"   showBusyCursor="true">
          <mx:method name="getAll" result="jobTypeResultHandler(event)"/>
          <mx:method name="save" result="addEditItemResultHandler()"/>

       

      </mx:RemoteObject>
      <mx:RemoteObject id="ContructionPhasesGateway" destination="ColdFusion"
           source="Estimate.cfcs.ConstructionPhasesGateway" result="ConstructionPhasesResultHandler(event)"
            showBusyCursor="true"/>
      <mx:RemoteObject id="EstimatesFixedItemsGateway" destination="ColdFusion"
            source="Estimate.cfcs.EstimatesFixedItemsGateway" result="resultHandler(event)"
              showBusyCursor="true"/>
      <mx:RemoteObject id="ItemTypeGateway" destination="ColdFusion"
               source="Estimate.cfcs.ItemTypeGateway" result="ItemTypeResultHandler(event)"
                showBusyCursor="true"/>
      <mx:RemoteObject id="DefaultUnitTypeGateway" destination="ColdFusion"
               source="Estimate.cfcs.DefaultUnitTypeGateway" result="DefaultUnitTypeResultHandler(event)"
                showBusyCursor="true"/>
         
      <mx:Panel>

       

      <mx:Panel title="To Edit or delete an item, double click that item." height="75%" width="100%"
              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
      <mx:HBox>
          <mx:Button id="addEdit" click="openAddForm()" label="Add New Item to Database"/>
          <mx:Button id="refresh" click="openAddForm()" label="Refresh Database View"/>
      </mx:HBox>
      </mx:Panel>

       

      <mx:Form  id="AddForm"  height="10">
          <mx:FormHeading id="addFormLabel" label="Add New Item to Database."/>
              <mx:HBox>
                  <mx:FormItem label="Job Type">
                       <mx:ComboBox id="JobEstimateType" dataProvider="{acJobType}" labelField="JobType"/>
                  </mx:FormItem>
                  <mx:FormItem label="Job Phase">
                      <mx:ComboBox id="ConstructionPh"  dataProvider="{acConstructionPhases}" labelField="ConstructionPhaseDes"/>
                  </mx:FormItem>
              </mx:HBox>
              <mx:HBox>
                  <mx:FormItem label="Item Type">
                      <mx:ComboBox id="ItemType" dataProvider="{acItemType}"  labelField="ItemTypeDes"/>
                  </mx:FormItem>
                  <mx:FormItem label="Default Unit Type">
                      <mx:ComboBox id="DefaultUnitType"  dataProvider="{acDefaultUnitType}" labelField="DefaultUnitTypeDes"/>
                  </mx:FormItem>
              </mx:HBox>
              <mx:HBox>
                  <mx:FormItem label="Item Title">
                      <mx:TextInput id="ItemName"/>                     
                  </mx:FormItem>
                  <mx:FormItem label="Description">
                      <mx:TextArea id="ItemDescription"/>
                  </mx:FormItem>
              </mx:HBox>
              <mx:FormItem label="Price Per Unit">
                  <mx:TextInput id="PricePerUnit" width="40"/>
              </mx:FormItem>
              <mx:FormItem>
                  <mx:Button id="addEditItem" label="add" click="addEditItemInsertHandler()"/>
              </mx:FormItem>
         
         
      </mx:Form>

       

       

       

      <mx:DataGrid id="dg" dataProvider="{acEstimatesFixedItems}" variableRowHeight="true" click="editItemInsertHandler()">
          <mx:columns>
              <mx:DataGridColumn headerText="Job Type" dataField="JobType"/>
              <mx:DataGridColumn headerText="Job Phase" dataField="ConstructionPhaseDes"/>
              <mx:DataGridColumn headerText="Item Type" dataField="ItemTypeDes"/>
               <mx:DataGridColumn headerText="Item Name" dataField="ItemName" />
               <mx:DataGridColumn headerText="Description" width="200" wordWrap="true"
                    dataField="ItemDescription" />
                 <mx:DataGridColumn headerText="Unit" dataField="DefaultUnitTypeDes" width="50"/>
                 <mx:DataGridColumn headerText="Price" dataField="PricePerUnit" width="50"/>
            </mx:columns>

       

      </mx:DataGrid>
          
      </mx:Panel>

       

       

       

      </mx:Application>

        • 1. Re: Flex is hard (or possibly I'm stupid)
          dzeikei

          loop through your dataprovider and find the index of the selected item then bind the index to the selectedIndex property in ComboBox to display the selected item. if you are getting [Object object] displayed, I would check your labelField property of the CB.

          • 2. Re: Flex is hard (or possibly I'm stupid)
            markFuqua Level 1

            Sorry, little slow here...I'm not understanding.  The user clicks on a row in the datagrid and then the function uses that "object" or selected row to populate the form.  What dataprovider do I loop through?  When I put a breakpoint in at the end of the function, I expected to see a "selectedValue" as an argument of the datagrid, but I didn't...

             

            Sorry to be so dense...I swear one day this will all just click.

             

            Mark

            • 3. Re: Flex is hard (or possibly I'm stupid)
              dzeikei Level 2

              For the job type CB, loop through your acJobType ArrayCollection to find the index of what the job type of object you selected in the datagrid should be. Then make the CB show that index as selected by setting selectedIndex to that number. Of course, if it doesn't exist in acJobType, it won't display anything

              • 4. Re: Flex is hard (or possibly I'm stupid)
                markFuqua Level 1

                OK...starting to see through the fog...I think.

                 

                Something like this  (hacking what i can understand from your answer and the Actionscript 3.0 Cookbook)?

                 

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

                     if (acJobType.index == ?????) {

                          ComboBox.selected index == acJobType.index;

                     }

                }

                 

                Provided this is right, What do I put in place of the ?????'s

                 

                 

                thanks,

                 

                Mark

                • 5. Re: Flex is hard (or possibly I'm stupid)
                  Michael Borbor Level 4

                  A little advice the forum editor has an option to post code and make it more readable. You go to the icon that looks like this >>, select Syntax Highlighting - Java.

                   

                  Now your code it's a bit long to read, but a simple solution will be to add an event listener for the DataGrid itemClick, and if the ComboBox uses an ArrayCollection you can do something like this:

                   

                  private function myEventListener(e:Event):void{
                       myComboBox.selectedIndex=acJobType.getItemIndex(e.currentTarget.selectedItem);
                  }
                  
                  • 6. Re: Flex is hard (or possibly I'm stupid)
                    markFuqua Level 1

                    Well, I tried the following, no errors but it results in a blank combobox (the list is still there, when clicked, there just isn't a displayed value...)

                     

                     

                    private function fillInForm(event:Event):void {
                                openAddForm();
                                addEditItem.label = "Edit";
                                JobEstimateType.selectedIndex=acJobType.getItemIndex(event.currentTarget.selectedItem);
                    
                    
                            }
                    

                    looking at the code above, it doesn't seem obvious how it would tell which part of the datagrid to use for the JobEstimateType (especially since in the datagrid it is the text value...I'm missing something.

                     

                    Thanks,

                     

                    Mark

                    • 7. Re: Flex is hard (or possibly I'm stupid)
                      Michael Borbor Level 4

                      Sorry i forgot to check wether the ComboBox and the DG use the same dataProvider, the answer I guess it's not. You're gonna need to loop and find the index as another forum user suggested.

                      • 8. Re: Flex is hard (or possibly I'm stupid)
                        rgadiparthi Level 2

                        can you check u r below code,

                         

                        //called when item clicked in datagrid       
                                private function editItemInsertHandler():void
                                {
                                    openAddForm();
                                    addEditItem.label = "Edit";
                                    ConstructionPh.selectedItem.ConstructionPhaseId = dg.selectedItem.ConstructionPhase;
                                   
                                    ConstructionPh.selectedItem = dg.selectedItem.ConstructionPhase;
                                   
                                    ItemName.text = dg.selectedItem.ItemName;
                                }

                         

                        addEditItem.label and itemName.text is fine.

                         

                        what the first line doing with ConstructionPh??????????

                         

                        hope the statement ConstructionPh.selectedItem = dg.selectedItem.ConstructionPhase; is enough to set the combobox item,

                        if your combobox dataprovider has that item.