APEX 4.2 goes live!

Last week, after more than a year since the release of v4.1, Oracle released version 4.2 of APEX. In this article I would like to show its most significant modifications. Moreover, you will see not only ‘this feature, that feature’ list, but also some examples of those new functionalities. So, the most important modifications are: -> Introduction of HTML5  charts/graphs, themes and components -> Return of package applications -> A lot of new functionalities for mobile devices:

 

  1. mobile interfaces
  2. new components added for mobile applications (of course already mentioned above: HTML5 & responsive themes also should be mentioned in this section )
  3. new ‘Dynamic actions’ like ‘swipe’, ‘tap’
  4. HTML5-mobile-oriented items like slider, on/off switch or calendar

 

-> Responsive themes -> Refreshed APEX’s interface With uncertain future of flash on mobile devices (or maybe word ‘certain’ is much more convenient: after this announcement by Adobe we finally realized that Steve Jobs was 100% right in that matter) there is no surprise that everybody is moving toward HTML5 and, well, looks like days of using flash in that kind of applications are numbered.

 

So now you just need to update your APEX to 4.2 and then we can proceed to take a closer look at those new, fancy features!

HTML5 Charts This was long-awaited one. Finally we may be sure that our dashboards can work now and in the future at any device. As we may see, there is no way to build HTML5 gauges or Gantt charts, although we may still create them in flash.

 

 

 

What also seems to be very important, migration of charts from flash to HTML5 is one click operation – if we open chart properties, we may choose to change output format:

 

 

The process of chart creation didn’t change and we may customize the same set of chart attributes, no matter of its format. Another important, migration-related issue: chart format doesn’t impact chart layout almost at all. Well, maybe it’s not true for any kind of chart, but at least for basic ones it is: I created HTML5 equivalent of flash chart that we previously created in the previous blog entry, and they are almost identical:

 

 

I don’t see any difference, except for font size – although it’s set for same value in chart properties in both cases. Mobile interface Mobile interface is yet another mobile device related feature, which facilitates significantly the creation of user friendly interface while designing this kind of applications. When creating a new app in APEX we may choose ‘jQuery Mobile Smartphone’ interface. Nevertheless we should keep in mind that it may be also added later, as one application may now use two themes – one of them for mobile devices, the other for ‘regular’; based on the type of browser client uses, APEX will run the appropriate interface.

 

 

As an example of mobile app we will create a basic navigation list. Let’s create an application using mobile interface, add 3 blank HTML pages and create an HTML region to each of them. Now let’s create a navigation list at each of the previously created regions by adding the following HTML code: <ul data-role=”listview” data-theme=”a”> <li><a href=”f?p=109:1:&SESSION.”>page1</a></li> <li><a href=”f?p=109:2:&SESSION.”>page2</a></li> <li><a href=”f?p=109:3:&SESSION.”>page3</a></li> </ul> …and of course replacing application id with value corresponding to your app. Now you can already test it, and I would recommend doing that using your mobile device, whichever it is.

 

 

I made that screen using android device with 480×800 screen – and I must admit that look & feel of that application at my smartphone is far better in comparison to the typical webpage. And yes, I added some extra content at the bottom – this is ListView form, which may be created extremely easy in APEX, just click Add new region->Form->Form on a Table with ListView. ListView component may be also used when creating report, Add new region->Report->ListView.

It’s all so easy with APEX! And, returning to navigation lists for a moment, I absolutely recommend http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html to learn them better, as there is no tutorial or other wizard in APEX to build them automatically.

Responsive theme(s)

Well, I use the parenthesis on purpose, because as for now there is only one responsive theme available in APEX, still I expect to see much more of them in the future as the feature seems to be really useful.  How it works? Well, this is also quite intuitive and simple: in case those regions wouldn’t fit the screen (because of their size), regions are reorganized automatically, so they try to fit the screen better than in the original layout. This feature is also related to mobile devices, with screen proportions that are way different from those used with PC´s/laptops (especially in case of smartphones). Let me show you an easy example!

To start, we need to create a new application, and this time we are going to use ‘responsive theme’ (#25). When completed, we do create 3 HTML regions, and in the third of them we need to change default settings: we set them (Grid Layout section) like on the following screen:

 

 

So originally, in the full screen (1366×768) window of my PC, page looks like this:

 

 

And now, if I change window size, the regions are reorganized automatically!

 

 

Cool, isn’t it?

Summary

As we have seen, most of the new options in APEX are related to mobile devices. No surprise this market is getting more and more attention as it’s growing rapidly and a lot applications developed nowadays require a mobile version. Considering that it is the first APEX release designed for mobile development in that extent, we must still wait for community response on mobile features. Whether it will be positive or negative, I wouldn’t be surprised to see much more functionalities for mobile devices in future releases. Stay tuned to the next updates!

Karol K
karol.kanicki@clearpeaks.com