Wednesday, December 10, 2008

ExtJS Grid in Apex (with pagination)

Check out the ExtJS Grid with Pagination on my demo site
So how does it work?
This is brief, because it's after midnight.
  • Use a Named Column (row template) for the Report to build the grid array data - see page source code for output.
  • The query needs to return the data in a JSON escaped format, so use a "SQL Query (PL/SQL  function returning a SQL query)" with generic column names The function call looks like:
begin
return json_api.grid_query
  (p_region_id => 4367612871540792
  ,p_query =>'select * from geo_domains'
  );
end;
  • The query returned limits the rows and JSON escapes the data, much the same way as Apex does internally (hint: dbms_sql). Also - I set pagination to none, as its handled by my code.
  • Pressing next data set on the displayed page fires off a AJAX request (application process) which passes the region_id as well as start, limit and callback function values.
  • This executes a database package to re-run the query and return a paginated rowset. You can see the returned data format using Firebug.
  • The grid updates the data using builtin ExtJS functionality.
Next example will be an updatable grid - also near completion.
Nighty night - Mark

Wednesday, November 26, 2008

ExtJS Grids in Oracle Apex

Here is a read-only ExtJS grid in Oracle Apex. I'm experimenting with grids and it's coming together quite well - more detail in the future. Try drag-and-drop, and resizing column headings, then use pagination - very nice.

Using ExtJS Calendar and CSS issues

Mack McLendon emailed me with an issue he was having with the ExtJS calendar in Apex. He had successfully got the date functionality working, but as you can see from the screenshot he sent, the calendar is offset to the right. Mack wrote further, that disabling the standard Apex CSS and javascript fixed the problem, but at the expense of everything else on the page. Luckily I was able to answer this easily - having been through the same painful experience myself.  

The Solution
The issue is caused by the following ul margin rule in apex_3_1.css

ul { margin:0 0 0 15px; padding:0;}

