Sunday, October 30, 2011

iPhone Web Application Development With ADF Mobile Browser

This post provides sample code to cover complete use case scenario for mobile and simplify initial development phase for ADF mobile browser application. As it was presented on OOW this year, in the future we will have advanced ADF mobile support for HTML5, mobile application will leverage advanced functionalities offered by mobile frameworks. This is future, I will describe what is available today. Read more about ADF Mobile - Mobile Application Development with Oracle ADF Mobile.

Download sample application - MobileApp.zip. This sample was created by aggregating different resources from Oracle ADF Mobile developer guide. It is designed with JDev 11g R2, but it works with JDev 11g R1 as well (just few minor changes will be needed for CSS style manager class). Additionally to information from developer guide related to mobile functionality, I went one step further and completed ADF part as well. I believe this may help to design and implement ADF mobile browser applications easier. You can use provided sample to Jump Start your mobile development with Oracle ADF.

Sample application was designed and optimized for Apple iPhone, however it can run on other platforms as well. Implemented functionality:
  • ADF Security with Login/Logout support
  • Search screen with search results displayed in a table
  • Transition from search results screen to details screen
  • Editable details screen
  • Save/Undo functionality for editable data
In order to develop web applications optimized for iPhone platform, you should own Apple MacBook. If you have one, download Apple Xcode for free (development IDE from Apple) and run iPhone/iPad simulator application. Run iPhone simulator from Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/ folder. You don't need to have real iPhone, just test with simulator:


If you run provided sample application from JDeveloper 11g R2, or deploy to standalone WebLogic - access application through URL, directly from iPhone Safari browser:


Type username and password, authenticate into system by pressing Login button:


Immediately after login, user is redirected to browse/search page. Search criteria is implemented as choice list - there are no results for default selection:


Click on choice list and select another search criteria:


List with results will be displayed, user will be able to click on results record:


Open editable details screen with different actions:


We saw application screens, now let's look into application source code. It is developed as ADF MVC application, with one difference - we cant use ADF regions, because ADF Mobile Web is implemented with Trinidad and Trinidad is not supporting ADF region tag. Model is based on ADF BC, as any regular ADF application. There is special CSS file as well, this file contains CSS tailored for mobile browsers and special mobile platform looks (iPhone skin for example):


When developing ADF Mobile Web application, make sure to select ADF Mobile Browser technology:


Create JSPX pages, with mobile support, so all Trinidad tag libraries will be included. Make sure to define viewport as well, viewport is important for proper UI stretching on mobile device screen:


You should use predefined style classes for different Trinidad UI components, this will allow to achieve native mobile browser look and feel (these style classes are available from custom CSS file included with sample application):


There is some Java logic implemented as well. When user is changing search criteria choice list value, we are invoking Execute action - this will trigger VO refresh based on new bind variable value. For proper transition from browse screen to the editable details screen, we need to update current row key (otherwise details screen always will show first record available in VO rowset):


When data changes are reverted from editable screen, we should stay on current record (by default focus would jump to the first record from VO rowset). This can be implemented by performing row refresh:


You may wonder, how we are applying search criteria. Criteria is declared to be applied directly for VO instance, in Application Module - every time when VO will be refreshed or accessed - predefined View Criteria will be applied automatically:


There is no need to set bind variable value directly, because bind variable is predefined with Groovy expression language and retrieves value from VO implementation class method:


This method is accessing choice list VO and gets current row, its how we are able to get retrieve search criteria parameter value:


Login action is based on standard ADF Security method:


For successful redirect to Login page, make sure anonymous access is granted:

at

43 comments:

  1. AnonymousOctober 31, 2011 at 11:26 PM

    Hi, the code gives errors because of the version I think.

    In HERE:
    <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"

    ReplyDelete
  2. Andrej BaranovskijNovember 1, 2011 at 7:38 AM

    As indicated in the post, sample is implemented with 11g R2, and is based on JSF 2.0

    If you want to run on 11g R1, make sure to downgrade referenced tag libraries :)

    Andrejus

    ReplyDelete
  3. oceansNovember 2, 2011 at 12:34 PM

    Hi ,

    I get a compilation warning "<Unable to load descriptor D:\ADF_workspace\MobileApp\ViewControllerMobile\public_html/WEB-INF/weblogic.xml"

    and a deployment error "<Unable to load descriptor C:\Users\...\MobileApp\ViewControllerMobileWebApp.war/WEB-INF/weblogic.xml of module ViewControllerMobileWebApp.war. The error is weblogic.descriptor.DescriptorException: Unmarshaller failed"

    Any idea pls...

    Regards,
    Oceanvijai

    ReplyDelete
  4. Andrej BaranovskijNovember 2, 2011 at 12:39 PM

    Which version of JDev/ADF you are using?

    Andrejus

    ReplyDelete
  5. Andrej BaranovskijNovember 2, 2011 at 12:45 PM

    This sample app is developed with JDev 11g R2 (11.1.2.1.0).

    Open MobileApp workspace and start "view.jspx"

    Andrejus

    ReplyDelete
  6. oceansNovember 3, 2011 at 6:34 AM

    Hi,

    I use Jdeveloper 11.1.1.4 and thanks for the tip. I found multiple entries in my weblogic.xml. When I removed those, it deployed fine.

    But still, I found it working in my normal browser (chrome) but got an exception in my Iphone browser once I login with username and password.


    Regards,
    Oceanvijai

    ReplyDelete
  7. Andrej BaranovskijNovember 3, 2011 at 7:42 AM

    You must run this sample with JDev 11g R2 (11.1.2.1.0). Its clearly indicated in the post.

    Andrejus

    ReplyDelete
  8. Mike FlatNovember 7, 2011 at 9:00 AM

    Thanks Andrejus for reminding about the version JDev 11g R2 (11.1.2.1.0). It's a great post and i like it very much.
    Download Shame Alarm iPhone App

    ReplyDelete
  9. halimdbaNovember 17, 2011 at 7:41 AM

    very nice and its help me very much.


    Thanks&Regards
    Muhammad Abdul Halim
    http://halimdba.blogspot.com/

    ReplyDelete
  10. Adam SmithNovember 17, 2011 at 1:18 PM

    nice information this very useful for our developers....i will follow your blog....

    ReplyDelete
  11. Andrej BaranovskijNovember 17, 2011 at 2:32 PM

    Thanks, thats great !

    ReplyDelete
  12. Magneto InfotechNovember 23, 2011 at 9:54 AM

    Hi Thanks for Sharing this post really i most like it.

    ReplyDelete
  13. AnonymousNovember 24, 2011 at 7:49 PM

    Hi Andrejus,
    Thanks for the awesome post.This is a real good post to start off with ADF Mobile.
    I was able to launch the application but somehow its not showing the CSS.
    It doesn't recognize the css both in my mobile browser as well as desktop browser.
    Do I need to do some setting for the same.
    I'm using Jdev 11.1.2.1.0.

    Thanks

    ReplyDelete
  14. Andrej BaranovskijNovember 24, 2011 at 9:10 PM

    You are testing on Mac OS desktop browser?

    Andrejus

    ReplyDelete
  15. Mobile Application DevelopmentNovember 28, 2011 at 8:34 AM

    Hey, Thanks for this post....I want to know more about Mobile Application Development so please share more and more post with us.

    ReplyDelete
  16. Rahul BansalDecember 13, 2011 at 8:07 AM

    How can we implement Date picker in mobile ADF browser application??

    ReplyDelete
  17. Andrej BaranovskijDecember 13, 2011 at 1:59 PM

    Trinidad doesn't support date picker for mobile.

    Andrejus

    ReplyDelete
  18. AnonymousMay 3, 2012 at 5:07 PM

    Hi, Thanks for the good blog. This is a URL driven mobile browsing sample.
    Is there a way to develop a downloadable iphone app using ADF? (like the one normally developed using cocoa etc..)?

    Thanks again.

    ReplyDelete
  19. Andrej BaranovskijMay 3, 2012 at 6:08 PM

    Hi,

    This is expected from next version of ADF.

    Andrejus

    ReplyDelete
  20. Rahul BansalMay 8, 2012 at 4:49 AM

    how can we implement date picker in adf mobile.. is there a work around?
    Or how can i achieve this functionality??

    ReplyDelete
  21. Andrej BaranovskijMay 8, 2012 at 7:17 AM

    No workaround as I'm aware, just let user type date manually. Is a bug in Trinidad faces.

    Andrejus

    ReplyDelete
  22. Rahul BansalMay 9, 2012 at 3:08 AM

    Can we have modal support(pop up) using ADF mobile browser like the one we get in iphone?

    ReplyDelete
  23. baluleoSeptember 25, 2012 at 7:28 PM

    Nice Post Andrejus.
    I just tried it with Jdev 11.1.2.3.0

    This is the exception I am getting while running the viewcontroller or right click on view.jspx page

    com.sun.faces.config.ConfigurationException: CONFIGURATION FAILED! oracle.adfinternal.view.faces.bi.facelets.graph.RichSeriesSetHandler
    at com.sun.faces.config.ConfigManager.initialize(ConfigManager.java:357)


    Any clue ?

    ReplyDelete
  24. Jim MarionOctober 26, 2012 at 6:38 PM

    @Balu, I get the same error. I suspect it is something new with JDev 11.1.2.3.0.

    ReplyDelete
  25. Andrej BaranovskijOctober 26, 2012 at 9:49 PM

    Hi guys,

    I will test this during the weekend and will post update.

    Thanks,
    Andrejus

    ReplyDelete
  26. Andrej BaranovskijOctober 27, 2012 at 8:08 PM

    Hi,

    Indeed it doesn't work - but you can make it work by copying web.xml from mobile ADF application created with JDev 11.1.2.3.0. Also double check that ViewController have all libraries as mobile ADF application created with JDev 11.1.2.3.0 (you will need to add few of them).

    Andrejus

    ReplyDelete
  27. AmarNovember 9, 2012 at 7:39 AM

    Hi Andrejus,
    when iam trying to run the login page following error is occur.

    Error during preRegister for MBean oracle.mds.lcm:name=MDSAppRuntime,type=MDSAppRuntime,Application=MobileApp
    java.lang.RuntimeException: java.lang.NoClassDefFoundError: Could not initialize class com.bea.security.quark.ASIParserProxy

    Could you please give me solution.

    ReplyDelete
  28. Andrej BaranovskijNovember 9, 2012 at 7:58 AM

    Please specify JDev version you are running?

    Andrejus

    ReplyDelete
  29. RaviNovember 13, 2012 at 6:30 AM

    Andrejus,

    This in reply to your question for Amr issue
    We are using JDev 11.1.2.3.0

    Error during preRegister for MBean oracle.mds.lcm:name=MDSAppRuntime,type=MDSAppRuntime,Application=MobileApp
    java.lang.RuntimeException: java.lang.NoClassDefFoundError: Could not initialize class com.bea.security.quark.ASIParserProxy

    Regards,
    Ravi

    ReplyDelete
  30. Andrej BaranovskijNovember 13, 2012 at 8:49 AM

    Hi,

    This issue is not reproduced. And what if you create new ADF Mobile web browser application, you get same error on your machine?

    Andrejus

    ReplyDelete
  31. RaviNovember 15, 2012 at 7:01 AM

    Andrejus,

    Thanks, When we recreate a new ADF project, we arenot seeing the same issue. Not sure why this issue is poping up at times.

    And another issue is, we are trying out this example. But we are unable to see the error messages when login failed. We have implemented the same login that u have mentioned in ur login bean, adding messages to FacesContext.

    Any idea?

    Regards,
    Ravi

    ReplyDelete
  32. Andrej BaranovskijNovember 15, 2012 at 7:11 AM

    It might be not supported by Mobile browser. You can show text instead of the popup.

    Andrejus

    ReplyDelete
  33. RaviNovember 15, 2012 at 7:25 AM

    Andrejus,

    Thanks for the quick response.
    As per your code below in catch, can you please let us know how can we modify for show text?
    catch (FailedLoginException fle) {
    System.out.println("FailedLoginException ");
    FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Incorrect Username or Password", "An incorrect Username or Password was specified");
    ctx.addMessage(null, msg);
    }

    ReplyDelete
  34. Andrej BaranovskijNovember 15, 2012 at 7:32 AM

    Add outputText on Login page, add binding property and set value dynamically in request scope.

    Andrejus

    ReplyDelete
  35. RaviNovember 15, 2012 at 9:12 AM

    Andrejus,

    Got the error message working, thanks.

    And now we are having issues in dispatching to next page when successfull.

    String loginUrl = "/adfAuthentication?success_url=/faces/view.jspx";

    We are getting HTTP 404 error.
    Error 404--Not Found

    From RFC 2068 Hypertext Transfer Protocol -- HTTP/1.1:

    10.4.5 404 Not Found

    The server has not found anything matching the Request-URI. No indication is given of whether the condition is temporary or permanent.

    Regards,
    Ravi

    ReplyDelete
  36. RaviNovember 20, 2012 at 2:08 PM

    Andrejus,

    I am back again with one more issue :).
    As in your sample application i am using table component to display list of rows. But the table width is stretching beyond the width of
    .

    Same appears in both IoS and Android devices.

    In your blogs the screenshots of table for perfect, the only difference i have used JSF1.2 instead of 2.0.

    Please throw some light on this.

    Regards,
    Ravi

    ReplyDelete
  37. AnonymousDecember 5, 2012 at 4:33 PM

    Hello Andrejus,

    I am not able to see the jazn.xml from the zipped sample,how do i run the sample you provided from Jdev,should the login.jspx be run to get the URL??

    ReplyDelete
  38. Andrej BaranovskijDecember 6, 2012 at 6:58 AM

    There is one, you can see if through JDev, go to Descriptors->META-INF. This is standard location for jazn-data.xml

    You can see it on file system as well: MobileApp/src/META-INF

    Andrejus

    ReplyDelete
  39. AnonymousJanuary 22, 2013 at 7:58 AM

    Hi
    Thanks this is great works fine,I tried to accomplish Google-Like Search in ADF Mobile Browser. I found that Auto-Suggest behaviour is not available in ADF Mobile.
    Is there any work around to achieve auto-suggest behaviour?

    ReplyDelete
  40. UnknownMarch 22, 2013 at 5:01 PM

    Hi Andrejus,

    I would like to deploy this app on GlassFish Server. Is this possible?

    I have successfully deployed ADF Essential and sample app from your post.

    Regards,
    - Girish

    ReplyDelete
  41. Andrej BaranovskijMarch 22, 2013 at 5:04 PM

    Hi,

    It should be possible, its using only plain ADF libs and Trinidad.

    Andrejus

    ReplyDelete
  42. Phelan FlynnJune 26, 2013 at 5:21 AM

    As in your example program i am using table factor to show history of sequence. But the table dimension is increasing beyond the dimension Same seems to be in both iOS and Android working system os devices.

    ReplyDelete
  43. AnonymousDecember 7, 2013 at 7:48 AM

    Hi Andrejus,

    I am new to ADF mobile browser but working on ADF from quiet some time. I have a basic question.

    1)If i develop a normal web page using ADF web application(ADF faces), can i render the page in mobile device with the mobile look and feel using "render in mobile device" checkbox while creating page?
    2)IF i specifically use ADF mobile browser technology, can i access the page with good look and feel in laptop/desktop browser?

    3) IF thats not the case, do i have to develop separate ADF pages for Desktop browser and mobile browser?

    Thanks,
    Radhika

    ReplyDelete