12 Replies Latest reply on Jun 15, 2011 4:18 AM by messmoooo

    Login panel ontop of a form?? (howto)

    blwthompson-Js3DR6

      Hi, Ive developed a Login for, awfully! But i want to be able to have that onto of my main form and when the Login button is clicked if credentials are correct that it sets focus onto the main form. So far i have the main form and the login form as seperate MXML files. As im not sure how to do it with a single file. But i would like it to be a single file, so when the login form is up the Main form is all blured. Can anyone help please??

       

       

      Brendan

        • 1. Re: Login panel ontop of a form?? (howto)
          m_hartnett Level 3

          Here is a very simplistic example of bluring.  I dont know if this is what you are talking about

           

          <?xml version="1.0"?>

          <!-- dpcontrols/TreeSimple.mxml -->

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          initialize="cc()">

           

          <mx:Script>

          <![CDATA[

           

          public function login():void {

          unblurForm.target = this.otherForm;

          unblurForm.play()

          }

           

          public function cc():void {

          blurForm.target = this.otherForm;

          blurForm.play()

          }

           

           

           

          ]]>

          </mx:Script>

          <mx:Blur id="blurForm" duration="1000"

          blurXFrom="0.0" blurXTo="10.0"

          blurYFrom="0.0" blurYTo="10.0"/>

          <mx:Blur id="unblurForm" duration="1000"

          blurXFrom="10.0" blurXTo="0.0"

          blurYFrom="10.0" blurYTo="0.0"/>

           

           

          <mx:Form width="362" height="88" id="lgForm">

          <mx:FormItem label="pwd">

          <mx:TextInput id="pwd" width="210"/>

          </mx:FormItem>

          <mx:FormItem label="userId" >

          <mx:TextInput id="userId" width="210"/>

          </mx:FormItem>

          </mx:Form>

          <mx:Button label="Login" click="login()"/>

          <mx:Form width="364" height="88" id="otherForm">

          <mx:FormItem label="item one">

          <mx:TextInput id="itemOne" width="210"/>

          </mx:FormItem>

          <mx:FormItem label="itemTwo" >

          <mx:TextInput id="itemTwo" width="210"/>

          </mx:FormItem>

          </mx:Form>

          </mx:Application>

          1 person found this helpful
          • 2. Re: Login panel ontop of a form?? (howto)
            blwthompson-Js3DR6 Level 1

            I inputed that code into a fresh Adobe AIR project, however the program will not execute when i click run, it goes through in the progress bar but the application never appears! This happens to all my applications and i dont know why!! Ive posted a thread about it as well! If you can think of anyreason why this could happen please let me know!! And then ill test out that code... !

            • 3. Re: Login panel ontop of a form?? (howto)
              blwthompson-Js3DR6 Level 1

              Okei, I've got your code to run using mx:WindowedApplication which now seems to work again!! Yes this is similar to what i want. However i want more like you start the application there is the main for like you have, but a popup which is the login form, and the entirety of the main form is blurred behind the login form popup, if you get me? Any idea on how to do that??

               

              Brendan

              • 4. Re: Login panel ontop of a form?? (howto)
                m_hartnett Level 3

                Do you want your login form to be in a separate window that will not close until the user gets a correct login?

                 

                If that is the case you should use a TitleWindow to do that.

                On successful login you can close the TitleWindow and blur the main form into focus.

                 

                here is a link on how to do TitleWindows

                 

                http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_12.html

                1 person found this helpful
                • 5. Re: Login panel ontop of a form?? (howto)
                  blwthompson-Js3DR6 Level 1

                  Thanks, ill give that a whirl tomorrow!! and let you know!!

                  • 6. Re: Login panel ontop of a form?? (howto)
                    Gregory Lafrance Level 6

                    You can have the code in two files and still have the main app blur.

                     

                    If this code answers your question or helps, please mark it as such:

                    ------------------ Login.mxml -----------------------------

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                      creationComplete="PopUpManager.centerPopUp(this);">
                      <mx:Script>
                        <![CDATA[
                          import mx.managers.PopUpManager;
                       
                          private function checkLogin():void{
                            if(user.text == "Greg" && pwd.text == "hello"){
                              PopUpManager.removePopUp(this);
                            }else{
                              msg.text = "Login Failed";
                            }
                          }
                        ]]>
                      </mx:Script>
                      <mx:Label id="msg"/>
                      <mx:Form>
                        <mx:FormHeading label="Login"/>
                        <mx:FormItem label="User:">
                          <mx:TextInput id="user"/>
                        </mx:FormItem>
                        <mx:FormItem label="Password:">
                          <mx:TextInput id="pwd" displayAsPassword="true"/>
                        </mx:FormItem>
                        <mx:FormItem>
                          <mx:Button label="Login" click="checkLogin()"/>
                        </mx:FormItem>
                      </mx:Form>
                    </mx:TitleWindow>

                     

                    -------------------- TestAir.mxml ----------------------------

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
                      creationComplete="init();">
                      <mx:Script>
                        <![CDATA[
                          import mx.managers.PopUpManager;
                       
                          private function init():void{
                            var login:Login = new Login();
                            PopUpManager.addPopUp(login, this, true);
                          }
                        ]]>
                      </mx:Script>
                      <mx:Form>
                        <mx:FormItem label="First Name:">
                          <mx:TextInput id="fname"/>
                        </mx:FormItem>
                        <mx:FormItem label="Last Name:">
                          <mx:TextInput id="lname"/>
                        </mx:FormItem>
                        <mx:FormItem label="Address1:">
                          <mx:TextInput id="add1"/>
                        </mx:FormItem>
                        <mx:FormItem label="Address2:">
                          <mx:TextInput id="add2"/>
                        </mx:FormItem>
                        <mx:FormItem label="City:">
                          <mx:TextInput id="city"/>
                        </mx:FormItem>
                        <mx:FormItem label="State:">
                          <mx:TextInput id="state"/>
                        </mx:FormItem>
                        <mx:FormItem label="Zip:">
                          <mx:TextInput id="zip"/>
                        </mx:FormItem>
                        <mx:FormItem label="Phone:">
                          <mx:TextInput id="phone"/>
                        </mx:FormItem>
                        <mx:FormItem label="Email:">
                          <mx:TextInput id="email"/>
                        </mx:FormItem>
                      </mx:Form>
                    </mx:WindowedApplication>

                    • 7. Re: Login panel ontop of a form?? (howto)
                      blwthompson-Js3DR6 Level 1

                      Greg, thats basically it, just one more thing are you able to make it so that after one login form it goes to another and then another with 3 seperate sets of credentials?? i.e.

                       

                      Login Form #1 : Greg//hello

                      Login Form #2 : Greg2//hello2

                      Login Form #3 : Greg3//hello3

                       

                      and the it goes to the main form! Is that possible??

                       

                      ill check answer in the morn and give you though Kudos but for now sleepy time!

                       

                      Brendan

                      • 8. Re: Login panel ontop of a form?? (howto)
                        Gregory Lafrance Level 6

                        You may need to refine this, particularly what to do if the last login fails, but it works:

                         

                        -------------- Login.mxml ---------------

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                          creationComplete="PopUpManager.centerPopUp(this);"
                          title="Login STAGE ONE" name="Login">
                          <mx:Script>
                            <![CDATA[
                              import mx.managers.PopUpManager;
                           
                              private function checkLogin():void{
                                if(user.text == "Greg" && pwd.text == "hello"){
                                  var login2:Login2 = new Login2();
                                  PopUpManager.addPopUp(login2, this, true);         
                                  this.visible = false;
                                }else{
                                  msg.text = "Login Failed";
                                }
                              }
                             
                              public function closeMe():void{
                                PopUpManager.removePopUp(this);
                              }
                            ]]>
                          </mx:Script>
                          <mx:Label id="msg"/>
                          <mx:Form>
                            <mx:FormHeading label="Login"/>
                            <mx:FormItem label="User:">
                              <mx:TextInput id="user"/>
                            </mx:FormItem>
                            <mx:FormItem label="Password:">
                              <mx:TextInput id="pwd" displayAsPassword="true"/>
                            </mx:FormItem>
                            <mx:FormItem>
                              <mx:Button label="Login" click="checkLogin()"/>
                            </mx:FormItem>
                          </mx:Form>
                        </mx:TitleWindow>

                         

                        ------------ Login2.mxml -------------------

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                          creationComplete="PopUpManager.centerPopUp(this);"
                          title="Login STAGE TWO" name="Login2">
                          <mx:Script>
                            <![CDATA[
                              import mx.core.Application;
                              import mx.core.IChildList;
                              import mx.managers.PopUpManager;
                           
                              private function checkLogin():void{
                                if(user.text == "Greg" && pwd.text == "hello"){
                                  var login3:Login3 = new Login3();
                                  PopUpManager.addPopUp(login3, this, true);
                                  Login(mx.core.Application.application.systemManager.getChildByName("Login")).closeMe();
                                  this.visible = false;
                                }else{
                                  msg.text = "Login Failed";
                                }
                              }
                             
                              public function closeMe():void{
                                PopUpManager.removePopUp(this);
                              }
                            ]]>
                          </mx:Script>
                          <mx:Label id="msg"/>
                          <mx:Form>
                            <mx:FormHeading label="Login"/>
                            <mx:FormItem label="User:">
                              <mx:TextInput id="user"/>
                            </mx:FormItem>
                            <mx:FormItem label="Password:">
                              <mx:TextInput id="pwd" displayAsPassword="true"/>
                            </mx:FormItem>
                            <mx:FormItem>
                              <mx:Button label="Login" click="checkLogin()"/>
                            </mx:FormItem>
                          </mx:Form>
                        </mx:TitleWindow>

                         

                        --------------- Login3.mxml -------------------

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                          creationComplete="PopUpManager.centerPopUp(this);"
                          title="Login STAGE THREE">
                          <mx:Script>
                            <![CDATA[
                              import mx.managers.PopUpManager;
                           
                              private function checkLogin():void{
                                if(user.text == "Greg" && pwd.text == "hello"){
                                  Login2(mx.core.Application.application.systemManager.getChildByName("Login2")).closeMe();
                                  PopUpManager.removePopUp(this);
                                }else{
                                  msg.text = "Login Failed";
                                }
                              }
                            ]]>
                          </mx:Script>
                          <mx:Label id="msg"/>
                          <mx:Form>
                            <mx:FormHeading label="Login"/>
                            <mx:FormItem label="User:">
                              <mx:TextInput id="user"/>
                            </mx:FormItem>
                            <mx:FormItem label="Password:">
                              <mx:TextInput id="pwd" displayAsPassword="true"/>
                            </mx:FormItem>
                            <mx:FormItem>
                              <mx:Button label="Login" click="checkLogin()"/>
                            </mx:FormItem>
                          </mx:Form>
                        </mx:TitleWindow>

                         

                        --------------- TestAIR.mxml ----------------

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
                          creationComplete="init();">
                          <mx:Script>
                            <![CDATA[
                              import mx.managers.PopUpManager;
                           
                              private function init():void{
                                var login:Login = new Login();
                                PopUpManager.addPopUp(login, this, true);
                              }
                            ]]>
                          </mx:Script>
                          <mx:Form>
                            <mx:FormItem label="First Name:">
                              <mx:TextInput id="fname"/>
                            </mx:FormItem>
                            <mx:FormItem label="Last Name:">
                              <mx:TextInput id="lname"/>
                            </mx:FormItem>
                            <mx:FormItem label="Address1:">
                              <mx:TextInput id="add1"/>
                            </mx:FormItem>
                            <mx:FormItem label="Address2:">
                              <mx:TextInput id="add2"/>
                            </mx:FormItem>
                            <mx:FormItem label="City:">
                              <mx:TextInput id="city"/>
                            </mx:FormItem>
                            <mx:FormItem label="State:">
                              <mx:TextInput id="state"/>
                            </mx:FormItem>
                            <mx:FormItem label="Zip:">
                              <mx:TextInput id="zip"/>
                            </mx:FormItem>
                            <mx:FormItem label="Phone:">
                              <mx:TextInput id="phone"/>
                            </mx:FormItem>
                            <mx:FormItem label="Email:">
                              <mx:TextInput id="email"/>
                            </mx:FormItem>
                          </mx:Form>
                        </mx:WindowedApplication>

                        • 9. Re: Login panel ontop of a form?? (howto)
                          blwthompson-Js3DR6 Level 1

                          Cheers Greg!! I'll refine that a bit later on and let you know how it went!! Thanks to you to Mark!! You've both been very helpful!! I'll post how it all goes!!

                          • 10. Re: Login panel ontop of a form?? (howto)
                            messmoooo

                            Hi,

                             

                            but if i want to add login panel (username, password and login button) can use this code ofcourse with modified or cant? i already develop air chat applcation but i meet probelm to create login panel please if any help to how create login panel in air applcation will be helpful.

                            also i got this error when i tried modified the code i believe code near work is just need a little help to work fine if im not wrong, i attach 2 images shwon error that i got.help!

                             

                            error.jpg

                            error1.jpg

                            Thanks,

                            • 11. Re: Login panel ontop of a form?? (howto)
                              messmoooo Level 1

                              Hi all,

                               

                              I had modified the code again now doesnt have any error at the code at less this what Flash bulider said, but when i running the code i got other error

                              I believe may i do some error at PopUpManager, well the error is like it i run application and got this error.

                               

                              TypeError: Error #1009: Cannot access a property or method of a null object reference.
                                  at mx.managers::PopUpManagerImpl/centerPopUp()[E:\dev\4.x\frameworks\projects\framework\src\ mx\managers\PopUpManagerImpl.as:498]
                                  at mx.managers::PopUpManager$/centerPopUp()[E:\dev\4.x\frameworks\projects\framework\src\mx\ managers\PopUpManager.as:213]
                                  at Main/___Main_WindowedApplication1_creationComplete()[C:\Documents and Settings\ahmed\Adobe Flash Builder 4\Egtecno Lab\src\Main.mxml:6]
                                  at flash.events::EventDispatcher/dispatchEventFunction()
                                  at flash.events::EventDispatcher/dispatchEvent()
                                  at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core \UIComponent.as:12528]
                                  at mx.core::UIComponent/set initialized()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:1627]
                                  at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.x\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:759]
                                  at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.x\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1072]

                               

                              Also other error that Flash Builder oopen POpUpManager actionscript file automatic, i attach images shwon error that i got, and by the way even this air application is loading ofcourse username/password didn't work with me but is loading when run code without debug run, help please for solve this problem.

                               

                              Error at Flash Bulider when run application by Debug.

                              errorflashbulider.jpg

                              Error appear together application when i run by normal way.

                              applcationwitherror.jpg

                              Application after click Dismiss All.

                              applicationafterclick dismiss all.jpg

                               

                               

                               

                               

                               

                               

                              Best,

                              • 12. Re: Login panel ontop of a form?? (howto)
                                messmoooo Level 1

                                Hello guys,

                                 

                                I solve the error that was appear when run code is this:-

                                 

                                TypeError: Error #1009: Cannot access a property or method of a null object reference.
                                     at  mx.managers::PopUpManagerImpl/centerPopUp()[E:\dev\4.x\frameworks\pro  jects\framework\src\mx\managers\PopUpManagerImpl.as:498]
                                    at mx.managers::PopUpManager$/centerPopUp()[E:\dev\4.x\frameworks\projec ts\framework\src\mx\managers\PopUpManager.as:213]
                                     at Main/___Main_WindowedApplication1_creationComplete()[C:\Documents  and Settings\ahmed\Adobe Flash Builder 4\Egtecno Lab\src\Main.mxml:6]
                                    at flash.events::EventDispatcher/dispatchEventFunction()
                                    at flash.events::EventDispatcher/dispatchEvent()
                                    at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\f ramework\src\mx\core\UIComponent.as:12528]
                                    at mx.core::UIComponent/set initialized()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UI Component.as:1627]
                                     at  mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.x\framewo  rks\projects\framework\src\mx\managers\LayoutManager.as:759]
                                    at  mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.x  \frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]

                                 

                                Well i solve by change creationComplete="PopUpManager.centerPopUp(this);" to creationComplete="initApp();"

                                 

                                Also i set my username at user and password at pwd like it.

                                 

                                private function checkLogin():void{
                                                if(user.text == "myuser" && pwd.text == "mypassword"){
                                                    PopUpManager.removePopUp(this);
                                                }else{
                                                    msg.text = "Login Failed";
                                                }
                                            }

                                 

                                 

                                And also i add the form username, password and login button, later i run code and work fine the error disappear but still have one problem i set my username and password so when i written username and password that i set inside code applcation dosent enter, im sure i writtn what i set inside code, well and  msg login failed dont appear  so this a prove that every thing is okay but applcation dosent enter only this the problem i meeting right now, please if any suggest or fresh idea will be helpful.

                                 

                                Best,