Why do go to conferences?

One of the really nice things about working with Oracle APEX is the sense of community you gain through the forums with people scattered all over the globe.

Attending OpenWorld this year was a great opportunity to met face to face with several members of the APEX development team and APEX enthusiasts after communicating with them via forums and emails. It's really surprising how much personality comes through in the written word.

One of the strengths of APEX is how accessible the APEX development team is to the community. When you visit the APEX stand in the exhibition hall, the people manning it are from the APEX development team - you just can't get better information than directly from the person who developed the functionality.
They really are interested in your feedback and making APEX better. 


Leading up to OpenWorld I had contacted some of the team members asking for a small enhancement for Plugins.
A few emails later, they had agreed to include the functionality in a future release.
Catching up with Patrick Wolf at the APEX booth, we talked a bit more on the subject with a couple of different approaches, before landing on a final solution.

Anyway, I'm looking forward to the 4.02 patch which includes my enhancement request - bug# 10157646.


So that's why I go to conferences - to meet up with people I know online, talk shop, share ideas, and learn new stuff I can use at work.
How about you? Why do you go?


The next conference I'll be going to is the AUSOUG 2020 Conference in Perth, Australia on Nov 22-23.


Maybe I'll see you there.

Extend APEX 4.0 JS using trigger events

APEX 4.0 has introduced JavaScript "trigger events" such as apexbeforerefresh, apexafterrefresh and apexbeforepagesubmit.
I'm using them to show a "loading" mask on regions when Partial Page Refresh (PPR) is enabled by clicking on the next rows button, or clicking on the heading to sort by a column.
You can see a live demo of Over-riding APEX JS and using APEX event triggers.

The JavaScript to add this effect is very brief, but there's a lot of concepts to understand.
To implement just copy into your application's JavaScript.

// Copy the APEX function to a new name, so we can override the original.
var apexInitReport = initReport;

// Extend the APEX function by over-riding with our own version and adding functionality
initReport = function(pRegionID, pInternalRegionID, pStyleMouseOver, pStyleChecked) {
   // we can call still call the original (renamed) version to use the existing functionality
   apexInitReport(pRegionID, pInternalRegionID, pStyleMouseOver, pStyleChecked);

   // APEX wraps PPR regions with a DIV with id report_xxx_catch, xxx being the region number
   var c = 'report_' + pInternalRegionID + '_catch';

   // proceed if the PPR region exists
   if (apex.jQuery('#'+c).length) {
      // find the parent DOM node for the PPR
      var p = apex.jQuery('#'+c).parent();

      // Add a bind event to the parent, since the wrapper is deleted on each refresh action.
      // This uses jQuery "live" binding, taking advantage of event bubbling up the DOM hierarchy.
      // ExtJS has more a advanced Event handler.
      apex.jQuery(p).bind('apexbeforerefresh', function(){
          // add a mask when any PPR actions happen 
          // NOTE: this is using the ExtJS library, jQuery users will need to do more work here.
          new Ext.LoadMask(c).show();
      });

   }
}

Over-riding the original initReport function means I don't have to add a call to it in my pages - APEX already does that for me.
Another advantage is that it is automatically applied to all my PPR reports, regardless of what report template I use.

Those of you with sharp eyes will note the "Go to row" item in the bottom of the screenshot.
I've added extra functionality to allow me to jump to any row I like.
I'll be discussing this and other ideas at OpenWorld this year, as well as in my upcoming book on APEX 4.0 with Ext JS.

APEX 4.0 joining the chorus for phasing out IE6

Good to see APEX 4.0 has joined a growing chorus of vendors phasing out support of older browsers such as Internet Explorer 6.
Of course, it's up to you to take up the message in your apps.

Facebook requires its users to upgrade to Internet Explorer 8 before creating an account and YouTube has announced that it will stop supporting IE6.

Google recently announced the phasing out of support for IE6 for for Google Apps, claiming "We’re following other companies that have done the same, like Twitter, Facebook and Microsoft for Office Web Apps."

APEX 4.0 EA2: Improved debugging, my new favorite feature

Just started looking at EA2, and like very much the new improved debugging.

First of all it's now in a popup window, which is a really good move.
With web pages relying more and more on javascript to render page components and rearrange page layouts, the old "inline" debugging was no longer effective.

I love the performance graph at the top, you really can't miss what areas are taking the longest time to execute.
Hovering over an item in the graph, shows the step number and name, so it's very quick to diagnose potential problems.

APEX is really coming of age!

Oracle APEX 4.0 + Ext JS = Happy Days

2010 is going to be a great year!

I've taken Oracle APEX 4.0 for a spin over the last couple of weeks having a look at the new plugins functionality.
So far I've really only scratched the surface, but like it very much so far.

After integrating Ext 3.1 into a theme, I created a couple of plugins following Patrick Wolfs' post on how to create a plug-in. You can see the result above.

What's really nice about it, is now we can define attributes for the plugin, which can be assigned to the page item, as shown below for the Spinner.

So now I can choose my "spinner" item type and define the attributes without having to write a single line of javascript. Nice!

The Application Builder incorporates nice touches with the "Settings" region also.
For the spinner example, I have set the "Decimal Precision" fields visibility to be dependent on "Allow Decimals" value being true.
Selecting false, automatically hides the "Decimal Precision" field.

So if you haven't already done so, register a workspace at http://tryapexnow.com and give Oracle APEX 4.0 a go.
The APEX team are looking for feedback and suggestions on how to make the product even better, and they really do use your feedback.

My New Years Resolution is to write a book on "Oracle APEX 4.0 with Ext JS".
I've already arranged a publisher, and the first chapter is well underway - but more about that in another post.


With the new plugins functionality in APEX 4.0 and the highly customizable components in Ext JS, you'll be building amazing web apps faster than ever. 


Like I said before, 2010 is going to be a great year!

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:

• Matt Nolan: e-DBA blog and APEX Plugin Registry demo
• Tobias Arnhold: APEX at Work blog and APEX at Work demo

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

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>