Problems Using a DOCTYPE in APEX Theme Templates

When I began creating new APEX themes one of the first things I did was replace all of the table layouts from the supplied templates with standards compliant XHTML and CSS. Naturally this involved declaring an XHTML DOCTYPE at the beginning of each page template. Unfortunately, adding a valid DOCTYPE had the adverse effect of breaking some of the core APEX Javascript relating to dynamic pull down menus and interactive reports. It seems this disappointing scenario has now been resolved with the forthcoming APEX 3.2. Yay!

A valid DOCTYPE is essential for modern browsers to correctly parse and render a web page. Without a valid DOCTYPE most browsers revert to a so called “quirks” mode where pretty much anything goes. None of the supplied APEX themes use a DOCTYPE, which means much of the markup and some of the Javascript integral to the proper working of APEX is reliant on the leniency of browsers running in “quirks” mode. So, when a DOCTYPE is added to a theme and the browser is forced to run in standards-compliant mode, parts of APEX break.

The most obvious breaks to me involved the Pull Down Menu templates and the drop down menus of the interactive report. In Firefox 2.0+, when using a theme with a valid DOCTYPE, dynamic sub menus would be incorrectly positioned on the page. After some investigation I found the reason for this was that Firefox in standards-compliant mode correctly expects a unit to be specified when setting a position property. E.g. when setting the property “top”, non zero values must include a unit: “20px” not “20”. It seems a select few of the core APEX Javascript functions, particularly relating to dynamic menus, don’t obey this rule, which results in standards-compliant Firefox failing to parse the values thereby rendering sub menus well out of position. (Interestingly, “standards-compliant” IE7 doesn’t take issue with the lack of units and correctly positions sub menus regardless).

To fix this problem I rewrote the Pull Down Menu templates and wrote my own Javascript functions. However, these changes didn’t apply to interactive report dynamic menus because the interactive report is generated in full by APEX without the use of a template. Once I’d established what the problem was I began to track down the offending functions and redefine them to include the required “px” suffix. Unfortunately this only worked for some of the menus of the interactive report and I was unable to track down the functions responsible for the column header drop downs. Dejected, I was ready to rip out the DOCTYPE declarations altogether.

But… Sara pointed out to me that APEX 3.2 was about to be released and had already been installed at apex.oracle.com. Deciding I had nothing to lose by testing it out I uploaded my application and theme, with DOCTYPE, and lo and behold, the menus all work! It would seem the offending functions have been updated to rectify this problem which means I can go on developing shiny new standards compliant APEX themes. So, a big thank you to whoever was responsible for the update; you’ve saved me from a massive headache!

Stephen

Stephen Blair is a freelance artist and designer. He has created numerous websites including those selling his own vector clipart and APEX themes.

4 Responses to “Problems Using a DOCTYPE in APEX Theme Templates”

  • Marc Sewtz says:

    Hi Stephen,

    I’m a development manager on the APEX team, and worked on this fix in 3.2. So I just wanted to confirm your analysis. The unit was in fact missing in some places in our JavaScript code, this had an effect on the drop-down menus and interactive reports. So as you correctly stated, if you specified a DOCTYPE, to standard drop downs menus and the menus and controls in Interactive Reports would be incorrectly positioned. I basically went down the same route as you did, identifying the places where the unit was missing and fixing this there. There are different JavaScript files used for drop-down menus and Interactive Reports. So I fixed this in all places. But please do let me know if you come accross any other issues due to the use of DOCTYPE. More and more customers prefer using strict-mode, that includes our own internal projects, and we may add new themes with DOCTYPE specified in 4.0. So I’d appreciate any feedback on this 3.2 fix.

    Thanks,
    Marc

  • Hi Marc,

    Thank you for your feedback confirming my findings and thank you for the 3.2 updates. The best bugs to find are the ones that have already been fixed! Can’t wait for the release of 3.2 so I can launch my new themes.

    Thanks,
    Stephen

  • aku says:

    hi stephen,

    is there any tutorial on how to create apex theme from scratch?

    thanks,
    -aku

    • Hi Aku,

      Not that I’m aware of. Creating an APEX theme is fairly straightforward as long as you know HTML, CSS and javascript ;-)

      Luckily APEX comes with a selection of themes that you can pick apart and learn from. I’d recommend you start there.

      -Stephen

Comments can no longer be submitted.