JQuery UI confirmed in Oracle Apex 4.0

Oracle indicated that jQuery would be included as part of Oracle Apex 4.0 last year at OpenWorld, and this is stated in the current roadmap.

The question is whether Oracle were planning to use jQuery UI or not still remained unanswered.
The recent Apex 4.0 video and powerpoint by Mike Hichwa and David Peake has a slide at the beginning making me think that they would be including the jQuery UI.

Today Tyler Muth confirmed that jQuery UI is definitely included as discussed in detail in this forum post.

So, does this leave ExtJS out in the cold?
Well not really, as I indicated earlier in the same forum post, because ExtJS has a plugable adaptor framework which can use jQuery as a base layer.
This allows you to use jQuery for the non-visual aspects and ExtJS on top of it, allowing you to use the best features of both.

The other rumour I heard, is a beta of Oracle Apex 4.0 is very close to going live, but that’s unconfirmed.

Apex Modal Windows with updates...

LOL - and just when I thought I'd get away with being lazy...

Here's an example to keep Vikas happy

Apex Modal Windows are a snap using ExtJS

A number of people have been posting about modal windows on the Oracle Apex forum of late.

Some of the solutions provided have used jQuery UI, or using window.showModalDialog.

I’m not a fan of window.showModalDialog as a quick Google search shows it is not supported by all browsers.
The jQuery UI version is functional, but the visual appearance doesn’t live up to the ExtJS standards in my opinion.

Anyway have a look at the Modal Popup Window example and see what you think.
To call the popup window I simply add the highlighted onClick text to my edit link as shown below.

You’d have to agree it doesn’t get much simpler than that.

Oracle APEX: User friendly exceptions and logging

One of the bug-bears of Oracle Apex has been intercepting unplanned exceptions and displaying a user-friendly message.


I've decided to tackle the issue using a little AJAX to capture the error and retrieve a "nice" user-friendly message.

It also gives me the opportunity to log the error, as well as relevant session information.

Check out Friendly Exception Messages with source code.

The code uses Apex built-in javascript, so can be used on any application (no need for ExtJS).

Another Oracle Apex ExtJS demo site

Tobias Arnhold has just released a Apex-ExtJS demo site APEX at Work as well as his blog.

It's well worth a look as Tobias is using a different ExtJS theme and is using more of the standard Apex builtins.

I look forward to seeing what he comes up with in the future.

Hopefully this may encourage a few others to demo their Apex-ExtJS solutions - I've seen screenshots from a number of other sites using ExtJS with Apex with really nice functionality.

ExtJS customized Viewport for Oracle APEX

One of the issues you may experience with ExtJS, is that it moves html DOM elements around when it renders the page. For example if your using tab panels or the Viewport.

This can result in your form elements ending up outside of the form.
You can solve this by using allowDomMove:false as discussed in this Apex Forum thread or solve the problem once and for all by using a customized version of the Ext.Viewport.

I like the second option better, so here is the solution.

1. Replace references to Ext.Viewport with Ext.ux.FormViewport (see below) in your javascript.
2. Add the following style to your css #wwvFlowForm {width:100%; height:100%;}

See also Building a complete Oracle Apex page template using ExtJS

Enjoy

Mark

/*
* Mark Lancaster Wednesday, 16 January 2008 12:00 PM
*

/**
* @class Ext.ux.FormViewport
* @extends Ext.Container
* A specialized container representing the viewable application area (the browser viewport).
* 
 The Viewport renders itself to the wwvFlowForm element, and automatically sizes itself to the size of
* the browser viewport and manages window resizing. There may only be one Viewport created
* in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
* added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
* method of any of its child Panels may themselves have a layout.
* 
The Viewport does not provide scrolling, so child Panels within the Viewport should provide
* for scrolling if needed using the {@link #autoScroll} config.
* By default, when applyTo is not specified, the Viewport renders itself to the document body.
*/
Ext.ux.FormViewport = Ext.extend(Ext.Container, {
/**
* @cfg {Mixed} applyTo
* The id of the node, a DOM node or an existing Element that is already present in
* the document that specifies some panel-specific structural markup.By default, when applyTo is not
* specified, the Viewport renders itself to the document body.
*/
initComponent : function() {
   Ext.ux.FormViewport.superclass.initComponent.call(this);
   document.getElementsByTagName('html')[0].className += ' x-viewport';

   // applyTo specified element
   this.el = Ext.get('wwvFlowForm');
   if (!this.el) {
       this.el = Ext.getBody();
   } else {
       // disable scroll on body
       Ext.getBody().dom.scroll = 'no';
   }

   this.el.setHeight = Ext.emptyFn;
   this.el.setWidth = Ext.emptyFn;
   this.el.setSize = Ext.emptyFn;
   this.el.dom.scroll = 'no';
   this.allowDomMove = false;
   this.autoWidth = true;
   this.autoHeight = true;
   Ext.EventManager.onWindowResize(this.fireResize, this);
   this.renderTo = this.el;
},

fireResize : function(w, h){
   this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.ux.FormViewport);

Book Review: Learning Ext JS

I recently took the opportunity when approaced by Packt Publishing to review "Learning Ext JS" by Shea Frederick, Colin Ramsay, and Steve Blades.
The book is produced as an "eBook", delivered in a PDF format with the book examples available in a zip file.

For readers not familiar with Ext JS, it is a cross-browser JavaScript library for building rich internet applications.
It features highly attractive customizable UI widgets supported by a well designed, documented and extensible Component model.

The book is written with the experienced developer in mind. It's all about getting productive as quickly as possible.
We've all been there, thrown into an unfamiliar technology and expected to perform miracles overnight.
In these situations you can find yourself floundering, looking for some starting guidence while you try to find your feet.

The book is focused very specifically on Ext JS, so if you've never dealt with HTML or javascript before, I'd suggest a second reference to cover that as well.
Having said that, if your just working with Ext JS for your presentation interface, the book is complete enough to get you up and running.

After an obligitory introduction chapter, and some foundation concepts, your quickly working with Ext widgets.
Very soon your creating Ext JS forms, applying textfields, datefields, combos, toolbars and validations.
The very popular Grid an Tree components are also well covered, with Layouts appearing surprising late in the book.

I enjoyed the flow of the book, which is written in an easy reading light hearted style.
The examples clearly explained the concepts, and raised a few chuckles at the same time.

Examples that included server-side code assume a PHP backend, a fairly typical implementation for Ext JS.
I work with Oracle Application Express and PL/SQL, never the less the examples were easy to follow if you focused on the format of the server output rather than the implementation language.

Overall, if your starting out with Ext JS, or struggling understanding the Ext JS examples and scattered forum posts, this book is a good reference.

Chapter 7: Layouts is available as a sample chapter.