Upgrading the Universal Theme

Back when APEX 5.0 was released, these forward thinkers at the development team installed a feature to verify your Universal Theme against the one defined in the repository.

There hasn't really been anything to verify against, until now.

There are a number of changes to the Universal Theme, and one way to explore these changes is to check out what's reported under the Verify button in the Theme definition.

Though unfortunately on apex.oracle.com I'm still getting the same error
ORA-20001: Unable to subscribe to report template.
ORA-00040: active time limit exceeded - call aborted

Errors aside, this facility all planned, of course, to minimise the impact theme upgrades have caused in the history of APEX. And no doubt used internally while they were developing UT in the first place.

As Patrick Wolf points out in this forum post, some features aren't borne out of the IDE upgrade alone, but are found with the theme upgrade. This includes RTL functionality.

So some thoughts that come out of reviewing the comparison:

• A couple of new default styles, to go along with Slate. Nice.
• Two new region templates to explore - Content Block and Blank with Attributes (No Grid)
• Every other template has been touched in some way. It would be nice to see a diff of the updates.

If your Universal Theme is still locked, you just refresh your theme definition and your application should continue to work wonderfully.

Take care if you have any customisations or extensions, regression test as necessary. We've tried to minimise ours so it will be interesting to explore when 5.1 becomes generally available.

If you want to learn more about the features of the Universal Theme, check out the sample application, which also got a wicked upgrade, always available at
apex.oracle.com/ut
There are some awesome tools in the reference section alone.

APEX 5 Verify Theme Subscription

I was attempting to replicate the navigation bar example from the Opportunity Tracker application and I noticed my application was missing icons from the sub list dropping off the username.

Icons in submenu when visible

Here are the relevant User Interface settings for the Navigation Bar.

User Interface settings

It turns out in newly created application with Theme 42 the following is used as the sublist entry template
<li data-current="true" data-icon="#ICON_CSS_CLASSES#"><a href="#LINK#">#TEXT_ESC_SC#</a></li>

In my application that was created a few weeks ago uses
<li><a href="#LINK#">#TEXT_ESC_SC#</a></li>

So this is when I thought it might be worth giving the Verify Theme Refresh option a go.
Sure enough a bunch of templates, including the Navigation Bar, was "Out of Sync" instead of "Match"

Verify Theme Subscription

I followed the on-screen instructions as the documentation suggested, and waited with baited breath as to what to do next...

Nothing! A message came back saying my theme was synchronised and every template matched the theme master that lives in the Oracle domain somewhere.

I tried the Verify theme option previously but it does not seem to operate well in apex.oracle.com
ORA-00040: active time limit exceeded - call aborted
Not sure if this is a shared server thing or something is actually wrong.

At the end of the day this shows an advantage of running the Universal Theme - updates and corrections can come from Oracle at any time.

I guess we'll learn any disadvantages as time goes by, such as any JavaScript or CSS changes that affect your usage of the relevant template.

Also see UT migration guide.

Note: December 2017
Pre-release of 5.1 - Upgrading Universal Theme

KScope15 APEX Symposiums

Kscope15 officially kicked off on Sunday with a set of symposiums, I stayed in the APEX room the whole day, though I really wanted to hear what Steven Feuerstein had to say after lunch in the other room. I also hear a great discussion was had in the ADF room on tablet first vs mobile first.

APEX Episode 5 (A new frontier)

Joel Kallman kicked off the movie themed symposiums with a great talk about how APEX really is the enterprise solution people want/need, despite what other people say about it - and the fact it has been so for some time.

It wasn't a technical talk, but set a great tone for rest of the conference. Kudos to his delivery, it seemed well thought out and provided a powerful message about the wonderful tool that it is.

He mentioned interactions with various community members and highlighted how powerful the community has become in driving the evolution of the product. His praise indicated how vital community interaction is for the success of APEX compared to other tools on the market that have limited to no interaction with their customers.

This reminded me of something mentioned by Mike Hichwa regarding how the team uses the product to build packaged applications, compared to the Oracle Forms team who never used the final product. It makes a big difference.

Need for Speed (Page Designer)

Patrick Wolf formally introduced the group to the APEX 5 Page Designer, and various little tools within it that make development so much easier. The IDE truly is a marquee feature that shows how APEX has matured as a modern, advanced development tool.

Here are some great nuggets that are worth checking out

• A specific grouping for dynamic actions fired on Page Load
• Additional context menu facilities on various components, such as "create opposite action", something originally found just within the create DA wizard
• Right click to delete, no prompt since we can just undo actions in the IDE
• Drag/drop in the grid layout, far advanced compared to 4.0
• Bulk property edits, just like Oracle Forms - one of my favourites
• Updated help text for component properties
• Code editor highlighting, including validation and auto-complete for page items and core packages
• Block edit within code editor
• In-browser searching including option for regular expressions
• Shared component references and grouping, another of my favourite innovations 

