Plugin Overlays, PUC Layout

I was thinking about my previous post on PUC Perspectives and some of the things that were necessary to make that happen when it dawned on me that I hadn't really highlighted some really cool changes.  There are two primary changes that are worth talking about:  menubar and PUC layout.

Menubar
The PUC menubar was a GWT menubar, standing not much different than it did in the proof-of-concept that I did back in March 2008.  James Dixon later extended upon this by adding the ability to define "menu customizations" through our plugin system.  What we really needed though was a total rewrite of the menu system but the prospect of making such a drastic change was never a priority.  Fortunately, we were able to justify the rewrite with the fact that without it, the capability of doing perspective overlays for the menubar were going to be pretty darn near impossible.  That is, without adding hacks upon existing hacks.  And so, the menubar was rewritten and XULified.

We now have a main_menubar.xul which defines the content and layout of the main menubar.  This will make it MUCH easier for 3rd party/OEMs to add/remove/update any/all of the behavior of the menubar simply by tweaking the XUL file.

This means that plugin.xml which used to contain "menu-items" will now use an overlay.  Most plugins which defined menu-items already had an overlay section to define toolbar tweaks.  The same overlay section is used for both menu and toolbar changes, for example,

<overlay id="startup.analyzer"  resourcebundle="content/analyzer/resources/messages">

    <toolbar id="mainToolbar">
      <toolbarbutton id="newAnalysisButton" image="../api/repos/xanalyzer/images/analyzer_toolbar_icon.png" onclick="mainToolbarHandler.openUrl('${tabName}','${tabName}','api/repos/xanalyzer/service/selectSchema')" tooltiptext="${openNewAnalyzerReport}" insertafter="dummyPluginContentButton"/>
    </toolbar>
    <menubar id="newmenu">
      <menuitem id="new-analyzer" label="${openNewAnalyzerReport}" command="mainMenubarHandler.openUrl('${tabName}','${tabName}','api/repos/xanalyzer/service/selectSchema')" />  
      </menubar>    
</overlay>

There are a few subtle differences here with pre-SUGAR overlay definitions.  I have fixed the annoying bug in the plugin system which required the nesting of an overlay inside of an overlay (simply due to XML parsing bug), for example:

<overlay id="startup.analyzer"  resourcebundle="content/analyzer/resources/messages">
    <overlay id="startup.analyzer"  resourcebundle="content/analyzer/resources/messages">

Another benefit is that overlays can have resource bundles associated with them, while the old menu-item section did not.  This allows us to localize the display strings in the menu system.

PUC Layout

I was recently asked by James Dixon if it would be possible to update the entire layout of PUC with XUL.  I said we needed to get the story on our sprint backlog, which I ended up doing (BISERVER-6693).  Instead of using XUL, which might be a barrier to entry for some customers/OEMs, a much easier solution to the PUC layout actually exists:  just use HTML.  What if the PUC layout existed in HTML and we just inject into various id's?  So, in SUGAR, I have done just this, the layout of PUC is based on DIV tags in the HTML (Mantle.jsp).  When PUC loads, it no longer "takes over" the page, it now looks for certain elements by id, such as "pucMenuBar" or "pucPerspectives" and then injects the widget at that location.  This will allow easier customization, for example, in SUGAR we have actually removed the "logo panel" from PUC itself.  With the DIV-based layout, we can easily add a logo panel back into the product by editing the HTML.  This is still a work in progress, the "pucContent" is very high-level and refers to the entire bottom section of PUC (explorer + content).  The next phase will be to define the layout even further, but we've taken steps towards this direction and what has been done is beyond concept, it's committed.

The layout of PUC can be defined as something as simple as this:

<div id="puc" style="height: 100%">

    <div id="pucTopBar" style="background-color: black; height: 28px">
        <div id="pucMenuBar" style="float: left">
        </div>

        <div id="pucPerspectives" style="float: right;">
        </div>
    </div>

    <div id="pucToolBar" style="clear; both; float: left; width: 100%">
    </div>

    <div id="pucContent" style="clear: both; height: 100%; width: 100%">
    </div>

</div>

Enjoy!