8 Replies Latest reply on Sep 5, 2009 4:42 AM by mcabalaji

    How to create a class and have a pointer to the panel

    mcabalaji

      Hi all,

       

         I am new to Flex .  I have created a dynamic  Panel which has three children added to it . The three childrens are Hbox , Vbox and a Hbox . The first Hbox has a Label which needs to be updated every minute . I tried it by using getChildrenAt and it works and it seems like Hack .as I am currently doing like getChildrenAt(0) as Hbox  as I have more than one Panel and all the panel values needs to be updated . So is there any way . I  could create a class and  has a pointer to the panel and a pointer to the label , which will be called every minute and on changing of this the panel label get updated

       

       

      Thanks in advance

      Balaji

        • 1. Re: How to create a class and have a pointer to the panel
          Andrew Rosewarn Level 3

          Hi

           

          There are a number of ways to achieve this and you should be looking in to design pattens at some point.  However this is one way to achieve the result and this way is used in a large amount of Flex examples using binding.

           

          Here's my custom panel comp with a hbox and a label in it

           

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

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="140" height="54>

          <mx:Script>

          <![CDATA[

          private var _compData:int

           

          public function set compData(value:int) {

          _compData = value;

          myLabel.text = _compData.toString();

          }

           

          public function get compData():int {

          return _compData;

          }

          ]]>

          </mx:Script>

           

           

          <mx:HBox x="10" y="10" width="109">

          <mx:Label id="myLabel" text="Label"/>

          </mx:HBox>

          </mx:Canvas>

           

          This basically has a public property set which exposes the compData variable.  You can see in the setter function for the compData variable, a line of code that sets the text property of the label to whatever the data is, and every time that variable is changed the label will get updated.

           

          Now in the main app below you can see I have a variable called testData.  If you look at the Comp1 component in the mxml you can see that the compData property in the custom component is bound to that variable.  So when you click the update button and the variable gets updated, so tdoes the label in the hbox of the custom comp.

           

          <mx:Application

              xmlns:mx="http://www.adobe.com/2006/mxml"

              xmlns:view="com.view.*"

              layout="absolute" width="100%" height="100%" xmlns:ns1="*">

           

          <mx:Script>

          <![CDATA[

          [Bindable]

          private var testData:int =0;

           

          private function updateData():void {

          testData ++;

          }

          ]]>

          </mx:Script>

          <ns1:Comp1 x="342" y="126" width="226" height="84" compData="{testData}">

          </ns1:Comp1>

          <mx:Button x="59" y="88" label="Update" click="updateData()"/>

          </mx:Application>

           

          And there fore you could just add however many more comps and bind them to that property.

           

          As I design patterns are something more to look into, but if you are new this is quite a good start.

           

          Hope it helps

           

          Andrew

          • 2. Re: How to create a class and have a pointer to the panel
            mcabalaji Level 1

            Hi Andrew,

             

                Thanks for your reply but all my panels and the Hbox  and lables are created through actionscript and  I have mentioned that I will be having

            more number of panels and all the lables inside that panel will have a unique ID and will have different Time . So if i have 10 panels do i need

            to create 10 _compData for each panel . Could you clarify more on this

             

             

            Thanks again for your reply

            Balaji

            • 3. Re: How to create a class and have a pointer to the panel
              Andrew Rosewarn Level 3

              Are they going to be 10 seperate panel components all different, or are they just 10 instances of the same panel.  If they are all different then you may want to implement an interface that the panels use.  That was you can have the same method for accessing the data, but implement the method differently in each panel.

               

              This way you could you could use binding, or better still store references to the panels.   Whichever way you would still be able to access each panel using a method like update() which the interface implements, yet the update() method could be completly different for each panel.

               

              Does that help and have you used interfaces before?

               

              Andrew

              • 4. Re: How to create a class and have a pointer to the panel
                mcabalaji Level 1

                Hi Andrew,

                 

                    I have not used any interface before . my application works like this . I get an XML data from the backend and i read the xml and create panels

                and store the panels as dictionary and i have a function which renders the panel say for ex: dictionary["key"]["panel"] . so the label value inside the

                panel needs to be changed every minute . var mPanel:Panel = dictionary["key"]["panel"] as Panel; var Hbox:HBox = mPanel.getChildAt(0) as Hbox;

                var title:Label = hBox.getChildAt(0) as label; and now if i change the title value the label value gets changed but i know this is not the right way to do .

                Is there any way it can be implemented . please help me

                 

                 

                Thanks in advance

                Balaji

                • 5. Re: How to create a class and have a pointer to the panel
                  Andrew Rosewarn Level 3

                  Ok yea i think I get it take a look at this examples.  First heres my custom AS panel component.

                   

                  package

                  {

                  import mx.containers.Panel;

                  import mx.controls.Label;

                   

                  public class MyPanel extends Panel

                  {

                  private var _labelValue:String

                  private var labelSet:Boolean;

                  private var myLabel:Label;

                   

                  public function MyPanel()

                  {

                  super();

                  }

                   

                  public function set labelValue(value:String):void {

                  _labelValue = value;

                  labelSet = true;

                  invalidateProperties();

                  invalidateSize();

                  }

                   

                  public function get labelValue():String {

                  return _labelValue;

                  }

                   

                  override protected function createChildren():void {

                  super.createChildren();

                  myLabel = new Label();

                  addChild(myLabel);

                  }

                   

                  override protected function commitProperties():void {

                  super.commitProperties();

                  if (labelSet) {

                  myLabel.text = _labelValue;

                  labelSet = false;

                  }

                  }

                  }

                  }

                   

                  Pretty basic it creates a label in the panel.  Notice it still has the public property labelValue which when set, sets the text in the label.

                   

                  Now for the Main App

                   

                  <mx:Application

                      xmlns:mx="http://www.adobe.com/2006/mxml"

                      layout="vertical" width="100%" height="100%"

                      creationComplete="createPanels()" >

                   

                  <mx:Script>

                  <![CDATA[

                  // Used to store references to the panels when created

                  private var panelReferences:Array;

                   

                  // My replacement for xml but will work the same way.

                  private var myData:Array = new Array(

                  {panelName : 'Panel 1'},

                  {panelName : 'Panel 2'},

                  {panelName : 'Panel 3'});

                   

                   

                  // Look through array (yours in XML and create panels

                  private function createPanels():void {

                  panelReferences = new Array();

                   

                  // Create panesl and add to the application

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

                  var mPanel:MyPanel = new MyPanel();

                  mPanel.labelValue = myData[i].panelName;

                  mPanel.width = 100;

                  mPanel.height = 70;

                   

                  // Add the panels also to the references array

                  panelReferences.push(mPanel);

                  addChild(mPanel);

                  }

                  }

                   

                  private function changePanelHandler():void {

                  // Change the panels label in the panelReferences array.

                  // Target panel by using index number

                  panelReferences[ns.value].labelValue = newLabel.text;

                   

                  }

                  ]]>

                  </mx:Script>

                  <mx:HBox width="100%">

                  <mx:Label text="Change Panel Number"/>

                  <mx:NumericStepper id="ns" minimum="0" maximum="2"/>

                  <mx:Label text="Label to"/>

                  <mx:TextInput id="newLabel"/>

                  <mx:Button label="Change" click="changePanelHandler()"/>

                  </mx:HBox>

                  </mx:Application>

                   

                  This loops through the array data which is the source for the panels.  As it does so and creates a new panel it adds it to the application, but also the reference to it to the panelReferences Array.  Now in the demo app whenever you want to set the value, you just do so on the reference in the references array, and therefore as its a pointer the panel property labelValue gets set and then the panel text updates.

                   

                  I think this covers what you want. 

                   

                  With regard to interfaces.  Say each of your panels accepted different kinds of data (these are all strings), and implemented the data in different ways.  The you would use an an interface.  This would ensure all panels consistantly used the sames methods, but could implement these in different ways.

                   

                  I hope this helps

                   

                  Andrew

                  • 6. Re: How to create a class and have a pointer to the panel
                    mcabalaji Level 1

                    Hi Andrew,

                     

                        Thanks for your reply . Your example has helped me a lot . I have one final doubt which you could help me . I used your example and saw that

                    the label is getting added at the last . Is there any way I could add the label inside the First Hbox of the Panel.

                     

                     

                    Thanks again for your reply

                    Balaji

                    • 7. Re: How to create a class and have a pointer to the panel
                      Andrew Rosewarn Level 3

                      Yea sure

                       

                      Just create the new hbox and then add your label to it as a chid

                       

                      override protected function createChildren():void {

                      super.createChildren();

                      var hBox:HBox = new HBox();

                      addChild(hBox);

                       

                      myLabel = new Label();

                      hBox.addChild(myLabel);

                       

                      }

                       

                       

                      andrew

                      • 8. Re: How to create a class and have a pointer to the panel
                        mcabalaji Level 1

                        Hi Andrew ,

                         

                         

                           Thanks Again . I have finished the process by adding the HBox in the package.

                         

                         

                        Thanks Once Again,

                        Balaji