Thursday 20 March 2014

APEX 5 first peek - Themes & Templates

Only a few reported changes in the themes & templates, but they are far reaching and show APEX is continuing to mature as a product.

Supporting Files

The main update mentioned in the new features list is the ability to associate your CSS files within your template definition.
Themes can now store all the files of a theme with the theme definition in the database.
This replicates functionality we already see in plug-ins.
Theme Property - File Location
We also have the ability to declaratively nominate the location of our files, making maintenance a little easier. Previously you may have defined this as an application substitution string and included in your page template.

New Themes

As versions of APEX go up, the number of new themes go down - this is a good thing. APEX 5 introduces one new desktop theme that is responsive and utilises a "navigation list" - this is their fancy term for a List Template (my favourite) that builds a menu that looks & behaves pretty much like the one in the application builder.
APEX 5 EA Desktop Themes
Keep reading on for how a quick way to convert your old Tabs to this format - yup, Tabs almost have their second foot in the grave. I'm not sure many APEX developers would attend that funeral.

When nominating a page template in the new theme you'll see a very succinct list of options. Well done APEX team.
Theme 31 Page Templates


While editing page templates you'll notice the syntax highlighter is making the content easier to read.
Syntax highlighting in page template property
I've provided feedback to the team requesting them to ensure they replicate this across all relevant properties in the theme maintenance pages - feel free to second this motion in the feedback.

Converting Tab to Navigation List

I think I've had this as a blog post idea for a while, so here's a quick & dirty go using the new tech.
  1. Change the theme of your sample application to 31 - you need the navigation list template
    I think all the template classes match ok without help.

  2. Create a List in Shared Components using something like the following SQL
    select 1, tab_label
         ||sys_context('APEX$SESSION','app_session') target
    from apex_application_tabs
    where application_id = :APP_ID
  3. Brave the new page designer and add a new List region using the following properties
    (if only the OTN forums had an easy way to display a screenshot like this, now properties are tightly laid out)
List region properties
The template renders the menu like the following, where "Home" is current and the cursor is hovering over "Reports". Looks like it could use an order by clause.
Tab options rendered as List template
When a hierarchical query is provided, the menu neatly displays a tab-friendly sub-menu.
I think many people have waited for such a tidy list template to be built-in instead of relying on plug-ins or stitching together your own solution - here it is.

David Peake says the new theme consolidates the best bits of all the old ones, so I look forward to seeing how it treats us.

No comments: