Part I How to Customize Look and Feel Using Ajax Framework L-Shape API

SAP NetWeaver

How-To Guide

Part I: How To... Customize Look and

Feel using Ajax Framework L-Shape

API

Navigation Capabilities

Applicable Releases:

SAP NetWeaver 7.3 SP1 and higher

IT Practice:

User Productivity Enablement

IT Capability:

Running an Enterprise Portal

Version 1.0

February 2011

© Copyright 2011 SAP AG. All rights reserved.

No part of this publication may be reproduced or

transmitted in any form or for any purpose without the

express permission of SAP AG. The information contained

herein may be changed without prior notice.

Some software products marketed by SAP AG and its

distributors contain proprietary software components of

other software vendors.

Microsoft, Windows, Outlook, and PowerPoint are

registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel

Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390,

OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP,

Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix,

i5/OS, POWER, POWER5, OpenPower and PowerPC are

trademarks or registered trademarks of IBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader

are either trademarks or registered trademarks of Adobe

Systems Incorporated in the United States and/or other

countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered

trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame,

WinFrame, VideoFrame, and MultiWin are trademarks or

registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or

registered trademarks of W3C®, World Wide Web

Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems,

Inc., used under license for technology invented and

implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP

NetWeaver, and other SAP products and services

mentioned herein as well as their respective logos are

trademarks or registered trademarks of SAP AG in

Germany and in several other countries all over the world.

All other product and service names mentioned are the

trademarks of their respective companies. Data contained

in this document serves informational purposes only.

National product specifications may vary.

These materials are subject to change without notice.

These materials are provided by SAP AG and its affiliated

companies ("SAP Group") for informational purposes only,

without representation or warranty of any kind, and SAP

Group shall not be liable for errors or omissions with

respect to the materials. The only warranties for SAP

Group products and services are those that are set forth in

the express warranty statements accompanying such

products and services, if any. Nothing herein should be

construed as constituting an additional warranty.

These materials are provided “as is” without a warranty of

any kind, either express or implied, including but not

limited to, the implied warranties of merchantability,

fitness for a particular purpose, or non-infringement.

SAP shall not be liable for damages of any kind including

without limitation direct, special, indirect, or consequential

damages that may result from the use of these materials.

SAP does not warrant the accuracy or completeness of the

information, text, graphics, links or other items contained

within these materials. SAP has no control over the

information that you may access through the use of hot

links contained in these materials and does not endorse

your use of third party web pages nor provide any warranty

whatsoever relating to third party web pages.

SAP NetWeaver “How-to” Guides are intended to simplify

the product implementation. While specific product

features and procedures typically are explained in a

practical business context, it is not implied that those

features and procedures are the only approach in solving a

specific business problem using SAP NetWeaver. Should

you wish to receive additional information, clarification or

support, please refer to SAP Consulting.

Any software coding and/or code lines / strings (“Code”)

included in this documentation are only examples and are

not intended to be used in a productive system

environment. The Code is only intended better explain and

visualize the syntax and phrasing rules of certain coding.

SAP does not warrant the correctness and completeness of

the Code given herein, and SAP shall not be liable for

errors or damages caused by the usage of the Code, except

if such damages were caused by SAP intentionally or

grossly negligent.

Disclaimer

Some components of this product are based on Java™. Any

code change in these components may cause unpredictable

and severe malfunctions and is therefore expressively

prohibited, as is any decompilation of these components.

Any Java™ Source Code delivered with this product is only

to be used by SAP’s Support Services and may not be

modified or altered in any way.

Document History

Document Version Description

1.00 First official release of this guide

Typographic Conventions

Type Style Description

Example Text Words or characters quoted

from the screen. These

include field names, screen

titles, pushbuttons labels,

menu names, menu paths,

and menu options.

Cross-references to other

documentation

Example text Emphasized words or

phrases in body text, graphic

titles, and table titles

Example text File and directory names and

their paths, messages,

names of variables and

parameters, source text, and

names of installation,

upgrade and database tools.

Example text User entry texts. These are

words or characters that you

enter in the system exactly as

they appear in the

documentation.

<Example

text>

Variable user entry. Angle

brackets indicate that you

replace these words and

characters with appropriate

entries to make entries in the

system.

EXAMPLE TEXT Keys on the keyboard, for

example, F2 or ENTER.

Icons

Icon Description

Caution

Note or Important

Example

Recommendation or Tip

Table of Contents

1. Business Scenario............................................................................................................... 1

2. Background Information ..................................................................................................... 1

3. Prerequisites ........................................................................................................................ 2

4. Step-by-Step Procedure ...................................................................................................... 3

4.1 From the NetWeaver Developer Studio ....................................................................... 3

4.1.1 Setting up Portal project ................................................................................... 3

4.1.2 Creating HTML Layout ..................................................................................... 9

4.1.3 Using Navigation API to create navigation menu .......................................... 10

4.1.4 Deploying Portal Application .......................................................................... 14

4.2 From the Portal ........................................................................................................... 14

4.2.1 Creating iView ................................................................................................ 14

4.2.2 Creating new Framework Page ..................................................................... 17

4.2.3 Creating new Desktop .................................................................................... 18

4.2.4 Creating new Desktop rule............................................................................. 19

5. Related Links ..................................................................................................................... 22

6. Appendix ............................................................................................................................ 23

Part I: How To... Customize Look & Feel using Ajax Framework L-Shape API

February 2011 1

1. Business Scenario

There are different levels of how the look & feel of your SAP NetWeaver Portal can be adapted. From

customization only to developing your own framework page, these levels vary in the degree of

“Standardness” and “Design Flexibility”.

This guide will give you an overview of the required steps to create your own framework page and will

focus on the navigation capabilities provided by the Navigation API

2. Background Information

AFP (Ajax Framework Pages) is globally available as part of SAP NetWeaver 7.3 and is fully

compatible with SAP previous framework pages releases. It is based on the Ajax technology that

provides improved performance, dynamic navigation and enhanced user experience.

Architectural outline

The L-Shape API (LSAPI) provides navigation capabilities that expose the navigation hierarchy and

provides functionality to control navigation in the portal. You can use the Navigation API to manipulate

the navigation iViews and/or regular portal navigation.

For more information please visit http://wiki.sdn.sap.com/wiki/display/AFP/SAP+Portal+-

+Ajax+Framework+Page

http://wiki.sdn.sap.com/wiki/display/AFP/SAP+Portal+-+Ajax+Framework+Page



February 2011 2

3. Prerequisites

The following is a list of all you need for developing your customer framework page.

SAP NetWeaver 7.3 SP1 and NWDS.

Knowledge

You have a basic knowledge of configuring SAP Portal Desktop

You have acquired some basic experience with Ajax Framework Page for example by working

through the AFP tutorials provided in the wiki page




February 2011 3

4. Step-by-Step Procedure

This tutorial walks you through the steps necessary for creating a new framework page using the

Navigation L-Shape API.

You can use the Navigation API methods to retrieve information about the current state of navigation

and use this information to render the navigation tree by building the DOM (Document Object Model).

You can also use the Navigation API to handle navigation events, such as expanding a node, and

more

Upon completion of this document, you will be able to understand the steps needed to create your

own framework page

4.1 From the NetWeaver Developer Studio

4.1.1 Setting up Portal project ...

Create Portal Application Project

1. From the File menu, select New Other. The New window is displayed.

2. Select Development Infrastructure Development Component and click Next

3. Select Enterprise Portal Portal Application Standalone and follow the wizard and click Finish

4. From the File menu, select New Other. The New window is displayed.

5. Select Portal Application New Portal Application Object. Click Next.

6. Select the Portal Application Standalone you just created and click Next.

7. Select Portal Component AbstractPortalComponent. Click Next


February 2011 4

8. Enter the following fields:

a. Name: ITelOFramework. Name of component, which is defined by the name attribute

of the <component> element for this component in the portalapp.xml.

b. Location: src.core. The location of the new Java class file for this component, which

determines whether other applications can reference the classes.

