This component is mandatory for all pages, since it contains the HTML head declaration and includes standard JavaScripts. You may need to modify the pageHeader.jsp component in order to change the page's title or <META> tags in the page header.

This component is mandatory for all pages. It contains hidden form fields for the web framework core (such targetTask) and executes necessary scripts that adjust the page layout dynamically.

There is no visible content to customize, although you may want to add scripts to this component to be run after the page is loaded.

The page header contains the graphics at the top of the page, including the login and edit profile buttons. The header also contains the main navigation tabs:

The main navigation tab area is rendered by an HTML table. Individual buttons are realized as syswf:controls in script mode, attached as JavaScript to the graphic elements for the tabs. To add a tab, simply add a new <td> element with the appropriate class and graphics and use the <syswf:control> tag to jump to the desired task as shown below:

<td id="B_myButton" class="menuTabInactive" onClick="navSave('myButton');
<syswf:control mode='script' targetTask='/search' targetDepth='0'/>">MY TAB</td>

You may want to copy the element's graphics from the buttons used in the standard UI.

There are several other attributes on the <td> element that enable it to work with the rest of the UI framework:

	Tip
	For an example of how tab switching works, see the data/script/naviswitch.js script.

The footer provides the bottom part of the page, where the product name and copyright is displayed in the standard UI. Except for the static content (copyright text, administrator email, etc.), there are no visible active elements in the standard UI's page footer.

The standard UI uses scripts on this page to initialize scrolling regions properly. If you add more scrolling regions (currently four are supported), you may need to adjust the scripts here. Supposing your scrollable content is identified by the id attribute as mycontent, you will need to add these lines:

if (getObj('mycontent'))  { 
                scrollers[scrollers.length] = new treeScrollerControl(getObj('mycontent')); 
}               
if (getObj('mycontent')) loadScrollInfo('mycontent',getObj('mycontent').parentNode,
                '<c:out value="${taskName}"/>');

The first line initializes the scroll object and the second one loads stored scroll information into it from a cookie.

See the data/script/tree_scroller.js script for details on how the scroller component is implemented.

This component provides:

Use the normal frame header to wrap the real content that you want to display to the user, so that presentation is consistent across the entire console.

This component processes several parameters that can be passed using a <syswf:param> element nested in the <syswf:wrap> JSP tag.

<!-- Wrap with the normal header and footer -->
<syswf:wrap headerTemplate="design/normalFrameHeader.jsp" 
    footerTemplate="design/normalFrameFooter.jsp">
    <!-- We will generate the caption from a static text, and a parameter 
    (or a variable) -->
    <syswf:param name="caption">
        Detailed list of <c:out value="${entityPluralName}"/>
    </syswf:param>

<!-- This is the content of the area -->
<!-- End of the content -->

</syswf:wrap>

<!-- Wrap with the normal header and footer -->
<syswf:wrap headerTemplate="design/normalFrameHeader.jsp" 
    footerTemplate="design/normalFrameFooter.jsp">
    <!-- We will include one control -->
    <syswf:param name="control1">
        <!-- This is the control's HTML code -->
        <img title="Printable view" 
            onClick="openPrintableView2('<c:out value='${dataUrl}/'/>','content');" 
            src="gfx/icon/printview.gif" align="absmiddle"/>
    </syswf:param>

<!-- This is the content of the area -->
<!-- End of the content -->

</syswf:wrap>

This component contains the graphics that frame the content area at the bottom. It contains no textual or parameterized content in the standard UI. You may combine the normalFrameFooter with all the frame headers to visually close the content area.

This header is similar to the Normal Frame Header but includes the Printable View button. This header is easier to use for pages that support the printing feature, since you need not pass an explicit <syswf:param> element as shown in the preceding examples.

It accepts the same parameters as the Normal Frame Header:

<!-- Includes the JSTL core, required, if you want to use conditionals, 
loops, expressions -->
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!-- Includes the Systinet Web Framework tag library, required -->
<%@ taglib prefix="syswf" uri="http://systinet.com/jsp/syswf" %>
<!-- Includes the Business Service Console specific tag library -->
<%@ taglib prefix="bsc" uri="http://systinet.com/jsp/bsc" %>

<!--
    Provides the system header and footer, wraps the entire page content inside
    This is a required part for all pages
-->
<syswf:page headerTemplate="pageHeader.jsp" footerTemplate="pageFooter.jsp">

    <!-- Provides the page header and footer -->
    <syswf:wrap headerTemplate="design/pageHeader.jsp" 
        footerTemplate="design/pageFooter.jsp">

        <!--
            This is the page actual content:
            There's one area that covers 15% of the page's width, and another 
            area that covers the rest. The space distribution is best done through tables.
        -->
        <table width="100%" border="0" cellapdding="0" cellspacing="0" 
            class="DialogOffset_5px">
            <tr>
                <td valign="top" width="15%">

                    <!--
                    We use another wrapper with header and footer in order to provide
                    resizing of the area
                    -->
                    <syswf:wrap headerTemplate="design/resizableFrameHeader.jsp" 
                     footerTemplate="design/resizableFrameFooter.jsp" >
                        <!--
                            This is the Business Service Console's navigation tree. 
                            This component will be
                            explained later.
                        -->
                        <syswf:component name="browseTree" prefix="browseTree">
                            <syswf:param name="focus" value="endpoints"/>
                        </syswf:component>
                    </syswf:wrap>
                </td> <!-- End of the tree area -->

                <!--
                    This is construction of a UDDI query, will be explained later. 
                    This part is not visual.
                -->
                <bsc:parseUddiQuery var="findQuery" scope="request">
                    <find_binding xmlns="urn:uddi-org:api_v3">
                    </find_binding>
                </bsc:parseUddiQuery>

                <td> 
                    <!--
                        We use a special printable header to provide the  
                        "printable view" icon
                    -->
                    <syswf:wrap headerTemplate="design/printableFrameHeader.jsp" 
                         footerTemplate="design/normalFrameFooter.jsp">
                        <!--
                            This is the result view, that covers the main area
                        -->
                        <syswf:component prefix="resultView" 
                                name="endpointSearchResults">
                            <syswf:param name="defaultView" 
                                value="endpointsCommonResults" />
                            <syswf:param name="query" 
                                value="${findQuery}"/>
                        </syswf:component>
                    </syswf:wrap>
                </td>
            </tr>
        </table>
    </syswf:wrap>
</syswf:page>

The Header and Footer are included by using <syswf:wrap>, which injects header and footer JSPs around the content area. The content area itself is divided vertically, using HTML tables, and the real content is embedded using the <syswf:component> JSP tag.