AquaLogic User Interaction Development Guide

     Previous Next  Open TOC in new window   View as PDF - New Window  Get Adobe Reader - New Window
Content starts here

Creating a Base Page Adaptive Page Layout

The base page adaptive layout defines components that are common to each page (header, footer, navigation, content area). The profile page layout is almost identical, but uses a user profile search box instead of the standard search box.

The pt:basepage library includes tags to display all common sections of the portal page.
  • The title tag displays the title of the page.
  • The pagebody tag displays the html body tag and initializes the JavaScript required by the page.
  • The navarea tag is used to display legacy portal navigation components in the top bar. The pt:area parameter defines which part of the navigation is being defined by each section (ABOVEHEADER, BELOWHEADER, ABOVEBODY, LEFTOFBODY, RIGHTOFBODY, BELOWBODY, ABOVEFOOTER, BELOWFOOTER, and TOPBAR). You can also create a customized display of links to portal components using tags from the pt:ptdata library.
  • The content tag defines the section where the main content of the page is displayed.
  • The header and footer tags define the sections of the page where the header and footer are displayed. The header and footer are implemented in separate HTML files. For examples, see the header.html and footer.html files in the \imageserver\plumtree\portal\private\pagelayouts folder on your ALI image server.
The example below uses tags from the pt:basepage library to define common page components, and legacy adaptive tags to implement portal links and handle logic.
Note: This example has been oversimplified for illustration purposes; for a complete implementation of the base page layout, see the basepagelayout.html file in the \imageserver\plumtree\portal\private\pagelayouts folder on your ALI image server.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:pt="http://www.plumtree.com/xmlschemas/ptui/">
<head>
<title><pt:basepage.title/></title>
<pt:standard.stylesheets/>
<link href="pt://images/plumtree/portal/private/css/mainstyle.css" rel="stylesheet" type="text/css" />

<!-- Dojo Initialization, create a custom ali namespace -->
<script type="text/javascript">
        var djConfig = {
            isDebug: false,
            scopeMap :  [ ["dojo", "alidojo"] ]
         };
</script>

<!-- Dojo is used by drag and drop and flyout editor -->
<script type="text/javascript" src="pt://images/plumtree/portal/private/js/dojo.js"></script>

<!-- This tag displays the html body tag and initializes page JavaScript. -->
<pt:basepage.pagebody marginwidth="0" marginheight="0" topmargin="0">
<div id="ali-header-nav">

<!-- This area is used to build links to portal components displayed in the top bar -->
<pt:basepage.navarea pt:area="TOPBAR"/>

... banner actions ....

<pt:basepage.navarea pt:area="ABOVEHEADER"/>
<pt:basepage.header/>

<!-- This area is used to build links to portal navigation elements -->
<pt:basepage.navarea pt:area="BELOWHEADER"/>

... navigation links ... 

  <pt:basepage.navarea pt:area="LEFTOFBODY"/>
</div>
<div style="float:right; width:200px;" >
  <pt:basepage.navarea pt:area="RIGHTOFBODY"/>
</div>
<pt:basepage.navarea pt:area="ABOVEBODY"/>
<pt:common.error/>
<pt:basepage.content/>
<pt:basepage.navarea pt:area="BELOWBODY"/>
<pt:basepage.navarea pt:area="ABOVEFOOTER"/>
<pt:basepage.footer/>
<pt:basepage.navarea pt:area="BELOWFOOTER"/>
</pt:basepage.pagebody>
</html>
For details on configuring adaptive page layouts in the portal, see the AquaLogic Interaction Administrator Guide.

  Back to Top      Previous Next