Sunil's Notes: PageBuilder2 theme architecture

In the PageBuilder2 Theme architecture - bootstrap jsps, i mentioned that the Default.jsp of the PageBuilder2 theme does not have any HTML markup, instead it just initializing few values and then forwarding control to theme.html.

This is how the theme.html which ships with the WPS looks like. As you can see the theme.html is pretty clean and small,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="${locale}" xml:lang="${locale}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- rel=dynamic-content indicates an element that is replaced with the contents produced by the specified href. 
   dyn-cs:* URIs are resolved using the WP DynamicContentSpotMappings resource environment provider. These values can
   also be set using theme metadata if a theme is specified in the URI (e.g. @tl:oid:theme_unique_name). -->
<link rel="dynamic-content" href="dyn-cs:id:head@tl:oid:csa2.theme">
<script type="text/javascript">
dojo.addOnLoad(function(){
com.ibm.pb.themes.commonInit({
  setWindowTitle:true,
  useNavigationController: true,
  useRenderingController: true,
  useDNDController: true,
  initLiveTextService: true,
  lazyLoadModeWidgets: true,
  navPrimingContainers: ["selectionPathPrimer","topNavLinks","navTabsRoot"],
  customInit: com.ibm.themes.PageBuilder2.init
});
dojo.publish("com.ibm.portal.theme.portlet_ready");  // notifies ASA that portlet IDs are ready to be found in the DOM
});
</script>
<!-- rendering is delegated to the specified href for each locale --><!--START LOCALE LINKS-->
<link rel="alternate" href="nls/theme_en.html" hreflang="en">
</head>
<body class="lotusui tundra${rtl| lotus_rtl mumrtl} locale_${locale}" ${bidi.dir.attribute} >
  
  <div class="lotusFrame">   
    <div class="lotusui lotusTitleBar">
      <div class="lotusRightCorner">
        <div class="lotusInner">
          <a rel="dynamic-content" href="dyn-cs:id:tabNav@tl:oid:csa2.theme"></a>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div><!--end titleBar-->
    <a rel="dynamic-content" href="dyn-cs:id:pageToolbar@tl:oid:csa2.theme"></a>
    <div class="lotusMain" id="lotusMain">
      <!-- pb-pageMode-edit indicates that an iwidget should be lazy-loaded upon entering edit mode for the page -->
      <div class="iw-iWidget iw-Standalone pb-pageMode-edit" id="customizeShelfContainer">
        <a class="iw-Definition" 
  href="/mccbuilder/widget-catalog/customizeShelf.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
      </div>
      <div style="clear:both;"></div>
      <a id="lotusMainContent" name="lotusMainContent"></a>  
      <div id="layoutContainers" class="ibmLayoutContainers ibmLayoutContainersHidden" role="main">  
        <a rel="dynamic-content" href="dyn-cs:id:layout@tl:oid:csa2.theme"></a>
      </div>
    </div><!--end main-->
    <div class="lotusFooter"></div><!-- page footer -->
  </div><!--end frame-->
  <!-- active site analytics additions -->
  <a rel="dynamic-content" href="dyn-cs:id:asa@tl:oid:csa2.theme"></a>
  <!-- This is responsible for bootstrapping the configuration for the javascript framework. 
    This is located here instead of the head section to improve client performance. -->
  <a rel="dynamic-content" href="dyn-cs:id:config@tl:oid:csa2.theme"></a>
  
  <div id="systemWidgets">
    <div class="iw-iWidget iw-Standalone" id="templateLayout">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/templateLayout.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone" id="pageActionsMenu">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/ContentSetMenu.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
      <span class="iw-ItemSet" title="attributes" style="display: none;">
        <a class="iw-Item" href="#contextMenuID">pageActions</a>
        <a class="iw-Item" href="#anchorCSSClass">lotusCommonActionMenuAnchor</a>
        <a class="iw-Item" href="#menuCSSClass">lotusCommonActionMenu</a>
        <a class="iw-Item" href="#resourceType">com.ibm.mashups.enabler.navigation.NavigationNode</a>
        <a class="iw-Item" href="#openEvent">PageActions.open</a>
        <a class="iw-Item" href="#closeEvent">PageActions.close</a>
      </span>
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone" id="userActionsMenu">
      <a class="iw-Definition" href="/mccbuilder/widget-catalog/ContentSetMenu.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
      <span class="iw-ItemSet" title="attributes" style="display: none;">
        <a class="iw-Item" href="#contextMenuID">userActions</a>
        <a class="iw-Item" href="#anchorCSSClass">lotusCommonActionMenuAnchor</a>
        <a class="iw-Item" href="#menuCSSClass">lotusCommonActionMenu</a>
        <a class="iw-Item" href="#resourceType">com.ibm.mashups.enabler.user.User</a>
        <a class="iw-Item" href="#openEvent">UserActions.open</a>
        <a class="iw-Item" href="#closeEvent">UserActions.close</a>
      </span>
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone pb-pageMode-edit" id="newPage">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/NewPageDialog.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
      <span class="iw-ItemSet" style="display:none" title="attributes">
        <a class="iw-Item" href="#controller">ibmCfg.controllers.navigation</a>
        <a class="iw-Item" href="#allowFriendlyURL">true</a>
        <a class="iw-Item" href="#allowPrivate">true</a>
      </span>
    </div>
    <!-- The lazyLoad attribute is used for widgets that are explicitly loaded by another source at a later point in time 
         (in this case the displayHelper). -->
    <div class="iw-iWidget mumHiddenWidget iw-Standalone" lazyLoad="true" id="sharePage">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/accessControl.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone" lazyLoad="true" id="reorderPage">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/reorderPageWidget.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone" lazyLoad="true" id="viewMorePage">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/viewMorePage.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>              
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone" lazyLoad="true" id="wireInterface">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/wireInterfaceWithSettings.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>
      <span class="iw-ItemSet" title="attributes" style="visibility: hidden; display: none">
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#displaySettings">true</a>
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#displayPortletsAndWidgetsWarningMessage">true</a>
      </span>
    </div>
    <div class="iw-iWidget mumHiddenWidget iw-Standalone pb-pageMode-edit" id="autoWiringManager">
      <a class="iw-Definition" 
   href="/mccbuilder/widget-catalog/autoWiringManager.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"></a>         
    </div>
    <div class="iw-iWidget iw-Standalone" id="dialogDisplayer">
      <a class="iw-Definition" style="visibility:hidden;display:none;" 
   href="/mccbuilder/widget-catalog/displayHelper.xml?pragma=cache&max-age=1209600&cache-scope=public&vary=none"> </a>
      <span class="iw-ItemSet" title="attributes" style="visibility: hidden; display: none;">
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#sharePage">sharePage</a>
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#reorderPage">reorderPage</a>
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#viewMorePage">viewMorePage</a>
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#wireInterface">wireInterface</a>
        <a class="iw-Item" style="visibility:hidden;display:none;" href="#autoWiringManager">autoWiringManager</a>
      </span>
    </div>
  </div>
</body>
</html>

If you compare the theme.html to the markup generated for the portal page you will notice that the portal page has more markup(as expected it has markup generated by portal, markup for navigation,..)

Also if you compare this markup to the markup generated for portal page you will notice that most of the markup for normal page is generated inside div class="lotusFrame", which is the highlighted code. There is lot of code under div id="systemWidgets" but my guess is that code kicks in only in case of iwidget on a page.

Now the basic question would be then who is generating the portal markup, who takes care of generating navigation, forwarding control to portal aggregation engine,.. The answer would be its the dynamic content spots in the .html

Sunil's Notes

PageBuilder2 theme architecture - theme.html

2 comments: