Download - custom layouts

Transcript
Page 1: custom layouts

SAP NetWeaver How-To Guide

How To... Create Custom Layouts For Web Page Composer in SAP NetWeaver Portal 7.3

Applicable Releases:

SAP NetWeaver Portal 7.3

Version 1.0

April 2011

Page 2: custom layouts

© 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.

Page 3: custom layouts

Document History Document Version Description

1.00 First official release of this guide

Page 4: custom layouts

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

Page 5: custom layouts

Table of Contents

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

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

3. Prerequisites....................................................................................................................1

4. Step-by-Step Procedure ..................................................................................................2 4.1 Build the Layout in SAP NetWeaver Developer Studio ..............................................3

4.1.1 Create a New Project in SAP NetWeaver Developer Studio ..........................3 4.1.2 Define the Page Layout as a Java Server Page ............................................4 4.1.3 Update the portalapp.xml File .......................................................................5

4.2 Deploy the Layout to the Portal ............................................................................... 10 4.2.1 Create EAR File .......................................................................................... 10 4.2.2 Deploy the EAR File to the Portal ................................................................ 11

4.3 Configure the Layout for Use .................................................................................. 11 4.3.1 Create a PCD-Object .................................................................................. 11 4.3.2 Create a Delta Link ..................................................................................... 14

5. Result ............................................................................................................................. 15

6. Appendix ........................................................................................................................ 17 6.1 Appendix A – Advanced Layouts ............................................................................. 17

6.1.1 Change the overview.jsp File ...................................................................... 17 6.1.2 Define the Include Files .............................................................................. 18

6.2. Appendix B – List of Abbreviations ........................................................................... 23

Page 6: custom layouts

How To... Create Custom Layouts

June 2011 1

1. Business Scenario Web Page Composer (WPC) enables key users and content authors to easily create and manage portal pages in an intuitive and comfortable editing environment. As an author you can select from various page layouts to structure the content on your web pages. Customers can also configure and adjust the out-of-the box layouts to meet their requirements. In addition you can develop your own custom layouts. This How-To Guide explains how to create new custom layouts for Web Page Composer. In order to do so, we use the layout called ‘Overview’ as an example.

2. Background Information Web Page Composer has been deeply integrated into the portal with SAP NetWeaver 7.3. WPC is no longer a separate add-on and you can automatically take advantage of various portal services. You need to install usage type EP Core – Application Portal (EPC) and optionally Enterprise Portal (EP) for the Knowledge Management services.

3. Prerequisites Before you proceed please ensure that the following prerequisites are fulfilled:

Successful installation of SAP NetWeaver 7.3 including Portal and Web Page Composer You have assigned the Content Administrator and the System Administrator roles You have assigned the WPC Editor Role (required for testing) You have installed SAP NetWeaver Developer Studio (corresponding version for your SAP

NetWeaver Portal) You have an understanding about how portal pages are rendered, as described in Portal Page

at Runtime. You have experience in Developing Portal Applications You have experience in Writing JSP Pages

Page 7: custom layouts

How To... Create Custom Layouts

June 2011 2

4. Step-by-Step Procedure In the following example we will create a layout called ‘Overview’. It has one container at the top and four at the bottom. Content can be dropped in any container.

In order to create a new layout for Web Page Composer pages, you need to follow these steps:

1. Build the layout in SAP NetWeaver Developer Studio (NWDS). 2. Deploy the layout to the portal. 3. Configure the layout for use.

Page 8: custom layouts

How To... Create Custom Layouts

June 2011 3

4.1 Build the Layout in SAP NetWeaver Developer Studio

To build a new page layout for Web Page Composer, you create a new project in SAP NetWeaver Developer Studio and edit all layout relevant elements.

4.1.1 Create a New Project in SAP NetWeaver Developer Studio

After opening NWDS, create a new Portal Application Project using the wizard. S...

1. Navigate to File New Other… 2. Browse through the available wizards: Portal Application Create a Portal Application Project.

3. Choose Next and change the name of your project. You also can change the Project Root Folder.

4. Choose Finish to complete the wizard. The new project is created. The project folder and several subfolders are visible in the navigation tree.

Page 9: custom layouts

How To... Create Custom Layouts

June 2011 4

4.1.2 Define the Page Layout as a Java Server Page ...

1. Navigate to Overview Layout dist PORTAL-INF jsp. 2. Right-click jsp and choose New File. 3. Enter a file name and add the suffix .jsp. Your file must have the same name as your layout.

4. Choose Finish and your file is created. 5. With the help of the layout tag library, create a JSP page that defines the following:

a. One or more containers on the page in which iViews can be placed. b. The iView tray, or frame, in which each iView is placed. If you do not specify a tray, the

portal displays the default tray, which provides links to standard tray functions, such as refreshing, hiding, or personalizing the iView. You can specify one tray for each container. The tray is displayed for all iViews in the container.

c. Additional HTML that appears on each page.

Page 10: custom layouts

How To... Create Custom Layouts

June 2011 5

In our example we use the following jsp page: <%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibLayout" prefix="lyt"%> <lyt:template> <table id="GridLayout1" width="100%" cellSpacing="2"> <tr> <td width="100%" valign="top" colspan="4"> <lyt:container id="top" wrappingMethod="none" /> </td> </tr> <tr> <td width="25%" valign="top"> <lyt:container id="bottom1" wrappingMethod="none" /> </td> <td width="25%" valign="top"> <lyt:container id="bottom2" wrappingMethod="none" /> </td> <td width="25%" valign="top"> <lyt:container id="bottom3" wrappingMethod="none" /> </td> <td width="25%" valign="top"> <lyt:container id="bottom4" wrappingMethod="none" /> </td> </tr> </table> </lyt:template>

4.1.3 Update the portalapp.xml File The portalapp.xml file is the deployment descriptor for portal applications. For our layout project, this file describes all the layout components and their properties. Na...

1. Navigate to Overview Layout dist PORTAL-INF portalapp.xml. 2. Create a <component> element in a portalapp.xml file for the EAR and set the name

attribute. Create one <component> element for each layout defined in the EAR. 3. In the <component> element's <component-config> element, create the following

<property> elements:

Property Mandatory Description/Value

ClassName Yes com.sap.portal.pb.layout.PageLayout

ResourceBundleName Yes pagebuilder_nls

Page 11: custom layouts

How To... Create Custom Layouts

June 2011 6

4. In the <component> element's <component-profile> element, create the following <property> elements:

Property Mandatory Description/Value

ComponentType Yes com.sapportals.portal.layout

com.sap.portal.pcm.Title No The display name of the layout

com.sap.portal.pcm. Description

No A layout description

com.sap.portal.reserved.layout.TemplateFile

Yes The name of the JSP page that defines the layout (relative to the PORTAL-INF\jsp directory)

com.sap.portal.reserved.layout.Cont1,

com.sap.portal.reserved.layout.Cont2,

And so on

Yes Each container defined in the JSP must have a property in the portalapp.xml.

The names of these properties should end with ContX, where X is a sequence number starting at 1 The value is a name for the container

LayoutTagLibrary Yes /SERVICE/com.sap.portal.

pagebuilder/taglib/layout/tld

For each container profile property described above, you can include the following meta-properties:

Property Mandatory Description

plainDescription Yes The display name of the container

orientation Yes Container orientation. Must be set to vertical.

designClass No A CSS class wrapping the HTML tag created by the container:

If the container’s wrapping method attribute is wrappingMethod=”table”, the class is added to the table tag (<table class=”…”>)

If wrappingMethod=”div”, the class is added to each div tag that wraps an iView (<div class=”…”>)

If wrappingMethod=”none”, this setting is ignored For more information about wrappingMethod, see container and containerWithTrayDesign.

Page 12: custom layouts

How To... Create Custom Layouts

June 2011 7

5. To ensure that your layout is correctly displayed in Ajax Page Builder (AJB), add the following properties to the portalapp.xml:

Property Mandatory Description

XML_Template Yes Defines the XML schema of the layout used by the Ajax Framework Page (AFP).

In the portalapp.xml, define this property as a single line of text rather than as structured XML: <property name= “XML_Template" value = “<?xml version="1.0" encoding="UTF-8"?><PageLayout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...> ..."/>

The ContainerBehaviors tag is optional; use it when you want to add restrictions to the container.

The allowedDropTags attribute defines which content types can be added to this container. This attribute can be a multivalue comma-separated list. For more information, see Defining Container Restrictions

com.sap.portal.layout.BigImage

No A large image that represents the layout in the page authoring tool. For example: /com.sap.portal.pcc.pageutils/images/big_layout_T.png

com.sap.portal.layout.SmallImage

No A small image that represents the layout in the page layouts section. For example: /com.sap.portal.pcc.pageutils/images/small_layout_T.gif

com.sap.portal.layout.SelectedSmallImage

No A small image that represents the selected layout in the page content panel. For example: /com.sap.portal.pcc.pageutils/images/small_layout_T_x.gif

Note The recommended image file types and sizes are as follows:

Big image: PNG, 96 x 70 pixels Small image: GIF, 54 x 41 pixels

If you use different sizes, the images may be distorted in the layouts bar.

Page 13: custom layouts

How To... Create Custom Layouts

June 2011 8

In our example we use the following portalapp.xml: <?xml version="1.0" encoding="ISO-8859-1"?>

<application>

<application-config>

<property name="SharingReference" value="com.sap.portal.pagebuilder"/>

</application-config>

<components>

<component name="overview">

<component-config>

<property name="ClassName" value="com.sapportals.portal.pb.layout.PageLayout"/>

<property name="ResourceBundleName" value="pagebuilder_nls"/>

<property name="SafetyLevel" value="no_safety" />

</component-config>

<component-profile>

<property name="ComponentType" value="com.sapportals.portal.layout" />

<property name="com.sap.portal.reserved.layout.TagLibLayout" value="/SERVICE/com.sap.portal.pagebuilder/taglib/layout.tld"/>

<property name="com.sap.portal.pcm.Title" value="Overview (100, 25|25|25|25)"/>

<property name="com.sap.portal.pcm.Description" value="Overview Layout (100% Top, 25% Bottom mostleft, 25% Bottom left, 25% Bottom right, 25 Bottom mostright)"/>

<property name="com.sap.portal.reserved.layout.TemplateFile" value="overview.jsp"/>

<property name="AuthScheme" value="anonymous" />

<property name="com.sap.portal.reserved.layout.Cont1" value="top">

<property name="title" value="Top Column"/>

<property name="orientation" value="vertical"/>

</property>

<property name="com.sap.portal.reserved.layout.Cont2" value="bottom1">

<property name="title" value="Bottom Column leftmost"/>

<property name="orientation" value="vertical"/>

</property>

<property name="com.sap.portal.reserved.layout.Cont3" value="bottom2">

<property name="title" value="Bottom Column left"/>

<property name="orientation" value="vertical"/>

</property>

<property name="com.sap.portal.reserved.layout.Cont4" value="bottom3">

Page 14: custom layouts

How To... Create Custom Layouts

June 2011 9

<property name="title" value="Bottom Column right"/>

<property name="orientation" value="vertical"/>

</property>

<property name="com.sap.portal.reserved.layout.Cont5" value="bottom4">

<property name="title" value="Bottom Column rightmost"/>

<property name="orientation" value="vertical"/>

</property>

<property name="XML_Template" value="&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;PageLayout xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;../xsd/PBlayout.xsd&quot; layoutID=&quot;pcd:portal_content/templates/pcc/layouts/1Top4Bottom_(100__25_25_25_25)&quot; pageID=&quot;1Top4Bottom&quot;&gt;&lt;CustomAttributes&gt;&lt;Attribute key=&quot;JSP_Template&quot; value=&quot;gpar:/1Top4BottomLayout/1Top4Bottom&quot;/&gt;&lt;/CustomAttributes&gt;&lt;TableLayout width=&quot;100%&quot; height=&quot;100%&quot; cols=&quot;4&quot;/&gt;&lt;ContainersRow&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont1&quot;&gt;&lt;TableCellData width=&quot;100%&quot; height=&quot;100%&quot; colSpan=&quot;4&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;/ContainersRow&gt;&lt;ContainersRow&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont2&quot;&gt;&lt;TableCellData width=&quot;25%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont3&quot;&gt;&lt;TableCellData width=&quot;25%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont4&quot;&gt;&lt;TableCellData width=&quot;25%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container containerID=&quot;com.sap.portal.reserved.layout.Cont5&quot;&gt;&lt;TableCellData width=&quot;25%&quot; height=&quot;100%&quot; colSpan=&quot;1&quot; vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;/ContainersRow&gt;&lt;/PageLayout&gt;" />

</component-profile>

</component>

</components>

<services/>

</application>

Page 15: custom layouts

How To... Create Custom Layouts

June 2011 10

4.2 Deploy the Layout to the Portal

4.2.1 Create EAR File ...

1. Right-click your project folder. 2. Choose Export. 3. Navigate to SAP NetWeaver Portal EAR File and choose Next.

4. Search for your layout project and choose Next. 5. Optional: On the next screen you can change the name of your EAR file and its location.

Optional: Mark “Include the source code of the portal application”.

6. Choose Finish. The EAR file is created.

Page 16: custom layouts

How To... Create Custom Layouts

June 2011 11

4.2.2 Deploy the EAR File to the Portal Deploy your new layout to the portal. ...

1. Navigate to the Deployment view in NWDS. If it is not yet opened, navigate to Window Open Perspective Other. Choose Deployment from the list.

2. Import your EAR file from the workspace. 3. Click Start to deploy the EAR file to the portal.

4.3 Configure the Layout for Use Before you can use the new layout, you have to configure some settings.

4.3.1 Create a PCD-Object ...

1. Navigate to Content Administration Portal Content Administration Portal Applications Overview Layout.

2. Right-click your layout and choose Copy.

Page 17: custom layouts

How To... Create Custom Layouts

June 2011 12

3. Navigate to Content Administration Portal Content Administration Portal Content. 4. Choose a folder, or create a new one where you’ll store your layout. 5. Right-click the folder and choose Paste as PCD Object.

6. Enter the metadata of your layout.

Page 18: custom layouts

How To... Create Custom Layouts

June 2011 13

7. Choose Next. 8. Choose Finish. Your layout is created as a PCD object.

Page 19: custom layouts

How To... Create Custom Layouts

June 2011 14

4.3.2 Create a Delta Link ...

1. Right-click the new PCD object and choose Copy.

2. Navigate to Portal Content Templates WPC Templates Layouts. 3. Right-click the folder and choose Paste.

4. Choose Create a delta link on the next screen. 5. Choose Next. 6. Choose Finish. Your layout is ready for use.

Page 20: custom layouts

How To... Create Custom Layouts

June 2011 15

5. Result When you are creating a new web page with Web Page Composer you can choose the new layout. As soon as you are in the editing mode, the new overview layout is chosen and displayed as follows:

Now you can drop your content in any of the containers.

Page 21: custom layouts

How To... Create Custom Layouts

June 2011 16

This is an example of a portal page using the new layout.

Page 22: custom layouts

How To... Create Custom Layouts

June 2011 17

6. Appendix

6.1 Appendix A – Advanced Layouts You can further customize your layout by adding additional JSP pages, CSS pages, and .JS pages.