The solution is simple - make sure you reference the ext stylesheet after the apex stylesheet (#HEAD# tag) in your page template.

Ext includes some "reset" styles to ensure uniform appearance between different browsers, including the following rule:
ul {margin:0;padding:0;}

Because the ext stylesheet comes after the apex stylesheet, the apex style will be overridden, and the calendar appear correctly. Related info:

Thursday, November 20, 2008

Oracle Apex: Boost performance with a CDN

Ext has recently partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. See more details on the announcement.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.
The server selected for delivering content to a specific user is typically based on a measure of network proximity.

For example, the server with the fewest network hops or the server with the quickest response time is chosen. i.e. using a CDN to deliver static content, such as Ext javascript, css and images will result in your pages downloading significantly faster.

I've modified my demo site on apex.oracle.com to see the performance difference. Previously I was pulling the Ext content from extjs.com - using the CDN gave a significant performance boost, making the demo site load much faster and give it a much snappier feel.

To implement was a snap, just referencing the Ext content in my Oracle Apex page templates from the CacheFly site:
 <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2/ext-all.js"> </script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css">
And if that isn't sweet enough, using the Ext’s Build It! tool will automatically install your custom version of the Ext library on the CacheFly website.

So after implementing, I wanted to see how much better my YSlow score was now I was using a CDN. Bugger - no difference - it wasn't detecting the CDN, so a quick check on why, and how to fix. Something to think about...

Saturday, November 15, 2008

Multiple Interactive Report Regions in one page?

Here's how to get multiple IRR's in one page. Cheat - just use iframes. See this example, which includes an iframed IRR in a popup ExtJS window.

Sunday, November 9, 2008

Oracle Apex IRR in ExtJS Popup Window

Dimitri Gielis emailed recently asking if I'd embedded an Ineractive Report Region (IRR) in a ExtJS popup window.

Well no I hadn't - but it turned out to be straight forward in the end, as you can see in this demo.

He raised an interesting point that when he tried the IRR javascript failed (filtering, sorting etc).

I believe Dimitri had been referencing the apexir_WORKSHEET_REGION div when embedding the IRR in a window, whereas I added an extra div tag around the IRR and used that instead.  

Such a small difference, such a big impact. The next screenshot shows some of the ExtJS windows html with my extra div tag wrapping the IRR.


Here is the html when referencing the apexir_WORKSHEET_REGION div.


So what's happened?

The apexir_rollover div (containing the filters etc) is no longer just below the apexir_WORKSHEET_REGION div. The relative positioning of these divs makes a difference.

Applying ExtJS functionality to existing html often results in html tags being moved around. Something to remember when you get unexpected behaviours.

Friday, November 7, 2008

Oracle Apex Spellchecker not working for you?
















If your a "textareas with spellchecker" look like this when you do a spellcheck, the solution is easily explained.

One of the parameters being passed is the language parameter, found in Shared Components > Edit Globalization Attributes.
In my case I have the language set to en-au (English - Australian). This is nice if you want your date-pickers to start the week on Mondays, but not so good for the spell-checker.

So how do we fix this?
It's just a case of populating the WWV_FLOW_DICTIONARY$ table for your language.
So for me the following script does it:
insert into wwv_flow_dictionary$ (language, owner, security_group_id, words, words_capitalized, words_soundex) select 'en-au', s.owner, s.security_group_id, s.words, s.words_capitalized, s.words_soundex from WWV_FLOW_DICTIONARY$ s where s.language = 'en-us'; commit;

Now if I was really being thorough, I'd go through all the words and fix the American spelling of words.
But after all, I am a developer and we're generally not known for our spelling :)

Thursday, October 30, 2008

Thank you Carl - you will be missed

It was very sad news to read Dimitri's blog yesterday that Carl Backstrom had a car accident on Sunday and passed away.

Carl and I had been in regular contact by email over the last 18 months. He was very generous and accessible with his time, a truly great guy. I count myself fortunate in meeting up with him in person at Open World this year.

He was very enthusiastic on the 4.0 release of Apex, and spoke of all the upcoming work around AJAX functionality and jQuery integration.
His enthusiasm was infectious. Only a week or so ago, I was emailing him of plans to create a jQuery demo playpen for next year.

Sometimes life really doesn't seem to have a sense of justice.

Carl was taken from us much much too young, but not before he left his mark on the world.

Wednesday, October 15, 2008

Vista Style Toolbar in Oracle Apex

This post is short and sweet. If you want to know how to create a "vista style" toolbar in Apex see http://apex.oracle.com/pls/otn/f?p=200801:2012:0 It's easy to customize it, if you like the interactive behaviour, but not the look.

Saturday, September 27, 2008

Oracle OpenWorld - done and dusted

Oracle OpenWorld is over for another year, and it's time to review the key messages for Oracle Apex.

This was my first visit to OpenWorld, my previous experiences limited to downloading presentations.

So was it worth flying all the way from Australia to see it in person?
Absolutely - you get so much more from hearing and talking directly to the presenters.

Standouts for me: Tom Kyte's presentation on database schema design.
I'd downloaded much of the content of his presentation from other events, but had missed the power of the message. Hearing and seeing the demo really opened my eyes - I'll be reviewing my database design when I get back to work.
Tom will be presenting at the AUSOUG conference in October, so delegates to the Australian event are in for a treat.
 
Carl Backstrom's presentation on Web 2.0 functionality coming in Oracle Apex.
It was great to hear the enthusiasm about the upcoming functionality from Carl. If your not already starting to incorporate AJAX functionality into your applications, it's definitely time to get your head in that space.

I caught up with Carl on the Demo grounds, to see the Web-Sheets functionality, which takes interactive reports to a whole new level. It allows interactive AJAX based editing directly in the report, as well as allowing end users to define and share sheets.

Carl was also very excited that the Oracle legal team have given him the go-ahead to use jQuery in Apex. It means he can focus on higher level AJAX functionality, rather than getting down and dirty with the DOM. Apex 4.0 is very focused on delivering declarative functionality to developers, so they don't have to know AJAX.

And finally, meeting and networking with Apex users. With 33 presentations related to Apex, the enthusiasm for Apex can't be underestimated. Time after time, presenters shared their success stories on Apex, on how quick the development time was, how short the learning curve was, and the value add it gave to their organisations.

Monday, August 25, 2008

How to make the Oracle Apex calendar start with Monday

BHavesh recently asked on my blog how to get a date picker which shows Monday as the first day.
The default apex date picker shows Sunday as first day. But I can see on your example, the default apex date picker has Monday as first day. Is there a way I can also make my default apex date picker to show monday as first day.
Good question BHavesh, I wasn't entirely sure how I did it either. It wasn't a conscious decision on my part, but a quick look with session debugging on revealed the answer, as you can see in the image below.
The NLS_TERRITORY is set to "AUSTRALIA". A quick look in the manual revealed
NLS_TERRITORY specifies the name of the territory whose conventions are to be followed for day and week numbering.

This parameter also establishes the default date format, the default decimal character and group separator, and the default ISO and local currency symbols.

So there's your answer - the territory setting establishes the week numbering. And where to set it in Oracle Apex? See below.

Friday, August 15, 2008

Oracle Apex - AJAX form created from Javascript

One of the really nice features of using ExtJS is just how easy it is to create a form using javascript.

Combining it with the new Apex global variables which Carl Backstrom blogged about in May gives some very interesting opportunities.

It means it is now possible to have functionality sitting in a application javascript library ready for use on every page.
This is exactly what is happening in IRR reports, and the upcoming Websheets functionality.

Combine this with the ability to interrogate your application using the Apex dictionary views, and suddenly the world is your oyster.

Have a play with AJAX Form using Globals on my demo site.

I'm using the same concept for a AJAX editable tree, which I'll be talking about at Oracle OpenWorld this year.
Provided I finish building it... :)

