Using Business Graphics SAP NetWeaver 2004
Copyright Copyright 2004 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, and Informix are trademarks or registered trademarks of IBM Corporation 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. Using Business Graphics 2
Icons in Body Text Icon Meaning Caution Example Note Recommendation Syntax Additional icons are used in SAP Library documentation to help you identify different types of information at a glance. For more information, see Help on Help General Information Classes and Information Classes for Business Information Warehouse on the first page of any version of SAP Library. Typographic Conventions Type Style Example text Example text EXAMPLE TEXT Example text Example text <Example text> 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. Emphasized words or phrases in body text, graphic titles, and table titles. Technical names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language when they are surrounded by body text, for example, SELECT and INCLUDE. Output on the screen. This includes file and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools. Exact user entry. 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. Using Business Graphics 3
Using Business Graphics. 5 Carrying Out the Initial Steps. 6 Inserting a Business Graphic in the View 6 Editing the Properties for the UI Element 7 Editing the Context for the View 8 Changing Type Property of Data Series.. 9 Binding the Data 10 Supplying the Context with Data 11 Building, Deploying and Running the Project. 12 Using Business Graphics 4
Purpose Using Business Graphics This tutorial shows you in a step-by-step manner how to create a simple business graphic using Web Dynpro. A simple business graphic is a chart consisting of a category and one or more data series. Column charts, bar charts and pie charts are typical examples of simple business graphics. Simple business graphics are to be distinguished from complex business graphics such as scatter charts and portfolio charts. For background information read the documentation on business graphic in Web Dynpro [Extern]. Example of a Business Graphic Prerequisites The Internet Graphics Service (SAP IGS) must be installed. It is part of the default installation of the Web Application Server. Process Flow You can create an application to display a simple business graphic by carrying out the following steps: 1. Carrying out the Initial Steps [page 6] 2. Inserting a Business Graphic in the View [page 6] 3. Editing the Properties for the UI Element [page 7] 4. Editing its Context for the View [page 8] 5. Changing the Type Property of the Data Series [page 9] 6. Binding the Data [page 10] 7. Supplying the Context with Data [page 11] Using Business Graphics 5
8. Building, Deploying and Running the Project [page 12] Carrying Out the Initial Steps To do this tutorial you first have to carry out the following steps common to all Web Dynpro applications: Creating a project Creating a component with a window and a view. Creating an application You carry out these steps as described in the standard documentation linked to below. However, make sure that you use the names (for example, for applications and views) suggested below. 1. Create a new project as described in Creating a Web Dynpro Project [Extern]. Call the project SimpleGraphics. 2. Create a component as described in Creating a Web Dynpro Component [Extern]. Call the component SimpleGraphics and call the component path com.sap.tc.graphics. Call the view SimpleGraphicsView. 3. Create a Web Dynpro application as described in Defining a Web Dynpro Application [Extern]. Call your application SimpleGraphics. Call the package com.sap.tc.graphics. the existing component SimpleGraphics for it. You have now carried out the prerequisites for your project. The next step is to insert a business graphic in the view [page 6]. Inserting a Business Graphic in the View A business graphic is a UI element so when you create it you have to insert it in a view. You need to create a UI element of the type BusinessGraphics. You then have to insert it in the view. Proceed as follows: 1. To edit the view click the view with the secondary mouse button and choose Edit. 2. In the Outline window click the default container RootUIElementContainer with the secondary mouse button and choose Insert Child. 3. Enter the ID BusinessGraphic in the field Name. 4. Select the type BusinessGraphics. 5. Choose Finish. Finally the URL of the used Internet Graphics Server (IGS) must be defined for the inserted BusinessGraphics-UI-Element. Using Business Graphics 6
6. In the Outline view select the node BusinessGraphic [BusinessGraphics Child]. 7. In the Properties view select the line Elementproperties of BusinessGraphics igsurl and enter the URL of the used Internet Graphics Server. The UI element BusinessGraphic appears in the Outline window. You see the following structure in the Outline window: A standard graphic is displayed in the View Designer window. Editing the Properties for the UI Element In this step you create the following subelements for the UI element, Business Graphics: A category Two data series First create the category as follows: 1. Go to the Outline window. 2. Click BusinessGraphic with the secondary mouse button. 3. In the context menu choose Insert Category. A category appears in the Outline window as a subnode to the BusinessGraphic node. Create the first series as follows: 4. Click BusinessGraphic with the secondary mouse button. 5. In the context menu choose Insert Series. A dialog box appears. 6. Enter Series1 in the field Name. 7. Select SimpleSeries from the list box Type. 8. Choose Finish. A series appears in the Outline window as a subnode to the BusinessGraphic node. Create the second series in the same way you created the first series. Call it Series2. Using Business Graphics 7
A second series appears in the Outline window as a subnode to the BusinessGraphic node. You have now created a category and two data series for your graphic. You should see the following structure in the Outline window: Editing the Context for the View The context is the view s local memory and allows it to communicate with other elements of the application. Each UI element binds to data contained in a context. Data is accessed using the UI element s context as opposed to the UI element itself. A context is hierarchically structured into nodes. You define the nodes at design time. At runtime they represent a managed set of data instances. Nodes provide type information about the object instances maintained by the node. The view context must have the appropriate structure. 1. To display the view context click the button Context below the View Designer window. 2. In the View Designer window click Context with the secondary mouse button. 3. Choose New -> Value Node. A dialog box appears. 4. Enter Categories in the field Name. 5. Choose Finish. Create a value attribute for the data to display the text for the categories: 1. Click A with the secondary mouse button. 2. Choose New -> Value Attribute. A dialog box appears. 3. Enter CategoryText in the field Name. 4. Choose Finish. Using Business Graphics 8
Create the context structure for the data of the first data series as follows: 1. Click A with the secondary mouse button. 2. Choose New -> Value Attribute. A dialog box appears. 3. Enter Series1Value in the field Name. 4. Choose Finish. Create the context structure for the data of the second data series as with the first data series. Call it follows Series2Value. You have now created the context for the view. You should be able to see the following structure in the View Designer: Changing Type Property of Data Series The series value attributes Series1Value and Series2Value should have the type property double. You have to change them from their current properties to the type property double. The data series should have the data type double. You have to change the current data type string to the data type double. Change the data type of the first series as follows: 1. In the View Designer window click Series1Value. 2. In the Properties window change string to double. Change the data type of the second series Series2Value as with the first series. Using Business Graphics 9
The data series now have the correct type property. The Properties window should appear as below: Binding the Data You have to bind the business graphics view elements to the context so the data is reflected in the graphic. For more information read the documentation on data binding for business graphics [Extern]. Bind BusinessGraphic in the Outline window as follows: 1. To display the Outline window click the Layout tab in the View Designer window. 2. In the Outline window select the UI elment BusinessGraphic. 3. To bind the property seriessource click in the Properties window. 4. In the Properties window click the button with the three dots. 5. In the Context viewer popup select the node Categories. 6. Choose OK. Bind the data for the category texts as follows: 1. Select Category in the Outline window. 2. To bind the property description click in the Properties window. 3. In the Properties window click the button with the three dots. 4. In the Context viewer popup select the context attribute CategoryText. 5. Choose OK. Bind the data for the first series as follows: 1. In the Outline window select Series1. 2. To bind the property value click in the Properties window. 3. In the Properties window click the button with the three dots. Using Business Graphics 10
4. In the Context viewer popup select select the context attribute Series1Value. 5. Choose OK. Bind the data for the second series Series2 as for the first series. The data is bound to the context. Supplying the Context with Data You have to supply the business graphic s context with data. You can do this in the wddoinit method (or in a supply function) in the controller. For more information read the documentation on the supply function [Extern]. To generate the coding for the implementation of the controller click the button Implementation. Enter the following coding in the method wddoinit. Make sure you enter the coding in the user coding area, that is, between the characters //@@begin wddoinit()and //@@end. //@@begin javadoc:wddoinit() /** Hook method called to initialize controller. */ //@@end public void wddoinit() { //@@begin wddoinit() IPrivateSimpleGraphicsView.ICategoriesElement categoryelement; for (int i = 0; i < 10; i++) { categoryelement = wdcontext.createcategorieselement(); categoryelement.setcategorytext("c" + i); categoryelement.setseries1value(i); categoryelement.setseries2value(10 - i); wdcontext.nodecategories().addelement(categoryelement); } } //@@end You have now implemented the method wddoinit. It fills the context with data when the controller is initialized. Using Business Graphics 11
Building, Deploying and Running the Project Building the project compiles the Web Dynpro project into Java class files. Deploying the project puts it on the server (the J2EE Engine). Running the application opens a browser window using a URL. The application displays the business graphic you have programmed. 1. Build and deploy the project as described in Deploying a Web Dynpro Project [Extern]. 2. Run the application as described in Calling a Web Dynpro Application [Extern]. Now that you have built and deployed the project and run the application you should see the resulting graphic: If this graphic is not displayed make sure the administrator of the J2EE Engine has specified the URL of the server on which the IGS is running (see SAP Note 704604). Using Business Graphics 12