6.1.1 Change the overview.jsp File In order to use included files you have to change the overview.jsp page. <%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibLayout" prefix="lyt"%> response.include(componentRequest, componentRequest.getResource(IResource.CSS, "css/layout.css")); response.include(componentRequest, componentRequest.getResource(IResource.SCRIPT, "scripts/layout.js")); <%@ include file="commonTrayDesign.jsp" %> <lyt:template> <table id="GridLayout1" width="100%" cellSpacing="2"> <tr> <td width="100%" valign="top" colspan="4"> <lyt:container id="top" wrappingMethod="none" /> </td> </tr> <tr> <td width="25%" valign="top"> <lyt:containerWithTrayDesign id="bottom1" wrappingMethod="none"> <%@ include file="commonTrayDesign.jsp" %> </lyt:containerWithTrayDesign> </td> <td width="25%" valign="top"> <lyt:containerWithTrayDesign id="bottom2" wrappingMethod="none"> <%@ include file="commonTrayDesign.jsp" %> </lyt:containerWithTrayDesign> </td> <td width="25%" valign="top"> <lyt:containerWithTrayDesign id="bottom3" wrappingMethod="none"> <%@ include file="commonTrayDesign.jsp" %> </lyt:containerWithTrayDesign> </td> <td width="25%" valign="top"> <lyt:containerWithTrayDesign id="bottom4" wrappingMethod="none"> <%@ include file="commonTrayDesign.jsp" %> </lyt:containerWithTrayDesign> </td> </tr> </table> </lyt:template>

Page 23: custom layouts

How To... Create Custom Layouts

June 2011 18

6.1.2 Define the Include Files This section contains the following include files used in the JSP file that defines the layout JSP Page:

JSP include commonTrayDesign.jsp CSS include layout.css JavaScript layout.js

6.1.2.1 Define the commonTrayDesign.jsp File This include file defines the tray design for all iViews. It uses a number of icon images that are rendered into the HTML: ivuToggleClose.png for closing the iView, ivuToggleOpen.png for opening it, and <IViewFamily>.png for each iView family that triggers the Options menu.

The background color of the tray depends on the iView family that has been set up for the iView by the administrator. For more information, see IViewTrayColor. ...

1. Navigate to Overview Layout dist PORTAL-INF jsp. 2. Right-click jsp and choose New File. 3. Enter a file name and add the suffix .jsp.

4. Choose Finish. The file is created.

Page 24: custom layouts

How To... Create Custom Layouts

June 2011 19

In our example we used the following commonTrayDesign.jsp: <lyt:IfShowTray> <div class="ivuTray" style="background-color:<lyt:IViewTrayColor/>"> <ul class="ivuHeader"> <li class="ivuOptions"> <img src="<%=mimePath%>/images/<lyt:IViewFamily/>.png" /> <ul> <lyt:IViewExpandAvailable> <li> <lyt:IViewExpand> <lyt:IViewExpandTitle/> </lyt:IViewExpand> </li> </lyt:IViewExpandAvailable> <lyt:IViewRefreshAvailable> <li> <lyt:IViewRefresh> <lyt:IViewRefreshTitle/> </lyt:IViewRefresh> </li> </lyt:IViewRefreshAvailable> <lyt:IViewPersonalizeAvailable> <li> <lyt:IViewPersonalize> <lyt:IViewPersonalizeTitle/> </lyt:IViewPersonalize> </li> </lyt:IViewPersonalizeAvailable> <lyt:IViewRemoveAvailable> <li> <lyt:IViewRemove> <lyt:IViewRemoveTitle/> </lyt:IViewRemove> </li> </lyt:IViewRemoveAvailable> <lyt:IViewHelpAvailable> <li> <lyt:IViewHelp> <lyt:IViewHelpTitle/> </lyt:IViewHelp> </li> </lyt:IViewAboutAvailable> <lyt:IViewAboutAvailable> <li> <lyt:IViewAbout> <lyt:IViewAboutTitle/> </lyt:IViewAbout> </li> </lyt:IViewAboutAvailable> </ul> </li> <lyt:IfIViewTitleAvailable> <li class="ivuTitle"> <lyt:IViewTitle/> </li> </lyt:IfIViewTitleAvailable> <lyt:IfIViewToggleAvailable> <li class="ivuToggle"> <lyt:IViewToggleOpen>