Here's a screenshot of current progress. Mark

Friday, July 25, 2008

Selecting Apex page items by class using $x_ByClass

I just noticed an $x_ByClass example on Carl Backstrom's demo site which selects page items using the class attribute.

So why is this important?

It provides you with a mechanism to easily tag form items, typically text input fields, so you can add AJAX functionality to them.
In Carl's demo he is simply changing the the border color of datepicker items, as a proof of concept. This is exactly the same technique I use with ExtJS to:
All I have to do is assign a class to a field, and generic javascript code fires looking for the class and applying the functionality. What's really great is Oracle is building this javascript infrastructure directly into Apex.

It means that developers can easily hook in widgets and AJAX functionality, because the low level plumbing has been done for us.

Mark

Thursday, June 19, 2008

Oracle Apex Builder CSS fix for Firefox3

Does Firefox3 do this to your Oracle Apex Builder?

The fix is to disable a CSS attribute for the "fieldset.lov" class, as seen here using Firebug

To permanently fix the CSS, modify the apex_3_1.css file. Search for "fieldset.lov" and delete the "height:1em;" attribute.

I haven't tested to see if this has other undesirable side affects, but so far so good.

Mark

Friday, June 13, 2008

Tabbed Regions in Oracle Apex using Extjs

David from Scotland emailed asking how I implemented tabbed regions on my demo site. 

It's actually very easy using Extjs.  

Step 1 - Create a region template which uses static ids  
<div id="#REGION_STATIC_ID#" class="tab-content">
<div class="x-fieldset-bwrap" style="padding:10px">
<div align="right" class="x-fieldset-tbar">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
<div class="x-fieldset-body"> #BODY# </div>
</div>
</div>  

Step 2 - Create your report/form regions as usual, but assigning them a static id.
I tend to use tab1, tab2, ..., tabn - but that's a personal choice.

Step 3 - Add an opening div tag before the first tab region and a closing div tag after the last region. <div id="pageTabs"> </div>
You can either create extra regions of type "html text" with no template, or simply add the extra tags in your region header and region footer. I use extra regions, so it's really obvious whats going on when I look at again in 6 months time. When the page is generated the html will look like this:
<div id="pageTabs">
    <div id="tab1" class="tab-content"> <!-- content --> </div> 
    <div id="tab2" class="tab-content"> <!-- content --> </div> 
    <!-- and so on -->
    <div id="tabn" class="tab-content"> <!-- content --> </div>
</div> 

Step 4 - Add the javascript magic Here I'm showing 2 tabs, and usually include the script with the closing div tag.
<script type="text/javascript">
Ext.onReady(function(){
       var tabs = new Ext.TabPanel({
           cls: 'prism',
           applyTo: 'pageTabs',
           plain: true,
           width: 795,
           //height: 450,
           autoHeight:true,
           enableTabScroll:true,
           autoScroll:true,
           activeTab: 0,
           deferredRender: false,
           border: true,
           defaults: {layout:'fit', autoScroll:true},
           items:[
               {contentEl:'tab1', title:'Create/Edit Customer'},
               {contentEl:'tab2', title:'Existing Customers'}
           ]
           });
});
</script>