c. Class name: IteloPage. The Java class file for this component.

d. Package name: com.sap.itelo.framework.page. The package name for the Java

class file for this component.

9. Click Finish

10. Your project should look like the image below


February 2011 5

Include CSS files, JavaScripts and HTML code in Portal Component

11. Open IteloPage.java located in src.core com.sap.itelo.framework.page IIteloPage.java

12. Paste the following code into the portal component‟s doContent() method. This code attaches

the JSP file, JavaScript and the CSS file to the portal component.

Note

In the following steps you are going to create each of this elements that forms the Custom Framework Page

public void doContent(

IResource navigationCSS = request.getResource(IResource.CSS, "css/style.css");

response.include(request, navigationCSS);

IResource menuCSS = request.getResource(IResource.CSS, "css/menu.css");

response.include(request, menuCSS);

IResource navTreeSource =

request.getResource(IResource.STATIC_PAGE,"html/framework.html");

response.include(request,navTreeSource);

IResource navigationJs =

request.getResource(IResource.SCRIPT,"scripts/navigation.js");

response.include(request, navigationJs);

}

Create Cascading Style Sheet (CSS) files

13. Go to the ITeloFramework dist css folder

14. Select New Other Web CSS from the context menu

15. Enter style.css and click Finish

16. Open style.css and copy and copy the source code found in the appendix B

17. The CSS classes shown in the below image are part of the classes available in style.css


February 2011 6

18. Save your changes

Create JavaScript file

19. Go to the ITeloFramework dist scripts folder

20. Select New Other JavaScript JavaScript Source File from the context menu

21. Create an empty JavaScript file called navigation.js. we‟ll complete this JavaScript file

with steps Navigation API and History API explained in step Using Navigation API to create

navigation menu


February 2011 7

Create Html file

22. Go to the ITeloFramework dist html folder. If this folder doesn‟t exist, create it.

23. Select New Other Web HTML Page from the context menu

24. Create an empty HTML file called framework.html we‟ll complete this html file with the step

Creating HTML Layout

Add images

25. This exercise uses several images, for example the logo, backgrounds, icons, etc.

26. These are the images used in this exercise, please check Appendix D – Images for more

information


February 2011 8

27. In the Windows explorer, search for your NetWeaver Developer Studio workspace folder and

save these images in <local drive>:\<MWDS workspace

folder>\ITeloFramework\dist\images

28. Go to the NetWeaver Developer Studio and refresh the Package Explorer view

29. Your Portal project should look the image below


February 2011 9

4.1.2 Creating HTML Layout

1. Open ITeloFramework dist html framework.html

For creating a valid content area we used HTML elements with unique IDs that are manipulated

from JavaScript to dynamically change their appearance

2. Copy the source code found in Appendix C

3. framework.html defines the layout of the new custom framework page


February 2011 10

Important

Log-off API

This layout provides a log off button at the top right corner.

Users can close the current user session and all associated windows through the logoff

method EPCM.getSAPTop().LSAPI.getSessionPlugin.logoff() as shown in

the image below


4.1.3 Using Navigation API to create navigation menu

Let‟s review the location of the script element in the framewok.html

1. At the end of framework.html the initial method that creates the Navigation Tree is called

2. Open ITeloFramework dist scripts navigation.js

3. Declare the following global variables

var selectedNodeTitle = null;

var selectedNodeDiv = null;

4. Add the initTree function. It gets the Html element sap-Tree and calls getNavigationSubTree

to retrieve the navigation nodes relative to the current node

function initTree(){ var sapTreeEl = document.getElementById("sap-Tree");

EPCM.getSAPTop().LSAPI.AFPPlugin.model.getNavigationSubTree(null,

drawTree, sapTreeEl);


February 2011 11

var user = EPCM.getSAPTop().LSAPI.AFPPlugin.configuration.getUser();

var welcomeMessage = document.getElementById( 'welcomeMessage' );

welcomeMessage.innerText = "Welcome: " + user.DisplayName;

}

Important

getNavigationSubTree(name, callback, argument)

