2 Replies Latest reply on Sep 13, 2007 1:50 AM by stinasius

    binding components

    stinasius Level 1
      hi guys i have a problem thats bothering me alot.i have three custom components and i would like them to talk to each other if you know what i mean. the first component is biodata.mxml and has a datagrid, the second is edit.mxml and has form elements. the third is summary.mxml and its meant to act as a summary page.now edit.mxml and summary.mxml are loaded into a viewstack in biodata.mxml.what i would like to see is when i click a row in the datagrid the form elements in edit.mxml get the data corresponding to that row and then a summary in form of html appears on the summary.mxml page. so far i have bound the form elements to the grid but not the combobox controls. so please guide on what to do.here is the code for the three components. my code is in the next post.

        • 1. Re: binding components
          stinasius Level 1
          the code guys.
          "biodata.mxml"
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Module xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" xmlns="*" xmlns:ns1="components.*" creationComplete="InitApp()">
          <mx:RemoteObject id="empSvc" destination="ColdFusion" source="EmployeeManager.cfcomponents.emp" showBusyCursor="true" fault="CursorManager.removeBusyCursor();Alert.show(event.fault.message)">
          <mx:method name="getEmployees" result="displayResult(event)" fault="Alert.show(event.fault.message)" />
          </mx:RemoteObject>
          <mx:Script>
          <![CDATA[
          import mx.rpc.events.ResultEvent;
          import mx.controls.Alert;
          import mx.managers.CursorManager;
          import flash.events.Event;
          public function InitApp():void{
          empSvc.getEmployees();
          }
          public function displayResult(event:ResultEvent):void{
          dgrid.dataProvider = event.result;
          }
          public var currentView="edit";
          // Handle view button events
          public function changeView(view) {
          currentView=view;
          if (view=="summary") {
          bodyStack.selectedChild=summaryView;
          } else if (view=="edit") {
          bodyStack.selectedChild=editView;
          }
          }
          private function showFinalSelection(oEvent:Event):void
          {
          editView.firstName.text = oEvent.target.selectedItem.firstName;
          editView.lastName.text = oEvent.target.selectedItem.lastName;
          editView.middleName.text = oEvent.target.selectedItem.middleName;
          editView.email.text = oEvent.target.selectedItem.email;
          editView.mobile.text = oEvent.target.selectedItem.mobile;
          editView.residence.text = oEvent.target.selectedItem.residence;
          editView.address.text = oEvent.target.selectedItem.address;
          editView.job.text = oEvent.target.selectedItem.job;
          editView.comments.text = oEvent.target.selectedItem.comments;
          editView.birth.text = oEvent.target.selectedItem.birth;
          }
          ]]>
          </mx:Script>
          <!--<mx:Parallel id="myFade" target="{edit}">
          <mx:Fade duration="2000"/>
          <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
          </mx:Parallel>-->
          <mx:VBox width="100%" height="100%" top="0" horizontalCenter="0" paddingLeft="0" paddingRight="0">
          <mx:Label text="Bio Data"/>
          <mx:HBox width="100%" height="100%">
          <mx:Panel width="250" height="100%" layout="absolute" title="Employees" styleName="Panel">
          <mx:DataGrid width="100%" id="dgrid" height="100%" styleName="DataGrid" dataProvider="{empSvc.getEmployees.result}" backgroundAlpha="0" showHeaders="true" change="showFinalSelection(event)">
          <mx:columns>
          <mx:DataGridColumn headerText="First Name" dataField="firstName"/>
          <mx:DataGridColumn headerText="Last Name" dataField="lastName"/>
          </mx:columns>
          </mx:DataGrid>
          <mx:ControlBar verticalAlign="middle" backgroundAlpha="0" height="30">
          <mx:HBox verticalGap="0" horizontalGap="20" horizontalAlign="center" verticalAlign="middle">
          <mx:LinkButton label="Add Employee" height="15" verticalGap="0" mouseDown="changeView('edit')"/>
          <mx:LinkButton label="Veiw Summary" height="15" verticalGap="0" mouseDown="changeView('summary')"/>
          </mx:HBox>
          </mx:ControlBar>
          </mx:Panel>
          <mx:Canvas width="100%" height="100%" id="main" >
          <mx:ViewStack width="100%" height="100%" id="bodyStack">
          <ns1:summary id="summaryView" visible="true" verticalScrollPolicy="off" horizontalScrollPolicy="off" showEffect="Fade" hideEffect="Fade">
          </ns1:summary>
          <ns1:edit id="editView" visible="false" verticalScrollPolicy="off" horizontalScrollPolicy="off" showEffect="Fade" hideEffect="Fade" >
          </ns1:edit>
          </mx:ViewStack>
          </mx:Canvas>
          </mx:HBox>
          </mx:VBox>
          </mx:Module>

          • 2. Re: binding components
            stinasius Level 1
            hey guyz sorry for nagging you, but i have been stuck with theis problem for a week now. please help me.i want to bind the result of a grid component to another custom component that has input text and combobox components. the grid component gets its results from a cfc. i want that in the event someone clicks a row in the grid the results fill up the textinputs and combo boxes.the examples in the documentation are not helpful, i am a newibe in flex.thanks