The cls: 'prism' is a customisation I use to have a blue background for the tab panel.
I'll leave that for you to work out how I did that.

As usual, the documentation on tab panels goes into far more details. Mark

Friday, May 30, 2008

Horizontal Radiogroups in Oracle Apex

I had a requirement to set out a radiogroup horizontally the other day. Amazingly I'd almost never used radiogroups before in Apex, so didn't know how before searching the forums. The answer is quite simple: just specify the number of columns in the "List of Values" section against the item, as shown below. So that's fine for a static LOV where you know how many columns to specify. What about dynamic LOV's? Have a guess, and then go to my demo for the answer. Mark

Thursday, May 1, 2008

Carl Backstrom has created a monster

Carl Backstrom has created a monster with his forum post on "Enhancement Request Thread : Post 3.1"

The quality of the requests coming through really is testament to the growing maturity of Oracle Apex.
It is obvious that many of the respondents have the depth of understanding of the product that is only developed over time.

Interactive report regions (IRR), was a huge step forward in the 3.1 release.
It really enhanced and simplified implementing query-by-example functionality.
What's more by using AJAX functionality to only refresh the region, rather than the whole page, the user experiences better performance and a more interactive experience.

A particular feature to note is the column value filtering, which performs a lookup based on:
- column values (select distinct)
- pre-defined lov
- datatype specific, e.g. a variety of date based alternatives  

So what next for future releases post 3.1?

To my mind the focus should now be on enhancing the data entry side of Oracle Apex.
With the reporting side so much improved, data entry is looking a little tired.

Two quick wins here:
- javascript dates instead of popups
- AJAX lookups.

Implementing javascript dates is already in the statement of direction, so enough said.

AJAX lookups are not currently mentioned, but I'm sure that internally its very much on the radar.
Why am I so confident of this?
Well, mostly because so much of it is already implemented in interactive report regions.

Benefits:
- allows lookups to be performed on large datasets
- allows "auto-complete" functionality i.e. reducing list of values as you type
- better user experience than popup search forms

To see a working example, look at my demo site http://apex.oracle.com/pls/otn/f?p=200801:2007:0



My implementation is based on a holiday table, which includes a customer_id.

The AJAX functionality calls the following procedure:  

PROCEDURE customer_lookup
(p_callback varchar2
,p_query varchar2 default null
,p_limit number default 20
,p_start number default 0
,p_customer_id number default null );

The procedure works as described in the following pseudo-code:  
if p_customer_id is not null then  
-- lookup customer details and return in JSON format  
else  
-- lookup customers where name like p_query||'%' 
-- return n records in JSON format (configurable by p_limit), starting at record p_start  
end;  

For Apex to implement this:
1. New item type (perhaps AJAX lookup?)

2. Developers would need to be able to define a 3 column lov query against the item
   (Nice to have, but 2 column lov OK also)

   select value, short_display_value, long_display_value from some_table

3. Mudge existing IRR lookup functionality for query and display on page.

Worthwhile? Whats your opinion?

Mark

Thursday, March 20, 2008

Commenting system javascript on my web-site

I've received a few requests to view the commenting system javascript from my demo web-site.
The javascript is already there for all to see, either by downloading the page or viewing the source directly.
I would definitely recommend using Firefox and Firebug when viewing as it allows you to view attached script files as well as the page source.
The screenshot shows the Script tab in Firebug, listing the script files attached to the current page. In the background you can see the source for the active file.

Most of the javascript for my demo site in contained in a single "application" file playpen.js. The code has been compressed, but not obfuscated. This means you can load it into your favorite text editor and read the full source after you've done some formatting. As far as understanding the code I would highly encourage you to look at Ext 2.0 Samples and Ext Documentation. Like anything worthwhile you need to invest time and energy to gain understanding.

The comment form is based on one of the examples for dynamic forms.

Here is a super-brief explaination, I'm a little time challenged at the moment :)

I use an application process to insert the data into the database.

The javascript to do this is on my demo site - just download the source and then format it to see what's going on.

When inserting it into the database I have to unescape the comment so it will render later. I use dbms_xmlgen.convert(:new.app_comment,dbms_xmlgen.entity_decode) to do this. There may be a better way I haven't thought of. I also strip out some html elements such as script, object, embed etc to prevent malicious attacks.

The javascript then does a PPR to display the comment immediately.

