Wednesday, February 22, 2006

Page 0 Branches

What? There's no way to put a Branch on Page 0 of an ApEx application! Or is there...

Technically, no - page 0 does not support branches. But how many times do you wish it did?

This scenario recently came up: I wanted to put a "Search" box on every page in my application, so no matter where a user is, they can search the site. Currently, it has 10 or so pages, but this will grow to closer to 50 by production.

So, thought #1 was to put an text item on Page 0, call it search, and then ensure that each and every page had some sort of Branch to run the search. Not so fun, as this was a tedious task, even for just 10 pages. And each time a new page was added to the application - by myself or anyone else - the search branch would have to be added to the page. Clearly not a scalable solution.

With a little bit of help from Raj from the ApEx team, I came up with this solution:
  • Create Page 0, if you haven't already
  • On page 0, create an item of type "Text Field (Always submits when enter pressed)" - this will let the user type in a search term and press return and fire off the search, as opposed to having to rely on a button being clicked
  • Create an Application Process (Shared Components > Application Processes)
  • Give it an unusually high Sequence number, such as 999999, as you want it to fire after ALL other page-level processes in your application
  • For the source, enter the following, making sure to use the page number that you want your search to branch to:
htp.init;
owa_util.redirect_url('f?p=&APP_ID.:710:&SESSION.');
htmldb_application.g_unrecoverable_error := true;

  • Put a condition on the Process to only fire when the REQUEST = P0_SEARCH, where P0_SEARCH is the name of your Search text item on Page 0
  • Run your application and test it out
Ideally, you will have some sort of Report on your Search page which is filtered by :P0_SEARCH, but you can really have that page do anything you want. You can also put more logic in the Application Process.

For example, I am using this method to first determine what level of access a user has. If they have Access Level A, then they branch to page 1; otherwise, they branch to page 10. Sure, I could accomplish this at the page level with two branches, but I need this functionality to be available application-wide. Thus, this solution saves me countless hours and some of my sanity.

Tuesday, February 14, 2006

Yahoo Releases Free UI Library

As noted on Boing Boing, Yahoo! just released its UI Library, an open-source set of AJAX user interface components that developers can use in their sites for free!

From Trees to Sliders, some of these components look quite slick! The real challenge here is not getting them to work with Oracle ApEx, but rather finding practical applications for them. So often I see sites where AJAX is used for the sake of using AJAX, and the result is just a mess.

What intriques me are the reasons behind this. As I've been told many times, there is no such thing as a free anyyhing - it's just a question of when and how you pay. Perhaps Yahoo is trying to steer developers to its services (Maps, Calendar, Mail, etc.) in a pre-emptive strike against Google?

Should be interesting to see how it all plays out.

Monday, February 13, 2006

Learning DIVs

Recently, I’ve been experimenting with using DIVs instead of TABLEs for creating Region Templates in Oracle Application Express.

DIVs seem to have a lot less “moving parts” – or places where the code can become corrupted. Troubleshooting a missing <TD> tag is never a fun exercise, and by using DIVs, you can largely avoid that.

However, DIVs tend to have issues with cross-browser development. What looks great on Firefox doesn’t even render on MSIE. That alone can be a challenge to troubleshoot,

Having said all of this, I was able to take this Region Template:


<table width="100%" cellpadding="0" cellspacing="0" id="#REGION_ID#">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="0" width="100%">
<tr>
<td bgcolor="#666666">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td height="25"><span class="projectInfoRegion">#TITLE#</span><br />
<span class="content_text">#BODY#</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="/i/st/st_region_bottom_shadow.gif" width="100%" height="3"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />


And reduce it to just this:

<div class="regionContainer">
<div class="regionOuterContainer" id="#REGION_ID#">
<div class="regionInnerContainer">
<div class="regionButtons">#CLOSE#</div>
<div class="regionTitle">#TITLE#</div>
<div class="regionBody">#BODY#</div>
</div>
</div>


Now keep in mind, pages built with DIVs aren’t much to look at without an associated CSS file. I used the following entries for my new Region Template:


.regionContainer
{
padding-bottom:10px; font-family:Arial; font-size:12px; margin-top:5px;
}
.regionOuterContainer
{
border-bottom:1px solid #aaa; border-right:1px solid #aaa;
}
.regionInnerContainer
{
padding:5px; border:1px solid #000;
}
.regionTitle
{
font-size:18px; font-weight:bold; border-bottom: 1px solid #ddd;
}
.regionButtons
{
float:right;
}


CSS Zen Garden offers some pretty compelling examples of how powerful CSS-based design can truly be. Each example on the site uses the exact same HMTL. All attributes, from images to spacing, are defined in the CSS.

Adding the number of lines in the CSS (20) to the actual DIV-based HTML (8) is almost the same as the TABLE-based HMTL (32). However, the DIVs allow you to do more “cool” things, such as hiding and showing a region.

I am also finding that by using DIVs and a CSS, you have an easier way to make more site-wide changes. I can easily change the Font of that template by altering one line in the CSS file. I can also fine-tune any of the attributes of each of the DIVs by adding the appropriate directives to the respective class.

Despite their cross-browser issues, I’m finding that designing UIs using DIVs and a CSS is much more elegant than the traditional TABLE-based approach.