3

Sticky Region Display Selector

I ran into one of those frustrations today with APEX 4.0. Whilst the introduction the region display selector has been very welcomed, I had the requirement for it to be sticky, i.e. remembered across page refreshes. Unfortunately this functionality is not available, but it is available in the APEX builder application just to rub our faces in it :)

Now my first port of call was to hit the forum and to my surprise no-one has posted a solution even though there have been several threads on the topic. So I had one of the moments where I contemplated being lazy and wait for a future release, but being someone who thrives on challenges (no matter how small) I thought I’d try my luck with a couple of dynamic actions to solve the problem. (I did think about writing a plugin, but it’s probably overkill for this requirement)

So here are the steps:

  1. Create a (non protected) hidden page item to hold the active region value of the region display selector
  2. Create the following dynamic action “Advanced -> Page Load”
  3. and for the true action
    The trick with the above javascript is that we’ll simulate a click event to change the active selection on page load. This will mean that there will be a flicker on page load, to avoid this use a modal overlay that hides the screen until all javascript has finished executing.
  4. Create a second dynamic action “Avanced -> Click”
  5. for the first true action
  6. for the second true action

    Now the trick with the above true action is that we simply want to update our page item value in session state with the selected region and nothing else. We use the first true action to set the page item value using a javascript expression and the second true action to fire an AJAX post to update the items value in session state server side. The DOM Object is a non existing element and just a hack to keep APEX validations happy. I could write an AJAX routine but I’m looking for the quickest and simplest method. This hack works quite well but you may want to do something a little cleaner.

The most optimal solution is probably to create an item and define these 2 dynamic actions on page zero and use a condition with an exists query that checks the APEX data dictionary to see which pages a region display selector defined on them. Or simply set a condition of a comma delimited list of pages etc. whichever works best for your situation.

6

Preview: Ext JS Layouts in APEX

One area that I’ve spent quite a bit of time on over the past few years when building APEX applications is the layout of regions on a page. It usually culminated in using either a combination of table/div based layouts with inline style in region attributes aided by additional Javascript to perform some majic resizing/animation abilities coupled with jQuery UI tabs and accordions. I’ll simply sum up the experience as extremely PAINFUL and awfully time consuming mainly thanks to IE and ongoing support for all the dodgy glue in between.

Now I know I’m not alone here, so ask yourself the question: Wouldn’t it be wonderful if we could have a customizable page layout that was responsive to window resizing, cleverly hide/shows content whilst packing in as much content as possible without making the page unreadable… oh and it’s simple to use? If that’s not enough how about we add the elimination of cross browser support issues and greatly reduce code maintenance requirements. Is there really such a Nirvana for APEX developers?

Well I think I may have just found it in the form of Ext JS layouts. I’ve recently been working on an Ext JS layout plugin for APEX that takes advantage of the new capabilities in APEX 4.0. The 4.0 feature that has made this plugin possible is the introduction of a parent child region hierarchy (which is still my most favourite feature in 4.0 along with plugins of course). The plugin supports the organisation of any APEX region into a structured and responsive page layout.

Here’s what Sencha states as a complex layout example

Here’s an example of the APEX layout plugin in action using only the border layout.

So looking at the above screenshot you’re probably thinking that the end result is really not much different from what you can achieve with the jQuery UI layout plugin, but this is Ext JS we’re talking about so the above was just a basic example. So to ramp up a little competition here’s a taste of what’s achievable with the APEX layout plugin when using a series of nested layouts in combination with the grid and tree plugin which I’ve previously built.

The above screenshot consists of:

  • Four Panels – North, South, West, and Center using a BORDER layout
  • Five editable grids with a combination of cell and row editing capability
  • Two searchable AJAX trees with a 50,000+ record hierarchical dataset
  • One interactive Report
  • One standard APEX form
  • Two Tab Panels, One nested within the First
  • Two Accordion regions
  • A combination of HBOX and VBOX layouts

Now how long would you expect to take to build such a page, given that your SQL queries are defined for the grids and trees? How does 30mins sound? and that’s probably a conservative estimate. I can promise you it took even less for the above example. It’s just purely amazing the productivity and end results you can get when combining both APEX & Ext JS.

The Ext Layouts supported by the plugin are:

  • BORDER – Any combination of NORTH,SOUTH,EAST,WEST,CENTER Panels
  • VBOX – vertical stacked regions
  • HBOX – horizontal stacked regions
  • ACCORDION – vertical expand/collapse behaviour showing 1 region at a time
  • TABPANEL – a set of tabs to hide show region content
  • FIT – automatically fills the container, for single regions

The most exciting thing about the above layouts is that they can be used in any combination, in any order, and nested X many levels deep, to generate the most organized and efficient way to present and interact with your APEX page regions and plugins. Forget endless page scrolling and disorganized content, maximize your end users viewing experience by using an IKEA like organizational approach to your pages. The layout plugin has the ability to generate the most complex layouts you could imagine, the only limitation is your browser and device’s performance. Ext JS 4.1 has some significant performance improvements coming which means that we will be able to push the boundaries even further.

But wait there’s still more… (says he… the dodgy car salesman)

The plugin includes state saving at either the session or application level to remember collapsed/expanded panels and sizing which is saved server side which ensures that the experience can be maintained across devices. Plus the tree and grid plugins which I’ve produced will automatically size correctly on page load, window, resizing, and panel collapse/expand and also benefit from lazy rendering so page load time is reduced. You can even define custom Ext config for every region to ensure you can tailor the display to your exact requirements, e.g. hiding headers, disabling/enabling scrollbars etc.

It won’t be long before the plugin will be available for download, and if your really keen to get your hands on a beta version before that date arrives just leave a message on my website contact form.

I’m excited about the possibilities Ext JS can bring to APEX. I’m hoping that with some help, we can make APEX the number one contender for Oracle Forms migration, thanks to Ext JS 4.x. One of the most advanced Javascript UI frameworks in the world.

More to follow soon…..

0

APEX 4.1 & jQuery Validation Plugin

Recently I’d started work on a new project in APEX 4.1 and a target browser of IE6. As part of the initial project setup I used the APEX Form Validation plugin provided by Guido Zeelen which is based on the jQuery validation plugin developed by Jörn Zaefferer from bassistance.de. Whilst I had no issue with the plugin in 4.0.x and IE6, I ran into a problem in APEX 4.1 which meant that on page submit all forms were passing as valid in IE6,7,8 even when they were invalid. However on Firefox, Chrome it was working perfectly… go figure!

There were a couple of red herrings that came up when I was looking for a solution, but in the end it was due to APEX running jQuery 1.6.2 and using v1.7 of the jQuery validation plugin which wasn’t a supported combination. The simple fix was to upgrade to v1.9.0 and I’m happy to say that it’s now working again on IE6,7,8…. well not entirely happy after losing a number of hours debugging, but hopefully you won’t if you run into the same problem :)

Pages ... 1 2 3 4 5 6 7 8 9