If this doesn't make sense to you, time to do some reading and learning :)

Mark

Thursday, March 6, 2008

Implementing Ext Dates in Oracle Apex

"Anonymous" asked me for more explanation on how I implemented the Ext date-picker in Oracle Apex, as seen in my demo.

Look, I don't mind answering, but please put a name on your feedback - anonymous is just rude.

Here's the plain English explanation:

We are converting a simple html input item into a Ext date-picker, which just happens to be associated with a date field in the database.

To make it easy to identify which input items to convert we assign a class of "date-picker" to the item. The code to do the conversion is shown in my demo.

The only other thing to worry about is making sure the date format of the input item matches the database date format.

Everything else you want to know can be learnt by reading the documentation.
Here are the steps:

1. Set the database date format in Apex
Lets use a mask of DD-Mon-YYYY as there's no confusion internationally.
In Apex 3.1 do this directly in Home>Application Builder>Application 200801>Shared Components>Edit Globalization Attributes.
In earlier versions, you need to create application processes for "On Load Before Header" and "On Submit After Page Submission - Before Computations and Validations" with the following code
execute immediate 'alter session set nls_date_format=''DD-Mon-YYYY''';

2. Create the date item
In Apex create a form on a table containing dates.
Make sure the item type of the date field to display as "Text Field" and not "Date Picker".
Finally add class="date-picker" in the Form Elements Attributes.

3. Add the javascript
Include the Ext javascript files in your page template, cut and paste the javascript code from the demo into your page or page template.

If you run that it all works beautifully.
You'll notice the code allows for alternative data entry format masks e.g "dd/mm/yyyy" and partial formats e.g. "dd/mm".
Thats because the alternate formats are easier for keyboard operators.
See ExtJS documentation on date formats available.

4. Optional step
You may have noticed on my demo I use "DD-MON-YYYY", not "DD-Mon-YYYY" as shown in this blog.
To achieve this I set the database format easily enough, but then had to override the default Ext date names with the following line of javascript in my application javascript file:
Date.monthNames =["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];

This is the Ext way on internationalizing dates, so it's not a hack.
What it does is force the javascript date format "d-M-Y" to return the month in uppercase.

Anyway hope this helps.

Mark

Wednesday, February 20, 2008

Moving the Developer toolbar with ExtJS

Received and email on my blog, asking how to move the developer toolbar into the "south" region of a typical ExtJS layout. This is one of those annoyances developers see, but the end users don't. For a screenshot see my post from last year here. The solution is very short: In your page template include a div tag with an id, this is where you want the toolbar to end up. e.g. <div id="DeveloperToolbar"></div> Add the following code into your application javascript:

Ext.app.moveDeveloperToolbar = function() {
  var dest = Ext.get('DeveloperToolbar');
  if (dest) {
      var els=Ext.select("table[summary='Developer Toolbar']",false);
      els.each(function(el){
          el.replace(dest);
      })
  }
}


Ext.onReady(function() {
    /** any other stuff you want to include */   
    Ext.app.moveDeveloperToolbar();
});

The code checks the div tag exists, and then searches for a table with a summary property of "Developer Toolbar". For each instance it finds (there is only ever one), it moves it to the destination position. ExtJS has a powerful DomQuery component, well worth learning. See the DomQuery tutorial for further examples. Mark

Thursday, February 14, 2008

ExtJS Ajax Search field

Here is a screenshot of an AJAX search field running in Apex. Putting an example up on the Oracle Apex demo site may not be possible, as I call a PL/SQL package directly. It's based on the ExtJS live search sample. We were running it with Ext version 1.1, but had issues with paging. By default it uses "start" and "limit" as parameters - both reserved words with PL/SQL. If you search the Ext forums, you'll find a solution for Ext 2.0 - just search for mark.lancaster.

Wednesday, February 13, 2008

Ext JS extension like Forms LOV

Just noticed on the ExtJS forums that someone has built an extension that behaves like an Oracle Forms LOV. Here is the post and a demo. Old forms programmers never die :)

Tuesday, February 12, 2008

Building a complete Oracle Apex page template using ExtJS

Following on from my earlier post on integrating ExtJS we will now build a complete page template.
This template will contain:
  • a "north" region containing a logo, title, navigation bar and show current user
  • a "west" region containing 2 sub-regions navigation and settings
  • a "center" region containing dynamic page content
  • a "south" region for footer elements, e.g. copyright notices, links etc.