Polite applause was extended for some of the features as Patrick announced them, showing community appreciation.

Interstellar (Universal Theme)

Shakeeb Rahman gave us an overview of the fantastic Universal Theme. It was an overview as opposed to a detailed look at how it all works, I think other presentations will be going into further detail on specific features.

One admission that came early was that further enhancements are to come as further feedback comes in, but the theme has been integrated into the APEX environment in such a way to make it easier to incorporate these in your applications in future releases.

He covered three major points.

1. Responsiveness - the new theme is leagues ahead of the capabilities of Theme25, which admittedly had shortfalls. It was interesting to note that accommodations have been made for things like tap event handling, to hand the 300ms wait time back to the users. I've used Touch Punch in the past to help with this.
2. Versatility - Lists are more heavily used in APEX 5 for navigation aids, which I think is great because they are a versatile feature. The menus are built with Accessibility in mind, and support keyboard navigation. Icon libraries have been included, with room to extend in future releases.
3. Options - I can't remember if this was the actual heading, but the declarative options now provided with templates will help developers build more consistent applications without the need for deeper CSS skills. Template Options give developers the same type of declarative CSS assistance Dynamic Actions did for JavaScript. It's a deep topic that needs it's own sessions but there are plenty built in demonstrated in the Universal Theme sample app.
   The Theme Roller enables re-colouring the application to a far greater extent than 20 variations on a similar theme could ever do. I reckon even my colour-blind friend could use it to build a scheme that contrasts well.
   Entire themes can also now be subscribed.

The Fifth Element (Mobile + HTML5)

Marc Sewtz braved the world of live demos to show developers improvements made to the mobile user interface. I found this interesting to compare to how we solved problems in developing for 10" tablets using the desktop interface. 

Not much appears to have changed from the developer's perspective (except for integration with the new IDE), but many HTML5 features have been incorporated into the build.

Out of the various suggestions Marc made for developing responsive apps with the universal theme, I think the most important was thinking "mobile first". This is regardless of the technology you're using.

Matrix Reloaded (Interactive Reports)

Anthony Rayner (one of a few faces I'm not sure I've ever seen) ran through what features APEX 5 provides for Interactive Reports.

• Intro - reminder for the group on what IR are all about
• Modernised - more CSS, more client side processing means more snappy interaction for the users.
  Accessibility standards are now met and plenty of people seemed to have questions regarding this, though it's a shame it got picky and slowed the flow of what Anthony had to say. His main point on this was regardless of whether you need to meet these standards, you should consider them while developing to help promote better applications.
• Action icons have been restored. 
• Single row view has been modernised. 
• Column options have been modified to help accessibility issues, but all will reap benefits. 
• Report and column widths are responsive to the page. 
• Dialogs are used instead of dropping down content. 
• Settings and filters have been cleaned up and enhanced.
• Extended - plenty of new features added in APEX 5
• an impressive pivot feature has been added to user options. 
• Multiple IRs can now be defined per page, it's best to ensure they have their own ID.
• Headers fix to the top of the page
• Theme roller also integrates with IR 
• Upgrading - Main issue coming out of complete IR revision relates to the gReport object and upgrading older reports. Any markup on 4.x report will probably no longer work.

The Prestige (Migrating to Theme 42)

Shakeeb came back to help the community migrate to the Universal Theme, using pre-packaged applications as an example..

Head to apex.oracle.com/ut and find the Bookmarklet to help with migration to switch to Theme 42.

Reset grid option. Default option probably handy, "Reset fixed region positions" but worth exploring what happens to your application with each. It will really depend on where you're coming from. Plenty of help on the topic by clicking ? icon next to option.

Shakeeb started by demonstrating how to update the login page to match a pre-packaged application built on APEX 5. He showed how easy it was to find, copy and apply various properties using the Page Designer.

Icons were real easy to add to the navigation menu using pop-list options to select font-awesome icons.

Existing regions had plenty of customisations to aim for responsive layout. Shakeeb removed a bunch of these, showing how ready Theme 42 is out of the box.

Buttons were easy to adjust and modify with some dragging and dropping in the grid layout, with basic tweaks to make them iconic.

Template options also came into play to help tweak page layout.

We can now create copy (and/or subscribe) of existing plugins from another application which was missing from previous releases.

List template attributes are introduced in APEX 5 to help work out what the 1-10 attributes are for the relevant tempate - very neat.

Change one attribute to convert existing pages into modal pages and all the links automatically treat the page accordingly. Now clean up the page to suit being modal, again solved with declarative features and region template options.

Rinse and repeat for your entire application, I guess! Shakeeb certainly had plenty to say about conversion and offered to give the crowd more (but I think many are ready for a beer). I look forward to more session content from him.

Conclusion

Bring on day 1

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

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
  ,'f?p='||:APP_ID||':'||tab_page||':'
     ||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.