22 Replies Latest reply on Jul 11, 2008 11:49 AM by josh_aries

    Login Page

    josh_aries Level 1
      Hi,
      I am creating an application. All the pages the application are mxml components.

      I have the login page and then a viewstack that has the other pages in the main application file . There is a linkbar as well that uses the viewstack as the dataprovider.

      When I login to the application I want to show the linkbar and the first page of the viewstack. I dont want to show the linkbar and make the pages available until the user is logged in. How do I do that?

      thanks.
        • 1. Re: Login Page
          Gregory Lafrance Level 6
          Have visible, and perhaps includeInLayout set to false. Set them to true upon successful login.
          • 2. Login Page
            josh_aries Level 1
            hi
            • 3. Re: Login Page
              Gregory Lafrance Level 6
              Maybe post simplified yet complete sample code, including your login and menu components. Its hard to troubleshoot this without.
              • 4. Login Page
                josh_aries Level 1
                hi
                • 5. Re: Login Page
                  Gregory Lafrance Level 6
                  Almost there, but missing the "menu" components.
                  • 6. Re: Login Page
                    josh_aries Level 1
                    I have the the following aswell in my application tag

                    xmlns:menu="menu.*" xmlns:login="login.*"
                    • 7. Re: Login Page
                      Gregory Lafrance Level 6
                      True bug you did not provide the code for the menu components.
                      • 8. Re: Login Page
                        Gregory Lafrance Level 6
                        True but you did not provide the code for the menu components.
                        • 9. Login Page
                          josh_aries Level 1
                          :-)
                          • 10. Re: Login Page
                            Gregory Lafrance Level 6
                            Still there's lots I'm missing as I keep getting compile errors. Guess I can't look further. Usually I like to see simplified sample code. :-)
                            • 11. Login Page
                              josh_aries Level 1
                              Let me create a simple application and post the code.
                              • 12. Re: Login Page
                                josh_aries Level 1
                                Here is the sample app without errors
                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application creationComplete="isReloaded();"
                                verticalGap="0" width="100%" xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
                                height="100%" xmlns:Comp="*" horizontalAlign="center" >
                                <mx:Script>
                                <![CDATA[
                                import mx.controls.Alert;

                                public var mySO:SharedObject = SharedObject.getLocal("userDetails");

                                private function isReloaded():void
                                {
                                if( mySO.data.viewIndex != null )
                                vs.selectedIndex = mySO.data.viewIndex;

                                }

                                private function saveIndex():void
                                {
                                mySO.data.viewIndex = vs.selectedIndex;
                                mySO.flush();
                                }
                                ]]>
                                </mx:Script>
                                <mx:HBox width="80%" verticalGap="0" horizontalAlign="center">
                                <mx:VBox verticalGap="0" horizontalAlign="center">
                                <mx:Image id="imgLogo" source="../assets/images/NiyumHeader.jpg"/>
                                <mx:LinkBar verticalGap="0" color="#FFFFFF" width="100%" selectionColor="#FFFFFF" backgroundColor="#000000" fontSize="11" horizontalGap="30" id="Menu" dataProvider="{vs}"></mx:LinkBar>
                                <Comp:login label="Login" width="100%" height="100%" id="loginMenu" />
                                <mx:ViewStack change="saveIndex();" verticalGap="0" id="vs" width="100%" height="100%">
                                <Comp:menu1 label="menu 1" id="menuOne" width="100%" height="100%" />
                                <Comp:menu2 label="menu2" id="menuTwo" width="100%" height="100%" />
                                </mx:ViewStack>
                                </mx:VBox>
                                </mx:HBox>
                                </mx:Application>



                                login.mxml

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:VBox horizontalAlign="center" width="100%" height="100%" xmlns:mx=" http://www.adobe.com/2006/mxml">
                                <mx:Script>
                                <![CDATA[
                                import mx.controls.Alert;
                                public function LoginButton_Click():void
                                {
                                Alert.show("Button Click");
                                this.parentApplication.vs.selectedIndex = 0;

                                }

                                ]]>
                                </mx:Script>
                                <mx:VBox width="50%" >
                                <mx:HBox height="30" width="100%">
                                <mx:Label id="lblLogin" text="Login" fontStyle="normal" fontSize="18" fontWeight="bold" />
                                </mx:HBox>
                                <mx:HBox width="100%">
                                <mx:Label width="30%" id="lblUserName" text="User Name :" fontWeight="bold" fontSize="12" />
                                <mx:TextInput id="txtUserName" />
                                </mx:HBox>
                                <mx:HBox width="100%">
                                <mx:Label fontWeight="bold" width="30%" id="lblPassword" text="Password :" fontSize="12" />
                                <mx:TextInput id="txtPassword" />
                                </mx:HBox>
                                <mx:HBox width="100%">
                                <mx:Label width="30%" id="lbltest" />
                                <mx:Button id="btnSubmit" click="LoginButton_Click();" label="Login" fontSize="12"/>
                                </mx:HBox>
                                </mx:VBox>
                                <mx:VBox height="540" />
                                </mx:VBox>

                                menu1.mxml

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
                                <mx:Label text="World" />
                                </mx:Canvas>


                                menu2.mxml

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
                                <mx:Label text="Hello" />
                                </mx:Canvas>

                                • 13. Re: Login Page
                                  ntsiii Level 3
                                  Why not just put the login component as the first child of the Viewstack?

                                  Tracy
                                  • 14. Re: Login Page
                                    josh_aries Level 1
                                    The login component shd not be shown in the linkbar. They should see the link bar only after the user logs in
                                    • 15. Re: Login Page
                                      Gregory Lafrance Level 6
                                      Have visible, and includeInLayout set to false for LinkBar and ViewStack. Set them to true upon successful login.
                                      • 16. Login Page
                                        josh_aries Level 1
                                        Thanks a lot Greg. You have lot of patience. I tried add do it. The login page only shows up and the menu1 shows as selected in the linkbar. The menu1 page content is not showing. The code is as below

                                        <?xml version="1.0" encoding="utf-8"?>
                                        <mx:Application creationComplete="isReloaded();"
                                        verticalGap="0" width="100%" xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
                                        height="100%" xmlns:Comp="*" horizontalAlign="center" >
                                        <mx:Script>
                                        <![CDATA[
                                        import mx.controls.Alert;

                                        public var mySO:SharedObject = SharedObject.getLocal("userDetails");

                                        private function isReloaded():void
                                        {
                                        if( mySO.data.viewIndex != null )
                                        vs.selectedIndex = mySO.data.viewIndex;

                                        }

                                        private function saveIndex():void
                                        {
                                        mySO.data.viewIndex = vs.selectedIndex;
                                        mySO.flush();
                                        }
                                        ]]>
                                        </mx:Script>
                                        <mx:HBox width="80%" verticalGap="0" horizontalAlign="center">
                                        <mx:VBox verticalGap="0" horizontalAlign="center">
                                        <mx:Image id="imgLogo" source="../assets/images/NiyumHeader.jpg"/>
                                        <mx:LinkBar visible="false" includeInLayout="false" verticalGap="0" color="#FFFFFF" width="100%" selectionColor="#FFFFFF" backgroundColor="#000000" fontSize="11" horizontalGap="30" id="Menu" dataProvider="{vs}"></mx:LinkBar>
                                        <Comp:login label="Login" width="100%" height="100%" id="loginMenu" />
                                        <mx:ViewStack visible="false" includeInLayout="false" change="saveIndex();" verticalGap="0" id="vs" width="100%" height="100%">
                                        <Comp:menu1 label="menu 1" id="menuOne" width="100%" height="100%" />
                                        <Comp:menu2 label="menu2" id="menuTwo" width="100%" height="100%" />
                                        </mx:ViewStack>
                                        </mx:VBox>
                                        </mx:HBox>
                                        </mx:Application>


                                        login.mxml

                                        <?xml version="1.0" encoding="utf-8"?>
                                        <mx:VBox horizontalAlign="center" width="100%" height="100%" xmlns:mx=" http://www.adobe.com/2006/mxml">
                                        <mx:Script>
                                        <![CDATA[
                                        import mx.controls.Alert;
                                        public function LoginButton_Click():void
                                        {
                                        Alert.show("Button Click");
                                        this.parentApplication.Menu.visible=true;
                                        this.parentApplication.Menu.includeInLayout = true;
                                        this.parentApplication.vs.visible=true;
                                        this.parentApplication.vs.includeInLayout = true;
                                        this.parentApplication.vs.selectedIndex = 0;

                                        }

                                        ]]>
                                        </mx:Script>
                                        <mx:VBox width="50%" >
                                        <mx:HBox height="30" width="100%">
                                        <mx:Label id="lblLogin" text="Login" fontStyle="normal" fontSize="18" fontWeight="bold" />
                                        </mx:HBox>
                                        <mx:HBox width="100%">
                                        <mx:Label width="30%" id="lblUserName" text="User Name :" fontWeight="bold" fontSize="12" />
                                        <mx:TextInput id="txtUserName" />
                                        </mx:HBox>
                                        <mx:HBox width="100%">
                                        <mx:Label fontWeight="bold" width="30%" id="lblPassword" text="Password :" fontSize="12" />
                                        <mx:TextInput id="txtPassword" />
                                        </mx:HBox>
                                        <mx:HBox width="100%">
                                        <mx:Label width="30%" id="lbltest" />
                                        <mx:Button id="btnSubmit" click="LoginButton_Click();" label="Login" fontSize="12"/>
                                        </mx:HBox>
                                        </mx:VBox>
                                        <mx:VBox height="540" />
                                        </mx:VBox>

                                        • 17. Re: Login Page
                                          Gregory Lafrance Level 6
                                          But I thought initially you did not want the LinkBar to display? I would think visible=false; would keep it invisible until the user has logged it?
                                          • 18. Re: Login Page
                                            josh_aries Level 1
                                            Yeah the invisible is working fine. I wanted that as well. The main problem is the menu1 being selected on the linkbar but the content on that page is not showing. It still shows the content of the login page.
                                            • 19. Re: Login Page
                                              Gregory Lafrance Level 6
                                              Oh. When the user logs in, then set the visible to false for the login component, and also includeInLayout.

                                              So what you do is:

                                              1) Initially show login and hide LinkBar and ViewStack.
                                              2) Upon successful login, hide login, and show LinkBar and ViewStack.

                                              I believe you can achieve this using visible and includeInLayout properties.
                                              • 20. Re: Login Page
                                                josh_aries Level 1
                                                :-( :-(

                                                The login page is invisble now but the menu1 content is not showing. This is the method.

                                                public function LoginButton_Click():void
                                                {
                                                Alert.show("Button Click");
                                                this.parentApplication.Menu.visible=true;
                                                this.parentApplication.Menu.includeInLayout = true;
                                                this.parentApplication.vs.visible=true;
                                                this.parentApplication.vs.includeInLayout = true;
                                                this.parentApplication.vs.selectedIndex = 0;
                                                this.parentApplication.loginMenu.visible = false;

                                                }

                                                I would really appreciate if you can copy the code to test it. Thank you for the help.



                                                • 21. Re: Login Page
                                                  Gregory Lafrance Level 6
                                                  This works. I changed your login to use a form. Also simplified so you need to put stuff back:
                                                  • 22. Re: Login Page
                                                    josh_aries Level 1
                                                    Thanks a ton Greg. It worked. :-) :-)