Monday, December 14, 2009

Another Oracle APEX + Ext JS website



Munky (Ben Burrell) has just got his demo site up and running after a short delay caused by falling off a cliff!

He's very active in the APEX forums, so I'm looking forward to some interesting content in the new year.

Other APEX + ExtJS sites to follow:


If anyone else has APEX + Ext JS demo sites running, please let me know.

Sunday, December 13, 2009

How to create a Loading Indicator...

How to create a Loading Indicator...
CJ recently asked how to implement a loading indicator to hide the page layout changing regions into tab panels on my post Tabbed Regions in Oracle APEX using Ext JS.
While I use Ext JS to do it on my demo, here is how to do it using plain old javascript:
  1. Create a div element which has width and height 100% at the beginning of your page.
  2. Include an animated gif in a floating div to make it look like something is happening.
  3. Include the rest of your page and javascript below the div.
  4. Delete the div and image after a short delay using some javascript at the end of the page.
And here's the example html:
<html lang="en-au">
<head>
  <title>Page loading indicator</title>
  <!-- standard stylesheets -->

<style type="text/css">
/*Loading Indicator*/
#loading-mask{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:20000;
  background-color:white;
}

#loading{
  position:absolute;
  left:45%;
  top:40%;
  padding:2px;
  z-index:20001;
}

#loading .loading-indicator{
  background:white;
  color:#555;
  font:bold 13px tahoma,arial,helvetica;
  padding:10px;
  margin:0;
  text-align:center;
  height:auto;
}
</style>

  <script type="text/javascript">
      function removeElementById(el) {
          var node = document.getElementById(el);
          if (node) {
              node.parentNode.removeChild(node);
          }
      }
      function removeLoading() {
          removeElementById("loading");
          removeElementById("loading-mask");
      }
  </script>
</head>

<body>
  <div id="loading-mask" style=""></div>
  <div id="loading">
    <div class="loading-indicator"><img src="http://extjs.cachefly.net/ext-2.3.0/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div>
  </div>

  <!-- include everything, including scripts after the loading indicator -->

  <p>Here is some content that will appear when the loading indicator has been removed.</p>

<script type="text/javascript">
    setTimeout("removeLoading()",250);
</script>
</body>
</html>

Thursday, December 10, 2009

Quickest way to delete unused templates in Oracle APEX



Best practice is to remove unused/unwanted templates from your application.
This encourages standardization in your application, which benefits both your users and developers.
It also reduces the size of your application.

But how to do it quickly?
APEX deliberately makes you delete them one at a time, a reasonable sanity check for novices.
But not very helpful if you know exactly what you want.

So here's how:
  1. Export the theme
  2. Use the splitter utility following instructions in apex/utilities/readme.txt
  3. Comment out the unwanted templates as shown above 
  4. Import the theme from the sql command line.
And best of all, it's iterative, so you can repeat it as often as needed!

Note: It's not the quickest way -  but it is the quickest supported way.

Thursday, November 19, 2009

Oracle APEX: Silly Developer toolbar tricks



At the AUSOUG National Conference in Melbourne on the weekend I presented on "Oracle APEX Themes and 4.0 Plug-ins".

The presentation was about creating a Theme in APEX from scratch, and just to make it interesting I did it using jQuery UI, and integrated the ThemeRoller into my theme.

Audience members were curious how the developer toolbar was moved into the header.

I blogged how to Move the Developer toolbar with ExtJS back in 2008, but since learnt an even easier way - CSS:

table[summary="Developer Toolbar"] {position:absolute;top:10px;left:25%;z-index:1000;}


This positions the toolbar 10 pixels from the top, 25% of the way in from the left margin.

One of the audience members suggested copying it, so you could have 1 copy at the top of the page, and one at the bottom.
So, ditch the CSS, and use the following jQuery code to copy the toolbar to a div.

This time add the following div to the top of your page template:



<div id="topDevToolbar"></div>


Then add the following javascript into your page:


$(document).ready(function(){
     $('table[summary="Developer Toolbar"]').clone().appendTo("#topDevToolbar");
 });

Now you have 2 toolbars!

Tuesday, September 22, 2009

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.

Saturday, September 19, 2009

Friday, September 18, 2009

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.

Wednesday, June 10, 2009

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).

Tuesday, June 9, 2009

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.

Wednesday, April 29, 2009

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);

Thursday, March 26, 2009

Book Review: Learning Ext JS

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.

Friday, March 20, 2009

APEX Global AJAX variables - gotta love them



I've just added a fully AJAX enabled editable tree on my demo site.
All modifications to the tree are transmitted to the database via an application process using AJAX.

Values are submitted using wwv_flow package variables:
  g_widget_name
  g_widget_mod
  g_widget_action
  g_widget_action_mod
  g_widget_num_return
  g_x01 .. g_x10

The application process simply calls a database package, which references the wwv_flow package variables and updates the data.
 
The key to AJAX functionality in Oracle Apex is based around these "Global input variables for AJAX utilities".

Using these variables, a little javascript to call a simple application process and then we handover to PL/SQL - back in every Oracle developers comfort zone.

This example has a fair bit going on, to see a simpler example check out:

Thursday, February 26, 2009

Oracle Apex templates - not just for HTML

Have you ever considered using templates for generating something else besides HTML? You can use Apex templates to generate all sorts of things - XML, javascript and JSON to name a few. The tree panel shown gets all its data from a list template. See it in action, and the template details on my demo.