Page 25: custom layouts

How To... Create Custom Layouts

June 2011 20

<img src="<%=mimePath%>/images/ivuToggleOpen.png" /> </lyt:IViewToggleOpen> <lyt:IViewToggleClose> <img src="<%=mimePath%>/images/ivuToggleClose.png" /> </lyt:IViewToggleClose> </li> </lyt:IfIViewToggleAvailable> </ul> <div class="ivuContent"> <lyt:IViewContent/> </div> </div> </lyt:IfShowTray> <lyt:IfNotShowTray> <lyt:IViewContent/> </lyt:IfNotShowTray>

6.1.2.2 Define the layout.css File This CSS file defines the styles used by the layout, both for the container columns and the single trays, at runtime. Parts of the selectors use a CSS dropdown menu technique called “Suckerfish Dropdowns” (see http://htmldog.com/articles/suckerfish/dropdowns/). ...

1. Navigate to Overview Layout dist css. 2. Right-click css and choose New File. 3. Enter a file name and add the suffix .css.

4. Choose Finish. The file is created.

Page 26: custom layouts

How To... Create Custom Layouts

June 2011 21

In our example we use the following layout.css: .contTop { clear: both; width: 100% } .contBottom1 { /*float: left; */ width: 25%; } .contBottom2 { /*float: left; */ width: 25%; } .contBottom3 { /*float: left; */ width: 25%; } .contBottom4 { /*float: left; */ width: 25%; } .ivuTray { border: 1px solid #666; margin: 0 0 10px 10px; } .ivuHeader, .ivuHeader li, .ivuOptions ul, .ivuTitle h3 { padding: 0; /* reset */ margin: 0; /* reset */ } .ivuHeader li { list-style: none; /* reset */ } .ivuOptions { float: left; display: block; } .ivuToggle { float: right; display: block; } .ivuHeader img { display: block; width: 24px; height: 24px; border: 0; } .ivuHeader li ul { position: absolute; /* suckerfish menu */ top: -9999px; /* suckerfish menu */ width: 200px; background: #ddd; border: 1px solid #999; } .ivuHeader li:hover ul, .ivuHeader li.hover ul {

Page 27: custom layouts

How To... Create Custom Layouts

June 2011 22

top: auto; /* suckerfish menu */ } .ivuOptions a { display: block; width: 100%; text-decoration: none; color: #333; line-height: 24px; text-indent: 5px; } .ivuOptions a:hover { background: #333; color: #ccc; } .ivuTitle { float: left; line-height: 24px; text-indent: 5px; } .ivuContent { clear: both; /* reset floats used in ivuHeader */ background: #fff;

}

6.1.2.3 Define the layout.js File This JavaScript file defines a script that complements a missing feature of Microsoft Internet Explorer (see http://htmldog.com/articles/suckerfish/dropdowns/). ...

1. Navigate to Overview Layout dist scripts. 2. Right-click scripts and choose New File. 3. Enter a file name and add the suffix .js.

4. Choose Finish. The file is created.

Page 28: custom layouts

How To... Create Custom Layouts

June 2011 23

In our example we use the following layout.js: if (window.attachEvent) window.attachEvent('onload', function() { var li = document.getElementsByTagName('LI'); for (var i = 0, l = li.length; i < l; i++) { if (li[i].className != 'ivuOptions') continue; li[i].onmouseover = function() { this.className += ' hover'; } li[i].onmouseout = function() { this.className = this.className.replace(/ hover\b/, ''); } }

});

6.2. Appendix B – List of Abbreviations Abbreviation Description

NWDS NetWeaver Developer Studio

EAR Enterprise Application Archive

PCD Portal Content Directory

WPC Web Page Composer

AFP Ajax Framework Page

Page 29: custom layouts

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


Top Related