Skip to main content

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...)

Comments

Popular posts from this blog

Thanks, ODC (Oracle Developer Community)!

I owe a lot of thanks to the ODC - which stands for Oracle Developer Community.  What is ODC?  You may remember it as OTN, or the Oracle Technology Network.  Same people, different name.  Why they changed it I can't say.  People just liked it better that way... (love that song)

In any case, what am I thankful for?  A lot.  To start, the tools that I use day in and day out: SQL Developer, ORDS, Oracle Data Modeler, SQLcl and - of course - APEX.  Without these tools, I'm likely on a completely different career path, perhaps even one that aligns more closely with my degree in television management.

While the tools are great, it's really the people that make up the community that make ODC stand out. From the folks who run ODC and the Oracle ACE program to the developers and product managers who are behind the awesome tools, the ODC community is one of, if not the greatest asset of being involved with Oracle's products.

If you have yet to get more involved with this communi…

Spaced Out

A while back, I wrote about how to give the Universal Theme a face lift.  If you follow the steps in that post, the base font for an APEX application with the Universal Theme can easily be changed.

While that's all well and good, sometimes you only want to change the font for a report, not the entire page.  One of the applications that I'm building contains a number of IRs based mostly on log data.  Thus, having that data in a monospaced font would make it a whole lot easier to read.

You can search Google Fonts for monospaced fonts by selecting only that option on the right-side menubar.  You can also opt for the standard yet kinda boring Courier and achieve the same thing.

To implement this in your application, follow the steps in my other post, but stop shy of the final step.  Instead of pasting in the text that I specify, paste in the following to the Custom CSS field in Theme Roller, using the name of the font you selected for the font-family:

.a-IRR-table tr td { font-fam…

Whose Deck is it Anyways?

This year at KScope, we're going to try something new.  And fun.  And funny to watch - we hope.  It's called "Whose Deck is it Anyways?", and will occur on Sunday at 8:30pm.  It's only 30 minutes, but it will likely be the best 30 minutes of the conference.  Or at least the most embarrassing.

Here's what we're going to do: the will be four 5-minute presentations - one on each of the following: BI, EPM, Database & APEX.

Sound interesting?  Probably not.  We get that, too.  So here's what we did.

Each 5-minute session will be presented by a non-expert.  For example, it's highly likely that I'll be presenting on BI or EPM.

To make it even better, each slide deck will be prepared by the corresponding expert.  So again, it's highly likely that my slide deck's creator will be either Stewart Bryson or Edward Roske.  If nothing else, this session will be a crash course in how not to make cohesive, easy to read slides.

Interested now?  Ya,…