When prototyping its often easier to build using static html pages, and then load it into Oracle Apex.

Create a sub-directory in the /ext-2.0.1/examples/ directory. I've called mine "playpen", but it really doesn't matter.

Save the following text as a html file into the directory, e.g. "apex layout.html".

<html lang="&BROWSER_LANGUAGE.">
<head>
 <title>#TITLE#</title>
 <!-- standard stylesheets -->
 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

 <!-- this style forces form to fit screen height -->
 <style type="text/css">
   #wwvFlowForm {width:100%; height:100%;}
 </style>

 <!-- Ext scripts -->
 <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="../../ext-all.js"></script>

 <!-- application configuration -->
 <!-- eventually move "application" script to an external file -->
 <script type="text/javascript">
   Ext.onReady(function(){

      Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

      var myForm = new Ext.Panel({
        applyTo:'wwvFlowForm',
        layout:'border',
           items:[
               new Ext.BoxComponent({ // raw
                   region:'north',
                   el: 'north',
                   height:45
               }),
               new Ext.BoxComponent({ // raw
                   region:'south',
                   el: 'south',
                   height:32
               }),
              {
               region:'west',
               id:'west-panel',
               title:'West',
               split:true,
               width: 200,
               minSize: 175,
               maxSize: 400,
               collapsible: true,
               layout:'accordion',
               layoutConfig:{
                   animate:true
               },
               items: [{
                   contentEl: 'region_position_02',
                   title:'Navigation',
                   autoScroll:true,
                   border:false
               },{
                   contentEl: 'region_position_03',
                   title:'Settings',
                   autoScroll:true,
                   border:false
               }]
           },{
               region:'center',
               contentEl:'pageContent',
               layout:'column',
               autoScroll:true
           }]
       });

   myForm.doLayout();
   });
 </script>
</head>
<body>
<form id="wwvFlowForm">

<!-- -------------------------------------BODY SECTION start------------------------------------- -->
  <div id="north">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" height="45px">
      <tr>
        <td valign="top">#LOGO#</td>
        <td align="center"><span style="{  }">Integrating ExtJS javascript library with Oracle Application Express</span></td>
        <td width="300px" align="right" border="0" style="padding-right:5px">
          <div style="height:20px">&USER.</div>
          <div id="navigation_bar">#NAVIGATION_BAR#</div>
        </td>
      </tr>
    </table>
  </div>

  <div id="west"></div>

  <div id="region_position_02">#REGION_POSITION_02#</div>
  <div id="region_position_03">#REGION_POSITION_03#</div>

  <div id="pageContent">
    <div id="region_position_01">#REGION_POSITION_01#</div>
    <div id="messages" align="center">#GLOBAL_NOTIFICATION##NOTIFICATION_MESSAGE##SUCCESS_MESSAGE#</div>
    <div id="region_box_body">#BOX_BODY#</div>
    <div id="region_position_04">#REGION_POSITION_04#</div>
    <div id="region_position_05">#REGION_POSITION_05#</div>
    <div id="region_position_06">#REGION_POSITION_06#</div>
    <div id="region_position_07">#REGION_POSITION_07#</div>
    <div id="customize">#CUSTOMIZE#</div>
    <div id="region_position_08">#REGION_POSITION_08#</div>
  </div>
<!-- -------------------------------------BODY SECTION end------------------------------------- -->

</form>

  <div id="south">Some footer content here</div>
</body>
</html>


Open it in your browser and you should see something like this:



Note the "West" panel expands and collapses and is resizable, and the navigation panel is also functional. Resize the width of the West panel, then refresh the page.

Did you notice it kept the new width?

This is all managed by a single line of code:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

The panels that make up the page are stateful and remember position, provided a cookie has been registered. Users typically don't even notice unless you point it out to them.

Spend a bit of time looking at the script used to build the layout, consult the ExtJS doco etc.

OK, to make this an Oracle Apex template do the following:

Do a search and replace:


<form id="wwvFlowForm"> becomes #FORM_OPEN#


</form> becomes #FORM_CLOSE#

Adjust the path of the javascript and css file links, so if you followed my previous post:
../../becomes /i/themes/ext-2.0.1/

Copy and paste the content into a page template using header, body and footer regions.
The html already contains comments identifying where to cut.

