Left Navigation Shell

The left navigation shell demonstrates using a navigation tree in the left frame of a portal desktop.

Concepts Demonstrated by this Sample

This sample uses a shell to create a left table cell that contains a navigation tree of links for the selected book. The main page book is rendered in the right table cell.

This portlet uses functionality similar to the Targeted Menu Portlet. The difference between the two samples is scope. The left navigation shell provides navigation an entire desktop, and the Targeted Menu portlet provides navigation for a single book.

Following is the leftNav.shell file, which shows how the header, footer, and left navigation JSPs are included to provide a left navigation area in the shell:

<?xml version="1.0" encoding="UTF-8"?>
<netuix:markupDefinition xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0 markup-netuix-1_0_0.xsd"> <netuix:locale language="en"/>
<netuix:markup>
<netuix:shell
title="Left Nav Shell" description="A shell with a left nav section." markupType="Shell" markupName="leftNav">
<netuix:head/>
<netuix:body>
<netuix:header>
<netuix:jspContent contentUri="/portlets/header/header.jsp"/>
</netuix:header>
<netuix:jspContent contentUri="/navigation/shell/beginBody.jsp"/>
<netuix:break/>
<netuix:jspContent contentUri="/navigation/shell/endBody.jsp"/>
<netuix:footer/>
</netuix:body>
</netuix:shell>
</netuix:markup>
</netuix:markupDefinition>

Following are descriptions of the JSPs used in the shell:

Location of Sample Files

This sample is located in the <BEA_HOME>/<WEBLOGIC_HOME>/samples/portal/portalApp/portalApp.work application.

How to Run the Sample

See Viewing the Samples in Portal Samples.

How to Use the Sample in Your Portals

  1. Create a portal application. Make sure you create a Portal Application and add a Portal Web Project to it.
  2. Import or copy the following directories and files into your portal application and portal Web project. You may need to create the appropriate directories in your application:
    Import or copy this to this directory (create if necessary)

    <WEBLOGIC_HOME>/samples/portal/portalApp/
    sampleportal/framework/markup/shell/leftNav.shell

    <PORTAL_APP>/<project>/framework/markup/shell/

    <WEBLOGIC_HOME>/samples/portal/portalApp/
    sampleportal/navigation/shell/
    beginBody.jsp
    endBody.jsp
    leftNav.jsp

    <PORTAL_APP>/<project>/navigation/shell/
    <WEBLOGIC_HOME>/samples/portal/portalApp/
    sampleportal/framework/markup/skins/<skin>/css/treenav.css
    <PORTAL_APP>/<project>/framework/markup/skins/<skin>/css/
    <WEBLOGIC_HOME>/samples/portal/portalApp/
    sampleportal/framework/markup/skins/<skin>/
    images/treenav*.gif
    <PORTAL_APP>/<project>/framework/markup/skins/
    <skin>/images/
    <WEBLOGIC_HOME>/samples/portal/portalApp/
    sampleportal/framework/markup/skins/<skin>/
    skin.properties

    If you already have a skin.properties file for a skin that you do not want to overwrite, copy the CSS entry for treenav.css from a skin in Sample Portal into your skin.properties file. Otherwise, copy the entire sample skin.properties file into:

    <PORTAL_APP>/<project>/framework/markup/skins/<skin>/

  3. Open your portal file and navigate the page where you want the portlet to appear.
  4. In the Data Palette window, drag the Login to Portal portlet onto a placeholder on the page.
  5. In the Property Editor window, set any relevant properties.
  6. Save the portal file.
  7. View your portal with the WebLogic Test Browser or with your default browser.
    • WebLogic Test Browser - In the WebLogic Workshop toolbar, click the Start button (or press Ctrl+F5).
    • Default Browser - In the WebLogic Workshop menu, choose Portal-->Open Current Portal.

Related Topics

How the Shell Determines Header and Footer Content

Targeted Menu Portlet

Creating Shells

Creating Skins and Skin Themes

Portal Samples