Implementing a cross-platform passcode screen

Password and passcode screens are common verification instruments for enterprise apps. These screens provide interaction patterns that help solve both authentication and confirmation scenarios.

This recipe demonstrates how to implement a cross-platform passcode screen similar to those seen on iOS and in the Android networking screens.

Getting ready

This recipe uses the Ti.Passcode CommonJS module to implement a cross-platform passcode screen. This module and other code assets can be downloaded from the source provided by the book, or individually through the links provided in the See also section at the end of this recipe. Installing this module in your project is straightforward. Simply copy the Ti.Passcode.js file into the Resources folder of your project as shown in the following screenshot:

Getting ready

How to do it...

Once you have added the Ti.Passcode.js file to your project, you need to create your application namespaces in the app.js file and use require to import the module into your code as the following code demonstrates:

//Create our application namespace
var my = {
  mod : require('Ti.Passcode')
};

Creating the recipe UI

This recipe uses Ti.UI.Windows to present information to the user. The code used to create the first Ti.UI.Window is discussed in this section. This section details how to launch the Ti.Passcode module and provides a code to have it verified.

Creating the recipe UI

Now perform the following steps:

  1. First, a Ti.UI.Window is created to attach all UI elements.
    var win = Ti.UI.createWindow({
  backgroundColor: '#fff', title: 'Passcode Example', 
  layout:'vertical',fullscreen:false, exitOnClose:true
});
  2. Next the txtPasscode Ti.UI.TextField is added to the Ti.UI.Window. This control is used to collect the passcode that the Ti.Passcode module will verify against.
    var txtPasscode = Ti.UI.createTextField({
  value:'1234',hintText:'Enter Passcode',
  height:45, left:5, right:5,
  borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(txtPasscode);
  3. Finally the bntRunPasscode Ti.UI.Button is added to the Ti.UI.Window. This button will be used later in the recipe to launch the passcode screen.
    var btnRunPasscode = Ti.UI.createButton({
  title:'Open Passcode Screen', top:25, height:45, 
  left:5, right:5	
});
win.add(btnRunPasscode);

Launching the passcode screen

The second Ti.UI.Window in this recipe is created by the Ti.Passcode module. This Ti.UI.Window is responsible for the presentation and verification of the application passcode. This section describes how to configure, create, and confirm your app passcode using this module's display element shown in the following screenshot:

Launching the passcode screen

The passcode verification screen is launched when the user taps the btnRunPasscode Ti.UI.Button and triggers the click event to be fired. The following code snippet discusses the actions performed after the click event is fired:

btnRunPasscode.addEventListener('click',function(x){
  1. The first code block in the click event of the btnRunPasscode button is to create our configuration and other variables. The options object contains all of the settings needed to configure the Ti.Passcode window.
      var codeWindow  = null, 
  options = {
  2. The window configuration element allows for all of the standard Ti.UI.Window properties to be used. The following snippet shows how to set the backgroudnColor and navBarHidden properties on the passcode window.
        window:{
      backgroundColor:'#ccc',
      navBarHidden:true
    },
  3. The view configuration element allows for the configuration of a majority of the components displayed in the Ti.Passcode window. The following snippet demonstrates how to set the passcode title property and code for displaying the error message:
        view:{
      title:'Enter application passcode',
      errorColor:'yellow'
    }
  };

    Tip

    Please review the Ti.Passcode module for a complete list of the configuration properties available.

  4. Next the onCompleted callback function is defined. This function will be used as the callback method provided to the Ti.Passcode module. The passcode verification results will be provided as a dictionary to the d input parameters.
      function onCompleted(d){
  5. The d argument is an object with the verification results. The d.success property provides an indicator if the entered passcode matches the passcode provided on launch. The following code snippet alerts the user if they have entered the correct passcode or if they need to try the process again.
        if(d.success){
      alert('Passcode entered is correct'),
      codeWindow.close();
    }else{
      Alert('Invalid passcode, please try again'),
    }
  };
  6. The next step in this section of the recipe is to create a new instance of the passcode module. The following snippet demonstrates how to do this:
      var passcode = new my.mod();
  7. The createWindow method is then called on the new passcode instance. This method provides the passcode to verify from the txtPasscode control, and also provides the callback and options objects created earlier. This method then returns a Ti.UI.Window. Once the passcode has been entered, the callback method onCompleted will send the verification results.
      var codeWindow =
  passcode.createWindow(txtPasscode.value,
  onCompleted,options);
  8. The Ti.UI.Window returned by the createWindow method is then opened with a modal flag. The passcode Ti.UI.Window will remain open until closed by the onCompleted callback method as discussed earlier.
      codeWindow.open({modal:true});
});

The following screenshots illustrate how this section of the code looks on the device after the user has successfully entered his/her passcode.

Launching the passcode screen

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.129.148.210