1 Reply Latest reply on Apr 26, 2007 5:00 AM by otnateos

    Dynamic spacing of Text Fields

    Ashish Mishra
      Hi frens,

      I want a functionality as you can see in the gmail, when you click the add CC one text label and input box comes downside at the same place when we click add BCC another comes down of CC.

      I tried to create such functionality, So I tried in this way, :
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" >
      <mx:Script>
      <![CDATA[
      import mx.core.Application;
      public function toogleCC():void{
      txtCC.setVisible(true);
      iptCC.setVisible(true);
      txtAddCC.setVisible(false);
      }
      public function toogleBCC():void{
      txtBCC.setVisible(true);
      iptBCC.setVisible(true);
      txtAddBCC.setVisible(false);
      }
      ]]>
      </mx:Script>

      <mx:VBox width="100%" height="100%">
      <mx:HBox height="5%" width="100%" x="45">
      <mx:Spacer width="15"/>
      <mx:Button label="Send"/>
      <mx:Button label="Discard" click="{Application.application.vsMain.selectedChild=Application.application.myInbox}"/>
      <mx:Button label="Save" />
      </mx:HBox>
      <mx:HBox height="20%" width="100%" >
      <mx:VBox height="100%" width="10%">
      <mx:Label text="To :" fontWeight="bold" height="20" textAlign="right" width="100%"/>
      <mx:Label text="Subject:" fontWeight="bold" height="20" width="100%" textAlign="right"/>
      <mx:Label id="txtCC" text="CC :" fontWeight="bold" textAlign="right" visible="false" height="20" width="100%" />
      <mx:Label id="txtBCC" text="BCC :" fontWeight="bold" textAlign="right" visible="false" height="20" width="100%"/>
      </mx:VBox>
      <mx:VBox height="100%" width="90%">
      <mx:TextInput id="iptTo" width="90%" height="20"/>
      <mx:TextInput id="iptSubject" width="90%" height="20"/>
      <mx:HBox>
      <mx:Text id="txtAddCC" text="Add CC" click="toogleCC();" />
      <mx:Text id="txtAddBCC" text="Add BCC" click="toogleBCC();"/>
      </mx:HBox>
      <mx:TextInput id="iptCC" width="100%" visible="false" height="20"/>
      <mx:TextInput id="iptBCC" width="100%" visible="false" height="20"/>

      </mx:VBox>
      </mx:HBox>
      <mx:RichTextEditor height="70%" width="80%" horizontalAlign="right"/>
      </mx:VBox>

      </mx:Application>


      But the output in not the way i want, can you tell me how i can make this functional, as I want.

      Thks in advance.
        • 1. Re: Dynamic spacing of Text Fields
          otnateos
          try to set the height of the label and textfield that you want to hide defaulted to 0 and set it to 20 to show it. And with VBox try to make them in order. Maybe few tweaks that I did is what you wanted.


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" >
          <mx:Script>
          <![CDATA[
          import mx.core.Application;
          public function toogleCC():void{
          txtCC.height = 20;
          iptCC.height = 20;
          txtCC.setVisible(true);
          iptCC.setVisible(true);
          txtAddCC.setVisible(false);
          }
          public function toogleBCC():void{
          txtBCC.height = 20;
          iptBCC.height = 20;
          txtBCC.setVisible(true);
          iptBCC.setVisible(true);
          txtAddBCC.setVisible(false);
          }
          ]]>
          </mx:Script>
          <mx:VBox width="100%" height="100%">
          <mx:HBox height="5%" width="100%" x="45">
          <mx:Spacer width="15"/>
          <mx:Button label="Send"/>
          <mx:Button label="Discard" click="{Application.application.vsMain.selectedChild=Application.application.myInbox}"/>
          <mx:Button label="Save" />
          </mx:HBox>
          <mx:HBox height="20%" width="100%" >
          <mx:VBox height="100%" width="10%">
          <mx:Label text="To :" fontWeight="bold" height="20" textAlign="right" width="100%"/>
          <mx:Label text="Subject:" fontWeight="bold" height="20" width="100%" textAlign="right"/>
          <mx:Label id="txtCC" text="CC :" fontWeight="bold" textAlign="right" visible="false" height="0" width="100%" />
          <mx:Label id="txtBCC" text="BCC :" fontWeight="bold" textAlign="right" visible="false" height="0" width="100%"/>
          </mx:VBox>
          <mx:VBox height="100%" width="90%">
          <mx:TextInput id="iptTo" width="90%" height="20"/>
          <mx:TextInput id="iptSubject" width="90%" height="20"/>
          <mx:TextInput id="iptCC" width="100%" visible="false" height="0"/>
          <mx:TextInput id="iptBCC" width="100%" visible="false" height="0"/>
          <mx:HBox>
          <mx:Text id="txtAddCC" text="Add CC" click="toogleCC();" />
          <mx:Text id="txtAddBCC" text="Add BCC" click="toogleBCC();"/>
          </mx:HBox>
          </mx:VBox>
          </mx:HBox>
          <mx:RichTextEditor height="70%" width="80%" horizontalAlign="right"/>
          </mx:VBox>
          </mx:Application>