Returns an array of child nodes of the specified navigation node along with their subtrees.

Parameters

name: The ID of the navigation node whose child nodes are to be returned. If set

to null, the initial (top-level) nodes are returned

callback: A callback function to return the result. The callback function

receives the following parameters: Nodes: An array of NavigationNode objects representing the children of the specified navigation node. If the node ID is set to null, the initial (top-level) nodes are returned Additional Parameter: The additional parameter passed to the getNavigationSubTree() method

argument (optional): Any JavaScript object. The object is passed to the

callback function

Return: None. The result is returned asynchronously through the callback function

5. Add the drawTree callback function. For each node in the array, calls the renderNode

function and add the rendered element to the container

function drawTree(nodes, container) {

for (var i=0; i<nodes.length; i++) {

var renderedNode = renderNode(nodes[i]);

container.appendChild(renderedNode);

}

}

6. Add the renderNode function This function gets node context and create the html

representation

function renderNode(node) {

var iconElement = createIconElement( node.hasChildren() );

var titleElement = createTitleElement( node );

var lineContainerElement = createLineContainerElement( iconElement,

titleElement );

setTitleOnClick(titleElement, node, lineContainerElement);

var nodeElement = createNodeElement( lineContainerElement );

createIconOnClick(iconElement, nodeElement, node);

return nodeElement;

}


February 2011 12

Important

node is a NavigationNode object that represents a node in the navigation tree

node.hasChildren()returns true if the node has child nodes

7. Add createIconElement function. It creates an icon element of the tree node. It could be

open folder, closed folder or iView

