Custom Login page for ADF Mobile Applications

I think it is a common requirement to have custom login page for ADF mobile application in order to provide some additional functionality. In this blog I will going to show you how to create custom login page.

Here is best practices that I summarized from ADF mobile developer guide, which you may also follow during custom login page creation for your ADF mobile app.

1) First enable the security to your application with default login page and deploy to emulator   or device.

2) Go to your apps deployed directory find the default login page

3) Copy this default login page to public html folder of your application controller using your own custom name say MyCustomLogin.html

4) Finally go to adfmf-application.xml file and select  custom option and browse your custom login page

5) Next time you generate your mobile app this login page is used and you can start customizing this page as per your requirement.

Let me explain each of the above steps

1)First enable the security to your application with default login page and deploy to emulator or device

It is advised that you should first configure security with default login page and verify everything is working fine and then start customizing login page

you can refer Andrejus blog to know about how to secure adf mobile application or you can refer ADF mobile developer guide.

once you secured your application and deployed to emulator or device you will get default login page as shown below

2)Go to your apps deployed directory find the default login page

   It should be under deploy directory with name adf.login.android(/iphone).html

Here is what I usually follow to find default login page

I)   Copy your .apk file in your deployment profile to some other location and rename your .apk file  to .zip  and extract it to some folder  and you will get  below directory structure 

  

In the above directory just open assest ->www -> and inside this folder you will find default login page as shown below(I think for ios it should be named as adf.login.ios.html)

3) Rename this default login page(Say MyCustomLogin) and copy to public html folder of your application controller 

  Note: default custom login page also need some js file to work properly, So you should copy all the necessary js files to js folder of your application controller project.

To make our life simple, I will copy entire js folder which I got when I extracted .apk file. Copy it to application controller project.

Once you done above step and open your application controller project you will see the below directory structure

Note: inside this js folder you may get unnecessary files which are  not required ,so you can remove all of them. For example as i shown in the below image the 4 folders are not necessary but be careful while removing others

4) Next step is to open your adfmf-application.xml file and in security tab select security tab and choose custom options and browse the custom login page which your created in earlier steps.

At this stage, I request you deploy the app once again and test  your security is  working fine. 

5) Customize as per your requirement

Now you can customize login page as per your requirement. Just to show, I will provide Exit functionality in the login page(which you do not get with default login page). Since our custom login page is html you can achieve the exit functionality by using  Java script. here is what you may need to do

immediately after onLoad() function i have placed my exit functionality code

/**

   * Document is done loading this is called and we add a listener for the

   * phonegap event 'deviceready'.

   */

  function onBodyLoad() {

      document.addEventListener("deviceready", onDeviceReady, false);

  };

  function exitFromApp() {

      navigator.app.exitApp();

  }

and here is how my exit button looks like

 <button name="buttonClick" onclick="exitFromApp()">Exit</button>

once you done deploy the app again you will get custom login page with exit button functionality for your adf mobile app

below is what i get once i done all the above steps. I tested both in device and emulator and it is working fine.

In my custom login page i have added one output text and one button.

Note: since this login page is a html page and if you want to run some business logic on this page using some bean method then you have to call your bean method using JavaScript and again call JavaScript from java bean method so it kind of cumbersome task, so i request you to try maximum to achieve your functionality using JavaScript so that it is easy to include in your html login page. 

Hope this helps you :).