Whip up a quick page to test it out, and barring any mistakes it should work just like the static version.

Enjoy.

Tuesday, February 5, 2008

Integrating Ext javascript library into Oracle Application Express

So hopefully by now you’ve been to the website http://extjs.com and had a look at samples http://extjs.com/deploy/dev/examples and are ready to get your hands dirty.

The first step is to download the latest version from http://extjs.com/download and load it onto your http server 
(version 2.0.1 at the time of writing).
For Oracle Apex this can be either:
- Embedded PL/SQL gateway
- Oracle HTTP Server and mod_plsql.

For this article I have loading the complete set of unzipped files to a new folder in the 
apex/images/themes directory:
- http server - ORACLE_BASE/ORACLE_HOME/Apache/Apache/images/themes/ext-2.0.1/
- embedded PL/SQL gateway - /i/themes/ext-2.0.1/

Note: FTP access when using the embedded PL/SQL gateway is enabled as follows:

Open SQL*Plus and connect as SYSTEM

SQL> exec dbms_xdb.setftpport('21'); PL/SQL procedure successfully completed. SQL> alter system register; System altered.
If you have any issues do an internet search for "dbms_xdb.setftpport", there are numerous posts on the topic. Once the files are uploaded you can verify using the following urls: http://hostname:port/i/themes/ext-2.0.1/docs/index.html http://hostname:port/i/themes/ext-2.0.1/examples/index.html Using Ext with Oracle Apex The first step to using Ext with Oracle Apex is to reference the javascript libraries and CSS stylesheets in your page templates. Start Apex Builder and navigate to a page template: Home> Application Builder> Application 101> Shared Components> Templates> Edit Page Template A minimal header definition would look like this:
<html lang="&BROWSER_LANGUAGE."> <head> <title>#TITLE#</title> #HEAD# <!-- standard stylesheets --> <link rel="stylesheet" type="text/css" href="/i/themes/ext-2.0.1/resources/css/ext-all.css" /> </head> <body #ONLOAD#> <!-- Ext scripts --> <script type="text/javascript" src="/i/themes/ext-2.0.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/i/themes/ext-2.0.1/ext-all.js"></script> <!-- application configuration --> <!-- add your custom scripts references here --> #FORM_OPEN#
This gives us access to the entire Ext library functionality. Depending on how much Ext functionality your web-site eventually uses you may want to consider only including a subset of the library. I’ll write more on this in a later article. If your using a standard theme that comes with Oracle Apex, you will probably want to keep existing javascripts and CSS stylesheets in your definition initially. Let’s build something The first example I want to demonstrate is resizable text areas. A demo is available at http://apex.oracle.com/pls/otn/f?p=200801:2001:0 Add the following code into your page template, or directly into a page containing one or more text areas.
<script type="text/javascript"> // convert html textareas into resizable textareas function makeResizable(){ var els=Ext.select("textarea",true); els.each(function(el){ var dwrapped = new Ext.Resizable(el, { wrap:true, pinned:true, //handles:'s', width:el.getWidth(), height:el.getHeight(), minWidth:el.getWidth(), minHeight: el.getHeight() }); }) } Ext.onReady(function() { makeResizable(); }); </script>
What this script does search the html document object model (dom) for html textarea elements. Html textarea elements are converted to an Ext resizable component, with grab handles pinned (visible). The minimum height and width are constrained to the original dimensions. Uncomment the //handles:'s' line to vertically resize only. You can read more about the api on your website if you used my instructions at http://hostname:port/i/themes/ext-2.0.1/docs/output/Ext.Resizable.html, or on the Ext website at http://extjs.com/deploy/dev/docs/index.html.

Tuesday, January 29, 2008

Demo website: ExtJS with Oracle Apex

I like new year resolutions - it gives me an opportunity to set some personal targets for the year.

This year I've decided to put together a website demoing ExtJS and Oracle Apex.
My initial goal was to have it up and running by the end of January.

The downside of new years resolutions is trying to keep them, but for once I've managed.
My website is up for all to see at http://apex.oracle.com/pls/otn/f?p=200801

Admittedly it's not as complete as I'd hoped, but it's a good start.
Over the next few months I'll be blogging about how I've implemented features and anything else that strikes me as worth writing about.

For now, here's a screenshot, and an invitation to poke around the website.



Mark