function createIconElement(hasChildren){

var iconElement = document.createElement("span");

iconElement.className = (hasChildren?"sap-TreeNodeIcon-

FolderClosed":"sap-TreeNodeIcon-Page");

return iconElement;

}

8. Add createTitleElement function. It creates the title element of the tree node

function createTitleElement(node, lineContainer){

var titleElement = document.createElement("span");

titleElement.className = 'sap-TreeNodeTitle';

titleElement.innerHTML = node.getTitle();

return titleElement;

}

9. Add createLineContainerElement function. It puts together the icon element and the title

element

function createLineContainerElement( iconElement, titleElement ){

var lineContainerElement = document.createElement("div");

lineContainerElement.className = 'sap-TreeNodeContainer';

lineContainerElement.appendChild(iconElement);

lineContainerElement.appendChild(titleElement);

lineContainerElement.onmouseover = function(){

if( lineContainerElement != selectedNodeDiv )

lineContainerElement.className = "sap-TreeNodeContainer sap-

nodeLine-hover";

}

lineContainerElement.onmouseout = function(){

if( lineContainerElement != selectedNodeDiv )

lineContainerElement.className = "sap-TreeNodeContainer";

}

return lineContainerElement;

}

10. Add createNodeElement function. It creates the tree node element

function createNodeElement( lineContainerElement )

{

var nodeElement = document.createElement("div");

nodeElement.className = "sap-TreeNode";

nodeElement.appendChild( lineContainerElement );

return nodeElement;

}


February 2011 13

11. Add setTitleOnClick function. This function

Adds the onclick event to the title element

Changes the appearance of the selected node in the navigation tree

function setTitleOnClick(titleElement, node, lineContainerElement)

{

titleElement.onclick = function() {

EPCM.doNavigate(node.getName());

titleElement.className = "sap-TreeNodeTitle-selected";

if( selectedNodeTitle != null )

selectedNodeTitle.className = "sap-TreeNodeTitle";

selectedNodeTitle = titleElement;

lineContainerElement.className = "sap-TreeNodeContainer sap-

TreeNodeContainerSelected";

if( selectedNodeDiv != null)

selectedNodeDiv.className = "sap-TreeNodeContainer";

selectedNodeDiv = lineContainerElement;

};

}

Important

node.getName()returns the node name (ID)

EPCM.doNavigate(nodeID) This method triggers the absolute navigation on the client

12. Add createIconOnClick function. This function adds the onclick event in order to

expand/collapse the menu and to retrieve his children

function createIconOnClick(iconElement, nodeElement, node){

var expanded = false;

var childrenEl = null;

if (node.hasChildren()) {

iconElement.onclick = function() {

expanded = !expanded;

iconElement.className = (expanded?"sap-TreeNodeIcon-

FolderOpened":"sap-TreeNodeIcon-FolderClosed");

if (expanded) {

if (childrenEl==null) {

childrenEl = document.createElement("div");

childrenEl.className = 'sap-TreeNodes';

nodeElement.appendChild(childrenEl);

node.getChildren(drawTree, childrenEl);

}

childrenEl.style.display = '';

} else {

childrenEl.style.display = 'none';

}

}

}}


February 2011 14

Important

node.getChildren(callback, argument)returns an array of child nodes

(NavigationNode objects)

13. Save the changes

4.1.4 Deploying Portal Application

Once you have created a portal application, you need to deploy it to the portal

14. Choose your Portal Application Development component

15. Right click and choose Development Component Build from the context menu

16. Right click and choose Development Component Deploy from the context menu

4.2 From the Portal

4.2.1 Creating iView

1. Log into your SAP Portal

2. Go to Content Administration Portal Content Management Portal Content Portal

Applications <Your Portal Application Standalone Name>

3. Right click on you <Your Abstract Portal Component Name> and select Copy from the context

menu


February 2011 15

4. Go to Content Administration Portal Content Management Portal Content Portal

Content

5. Right click on <Your Folder> and select Paste as PCD Object from the context menu


February 2011 16

6. Enter the corresponding information. Choose Next and then Finish

7. The iView has been created in your folder


February 2011 17

4.2.2 Creating new Framework Page ...

1. Go to „Desktops & Display rules‟ under System Administration System Configuration

Portal Display.

2. Under Portal Content create a new folder. Name it as your framework page, for example, ItelO

Framework.

3. Go to Portal Content Portal Users Standard Portal Users Ajax Framework Content

Ajax Framework Page right click copy it.

4. Go to Portal Content and under the folder you‟ve created right click paste in the tab that

will be opened choose as Delta Link Finish.

To modify the properties of the Ajax Framework Page copy, you should go to the “portal content”

studio in the content admin role

5. Go to Content Administration Portal Content Management Portal Content and locate the

folder you created

6. Right click on the Ajax Framework Page copy and go to Open Page in the context menu

7. Go to Properties tab the properties and click on Modify Properties to modify the Name

8. Go to Page tab.

a. Remove all iViews

b. Add IteloPage iView as Delta Link

c. Change Page Layout to 1 Column (Full Width)


February 2011 18

9. Click Save

4.2.3 Creating new Desktop

1. Go back to Desktops & Display rules role and add new portal desktop

2. Add your page to the desktop.

10. Add your favorite Theme from the themes folder.

Note

You can find the available themes under Portal Content themes

11. Click Finish

12. Open the newly created Desktop and it should look like the following image


February 2011 19

4.2.4 Creating new Desktop rule

A portal alias is the part of the URL after the section that specifies the portal J2EE application (irj),

which by default is http://<server>:<port>/irj.

Note

Standard portal aliases are defined in the portal's J2EE deployment descriptor (web.xml) in com.sap.portal.runtime.dispatcher.ear, which is located under EP-Basis SCA. If a user specifies an undefined alias, it is ignored.

Important

Changes you make to the web.xml will be overwritten after upgrading your portal to a new release or support package stack

1. Locate com.sap.portal.runtime.dispatcher.ear, which is located under EP-Basis SCA. Please

ask your Portal administrator responsible for the Portal installation.

2. Open it open com.sap.portal.runtime.dispatcher.war file open WEB-INF file open

web.xml file.

3. In web.xml for the irj J2EE application, add an initial parameter (<init-param> element) for the

gateway servlet

4. Set the parameter name (<param-name> element) to the new portal alias.

5. Set the parameter value (<param-value> element) to a string of key-value pairs, separated by

commas (,). All values are either 0 (false) or 1 (true).

6. The following shows the XML added to create a new alias itelo

<servlet>

<servlet-name>gateway</servlet-name>

<servlet-class>com.sap.portal.navigation.Gateway</servlet-class>

<load-on-startup>0</load-on-startup>

…

<init-param>

<param-name>portal/itelo</param-name>

<param-value>

anonymous=0,proxy=0,low_bandwidth=1,include_in_url=1,include_application

_name_in_url=1

</param-value>

</init-param>


February 2011 20

…

</servlet>

7. Save the XML in com.sap.portal.runtime.dispatcher.war and deploy

com.sap.portal.runtime.dispatcher.ear on your Portal.

8. Go back to Desktops & Display rules role. Portal Content Portal Administrators Super

Administrators Master Rule Collection open rule collection.

9. „Add If Expression‟ URL Alias = portal/itelo -> apply.

10. Go to IteloDesktop in the tree right click „Add Portal Desktop to Expression‟ (make sure

that the “if” statement is selected).


12. Open a web browser and go to http://<host>:<port>/irj/portal/itelo

13. Your portal should look like the image below


February 2011 21


February 2011 22

5. Related Links

Part II How To Customize Look and Feel using Ajax Framework L-Shape API

https://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/6032df6e-7625-2e10-418a-ba5c4cb7ead5


February 2011 23

6. Appendix

Appendix A – menu.css

Menu.css source code

@CHARSET "UTF-8";

/* --- menu styles ---

#sddm {

margin: 0;

padding: 0;

z-index: 30

}

#sddm li {

margin: 0;

padding: 0;

list-style: none;

float: left;

font: bold 11px arial

}

#sddm li a {

display: block;

margin: 0 1px 0 0;

padding: 4px 10px;

width: 60px;

background: #fe8210;

color: #FFF;

font-weight: bold;

text-align: center;

text-decoration: none;

}

#sddm li a:hover {

background: #febd81;

color: #6b6b6b;

text-decoration: underline;

}

#sddm div {

position: absolute;

visibility: hidden;

margin: 0;

padding: 0;


border: 1px solid #ffffff

}

#sddm div a {

position: relative;

display: block;

margin: 0;

padding: 5px 10px;

width: auto;

white-space: nowrap;

text-align: left;

text-decoration: none;


color: #ffffff;


February 2011 24

font: 11px arial;

border: 1px solid #ffffff;

font-weight:bold;

}

#sddm div a:hover {

background: #febd81;

color: #6b6b6b;

text-decoration: underline;

}

Appendix B – style.css

Style.css source code

@CHARSET "UTF-8";

table {

height: 100%;

overflow-y: hidden;

}

.sap-Framework {

font-family:Verdana,Arial,sans-serif;

font-size:12px;

height: 100%;

background-color: #feffff;

margin: 0px;

overflow-y: hidden;

}

.sap-Tree {

padding: 20px 10px 10px 10px;

height: 100%;

overflow-x: hidden;

overflow-y: auto;

text-overflow: ellipsis;

-o-text-overflow: ellipsis;


width: 100%;

}

.sap-TreeNodes {

padding: 4px 0 0 20px;

}

.sap-TreeNode {


}

.sap-TreeNodeIcon-FolderClosed, .sap-TreeNodeIcon-FolderOpened, .sap-

TreeNodeIcon-Page {

margin: 0px 2px;

display: inline-block;

font-family: Arial;

font-size: 13px;

width: 12px;

background-repeat: no-repeat;

cursor: pointer;

}


February 2011 25

.sap-TreeNodeIcon-FolderClosed {

background-image:url(../images/folderClosed.gif);

background-position: left 5px;

}

.sap-TreeNodeIcon-FolderOpened {

background-image:url(../images/folderOpen.png);

background-position: left 5px;

}

.sap-TreeNodeIcon-Page {

background-image:url(../images/dotBlack.png);

}

.sap-TreeNodeTitle {


font-family: Arial;

font-size: 13px;

cursor: pointer;

width: 100%;

}

.sap-TreeNodeTitle-selected {


font-family: Arial;

font-size: 13px;

font-weight: 800;

background-image:url(../images/selectedNodeLine.gif);

background-repeat: repeat-x;

color:black;

}

.sap-pageFooter {

width: 100%;

background-color: #fe8210;

height: 100%;

}

.sap-logOff {

padding: 1px;

background-image:url(../images/shutdownDefault.png);


margin-right: 20px;

cursor: pointer;

width: 30px;

height: 30px;

}

.sap-logOff-hover {

background-image:url(../images/shutdownHover.png);

}

.sap-logOff-down {

background-image:url(../images/shutdownDown.png);

}

.sap-welcomeMessage {

padding-right: 10px;


February 2011 26

font-family: Arial;

font-weight: 600;

color: #ffffff;


font-size: 15px;

}

.sap-logoImage {

background-image: url(../images/ITelO-Logo_small.jpg);


width: 133px;

height: 68px;

align: left;

}

.sap-logogradient {

width: 40;

height: 100%;

background-image:url(../images/gradient_horizontal.gif);

background-repeat: repeat-y;

}

.sap-welcomegradient {

width: 50;

height: 100%;

background-image:url(../images/gradient_orangetogrey.gif);

background-repeat: repeat-y;

}

.sap-mainNavigationTR {

height: 100%;

background-image:url(../images/treeBackground.png);

background-repeat-y: no-repeat;

}

.sap-nodeLine-hover {

background-image:url(../images/hoverNodeLine.gif);


}

.sap-TreeNodeContainer {

height: 22px;

vertical-align: middle;

}

.sap-TreeNodeContainerSelected {

background-image:url(../images/selectedNodeLine.gif);


}

Go back to Create CSS file


February 2011 27

Appendix C – framework.html

Framework.html source code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<div class="sap-Framework">

<table style="width:100%; height:100%" border="0" cellpadding="0"

cellspacing="0">

<tr>

<td colSpan="2">

<div class="sap-pageFooter">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td rowspan="2"><div class="sap-logoImage"></div></td>

<td rowspan="2"><div class="sap-logogradient"></div></td>

<td><div class="sap-welcomeMessage">SAP NetWeaver

7.3</div></td>

<td style="width: 100%"></td>

<td><div id="welcomeMessage" class="sap-

welcomeMessage"></div></td>

<td><div class="sap-logOff"

onclick="LSAPI.sessionPlugin.logoff()"

onmouseover="this.className='sap-logOff sap-logOff-

hover'"

onmouseout="this.className='sap-logOff'"

onmousedown="this.className='sap-logOff sap-logOff-

down'">

</div></td>

</tr><tr>

<td colspan="4" valign="bottom">

</td>

</tr>

</table>

</div>

</td>

</tr>

<tr class="sap-mainNavigationTR">

<td style="vertical-align:top; width:300px;"><div id="sap-Tree"

class="sap-Tree"></div></td>

<td>

<div id="divContentArea" class="sap-ContentArea" title="Content

Area - To enter press Tab">

<form style="display:none" method="post" action=""

target="contentAreaFrame" id="contentAreaFrame_Form">

<input type="hidden" id="NavigationTarget_layout"

name="NavigationTarget" />

</form>


February 2011 28

<iframe frameborder="0" name="contentAreaFrame"

id="contentAreaFrame" style="width:100%; height:100%"

src="/com.sap.portal.pagebuilder/html/EmptyDocument.html"></iframe>

</div>

</td>

</tr>

</table>

</div>

<script type="text/javascript">

initTree();

</script>

</body>

</html>

Go back to Create HTML Layout

Appendix D – Images

dotBlack.png

14x14

folderClosed.gif

4x7

folderOpen.png

10x6

gradient_horizontal.gif

40x1

hoverNodeLine.gif

1x22

ITelO-Logo_small.jpg

133x68

selectedNodeLine.gif

1x22

shutdownDefault.png

30x30

shutdownDown.png

30x30

shutdownHover.png

30x30


February 2011 29

treeBackground.png

1x800

www.sdn.sap.com/irj/sdn/howtoguides

Documents

Part I How to Customize Look and Feel Using Ajax Framework L-Shape API