Creating a Custom User Login with ZoomFlex

By default the standard ZoomFlex application will use the Shado users class as the class to authenticate users. In many cases developers may want to use a their own users / members table(class) rather than making users that need to login actual Shado users. Here is how you do this.

1. First up create a simple SOF class called “myapp_members” (or whatever you want to call it). Add the following properties:

label (use the default label but rename the label to “emailAddress”)
password: type: string
administrator: type: checkbox

2. Compile your ZoomFlex application as now that we have the members SOF class we can add the logic to our default ZoomFlex application.

3. We will now need to create our custom login form and replace the default “Shado Users” login. To do this create a new file in views/myapp_members/ called Login.mxml and past the code below into the file.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
    <![CDATA[
        import com.straker.zoom.events.LoginEvent;
        import com.straker.zoom.controllers.EventController;
        import com.straker.zoom.dictionaries.ClassRegister;
        import com.zoom.models.ModelLocator;

        [Bindable]
        public var modelLocator:ModelLocator = ClassRegister.getRegister().getClass("ModelLocator");

        public var eventController:EventController = ClassRegister.getRegister().getClass("EventController");

        public function handleLoginAttempt():void {
            eventController.dispatchEvent( new LoginEvent("userloginattempt",userID.text,password.text));
        }
    ]]>
</mx:Script>

<mx:Form width="100%" height="100%" >



    <mx:Text width="100%" height="50" text="Enter your Member ID and password below to login. " />

    <mx:FormItem width="100%" label="ID" required="true">

        <mx:TextInput id="userID" width="175"/>

    </mx:FormItem>

    <mx:FormItem width="100%" label="Password" required="true">

        <mx:TextInput id="password" displayAsPassword="true" width="175"/>

    </mx:FormItem>


    <mx:VBox width="100%" horizontalAlign="right">

        <mx:HBox>

            <mx:Text id="errorMsg" color="red" visible="{modelLocator.loginMessageError.length != 0}" text="{modelLocator.loginMessageError}" />

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

        </mx:HBox>


    </mx:VBox>

</mx:Form>




</mx:VBox>

4. Then open view/Display.mxml and replace

<login:Main />

With

<myapp_members:Login />

5. Now we want to create custom controller to handle the login event. To do this we have to navigate to com/zoom/controllers and create a new file called UserController.as and add the following code:

package com.zoom.controllers
{
    import com.straker.zoom.controllers.EventController;
    import com.straker.zoom.dictionaries.ClassRegister;
    import com.straker.zoom.events.LoginEvent;
    import com.zoom.models.ModelLocator;
    import mx.rpc.events.ResultEvent;
    import flash.events.Event;
    import mx.containers.Canvas;

    public class UserController
    {

        public var eventContoller:EventController = ClassRegister.getRegister().getClass("EventController");


        [Bindable]
        public var modelLocator:ModelLocator = ClassRegister.getRegister().getClass("ModelLocator");

        public function UserController():void {

            eventContoller.addEventListener("userloginattempt",attemptuserLogin);

    modelLocator.sits_userVO.addEventListener("handleLoginAttempt",handleLoginAttempt);


        }

        public function     attemptuserLogin(event:LoginEvent){

            var oArgs:Object = {};
            oArgs.label = event.userID;
            oArgs.password = event.password;

    modelLocator.myapp_members.invoke("getObjects","handleLoginAttempt",oArgs);
        }

        public function handleLoginAttempt(event:ResultEvent) {

            if (event.result.length != 0){
                trace("logged in");
                eventContoller.dispatchEvent(new Event ("loginSuccess"));
                modelLocator.sits_userVO.getThis(event.result[0].OBJ_UUID);

            }


        }

    }
}

6. Now we need to make sure that the UserController is created. Do this by adding the following line into the MainController.as file.

public var userController:UserController = new UserController();

Now recompile your application, add some users in the myapp_members table and you will have a custom login form.

Comments

There are no comments for this page as yet.

Add a comment

Creating a Custom User Login with ZoomFlex

Comments

Categories