1 Reply Latest reply on May 24, 2011 7:17 AM by paule82

    Integrating custom component into mx:Form

    paule82

      Hello,

       

      I have a small problem regarding integrating a custom component into a form.


      My form looks like this:

       

      <mx:Form>
           <mx:FormItem label="Server">
           <s:TextInput text="someserver.com"/>
           </mx:FormItem>
           <mx:FormItem label="Port">
           <s:TextInput text="12345"/>
           </mx:FormItem>
           <mx:FormItem label="Username">
           <s:TextInput text="awesome_guy"/>
           </mx:FormItem>
           <!-- this password component doesn't fit into the form -->
           <common:PasswordConfirmation  id="passwordConfirmation" passwordConfirmationLabel="Password (confirm)" passwordFieldLabel="Password" />
      </mx:Form>
      

       

      The password component itself looks like this:

       

      <s:VGroup>
           <mx:FormItem label="{_passwordFieldLabel}">
                <s:TextInput id="passwordFieldInput" displayAsPassword="true" />
           </mx:FormItem>
           <mx:FormItem label="{_passwordConfirmationLabel}">
                <s:TextInput id="passwordConfirmationInput" displayAsPassword="true" />
           </mx:FormItem>
      </s:VGroup>
      

       

      Unfortunately, the result looks like it is shown in the image.

      form.png

      Does anybody know how to integrate the password component into the form, so that both password fields will be arranged in the correct way?

       

      Thanks in advance, Bye!!

        • 1. Re: Integrating custom component into mx:Form
          paule82 Level 1

          Hello again,

           

          I tried a some things and I think now I know what is going on here.

           

          If I try something like this:

           

          <mx:Form>
               <mx:FormItem label="Server">
               <s:TextInput text="someserver.com"/>
               </mx:FormItem>
               <mx:FormItem label="Port">
               <s:TextInput text="12345"/>
               </mx:FormItem>
               <mx:FormItem label="Username">
               <s:TextInput text="awesome_guy"/>
               </mx:FormItem>
                              
               <mx:FormItem label="">
               <common:PasswordConfirmation id="passwordConfirmation" passwordConfirmationLabel="Password (confirm)" passwordFieldLabel="Password" />
               </mx:FormItem>
          
          
          </mx:Form>
          

           

          <s:VGroup>
               <s:TextInput id="passwordFieldInput" displayAsPassword="true" />
               <s:TextInput id="passwordConfirmationInput" displayAsPassword="true" />     
          </s:VGroup>
          

           


          the password fields will be arranged in the right way. But unfortunately, there are no labels for the password fields anymore. Is there a way to create the two labels manually, so that they look like form item labels?