Thursday, November 17, 2011

Getting Started with Mobile in APEX - Part 2

jQuery Mobile 1.0 Final was released today! Time to take it for a spin. As outlined in my previous post, jQuery Mobile is available for download on the jquerymobile.com web site:

Alternatively, if you were referencing the CDN, you could of course also simply update your jQuery Mobile enabled templates and remove the "RC2" or "RC3" suffix from your file references:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Then just re-run your pages, and you'll be up and running using the shiny, new final release of jQuery Mobile 1.0!

Now running my original "Hello World!" sample with jQuery Mobile 1.0 would be a bit boring. So here's a new sample application, this one should be more interesting. It's a very basic message board application. Point your mobile device (or desktop browser) to this URL:

You'll get a home page showing recent messages, along with the title, author and create date and time. When you click on a message, you'll get to a read-only view of the message details. When you click on the create button on the home page, you can enter a new message, with your name, email and message title. Give it a try, leave me some feedback and comments, and if you like the app, it's available for download as well. It comes with the underlying database objects bundled in as supporting objects, i.e. they're created when you install the application.

For the most part, this is a standard APEX application, nothing too fancy or out of the ordinary. The only relevant templates are those containing "mobile" in their names. The home page was built as a standard classic report page, using a customized named-column report template. The form page is a standard APEX form, which is omitting the form table-grid using the corresponding region template attribute and using the new label template field container attributes. The buttons use simple anchor tags, and illustrate how you can have different button colors, using the new "hot" attribute for buttons. And for the back button, I used a jQuery Mobile button icon, which can be easily included using the HTML data- attributes, data-icon in this case.

So try out the application, and leave your comments in the message board. I'll follow up with additional details on some of the more advanced concepts in upcoming posts.

12 comments:

  1. Marc, great article, this is taking Apex to the next level!
    Small problem I ran into though.
    When creating a radio button i wanted to add the attribute data-role="controlgroup" to the radio's fieldset element to get JQM to group the options. I also wanted the legend element as a child of the fieldset containing the label of the item, letting it work nicely with the <div data-role="fieldcontain"> surrounding the radio.

    Is there some way we can get this done properly?

    Thanks in advance,

    Maarten

    ReplyDelete
  2. Thanks for yor post. I look forward to apex 4.2 with more mobile support.

    ReplyDelete
  3. Thanks Mark,

    Great article. I have downloaded your app and test it. I have question when I run my app from apex developer tool and if I click on apex toolbar at bottom (Home, Application nnn or Edit Page nn) to goback to my current app or page. Its display Lodaing image. I can not goback to my app or current page. Other toolbar option like Session, view debug works fine. I get error on Firefox and IE8 both browser,

    If i used one of existing theme page template all apex toolbar works fine.

    Any Idea?

    Thanks

    ReplyDelete
  4. Following up on the question about the APEX developer toolbar, this is currently not working. The reason is the AJAX based page loads the jQuery Mobile uses by default. If you turn this off for your entire app, then the toolbar would work, however then you would loose the smooth page transitions. So we'll see what we can do in APEX 4.2 about this.

    ReplyDelete
  5. Hi Maarten, there are some item types in APEX where you currently can't control the HTML generated by the engine to the extend you would need. We're planning to open this up further in APEX 4.2

    ReplyDelete
  6. Hi Marc!

    Great work. Unfortunately I fail importing your application. There is an error message saying "NOT COMPATIBLE (Your export may contain calls not supported by your application version.)"

    Any ideas how to solve this issue?

    regards,
    Christian

    ReplyDelete
  7. Hi Christian,

    Thank your for your feedback. Which version of Oracle Application Express are you using?

    Thanks,
    Marc

    ReplyDelete
  8. I am using Application Express 4.0.2.00.07. It differs from your version (4.2). Do you have export file for 4.0.2.?

    regards,
    Christian

    ReplyDelete
  9. Hi Marc, I installed your application on apex.oracle.com and it works with version 4.1. Many thanks! Christian

    ReplyDelete
  10. Hi Christian, yes, this sample requires APEX 4.1 or above

    ReplyDelete
  11. Hello Marc,
    THanks for such a great article which gives a broad outlook of using Mobile and Apex. I am working on something like this, and Have created a UI for an app to extract out the data from APEX. But there is some issue with the UI, wrt CSS, that I am loading as an HTML page and the existing template/theme that I use for the APEX app. The CSS of Jquery them and Theme of APEX coincide together the UI is a mixture of both the themes. I would happy if you could help me/guide me through this.

    ReplyDelete
  12. Hi Marc,
    any idea why the demo wouldn't run on an iPhone (iOS 5.1.1). All I can see when I load the page (http://apex.oracle.com/pls/apex/f?p=59765:1) is the page title 'Mobile Demo 2', but the page is blank white with no visible content.

    Thanks,

    Mike

    ReplyDelete