custom layouts

Download custom layouts

Post on 28-Apr-2015

34 views

Category:

Documents

3 download

Embed Size (px)

DESCRIPTION

custome layouts

TRANSCRIPT

<p>SAP NetWeaver How-To Guide</p> <p>How To... Create Custom LayoutsFor Web Page Composer in SAP NetWeaver Portal 7.3</p> <p>Applicable Releases: SAP NetWeaver Portal 7.3</p> <p>Version 1.0 April 2011</p> <p> 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.</p> <p>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 SAPs Support Services and may not be modified or altered in any way.</p> <p>Document HistoryDocument Version 1.00 Description First official release of this guide</p> <p>Typographic ConventionsType Style Example Text Description 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 File and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools. User entry texts. These are words or characters that you enter in the system exactly as they appear in the documentation. Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Keys on the keyboard, for example, F2 or ENTER.</p> <p>IconsIcon Description Caution Note or Important Example Recommendation or Tip</p> <p>Example text</p> <p>Example text</p> <p>EXAMPLE TEXT</p> <p>Table of Contents1. 2. 3. 4. Business Scenario ..........................................................................................................1 Background Information .................................................................................................1 Prerequisites....................................................................................................................1 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 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 Configure the Layout for Use .................................................................................. 11 4.3.1 Create a PCD-Object ..................................................................................11 4.3.2 Create a Delta Link .....................................................................................14</p> <p>4.2</p> <p>4.3</p> <p>5. 6.</p> <p>Result .............................................................................................................................15 Appendix........................................................................................................................ 17 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 6.1</p> <p>How To... Create Custom Layouts</p> <p>1.</p> <p>Business Scenario</p> <p>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.</p> <p>2.</p> <p>Background Information</p> <p>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.</p> <p>3.</p> <p>PrerequisitesSuccessful 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</p> <p>Before you proceed please ensure that the following prerequisites are fulfilled:</p> <p>June 2011</p> <p>1</p> <p>How To... Create Custom Layouts</p> <p>4.</p> <p>Step-by-Step Procedure</p> <p>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.</p> <p>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.</p> <p>June 2011</p> <p>2</p> <p>How To... Create Custom Layouts</p> <p>4.1 Build the Layout in SAP NetWeaver Developer StudioTo 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.</p> <p>4.1.1 Create a New Project in SAP NetWeaver Developer StudioAfter opening NWDS, create a new Portal Application Project using the wizard.S...</p> <p>1. Navigate to File</p> <p>New</p> <p>Other Create a Portal Application Project.</p> <p>2. Browse through the available wizards: Portal Application</p> <p>3. Choose Next and change the name of your project. You also can change the Project Root Folder.</p> <p>4. Choose Finish to complete the wizard. The new project is created. The project folder and several subfolders are visible in the navigation tree.</p> <p>June 2011</p> <p>3</p> <p>How To... Create Custom Layouts</p> <p>4.1.2 Define the Page Layout as a Java Server Page...</p> <p>1. Navigate to Overview Layout 2. Right-click jsp and choose New</p> <p>dist File.</p> <p>PORTAL-INF</p> <p>jsp.</p> <p>3. Enter a file name and add the suffix .jsp. Your file must have the same name as your layout.</p> <p>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.</p> <p>June 2011</p> <p>4</p> <p>How To... Create Custom Layouts</p> <p>In our example we use the following jsp page: </p> <p>4.1.3 Update the portalapp.xml FileThe 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...</p> <p>1. Navigate to Overview Layout</p> <p>dist</p> <p>PORTAL-INF</p> <p>portalapp.xml.</p> <p>2. Create a element in a portalapp.xml file for the EAR and set the name attribute. Create one element for each layout defined in the EAR. 3. In the element's element, create the following elements: Property ClassName ResourceBundleName Mandatory Yes Yes Description/Value com.sap.portal.pb.layout.PageLayout pagebuilder_nls</p> <p>June 2011</p> <p>5</p> <p>How To... Create Custom Layouts</p> <p>4. In the element's element, create the following elements: Property ComponentType com.sap.portal.pcm.Title com.sap.portal.pcm. Description com.sap.portal.reserved. layout.TemplateFile Mandatory Yes No No Yes Description/Value com.sapportals.portal.layout The display name of the layout A layout description The name of the JSP page that defines the layout (relative to the PORTAL-INF\jsp directory) 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</p> <p>com.sap.portal.reserved. layout.Cont1, com.sap.portal.reserved. layout.Cont2, And so on</p> <p>Yes</p> <p>For each container profile property described above, you can include the following metaproperties: Property plainDescription orientation designClass Mandatory Yes Yes No Description The display name of the container Container orientation. Must be set to vertical. A CSS class wrapping the HTML tag created by the container: If the containers wrapping method attribute is wrappingMethod=table, the class is added to the table tag () If wrappingMethod=div, the class is added to each div tag that wraps an iView () If wrappingMethod=none, this setting is ignored For more information about wrappingMethod, see container and containerWithTrayDesign.</p> <p>June 2011</p> <p>6</p> <p>How To... Create Custom Layouts</p> <p>5. To ensure that your layout is correctly displayed in Ajax Page Builder (AJB), add the following properties to the portalapp.xml: Property XML_Template Mandatory Yes Description 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: 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 informa...</p>