Wednesday, June 27, 2012

Part II: Mobile Application with REST services

Application Download: https://www.dropbox.com/s/7d0k9cqhf2sqhoj/MobileApp.zip 


Use Case Scenario

This is part II of the “Verify User – JSON REST API” we created and previously deployed. This is just a simple HTML5 jQuery mobile application wrapped as a standard J2EE application and deployed onto the same server as the REST service.

It is a simple login page that invokes the REST service to determine whether the user is authenticated or not. It doesn’t encrypt/decrypt the password. It’s just to demonstrate that you can leverage these REST services in any type of application. We could easily use this same REST service in our ADF portal application or a standard portlet. It doesn’t matter …

In this application you can enter any user in the HR schema Employees table with the password “welcome1” and it will authenticate. In this demonstration we’ll use SKING (mixed case works fine). If authentication fails it takes them to an ERROR dialog page (still inside the same page). If it passes the user is taken to a private page “welcome.jsp” (This is not really protected).

If you’ve kept up with ADF Mobile the next release (PS6) is supposed to support a better HTML5, JQuery, PhoneGap, etc. etc. to provide a quicker template solution for mobile development within the ADF techstack.

Part II: The Mobile App

I started out by creating a “Generic Application” and a “Generic Project” with Java, JSP and Servlet technology added to it.



I created a couple of standard JSP pages:
  • Login.jsp
    • I’m using a standard HTML5 JQuery Mobile template layout to leverage multiple display sections in a single page. If you look through the code you’ll notice:
      • Main Content
        • This is my main page displayed to the user and has the username, password, and submission button.
      • Content Dialog
        • This is the dialog section that notifies the user that there was an issue with their login. Once they return to the main content the fields that are required are highlighted.
      • Content Error Dialog
        • This is the dialog section that notifies the user that there was an issue with their login. If the user is not found they must enter the username/password again.
      • Content Transition
        • If your REST service takes a while (this shouldn’t) this portion of the content will display with an animated gif to show the user the transaction is in progress.
  • /priv/welcome.jsp
    • This is a standard page that lets the user know that the login was successful and they can log out if they wish to do so.
Below is a screenshot of the application layout.


Once you deploy the application you should be able to run it using the URL below:

http://localhost:7101/MobileApp/login.jsp

4 comments:

  1. Can we have the ADF version of this rather than html5/jquery? If I read between the lines, is this better than going completely ADF?

    ReplyDelete
  2. Hi
    At a very high level can't we just create an adf mobile app which does not use REST, JSON, JQUERY and HTML5? What are the pros and cons of both metods? And where does the ADF life cycle fit in these scheme of things. i.e. How different ADF behaves with the technologies mentioned above. I'm trying to get a handle on the differences between them.

    ReplyDelete
  3. Sorry for the late response. I didn't receive notifications that there were comments on here.

    It's not really that I will be developing an "ADF version." I will just develop an ADF application that will leverage the same REST API that I've built in this application.

    You could easily develop an ADF Mobile app without using REST, JQuery, or HTML5. I would say that by designing your mobile applications using REST, HTML5, and JQuery you're learning the basics of mobile development that will eventually be incorporated into the next patchset of ADF Mobile (using PhoneGap).

    Although this is just speculation that ADF mobile will transition to HTML5 + JQuery ... I heard a lot of rumors at Collaborate '12 this past April.

    At this point in time I do not think that mixing ADF into an HTML5/JQuery mobile application is a good idea. I don't think they will mix very well without a bit of work to do so.

    I just wrote these articles to help someone familiar with ADF who might be interested in mobile development w. REST.

    ReplyDelete
  4. I posted a new blog post about mixing ADF and Mobile together.

    ReplyDelete