5 Replies Latest reply on May 16, 2008 11:39 AM by Nazmul_i

    Need help with how to display custom component

    Nazmul_i
      I am just starting out programming so my knowledge is very basic, and need help with the following problem.

      I am currently learning flex and am working on a sample application, to develop my skills.

      I have main mxml file with several custom components that i want to display if the user clicks a button.

      Similar to any windows or mac application.

      one of the custom component, is an new customer form, which i want to popup in the centre of the screen, and disable all the other controls of the main application, except for the form it self.

      The form is built on a title window, so the user could click on close button to close the component.

      i am able to display the component in the main.mxml which works fine, but i only want the form to appear if the user clicks on button new.

      Thanks

      Nazmul
        • 2. Re: Need help with how to display custom component
          Level 7
          Tweaked help sys code:

          ------- MyTitleWindowForm.mxml -------
          <?xml version="1.0"?>
          <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml"
          creationComplete="handleCreationComplete();">
          <mx:Script>
          <![CDATA[
          import mx.managers.PopUpManager;

          private function handleCreationComplete():void {
          PopUpManager.centerPopUp(this);
          }

          private function processLogin():void {
          PopUpManager.removePopUp(this);
          }
          ]]>
          </mx:Script>
          <mx:Form>
          <mx:FormItem label="User Name">
          <mx:TextInput id="username" width="100%"/>
          </mx:FormItem>
          <mx:FormItem label="Password">
          <mx:TextInput id="password" displayAsPassword="true" width="100%"/>
          </mx:FormItem>
          </mx:Form>
          <mx:HBox>
          <mx:Button click="processLogin();" label="OK"/>
          <mx:Button label="Cancel" click="PopUpManager.removePopUp(this);"/>
          </mx:HBox>
          </mx:TitleWindow>
          --------------- Test.mxml ------------------------
          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
          horizontalAlign="center" verticalAlign="top">
          <mx:Script>
          <![CDATA[
          import mx.managers.PopUpManager;
          import mx.core.IFlexDisplayObject;
          import classes.MyTitleWindowForm;

          private function showLogin():void {
          var helpWindow:IFlexDisplayObject =
          PopUpManager.createPopUp(this, MyTitleWindowForm, true);
          }
          ]]>
          </mx:Script>
          <mx:Button click="showLogin();" label="Login"/>
          </mx:Application>

          • 3. Re: Need help with how to display custom component
            Nazmul_i Level 1
            Thank you for your replies.

            when i run the application i get a run time which is linked to the line
            import classes.MyTitleWindowForm;

            on the test.mxml
            1172: Definition classes:MyTitleWindowForm could not be found

            i disabled this line in the code and then run the application and it works
            Is this line needed?

            I noticed that a popup manager has been used.

            Is it recommended to use a popup manager, when displaying components that are not visible?

            Nazmul

            • 4. Re: Need help with how to display custom component
              Gregory Lafrance Level 6
              MyTitleWindowForm.mxml needs to be in a sub-directory "classes" within the folder containing Test.mxml. I wouldn't necessaryily say popup manager should be used when displaying components that are not visible, simple that it can be used when you need an area of the UI to "popup", and display so the user can respond to it in a fairly immediate manner.

              If you want different screens to appear depending on user action, and the user may be on that screen for a while, consider ViewStack.

              If you want simple areas of the UI to change depending on user action, consider view states.
              • 5. Re: Need help with how to display custom component
                Nazmul_i Level 1
                Greg,

                Thank you for your post. it was very helpful