Tuesday, April 29, 2008

APEX 3.1 Public Training in July 2008 - Now Open for Registration

Based on the success of our March/April public training in Ashburn, VA, I'm happy to announce that we're going to do it again this July 21st through 25th. Like last time, there will be two sessions - a 3-day Intro to APEX 3.1 class and a 2-day Intermediate APEX 3.1 class.

Both sessions filled up completely last time, so don't wait until the last minute!

More details about each class and a registration page can be found on the Sumner Technologies, LLC web site.

Saturday, April 26, 2008

Cloning your Corporate UI with HTML DB - Part VI (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

July 12, 2005

What's the best way to ensure that you have more work to do? Use a statement like "That about wraps up this series" in your "final" posting in a series!

As Earl Lewis pointed out, things are not 100% correct when using MSIE. Now, there's a very simple cut-and-dry solution to this problem: Don't use MSIE. However, for those who have not yet made the switch to Firefox yet (which, according to traffic on HTML DB Studio is still about 80% of you), you will also see this error. Thus, it is critical that you test your site in both - if not more - browsers. This is something which I simply forgot to do.

It's as simple as this: the same HTML can and often will look different in MSIE & FireFox (and other browsers). It is time very well spent running through each and every page in each browser which you expect your users to use, in order to ensure that all pages render correctly. Nothing infuriates me more than a site which only renders correctly on MSIE!

The core problem here is some abandoned JavaScript calls & references, left over from when I gave up on the Dynamic OTN Menus. I took a few minutes to remove all of them, and MSIE is once again, quite happy. Ironically, I had to the use the JavaScript debugger in FireFox to determine which reference was still hiding in the source, as the messages generated by MSIE are very vague. I encourage you to check out the FireFox JavaScript debugger - it's quite nice for a browser add-in.

Looking around some more, I noticed that the titles on the Application Detail pages are not rendering correctly in MSIE either:

Let's take a look at the Report Template to see what HTML is being generated. Here is the relevant snippet:

<table width="100%" class="bodycopy">
<td colspan="3" class="OTNHeadline">#NAME#</td>

Looks like the table has a class called bodycopy associated with it, and the title has a class called OTNHeadline associated with it. The class bodycopy will be applied to all items in the table, as it is defined at the table level. When the #NAME# token is rendered, it will first have the bodycopy class associated with it, but it will override any directive set by bodycopy with those set in OTNHeadline. Those attributes not mentioned in OTNHeadline will retain their values as per their definition in bodycopy.

Let's take a look at bodycopy first, as that is what gets applied to the text first:

.bodycopy { color: #000000; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 14px; text-decoration: none; visited: #000000 }

Looks like quite a few things are set here: color, font size, font, link style & color, and something called line-height. According to htmldog.com, line-height "Specifies the height of a line of text." So if it is set to 14px as per the above class, and then apply the OTNHeadline class:

.OTNHeadline { font-family: Arial Narrow, Arial; font-weight: bold; font-size: 30px; }

Since there is no definition for line-height, the value of 14px set by bodycopy is retained. This causes something to get chopped off at the top & bottom, as we're trying to render a 30px font in a 14px space. Thus, all I have to do to fix this is change the class definition of OTNHeadline to this:

.OTNHeadline { font-family: Arial Narrow, Arial; font-weight: bold; font-size: 30px; line-height: 30px; }

Reload in MSIE, and things look much better now:

This is just one of many examples of how different browsers render the same HTML. I can assure you that this is the norm, not an exception.

Once again (knocking on wood), that about wraps up this series...

Thursday, April 24, 2008

Cloning your Corporate UI with HTML DB - Part V (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

July 8, 2005
Finally! I just deployed the new look for both Oracle HTML DB Studio & Oracle HTML DB References. (I'll get to Best Practices PL/SQL a bit later today - have to do some customer calls first)

I basically gave up on the DHTML menus - it was taking too much time and overall, I think it just didn't add enough value for me to keep pulling my hair out over. The base OTN Menus are there - clicking on them brings you to the appropriate page in OTN - where the menus work just fine...

I did get a little over ambitious, and decided to give the splash page of both Studio & References a make-over. Check them out:

Both of them now "look & feel" like the rest of OTN & oracle.com, making it a more seamless experience for users. And it wasn't all that difficult to pull off, either. Most of the graphics were lifted from either our corporate artwork repository or oracle.com, as was most of the underlying HTML. All you have to do is peek at the HTML source, copy it into your static (or dynamic) region, and then the page, making adjustments when and where they are needed. It was more of an iterative process, not a difficult one.

The only thing that may not seem obvious is how I got gray backgrounds on all of the corporate logos. This was done using the Color Replacer tool in Paint Shop Pro. The Color Replacer tool does what you would think - replaces color A with color B. It was as simple as setting color A to white (#FFFFFF) and color B to a light gray (#EEEEEE) and painting in a new background color. It helps when you have the right tool for the job!

That about wraps up this series. I hope that people learned something about what it takes to create a new Theme in HTML DB based on an existing corporate standard. I like to explain it as part art, part science. You not only need to be skilled in HTML, DHTML, CSS, etc., but you need an eye for good design. It helps to be a perfectionist and pay attention to details, but don't let that consume you, as most people won't notice (or even if they do, won't care about) the slight imperfections. Have a good weekend!

Wednesday, April 23, 2008

Cloning your Corporate UI with HTML DB - Part IV (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

June 14, 2005
In the last installment, the converted site looked pretty good, but the tabs were not quite working. The issue here was overlapping FORMs. If you look at the HTML source of the OTN Home Page, there's an HTML Form which processes the "Search" function. This form was overlapping with HTML DB's Form; thus generating an error when a tab was clicked - which essentially does an HTML POST via a JavaScript function.

In HTML DB Templates, two commonly used tokens are #FORM_OPEN# and #FORM_CLOSE#. These tokens are used where you want to open & close the "functioning" portion of an HTML DB Page. When an HTML DB page is rendered, the #FORM_OPEN# & #FORM_CLOSE# tags are substituted with some dynamic values, as outlined below:

<form action = "wwv_flow.accept" method = "post" name = "wwv_flow" id = "wwvFlowForm">
<input type = "hidden" name = "p_flow_id" value = "20530" id = "pFlowId" />
<input type = "hidden" name = "p_flow_step_id" value = "2" id = "pFlowStepId" />
<input type = "hidden" name = "p_instance" value = "2734685902684999721" id = "pInstance" />
<input type = "hidden" name = "p_page_submission_id" value = "21133974" id = "pPageSubmissionId" />
<input type = "hidden" name = "p_request" value = "" id = "pRequest" /> </ table>

<input type = "hidden" name = "p_md5_checksum" value = "" />

The real beauty of these two tags is that you don't need to know what any of the above HTML really does. It's simply enough to include them in your HTML DB templates, and they will just work. That is, of course, if you don't have overlapping FORM tags...

Back to our page in question. By moving the #FORM_OPEN# token to after the HTML which closes the FORM for the Search box, the page will now work. This presents a bit of a design challenge now. In the current version of HTML DB Studio, there is a Search field which only searches content in HTML DB Studio, not the rest of OTN. I'll have to think about whether I want to have a) two search boxes b) an OTN Only search box c) an HTML DB Studio Only search box or d) no search boxes. Technically, any of these four options are possible. It's just a matter of design choice.

That's all for now - sorry that this has been the shortest entry, but I've been taking a class all week, and evenings have been spent catching up on e-mails, etc. Add to the mix that my wife sprained her ankle today and is not supposed to walk on it, and I am all of a sudden quite busy tonight!

Tuesday, April 22, 2008

Cloning your Corporate UI with HTML DB - Part III (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

June 10, 2005
Before I jump into the Page Header & Footer, I thought that I'd take a minute to detail how moved all of the images from www.oracle.com to htmldb.oracle.com. Using Firefox, I'm able to view a list of all images on a page by right-clicking the page and selecting View Page Info. Under the Media tab is a list of all images referenced on this page. I decided to use http://www.oracle.com/technology/products/database/oracle10g/index.html as a starting point. All in all, there were about 15 images which I saved, and then moved to htmldb.oracle.com.

I FTP'ed all of these images to a new directory on htmldb.oracle.com, in order to keep them all organized in a single place. Next, I have to change the image paths & BASE_HREF in the Page Template. Currently, the BASE_HREF is still set to http://www.oracle.com/technology/index.htm . Changing it to http://htmldb.oracle.com/i/ocom/ dramatically improved the way that most of the page rendered. However, as you can see below, the tabs & DHTML menus are based on a not-yet-copied-over CSS:

So as you may have guessed, it's time to copy over the CSS files from OTN. Since I have some custom CSS entries, I decided to create a 3rd CSS file - ocom.css - which I will use for my own CSS entries. This way, I can be assured that the OTN-supplied CSS files are always in-tact.

BASE_HREF issues
I just noticed something bad: all of the HTML DB-generated links (menus, lists, items, etc.) are picking up the BASE_HREF syntax, and appending that to the beginning of the URL, thus rendering them useless! I guess removing the BASE_HREF line altogether is my best bet. Doing so has fixed the link issues, but I'll have to keep an eye out to see if anything else is still broken.

Broken Images
Next, I took a pass at fixing all of the broken image tags on the page. Fortunately, this task is made easier with the Web Developer extension. Selecting "Find Broken Images" from the Images menu yielded a nice list of what I need to fix. Thus, a simple Search & Replace in Dreamweaver fixed all of my Broken Image woes.

Not only does it look good, it actually works:

Header & Footer
Let's start with the Footer, since it's the easier of the two. It looks like the footer did not change at all from one OTN look to the next. Thus, I don't have to do a thing! Woo hoo!!!

The header is a different story. Let's start with the tabs. Looking at the HTML source of the Page Template in Dreamweaver, it's pretty easy to identify the HTML for the tabs:

<div id="bannerMid"><a href="/index.html" class="headlink">ORACLE.COM</a> <span class="loclink">TECHNOLOGY NETWORK</span> <a href="/partners/index.html" class="headlink">PARTNERS</a> <a href="http://oraclestore.oracle.com" class="headlink">STORE</a> <a href="http://metalink.oracle.com" class="headlink">SUPPORT</a></div>

Looks like the OTN folks did a nice job with these, as it's as simple as it can get. For a non-current tab, the HTML is nothing more than an "A HREF" tag with a class. A current or selected tab has a SPAN tag surrounding it. In an HTML DB Page Template, we can use the token #TAB_CELLS# to represent where we want the tabs to be dynamically rendered. A simple edit to the above HTML is all that is needed, so that it now look like this:

<div id="bannerMid">#TAB_CELLS#</div>

When HTML DB sees the #TAB_CELLS# token, it will refer to the Standard Tab Attributes portion of the Page Template. HTML DB will then render a tab - be it current or non-current - for each tab which is defined in the Application. All we have left to do is provide some HTML for Current and Non-Current tabs. Based on a combination of the static HTML used for tabs on OTN and some more HTML DB tokens, we can easily construct the HTML for both types of tabs.

Current Tab HTML: <a href="#TAB_LINK#" class="loclink">#TAB_LABEL#</a>

Non-Current Tab HTML: <a href="#TAB_LINK#" class="headlink">#TAB_LABEL#</a>

I modified the HTML slightly for the current tab to include a link. OTN doesn't use one, but when a user is in HTML DB Studio and wants to jump to the "Technology Center" home page, I'd like that to work. Moving the CLASS inside the A HREF tag ensures that the text of the tab will be rendered the same way that the OTN ones do - in red.

As a last step, we have to change some of the Tab names in the HTML DB Studio application, as those have changed. We'll also have to make the TECHNOLOGY NETWORK current for all of the pages in HTML DB Studio. With the previous look, both Current and Non-Current tabs looked identical, so there was no reason to make them look different.

All looks good, but the tabs - when clicked - are throwing up 404 Errors.

50 points if you can tell me why! (I'll address it in my next entry...)

Sunday, April 20, 2008

Cloning your Corporate UI with HTML DB - Part II (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site.

June 8, 2005
Things look really good. The page rendered almost perfectly, it all mostly lines up, and there are only a couple of broken images. We're almost done, right?


There is still a lot of work to be done. Essentially, as it stands now, we have created a static Page Template that doesn't play well with the rest of HTML DB. Also, there are no navigational aids for HTML DB Studio left - they have been replaced by content from OTN. Which leads us to our next step - removing more OTN content.

Removing OTN Content
First of all, I don't need the content in the 3rd column at all on my pages (Resources For, Featured Downloads, Discussion Forums). However, I do want to retain that column and define an HTML DB Region Position there, so that I can put HTML DB dynamic content there.

To start , I copy the Body of my Page Template back into Dreamweaver, so that I can edit it in the WYSIWYG editor. I then remove all of the tables that make up the 3rd column content by simply selecting and deleting them. Finally, in the empty column that remains, I enter #REGION_POSITION_03#. This will allow me to position content in the 3rd column - such as the "Most Popular" and "Recently Added" boxes that I use on the home page of HTML DB Studio. With a little formatting and tweaking, I can right-align this content as well.

Next, I want to add a Region Position for the Application Menu. Just above the page where #BOX_BODY# appears is a table which has some static content in it. I can easily delete this content and replace it with my region position - #REGION_POSITION_02# - which will be the new home for my Menu.

Finally, I want to remove the content in the 1st column of the page (Product Centers, Technology Centers & Community). In all three sites, I use this region for a List of navigable sections. Just as I did before with the other two columns, I remove all of the content, all the while being careful not to alter the underlying table structure. In place of the content, I simply enter #REGION_POSITION_01#, which is my Region Position token.

Once all of the Region Positions are defined, we now have the page layout below:

Note that the images associated with the Menu and List Itema are broken. This is because the _base_href is set to http://www.oracle.com, and our image lives on http://htmldb.oracle.com. Since we are using a relative reference in the Menu Template, the image path resolves to http://www.oracle.com/i/orcl/orcl_breadcrumb_icon.gif - which is the wrong server.

If we look at the HTML from our template, we notice this line:

<base href="http://www.oracle.com/technology/index.html">

This line is causing all relative image, CSS & JavaScript references to use http://www.oracle.com/technology/ as the starting point, which in turn, is causing some images to not render. Removing this line will fix the HTML DB images, but will break the portion of the site which IS using www.oracle.com as a source for its images. This presents us with a Catch-22: Removing it breaks stuff, and leaving it in breaks stuff.

Since I do not have any access to make changes to www.oracle.com, and I do have access to make changes to htmldb.oracle.com, the only solution is to move all of the images, CSS files, and JavaScript libraries from www.oracle.com to a place which I can reference on htmldb.oracle.com. Only after transferring all of these files and updating the template will the site finally have no broken images.

Fixing the CSS References
Note that the buttons "Submit an Application" and "Application Submission Guide" are not rendering properly either. This is due to the fact the we have not yet referenced the previously used Cascading Style Sheet(s) in this new Page Template. Since all we did was copy HTML from OTN, there was no reference of any CSS used in our original HTML DB Page Templates.

In order to correct this, let's load the production version of HTML DB Studio, view the source, and search for the term "css". (Hint: Using Firefox, you can simply hit the "/" key, start typing, the it will highlight any matches. Hitting F3 will tab to the next match. Pretty cool!) My search yielded three hits:

  • <link rel="stylesheet" href="/i/orcl/otn_dyn.css" type="text/css">
  • <link rel="stylesheet" href="/i/orcl/otn_new.css" type="text/css">
  • <link rel="stylesheet" href="/i/css/core.css" type="text/css">

Upon copying & pasting these three lines into the new template, the buttons (and some other minor things) were back to normal. We're getting there - we now have a solid foundation for most of our Page Body in our Template.

Next, we'll tackle the Page Header & Footer, including how to make the Tabs work.

Saturday, April 19, 2008

Cloning your Corporate UI with HTML DB - Part I (Re-Post)

The following is a re-post of the "Cloning your Corporate UI with HTML DB" series that I blogged about back in 2005 on the now-defunct Orablogs site. Most of the content and advise is still the same today, and has been reposted here exactly as it was on the old site. Enjoy!

June 8, 2005

I've often been asked how to create custom Themes & Templates with Oracle HTML DB. The truth is that it’s one half Art, and one half Science. (Note: Percentages may vary based on what you consider “Art” and “Science”). And since the desired look and feel varies from site to site, there’s no easy way to document these steps.

Thus, I am going to attempt to “blog” my way through it, using a real-world example.

As you may know, the look & feel of oracle.com was recently updated as part of the re-launch of oracle.com, OTN, etc. I believe that this is now the 4th UI in 2 years for oracle.com.

Three sites that I manage - Oracle HTML DB Studio, Oracle HTML DB References, and Best Practices PL/SQL – are running in the previous “livery”, and need to be updated. I figured that this is as good an example as any to illustrate how to change the look & feel of an HTML DB application without changing the underlying functionality.

Like any good craftsman, you need good tools in order to do a good job. (Hint: never buy the cheapest ANYTHING at Home Depot – it will break, and then you will end up re-buying the more expensive one anyways) Here’s what I plan on using:
  • Mozilla Firefox w/these extensions:
    • Web Developer
    • ColorZilla
    • ieview
  • DreamWeaver MX
  • PaintShop Pro
Getting Started
Since it gets the most traffic of the three, I am going to use HTML DB Studio as the baseline application. Truth be told – it really doesn’t matter which one I use, as once I have my theme completed, I can apply it to all three.

As a first step, I exported HTML DB Studio and then re-imported it as a new application. This way, the production site won’t reflect any of my changes until I am completely done. Feel free to pop in on the Work in Progress.

The next step is to determine which Templates in my Theme will need to be re-worked. Overall, I have 33 templates in my oracle.com FY06 Theme. If you navigate to this page:

Workspace HTML DB STUDIO > Builder - Application 20530 > Shared Components > Themes > Templates > Template Utilization

You can see which of your templates are actually being used by a specific application. In my Theme, there are 13 templates which are not used. Thus, I need to initially only be concerned with the 20 which are referenced, as the “unused” 13 may be referenced in another application. Either way, this reduces the amount of work required.

Now that I have a short list, I’m going to try to make it even shorter. In some cases – such as my button template – I will not need to make any changes, as the template will look OK in both the new and old UI’s. I can further reduce my list by one or two more templates here. Sometimes you’ll be able to do better…

Where to Start
I’ve found that the best place to start is with the Page Template. Replicating the structure of your desired UI makes assembling all of the components that much easier. Unfortunately, this is typically the most time-consuming task, as Page Templates can be rather large. Depending on how much the target page differs from your current page, you’ll need to decide whether to try to retrofit it or start from scratch. Since it looks like the new oracle.com look is simpler than the previous one, I am going to start from scratch.

An Oracle HTML DB Page Template is nothing more than HTML sprinkled with HTML DB-specific tokens, used to substitute sub-templates and/or values. Thus, you could go to oracle.com, save the HTML Source, paste it into an HTML DB Page Template, and the results should be similar, save the relative image & CSS references which would break. That’s exactly what I’m going to do!


Your browser sent a request that this server could not understand. mod_plsql: /pls/otn/wwv_flow.accept HTTP-400 Value param too long. Length is 43467. Upper limit is 32512

Looks like I need to slim down the code, as I am around 10k over the 32k limit. I’ll take that same source and paste it into DreamWeaver, and then remove any content. Remember, we’re just trying to build the structure of the page – we’ll use HTML DB Regions to populate the page with content.

Cutting out all of the content from the center region of the OTN Home page got us well under the 32k limit. I also took a couple of minutes and ensured that the token #BOX_BODY# was placed in the newly-empty center region. #BOX_BODY# will be substituted with the HTML DB Regions for a specific page – reports, forms, HTML, PL/SQL, etc.

Next, let’s set the Theme to use our new Page Template as the Default Page Template. From the Themes page, click on the edit icon next to your Theme, and then select your Page Template as the default Page Template and Apply Changes. If pages in your application are set to use the Default Page Theme, then you should instantly see the new Theme in action – as ugly as it may be.

I’ll have to say that this was the BEST first draft that I have seen in a while:

However, we’re a long way from being done, as things like Authentication, Tabs, Region Templates, CSSs, and Lists still need to be translated over.

Continue to Part II

Friday, April 18, 2008

Customizing Validation Error Messages

APEX validations allow a server-side validation to occur for a number of different conditions - item not null, item is numeric/alphanumeric, regular expressions, etc. When a validation fails, you have four options to display the corresponding error message:
  1. Inline with Field
  2. Notification Message
  3. Both inline with field & Notification Message
  4. Separate Error Page
With a simple template modification, you can create a fifth option, which is a variation of option #3 above. It will still display the message in the notification, but only highlight the label of the item in question.

This allows for a couple of things: first, if you have a form with a number of items and a fixed width template, error messages inline with items will wreak havoc on the layout, pushing items off to the right and misalign your entire page. By only highlighting the label of the item in question, the user is aware of where the issue is, and can simply look in the notification region to understand what needs to be done to correct the issue.

Here's a screenshot of a page with three items that have NOT NULL validations associated with them. The label template denotes that each of these fields are NOT NULL with the "*" prefix.

And when the page is submitted without any values, here is the result:

Notice that no error messages are displayed inline; only the labels are highlighted in a pink color, denoting that there is an issue with each one. Reading the notification will explain what each of the issues are and potentially offer advise on how to correct them.

This trick is achieved with a simple modification to the Required Label Template that you are using on your page. The changes are quite simple; all that needs to be modified is the Error Display section, as illustrated below:

In this example, I simply added a style tag (style="background-color:#ffa0a7;")to the On Error Before Label attribute. This is what changes the background color to pink for a specific label. You can add any additional attributes here to do whatever you would like to.

Just as important as what was added is what was removed. The token for the actual error message - #ERROR_MESSAGE# - was removed from the On Error After Label attribute. Thus, when APEX renders an item with this Error Template, the only thing that changes is the background color; the Error Message is not added.

Thursday, April 17, 2008

RIP OraBlogs.com

It seems as if someone didn't pay the bills, and OraBlogs.com - where my first blog was started - has been taken over by a, well, let's just say a less savory site. The content of the new site is slightly NSFW; clicking on any of the links we can only assume is definitely NSFW.

The real shame is that it seems as if all of the content from not only my old blog, but those of several others, is gone and unable to be recovered. A couple of weeks back, I did manage to save off my posts about Cloning your Corporate UI, and will eventually resurrect them and re-post it here. However, all of my other content is lost for good, it seems. :(

In any case, you may want to change your bookmarks & links to not reference orablogs.com anymore.

Tuesday, April 15, 2008

Oracle Critical Path Update for APEX

More of a false alarm than anything else - it seems as if the two issues are resolved in APEX 3.0.1. Upgrading to 3.0.1 or the latest release - APEX 3.1 - should fix the two identified issues.

For those running APEX 3.0, 2.2 or earlier, it looks like it's time to take a look at getting up to date!

Sunday, April 13, 2008

Oracle Critial Patch Update Fixes 2 APEX Issues

As if April 15th doesn't bring enough joy to those of us in the US (Hint: it's tax day!), Oracle is scheduling its release of its next Critical Patch Update on the same day as most of us will be making a frantic late-day trip to the post office.

From the bulletin on OTN:

This Critical Patch Update contains 17 new security fixes for the Oracle Database including 2 for Oracle Application Express. Two of these vulnerabilities may be remotely exploited without authentication, i.e. may be exploited over a network without the need for a username and password.

While somewhat vague, it does seem that there are a couple of APEX-related issues that will be addressed. We'll just have to wait and see what they are specifically...

Orace APEX Day in Dublin

If you're in Dublin next week, Oracle Ireland is hosting an APEX Developers Day at its offices in Clontarf. It seems as if the event is free of charge, but more information can be gained by e-mailing amanda.fay@oracle.com.