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: http://www.click-apex.at/apex/f?p=mobile
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:
- create a mobile Theme on your own (that takes some time at the first try…)
- wait for APEX 4.1 where support for mobile will hopefully be included (this might take a while)
- wait for my next Blog Posting on this topic (best choice!)
Update: the next Blog Posting was released
Looks really cool Peter!
good job.
Very nice, looking forward to to your next blog post!
Pingback: Oracle APEX on your Smartphone – Allthingsoracle.com
Pingback: Mobile Device Detection in Oracle APEX « oraclecheatsheets
Peter – I’m not able to login to the demo app using my iPhone, I can login through my desktop though. Any ideas?
Thanks,
Mike
Mike,
did you try closing the browser window/tab on your iphone and start fresh from http://mobile.click-apex.at ?
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?
Thanks,
Mike
Hi Peter,
In your webinar where you go through this demo, which iPhone simulator are you using?
Thanks,
Mike
This is the official iOS-Simulator of the XCode IDE on Mac.
Hi Peter,
Have you any idea why select lists are not rendering correctly in IE (looks good in FF and Chrome), see screenshot here:
http://i46.tinypic.com/25qc50l.png
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?
Thanks,
Mike
Mike, that should just work normal.
Please compare the order of included js-libraries/css-files in my and your demo-app.
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.
Hi Jose,
File Upload isn’t supported by mobile Browsers (lack of a regular File-System, i assume).
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
regards
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 ;-)
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.
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.
Pingback: Creare app per cellulari con Jquery mobile: tutorial, link utili e guide | gratis
please help in creating mobile application in apex 18.1. please help in step by step assistance