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 :).
Hello,
ReplyDeleteI am trying to implement a custom login page. I am able to change the HTML but I can't figure out where the js that is called is. I need to hide the save user name and save password and place only one check box to save both. I was able to hide and display my new box but I can't find the right place to assign the new check box value to the hidden check boxes. I thought it would be in the js adf.mf.login.js it doesn't seem to work there. any ideas?
Hi Sry for late reply. Have you find the solution?
DeleteYes it should be in the adf.mf.login.js
How you are achieving this? If it is by javascript, why cannot you embed in customlogin.html code itself?
Thank you for your reply. Yes, I did that because I couldn't get it to work on the javaScript. Do we really need to copy all the javaScripts eventhough we won't use it?
ReplyDeleteThanks!
No, we do not need all the Java Scripts. I have removed 4 folders as i explained above in step 3. But for others we have to be careful. By looking at CustomLogin.html page it looks like we may only need base.js and adf.mf.login.js but these javascripts has call to other javascripts internally...so i kept them as it is. You can find out which java scripts are necessary and rest you can remove.
Delete