0 Replies Latest reply on Mar 10, 2010 4:54 AM by Penny Conclude

    Flex : Dynamic Flowable Layout

    Penny Conclude

      HI

       

      I need to create a dynamic flowable layout for a wizard that shows/hides certain questions as answered clicking on radio buttons. This layout needs to be in 3 panels across the page, and thus needs to flow from top to bottom and then to the 2nd panel (then top to bottom again) if 1st panel is to bottom of page and then 3rd panel if 2nd panel is to the bottom of the page.

       

      I have used a VDividedBox and have the text in a hbox and the radio buttons in a canvas, which looks good and moves up if the question is not needed (hidden) but when all questions are needed how do I get them to go to the 2nd and 3rd panel?

       

      Below is my code :

       

      <mx:VDividedBox

       

      width="270"

      height="

      3568"

      x="

      17"

      y="

      68"

      verticalGap="

      2">

       

       

       

      <mx:TextArea width="270"

      height="

      20"

      text="

      Standard&#xa;"

      x="

      10"

      y="

      71"

      backgroundColor="

      #005187"

      cornerRadius="

      5"

      color="

      #FFFFFF"

      fontWeight="

      bold"

      borderColor="

      #005187"

      fontFamily="

      Arial"

      fontSize="

      11"

      editable="

      false" />

       

       

      <mx:HBox width="270">

       

       

      <mx:TextArea width="185"

      height="

      32"

      text="

      question 1?"

      x="

      9.95"

      y="

      97"

      backgroundColor="

      #FFFFFF"

      cornerRadius="

      0"

      color="

      #005187"

      fontWeight="

      normal"

      borderColor="

      #005187"

      borderThickness="

      1"

      fontFamily="

      Arial Narrow"

      fontSize="

      8"

      editable="

      false"

      borderStyle="

      none" />

       

       

      <mx:Canvas width="76"

      height="

      40">

       

       

      <mx:Label text="Y"

      x="

      15"

      y="

      5"

      fontFamily="

      Arial Narrow"

      color="

      #005187"

      fontSize="

      9"

      fontWeight="

      normal" />

       

       

      <mx:Label text="N"

      x="

      46"

      y="

      5"

      fontFamily="

      Arial Narrow"

      color="

      #005187"

      fontSize="

      9"

      fontWeight="

      normal" />

       

       

      <mx:RadioButtonGroup id="unemployed" />

       

       

      <mx:Button id="first"

      width="

      16"

      height="

      16"

      icon="

      {first.selected ? selectedRadioButton : unSelectedRadioButton}"

      toggle="

      true"

      x="

      28"

      y="

      5"

      cornerRadius="

      0"

      paddingLeft="

      0"

      click="{second.selected =

      false;}"

      textAlign="

      left" />

       

       

      <mx:Button id="second"

      width="

      16"

      height="

      16"

      icon="

      {second.selected ? selectedRadioButton : unSelectedRadioButton}"

      toggle="

      true"

      x="

      57"

      y="

      5"

      cornerRadius="

      0"

      click="{first.selected =

      false;}" />

       

       

      </mx:Canvas>

       

       

       

      </mx:HBox>

      </mx:VDividedBox>

       

      Thanks

       

      Regards

      Penny