Adding a Login Screen to a Sencha Touch Application, Part 1

in this tutorial you will learn how to add a login screen and login controller to a sencha touch application. the sample application you will build will have two views: the login view and the mainmenu view. this is a popular setup in mobile applications, where you present users with a login screen, and upon successful login, you display the application’s main menu:

the app’s directories

let’s begin by creating the application’s directories, which should look like the following screenshot:

the index.html file is the file that connects all the pieces of the application. in it, you will place the references to the sencha touch library, as well as to the javascript files containing the application’s code.

creating the login view

the view/login.js is the login view. as depicted in the wireframe below, you will use a sencha touch form panel, an image, a couple of text boxes, and a button to build this view:

let’s first define the login view:

ext.define('sample.view.login', {
    extend: 'ext.form.panel',
    alias: "widget.loginview",
    config: {
        title: 'login',
        html: 'login view'
    }
});

before adding any components to this view, we are going to open the app.js file and define the application like so:

ext.application({
    name: 'sample',
    views: ['login'],
    launch: function () {

        ext.viewport.add([
            { xtype: 'loginview' }
        ]);
    }
});

if you launch the index.html in google chrome, you should be able to see the login view:

the login view’s components

now we can go back to the view/login.js file and create the components of the view:

ext.define('sample.view.login', {
    extend: 'ext.form.panel',
    alias: "widget.loginview",
    requires: ['ext.form.fieldset', 'ext.form.password', 'ext.label', 'ext.img'],
    config: {
        title: 'login',
        items: [
                    {
                        xtype: 'image',
                        src: ext.viewport.getorientation() == 'portrait' ? '../../../img/login.png' : '../../../img/login-small.png',
                        style: ext.viewport.getorientation() == 'portrait' ? 'width:80px;height:80px;margin:auto' : 'width:40px;height:40px;margin:auto'
                    },
                    {
                        xtype: 'label',
                        html: 'login failed. please enter the correct credentials.',
                        itemid: 'signinfailedlabel',
                        hidden: true,
                        hideanimation: 'fadeout',
                        showanimation: 'fadein',
                        style: 'color:#990000;margin:5px 0px;'
                    },
                    {
                        xtype: 'fieldset',
                        title: 'login example',
                        items: [
                            {
                                xtype: 'textfield',
                                placeholder: 'username',
                                itemid: 'usernametextfield',
                                name: 'usernametextfield',
                                required: true
                            },
                            {
                                xtype: 'passwordfield',
                                placeholder: 'password',
                                itemid: 'passwordtextfield',
                                name: 'passwordtextfield',
                                required: true
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        itemid: 'loginbutton',
                        ui: 'action',
                        padding: '10px',
                        text: 'log in'
                    }
         ]
    }
});

the first component in this view is an image, which you can create using the xtype:’image’ config:

{
    xtype: 'image',
    src: ext.viewport.getorientation() == 'portrait' ? '../../../img/login.png' : '../../../img/login-small.png',
    style: ext.viewport.getorientation() == 'portrait' ? 'width:80px;height:80px;margin:auto' : 'width:40px;height:40px;margin:auto'
}

note that the check on the device’s orientation in order to determine what image file to use. if the viewport’s orientation’s is landscape, you will use a smaller image, which prevents the username and password fields from being pushed outside the viewport:

while it is acceptable for a simple example such as this tutorial, a disadvantage of this approach is that it only works when the view is instantiated. if the device’s orientation changes after the view is created, the view will not re-adjust itself . you should consider using device profiles for production-grade applications where you need the best possible experience for any given platform and orientation.

right after the image, you will add a label to display any login errors that might occur:

{
    xtype: 'label',
    html: 'login failed. please enter the correct credentials.',
    itemid: 'signinfailedlabel',
    hidden: true,
    hideanimation: 'fadeout',
    showanimation: 'fadein',
    style: 'color:#990000;margin:5px 0px;'
}

as the hidden config indicates, the label is not visible initially. you will make it visible when an error condition occurs.

the hideanimation and showanimation configs allow you to specify the animations used to hide and show the label respectively. using these animations will make the process of displaying error messages more pleasant to the eyes of the app’s users.

upon adding the image and label components to the login view, you need to take care of the fields that you will use to capture a user’s credentials and perform the authentication logic of the app. the username and password fields will live inside a fieldset component, which you will add to the login view:

{
    xtype: 'fieldset',
    title: 'login example',
    items: [
        {
            xtype: 'textfield',
            placeholder: 'username',
            itemid: 'usernametextfield',
            name: 'usernametextfield',
            required: true
        },
        {
            xtype: 'passwordfield',
            placeholder: 'password',
            itemid: 'passwordtextfield',
            name: 'passwordtextfield',
            required: true
        }
    ]
}

placing these text fields inside a fieldset will give the view a nicer look:

note that you need to set the itemid config for these fields so it is easier to refer to them from within any event handlers that you create in the view. you will see this in play in a few minutes.

the last component in the view is the login button. you will add it using the following code:

{
    xtype: 'button',
    itemid: 'loginbutton',
    ui: 'action',
    padding: '10px',
    text: 'log in'
}

generating an application-wide sign-in event

with all the view’s components in place, it is time to create the login logic. the first step would be to create a tap listener for the login button. you will add this listener to the view’s listeners config:

listeners: [{
    delegate: '#loginbutton',
    event: 'tap',
    fn: 'onloginbuttontap'
}]

the listener indicates that tap events on the component with the id loginbutton will be handled by the onsinginbuttontap method. you can add the method right after the view’s config object:

onloginbuttontap: function () {

    var me = this;

    var usernamefield = me.down('#usernametextfield'),
        passwordfield = me.down('#passwordtextfield'),
        label = me.down('#signinfailedlabel');

    label.hide();

    var username = usernamefield.getvalue(),
        password = passwordfield.getvalue();

    // using a delayed task in order to give the hide animation above
    // time to finish before executing the next steps.
    var task = ext.create('ext.util.delayedtask', function () {

        label.sethtml('');

        me.fireevent('signincommand', me, username, password);

        usernamefield.setvalue('');
        passwordfield.setvalue('');
    });

    task.delay(500);
}

let’s take a moment to examine onsinginbuttontap. first, you create references to the view, the label, the username and password fields, and the values of the fields:

var me = this,
    usernamefield = me.down('#usernametextfield'),
    passwordfield = me.down('#passwordtextfield'),
    label = me.down('#signinfailedlabel'),
    username = usernamefield.getvalue(),
    password = passwordfield.getvalue();

next comes hiding the label. you need to perform this step because when you enter the handler, you don’t know if the label is already visible due to a prior login error.

the most interesting code in the method is the instantiation of a delayedtask, and the code this delayedtask instance executes:

var task = ext.create('ext.util.delayedtask', function () {

    label.sethtml('');

    me.fireevent('signincommand', me, username, password);

    usernamefield.setvalue('');
    passwordfield.setvalue('');
});

task.delay(500);

the delayedtask first resets the error label’s html, fires an event to signal the controller that a request to sign in has occurred, and resets the values of the username and password fields.

you may ask why you should use a delayedtask to run this code when you could just run it in the scope of the onloginbuttontap method. the reason you are delaying the execution of this code for 500 milliseconds is that you want the label’s hide animation to finish before firing the singincommand event. remember that earlier you set this animation using the hideanimation config of the signinfailedlabel component.

also, note how the me variable allows you to keep a reference to the login view and use it inside the delayedtask’s anonymous function. this function runs in a different execution context, where the this variable is a reference to the window object. you can easily observe the me and this pointers in chrome if you set a breakpoint inside the onloginbuttontap method:

when the debugger breaks, you can create a couple of watches, one for the this variable, and one for the me variable. as depicted below, the this variable is a reference to the window object, while the me variable is a reference to the login view, which is a form panel:

next steps

in this article, we set out to learn how to add a login feature to a sencha touch application. we decided to build a small sencha touch app that will demonstrate a very basic login feature, consisting of a login view and a login controller, which will authenticate the app’s user and grant her access to other features of the application.

at this point you have created the app’s login view, which has four main visual components:

• the error label
• the username text field
• the password text field
• the logon button

you have also added the onloginbuttontap method, an internal event handler for the tap event of the logon button. this method fires the signincommand application event, which will be captured by the login controller.

in the next chapter of this series, you will create the login controller. in it, you will handle the signincommand event, and create the logic to authenticate the user and grant her access to the application’s main menu screen.