3 Replies Latest reply on Nov 12, 2009 10:10 AM by satyajitbehera

    passing a var

    rmorgan Level 1

      Hello,

       

      I am working on converting a CF app to a Flex app and trying to reuse as much of the CF stuff as possible. I am making progress(slowly) but now need to figure something else out.

       

      1. When the first page initially loads, the user is presented with options from a DB.  - Works

      2. User selects the next button to go to the next viewstack - Works

      3. When the second page loads, it should pass the value of the selected option to the next page so that the query knows what group of data to return to the user. - Stuck

       

      My code is

      MXML

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

      <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="546" height="506" backgroundColor="#FEFEFE" horizontalAlign="center" verticalAlign="middle" borderStyle="none">
      <mx:Script>
            <![CDATA[
                  import mx.controls.Alert;
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.Fault;
                  import mx.rpc.events.ResultEvent;
                  import mx.controls.RadioButton;
                  private function result(evt:ResultEvent):void { 
                        affiliatetypeRepeater.dataProvider = evt.result;
                 }
                  private function fault(evt:FaultEvent):void {
                        Alert.show(evt.fault.message);                
                 }        
            ]]>
      </mx:Script>
      <mx:RemoteObject id="rogetAffiliatetype" destination="ColdFusion" showBusyCursor="true" source="flexdemo.src.DemoCFC" result="result(event)" fault="fault(event)">
      </mx:RemoteObject>
      <mx:RemoteObject id="rogetAffiliates" destination="ColdFusion" showBusyCursor="true" source="flexdemo.src.getAffiliates" result="result(event)" fault="fault(event)">
      </mx:RemoteObject>
      <mx:ViewStack id="viewstack1" width="437" height="459" selectedIndex="0" horizontalCenter="0" verticalCenter="-14" resizeToContent="true">

      <!-- Select Affiliate Type -->
          <mx:Canvas label="page1" width="100%" height="100%">  
              <mx:Text x="114" y="10" text="Please Select your affiliate type:" id="affiliatetypetext"/>
              <mx:VBox width="250" height="250" x="114" y="36" horizontalAlign="left" verticalAlign="top">
                  <mx:Repeater id="affiliatetypeRepeater" dataProvider="{rogetAffiliatetype.fncgetAffiliatetype()}">
                      <mx:RadioButton id="affiliatetypebuttonsArray"
               label="{affiliatetypeRepeater.currentItem.affiliatetype}"
               data="{affiliatetypeRepeater.currentItem.affiliatetype_id}" textAlign="left"/>
                  </mx:Repeater>
              </mx:VBox>
          </mx:Canvas>  
      <!-- Select Affiliate -->
          <mx:Canvas label="page2" width="100%" height="100%">     
              <mx:Text x="150" y="10" text="Please Select your affiliate:" id="affiliatetext"/>
              <mx:VBox width="250" height="250" horizontalCenter="20" verticalCenter="-69">
                  <mx:Repeater id="affiliatesRepeater" dataProvider="{rogetAffiliates.fncgetAffiliates()}">
                      <mx:RadioButton id="affiliatesbuttonsArray"
               label="{affiliatesRepeater.currentItem.affiliatetype}"
               data="{affiliatesRepeater.currentItem.affiliatetype_id}" textAlign="left"/>
                  </mx:Repeater>
              </mx:VBox>
               </mx:Canvas>
      </mx:ViewStack>

          <mx:HBox x="171" y="427">
              <!-- <mx:Button label="Previous"
              click="viewstack1.selectedIndex = viewstack1.selectedIndex -1"  x="232" y="427"/>-->
              <mx:Button label="Next"
                click="viewstack1.selectedIndex = viewstack1.selectedIndex +1" />
              </mx:HBox>     

      </mx:Application>

       

      CFC

      <cfcomponent>
      <cffunction name="fncgetAffiliates" access="public" returntype="query" >
      <cfset var getAffiliates = "">
      <cfquery name="getAffiliates" datasource="broadcast">
      select affiliate_id, affiliatename, region
      from affiliate
      where affiliatetype_id = #Session.affiliatetype_id#  <!-- This is here as a marker and what I am reusing from the CF version. -->
      order by affiliatename asc
      </cfquery>
      <cfreturn getAffiliates>
      </cffunction>
      </cfcomponent>

       

      Thanks for any assistance

        • 1. Re: passing a var
          satyajitbehera Level 1

          Use data binding. Have a Model Instance and bind it to both the view stacks. When someone selects an option in viewstack1, the option value shall be set to a property in the model instance. When next is clicked, the second viewstack should be initialized from the model instance which has the selected option value in the property.

          • 2. Re: passing a var
            rmorgan Level 1

            Thanks for the reply.

             

            I am still trying to get a grasp on this, do you by chance know where I could locate an example of what you are suggesting?

            • 3. Re: passing a var
              satyajitbehera Level 1

              I was suggesting that process if you are using models. Models are classes which encapsulate a set of data. Anyway you need to look in MVC architecture or Cairngorm architecture to understand those conscepts. I have found an alternate workaround for your problem. I am pasting the code below. I have modified the code so as not to use RemoteObject, as I didn't had both of your cfcs and also your database to run the query. Just copy the following code to an application and run it.

               

              Also do mark correct answer if you find it here.

               

               

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="546" height="506" backgroundColor="#FEFEFE" horizontalAlign="center" verticalAlign="middle" borderStyle="none">
              <mx:Script>
                    <![CDATA[
                          import mx.controls.Alert;
                          import mx.rpc.events.FaultEvent;
                          import mx.rpc.Fault;
                          import mx.rpc.events.ResultEvent;
                          import mx.controls.RadioButton;
                         
                          [Bindable]
                          private var dpAffTypes:Array = [{type:"abc", type_id:42},{type:"def", type_id:2}, {type:"gif", type_id:5}];
                          [Bindable]
                          private var dpAffs:Array = [{name:"aff1", aff_id:222},{name:"aff2", aff_id:333},{name:"aff3", aff_id:444}];
                         
                          [Bindable]
                          private var selectedAffType:Object; //set the default one here.
                         
                          private function setType(event:MouseEvent):void
                          {
                              if((event.currentTarget as RadioButton).selected)
                              {
                                  selectedAffType = event.currentTarget.getRepeaterItem();
                              }
                             
                          }
                         
                    ]]>
              </mx:Script>

               

              <mx:ViewStack id="viewstack1" width="437" height="459" selectedIndex="0" horizontalCenter="0" verticalCenter="-14" resizeToContent="true">

               

                  <!-- Select Affiliate Type -->
                  <mx:Canvas label="page1" width="100%" height="100%"> 
                      <mx:Text x="114" y="10" text="Please Select your affiliate type:" id="affiliatetypetext"/>
                      <mx:VBox width="250" height="250" x="114" y="36" horizontalAlign="left" verticalAlign="top">
                          <mx:Repeater id="affiliatetypeRepeater" dataProvider="{dpAffTypes}">
                              <mx:RadioButton id="affiliatetypebuttonsArray"
                       label="{String(affiliatetypeRepeater.currentItem.type)}"
                       data="{String(affiliatetypeRepeater.currentItem.type_id)}" textAlign="left" click="setType(event)"/>
                          </mx:Repeater>
                      </mx:VBox>
                  </mx:Canvas> 
                 
                  <!-- Select Affiliate -->
                  <mx:Canvas label="page2" width="100%" height="100%">    
                      <mx:Text x="150" y="0" text="AffiliateType:{String(selectedAffType.type)}" />
                      <mx:Text x="150" y="20" text="Please Select your affiliate:" id="affiliatetext"/>
                      <mx:VBox width="250" height="250" horizontalCenter="20" verticalCenter="-69">
                          <mx:Repeater id="affiliatesRepeater" dataProvider="{dpAffs}">
                              <mx:RadioButton id="affiliatesbuttonsArray"
                       label="{affiliatesRepeater.currentItem.name}"
                       data="{affiliatesRepeater.currentItem.aff_id}" textAlign="left"/>
                          </mx:Repeater>
                      </mx:VBox>
                       </mx:Canvas>
              </mx:ViewStack>

               

                  <mx:HBox x="171" y="427">
                      <mx:Button label="Previous"
                      click="viewstack1.selectedIndex = viewstack1.selectedIndex -1"  x="232" y="427"
                      visible="{Boolean(viewstack1.selectedIndex > 0)}"/>
                      <mx:Button label="Next"
                        click="viewstack1.selectedIndex = viewstack1.selectedIndex +1" />
                      </mx:HBox>   

               

              </mx:Application>