Newbie Simple Flex login

msukow
msukow used Ask the Experts™
on
I have a login component form as follows:
            <mx:Form id="loginForm" x="0" y="0"
                     verticalGap="3"
                     paddingTop="0"
                     paddingBottom="0"
                     paddingLeft="0"
                     paddingRight="0">  
      <mx:FormItem id="usernameFormItem" label="Username:">
            <mx:TextInput id="usernameText"/>
          </mx:FormItem>
          <mx:FormItem id="passwordFormItem" label="Password:">
            <mx:TextInput id="passwordText"/>
          </mx:FormItem>
            
          <mx:Button id="loginButtonID" click="currentState='productGroupingState'"
            styleName="loginButton" buttonMode="true" cornerRadius="0"/>
    </mx:Form>

I want to type in a username and password, and perform a simple if/then verification. Example: if the user types in "user" for the username, and "pass" for the password, then the condition is true. Once I understand this and it is working, then I will test against the values in the database using webservices.

The problem is that I get an error for the passwordText.text and the usernameText.text - why?

<mx:Script>
	  <![CDATA[
      
      
      [Bindable]
      public var un:String
      [Bindable]
      public var pw:String
      
      public function loginHandler(event:Event):void
      {
      //
      pw = passwordText.text;
      un = usernameText.text;
      trace("Password is: "+pw);
      trace("Username is: "+un);
        
      }
	  ]]>
	</mx:Script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			private function checkLogin():void {
			  if(usernameText.text == "user" && passwordText.text == "pass"){
			  	Alert.show("Success!");
			  }else{
			  	Alert.show("Fail!");
			  }
			}
		]]>
	</mx:Script>
	
	<mx:Form id="loginForm" x="0" y="0" verticalGap="3" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">  
		<mx:FormItem id="usernameFormItem" label="Username:">
			<mx:TextInput id="usernameText"/>
		</mx:FormItem>
		<mx:FormItem id="passwordFormItem" label="Password:">
			<mx:TextInput id="passwordText"/>
		</mx:FormItem>
		<mx:Button id="loginButtonID" label="Login" click="checkLogin()" styleName="loginButton" buttonMode="true" cornerRadius="0"/>
	</mx:Form>
	
</mx:Application>

Open in new window

Author

Commented:
I get the following errors:

1120: Access of undefined property passwordText.      mdiCreative/src      mdiCreative.mxml      line 12      1248017861019      831
1120: Access of undefined property usernameText.      mdiCreative/src      mdiCreative.mxml      line 12      1248017861018      830

Commented:
Then you didn't copy and past my example
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I am trying to use a login component, instead of putting the login into the application.
Commented:
So use my code in the login component.  Then on "Success: dispatch and event back to the main app.

Author

Commented:
Thanks - that works fine.

One last question - I am also sending to a different state through code in the component. The following is the code I am using. Becuase it is in the component, I do not think the path to the "productGroupingState" is correct.

click="currentState='productGroupingState'"

What should my currentState be?

Commented:
I think in the Main is is where you need to switch states.  So after the event is captured in the main App swap the state to a "Logged in state"

Author

Commented:
That make sense. But, that is also where I am having another issue. If I can just understand this flow, I think the rest of the application code should go well.

In the main app, I added the following script:
      <mx:Script>
        <![CDATA[
          public function captureLoginEvent (event:Event):void
          {
            trace("logged in");
              click="currentState='productGroupingState'"
          }
          
        ]]>

I want to add to the code a way to see what the event is. my tag for the component is:
<login:LoginComp x="541" y="10" /> which should be updated to:
<login:LoginComp x="541" y="10"  click(captureLoginEvent)/>

Am I on the right track?

Commented:
Put a break point on the trace and run it in debug mode and you can inspect the event.

Author

Commented:
Thanks for the insight - appreciate it.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial