mobile Oracle APEX on your smartphone

Going mobile is one of the hot topics at the moment. Everyone has a smartphone with internet connection and a browser. Some prefer brand A against brand B, but that’s just a personal preference. It doesn’t really change a thing.

You want to join the crowd and provide a mobile interface for your APEX Application? Nothing easier than that!

As pointed out above the variety of mobile phone brands and Operation Systems is wide and our APEX Application should run on any device, regardless if there is a fruit on the back cover or something else (a robot?).

Oracle APEX lets you create a web application and you can influence the HTML Code it creates. That also means you can include a 3rd Party Javascript Library to provide support for mobile devices.

There are several Javascript libraries/frameworks covering mobile support, like: jqTouch, Sencha Touch, jQuery mobile, dhtmlx touch and many more.

After several tests i decided to use jQuery mobile, as it fits the APEX structure best, covers the broadest range of mobile devices and will also be included in APEX 4.1 (or 4.2, whenever they are ready for mobile). See the Statement of direction for more Information.

See what it looks like:

Here you can see it in a demo Showcase:

The good thing is, everything you see is built using standard APEX components. There is at first a Theme with a small number of Templates to create a HTML Structure that jQuery mobile expects. Then there are a couple of Plugins to render HTML5 compliant input items (the type-attribut of the input item makes the mobile browser decide which onscreen keyboard should be used: number, test, phone, email, url).
In the pictures above you can see a standard login screen, a List for the main menu, a report with a special template and a standard form using the HTML5 Plugin for the phone keyboard.

There will be a very detailed article in one of the next issues of the german APEX Community where i describe how this demo Application was built (and provide the Theme source code).
Once this is released i will provide you here with an english version of that.

If you like this and you want to create a mobile APEX Application too, then you have 3 options:

  1. create a mobile Theme on your own (that takes some time at the first try…)
  2. wait for APEX 4.1 where support for mobile will hopefully be included (this might take a while)
  3. wait for my next Blog Posting on this topic (best choice!)

Update: the next Blog Posting was released

  1. Kees on June 1, 2011

    Looks really cool Peter!
    good job.

  2. VANJ on June 1, 2011

    Very nice, looking forward to to your next blog post!

  3. […] can read the full article on how I created my mobile application using APEX, at Tags: featured All Things […]

  4. […] was reading Peter Raganitsch blog regarding mobile theme in APEX, nice […]

  5. Mike on October 25, 2011

    Peter – I’m not able to login to the demo app using my iPhone, I can login through my desktop though. Any ideas?



  6. Peter Raganitsch on October 25, 2011

    did you try closing the browser window/tab on your iphone and start fresh from ?

  7. Mike on October 25, 2011

    Hi Peter – thanks for the reply, yes I just tried that again but no luck. The login page refreshes and just displays the username/password dialogue again as if I’ve supplied the incorrect details, no error message. Whereas if I enter rubbish I do get an “Invalid Login Credentials” message, I’m on iOS5?



  8. Mike on November 15, 2011

    Hi Peter,
    In your webinar where you go through this demo, which iPhone simulator are you using?



  9. Peter Raganitsch on November 15, 2011

    This is the official iOS-Simulator of the XCode IDE on Mac.

  10. Mike on June 6, 2012

    Hi Peter,
    Have you any idea why select lists are not rendering correctly in IE (looks good in FF and Chrome), see screenshot here:

    I noticed in your demo application you have a select list working OK in the product details page, did you have to do anything special to get it displaying correctly?



  11. Peter Raganitsch on June 6, 2012

    Mike, that should just work normal.

    Please compare the order of included js-libraries/css-files in my and your demo-app.

  12. José Guglielmini on July 26, 2012

    Hi Peter, I’m testing your demo in desktop and mobile and I have the following questions, when downloading a file from the Products option leads me to a screen with the message “undefined” and no file can be uploaded, please could you explain because this error occurs.

  13. Peter Raganitsch on July 28, 2012

    Hi Jose,

    File Upload isn’t supported by mobile Browsers (lack of a regular File-System, i assume).

  14. José Guglielmini on July 30, 2012

    Hi Peter, thanks for your response, I also tested your demo in chrome and mozilla browsers for desktop and I got the same error.
    Could you please confirm if your demo for mobile works on a desktop browser?.
    thank you very much

  15. Tom Clark on January 30, 2013

    Did you ever post the source code for your example above or the ability to read the source code?
    I would like to understand how you did a few things and it would be nice to not have to reinvent the wheel.
    I like the back button, good job and thanks for sharing ;-)

  16. Tom Clark on January 30, 2013

    When I click download of a picture I get a blank screen with the word undefined?? If I refresh my page then it does show the picture. I am thinking that this is an Oracle Apex bug since I have this issue with some of my mobile apps and have not been able to resolve. I believe it is related to something with the ajaxs.

  17. Peter Raganitsch on February 4, 2013

    Hi Tom,

    the source code for this demo is not available for download, but you can see most of the important things in the blogposts on this blog.

    If you found a bug, please report it to the official APEX Forum, thanks.