Sometimes, you do everything right, and it's still wrong. Or, at least, it seems that way.

I've started working on building a mobile version of WriteTrack (for those who haven't heard, APEX 4.1 includes some mobile capabilities), and, naturally, one of the first things to do is to get the templates set up. I decided that I want to have the option of adding buttons to my page headers (next and previous, for instance), but I don't want them hard coded.

So, I took the body portion of Marc's minimalist page template (see his blog post), and modified it slightly:

    

        #REGION_POSITION_01#
        
#TITLE#
        #REGION_POSITION_02#
    
    

        #BOX_BODY#
    
    

        #REGION_POSITION_08#
    

The only change was the addition of #REGION_POSITION_01# and #REGION_POSITION_02# before and after the heading. So I can put whatever I want in those regions, and it'll be added to the appropriate spots. Good so far.

Next, I needed to define a template for the buttons. jQuery's buttons are simply links with a class associated with them, so this template is fairly straightforward:

#LABEL#

At this point, I had enough that I was able to start working on building an actual page. Starting with an empty page, I created two regions, one in Position 01, and one in Position 02. Both are HTML regions with no template, so they don't interfere with anything. Then I added a Previous button to the left region and a Next button to the right. To make things look fancier, I added this to the Previous button's attributes:

data-icon="arrow-l"

and this to the next button's:

data-icon="arrow-r" data-iconpos="right"

These add arrows to the buttons. (If you try this and don't see the arrows, it's probably because you didn't add #BUTTON_ATTRIBUTES# to your button template!) Then I loaded the page…and was disgusted with the results. The previous button was above the title, which was above the next button. It looked hideous. What had gone wrong?

Looking at the HTML gave a clue; the buttons were surrounded by HTML table markups. Looking back at Marc's post, I saw that turning on mobile development “…makes APEX render form elements on your mobile pages without a table grid.” [emphasis added] It turns out that, although the 4.1 version of APEX gives page item buttons the same functionality as region buttons, it doesn't extend the mobile development protection to region buttons*. And, of course, I'd created my buttons as the latter. Changing them to page item buttons removed the table markups, and my header bar looks the way I intended it to.

* Yes, I'll make sure we fix that for 4.2.