Random Insights into Oracle: December 2009

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:

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.

Sunday, December 13, 2009

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:

Create a div element which has width and height 100% at the beginning of your page.
Include an animated gif in a floating div to make it look like something is happening.
Include the rest of your page and javascript below the div.
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:

Export the theme
Use the splitter utility following instructions in apex/utilities/readme.txt
Comment out the unwanted templates as shown above
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.