Veteran's Guide. Visual Composer for. Document Version 2.00 March SAP NetWeaver 7.3

Transcription

1 Veteran's Guide Visual Composer for SAP NetWeaver 7.3 Document Version 2.00 March 2011 SAP NetWeaver 7.3

2 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, 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. 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. 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. 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. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. 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. 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.

3 Typographic Conventions Icons Type Style Example Text Example text EXAMPLE TEXT Example text Example text Represents 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. <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. Icon Meaning Caution Example Note / Tip Recommendation Syntax

4 Contents VISUAL COMPOSER VETERAN'S GUIDE Componentization What is a Visual Composer Component? Components in Action Create a New Model Reuse Another Component in Your Model Concept of "Model" versus "Session" Export and Import Source Control Deploy Environment The New Modeling Flow Where Is the...? How Do I...? Did You Know That...? Tips for Rebuilding Models Related Content... 25

5 Visual Composer Veteran's Guide Purpose Visual Composer for SAP NetWeaver 7.3 is significantly more sophisticated than previous versions of the modeling tool. It has undergone major revisions both in functionality and in usability. With these major changes in mind, this guide was designed to assist modelers familiar with Visual Composer for SAP NetWeaver 7.0 (SAP NetWeaver 2004s) in learning to model with Visual Composer 7.3. You "Visual Composer veterans" can use this guide to understand the underlying technological changes between the versions and how they have affected functional implementation. How to Use this Guide Take the time to carefully read the first chapter of this guide: Componentization [Page 6]. This section describes the major underlying concepts that have driven many of the enhancements in Visual Composer. The next two chapters Source Control [Page 12] and Deploy Environment [Page 13] describe enhancements and changes implemented in Visual Composer. The New Modeling Flow [Page 15] section describes new functionality, such as support for clustered data and changes in managing data. It also compares the previous modeling flow and that in Visual Composer 7.3. Chapters 5, 6 and 7 have been designed to take you straight to potential sources of confusion: Where is the...? [Page 18] tells you where to find familiar items and dialog boxes that have been "relocated" in Visual Composer 7.3. How Do I...? [Page 20] explains how to perform tasks that have been redesigned in Visual Composer 7.3. Did You Know that...? [Page 23] points out new or changed functions that you may not be aware of. Finally, the Tips for Rebuilding Models [Page 24] section provides information to keep in mind when preparing models created in Visual Composer for SAP NetWeaver 7.0, for use with the new environment. Constraints This guide covers changes in functionality and does not list functions and items that may not be included in Visual Composer 7.3. For more information, see the Limitations Note for Visual Composer for 7.3.

6 1 Componentization The models that you create in Visual Composer 7.3 are single, reusable components. Components are self-contained modeling entities: either full or partial composite views, or service components. Components can be reused in other models. A model can contain references to other components, rather than actually embedding them. In this manner, both model maintenance and modeling efficiency are significantly streamlined. Through the use of components, modelers can leverage these same reusable assets in the design of other models with little or no modification necessary. Models and Components Models can contain packages and multiple iviews both separate and embedded one within the other. For detailed information, see: What is a Visual Composer Component? [Page 6] Components in Action [Page 7] Each model represents a single component. Embedding is implemented simply by inserting a reference to another component. 1.1 What is a Visual Composer Component? For Visual Composer, a component can be described as a basic unit of modularity, reusability and execution that has: An internal domain-specific implementation A well-defined external interface Known dependencies from/to other components A version (for interface and implementation) The use of standardized components in Visual Composer enables modelers to integrate components created in Storyboard and in other technologies ("black-box" components) into their models. This empowers Visual Composer modelers to create comprehensive composite applications. Types of components that can be integrated into Visual Composer models will include: Other components modeled in Visual Composer Web Dynpro components Data services: Web services, Enterprise services, CAF services, RFCs, BAPIs, JDBC, BI BPM processes

7 1.2 Components in Action When comparing the Visual Composer 7.3 Storyboard with that of Visual Composer for NetWeaver 7.0, note that the following changes have been implemented to accommodate componentization: Create a New Model [Page 7] Reuse Another Component in your Model [Page 8] Concept of "Model" versus "Session" [Page 9] Export and Import [Page 10] For more information about componentization, see: Concepts [External] in Modeling Composite Views with Visual Composer Reusing Components [External] in Modeling Composite Views with Visual Composer Create a New Model When you create a new model in the Create New Model dialog box, you indicate the type of component that you are creating. Then you store it in a development component either locally or within your source-control system. In the basic version of Visual Composer 7.3, you can create one of two types of components: A composite view: similar to the iview in Visual Composer for NetWeaver 7.0 A service component: a complex data service of some kind

8 Depending on other kits loaded with Visual Composer such as Voice or BI additional component types are added to the list. Model/Component Types None Composite view Service component Reuse Another Component in Your Model In Visual Composer for NetWeaver 7.0, a nested iview or other embedded component is an integral part of the model itself and cannot be reused by other models. In Visual Composer 7.3, "embedding" a model simply means creating a reference to an external component stored within the same source-control system. Reused components are usually defined as a nested view or a navigate-to component. To reuse an existing component, you use the Search task panel in the manner that you use the Find Data task panel in Visual Composer for NetWeaver 7.0, but you Search in the Visual Composer Models repository for Type Model. To create a new component for use as a nested view or navigate-to component, you drag the relevant icon (view or connector) to the Design board and create the new component from the standard Create New Model dialog box.

9 Reuse Another Component in Your Model No "reuse" per se. You can create a nested iview that is used only within the single model. A navigate (Web Dynpro) or popup (Flash) iview is also created solely within the same model. Eventing can be defined between standalone iviews on a portal page. Reuse of components within the same development component. You can create a nested view or navigate-to view from within a component, saving it as a standalone component, or you can create it separately. It is referenced from the other component and when opened (double-clicked), a tab for that component is opened. With componentization, the concepts of iviews and portal page are not relevant Concept of "Model" versus "Session" In Visual Composer for NetWeaver 7.0, you can have only one model open in a single session. If you open a second model, the previously-opened model is closed (after prompting to save if needed). However, remember that a single model can contain multiple pages and iviews. In Visual Composer 7.3, on the other hand, you can open as many components as needed in a single session. These are indicated by tabs at the top of the workspace (previously dedicated to Design, Layout and Source tabs). These individual components may be fully independent, or may in some cases be the result of "opening" a component that has been reused in one of the other component. Model versus Session Only one model can be open at a time. Opening a different model prompts you to save and close the presently-open model. A single model can contain any number of pages (with iviews) and other iviews. In a single session, you can have any number of open models (components). Each component is indicated by a tab. A single model represents a single component. In Visual Composer 7.3, your "top-level" element is the actual component, or view. The Drill-down option is available only with reused components (popups and nested iviews) and is used to "open" the model in its own tab.

10 In this example, three components (models) are open in this Visual Composer session, each indicated by a tab. In the displayed Test1 model, the Deploytest component has been used as a nested view. To view its contents, you would click the Deploytest tab. Each of these three components can be used by itself and reused in other components. To reuse another component, you may need to create an input port within the component, which serves as the interface to the "outside world." This creates an external "plug" that is added to the icon and enables you to connect from an element in your open component to that reused component (in our example, the plug is called in2). To create the input port: i. Open the tab of the reused component and create the port with a Signal in connector. ii. Back in the referencing component, right-click the icon of the reused component (Deploytest in this example) and choose Redefine Ports from the context menu. All components in the Visual Composer Models Library are handled as separate entities in all respects. The dependencies created through reuse between components are managed throughout the lifecycle build, change management, upgrade and so on of the components Export and Import In Visual Composer 7.0, you can export a model as a.gml file to any location on your computer or in your computer network. You can import a previously-exported file into your open model, with the option of integrating the model diagram that is currently open. In Visual Composer 7.3, when you export a model (component), you package it as a.zip file and save it at any location in your local or network file system.

11 Note that you can only export models from the local repository (not from the shared repository). In addition, the model to be exported cannot have any dependencies on components in the shared repository, such as nested components. Importing a previously-exported model saves the.zip file in the same development component from which it was exported. However, it does not import it into an open model, because it is a separate component. Export and Import You export a model as a.gml to any location in your computer network. You export a local model as a.zip file to any location in your computer network. You import a previously-exported file into your open model, and choose to integrate it directly into the open diagram or save it separately within the model. When you import a model, you basically move the previously-exported.zip file back to the development component from which it was exported.

12 2 Source Control As part of the Composition Environment, Visual Composer modelers can take advantage of version control by storing models in the NWDI Design-Time Repository (DTR) or in other source-control systems (not yet available). In cases where none of these options is implemented, Visual Composer 7.3 provides a rudimentary shared repository that enables basic functionality such as check-in, check-out and revert. Source Control No version control available. Two types of source control available: Workspace for saving models is divided as DTR follows: Rudimentary system with basic MyModels folder contains models versioning functionality. Workspaces created in each modeler's dedicated are divided in a manner similar to client workspace. Visual Composer for NetWeaver 7.0, with a Shared Repository and a Public folder includes models created for general use by all users. Local Repository. The Manage Models dialog box is used in Visual Composer 7.3 to handle the models stored both locally and in the source control system. You can use it to check models in and out, revert to previous versions and perform file sync where supported. For more information, see: Working with Source Control [External].

13 3 Deploy Environment Portal and Web Dynpro Whereas Visual Composer for NetWeaver 7.0 is mainly a tool for modeling iviews for SAP NetWeaver portal, Visual Composer 7.3 is designed for creation of Web Dynpro-based composite applications. As such, in Visual Composer 7.3, the Web Dynpro foundation is the main runtime UI technology. It enables Visual Composer users to render models to both to Web Dynpro HTML and Web Dynpro Flex. Portal and Web Dynpro Access to back-end systems via the portal (using system aliases) Deploy to and run in portal Direct access to back-end systems Currently, no deploy-to-portal option. Can deploy to Web Dynpro application either directly (hot deployment) or through the nightly build. User Management and Role Definition In Visual Composer for NetWeaver 7.0, user management is carried out according to standard portal user management procedures. During installation, a predefined role VC Role is deployed in the portal as part of the initial Visual Composer content, allowing users to perform modeling tasks in Visual Composer Storyboard. The role includes full permissions for the Visual Composer folder in the portal. Additionally, each user should be assigned read permissions in order to access data services located on the back-end system accessed through the portal. In Visual Composer 7.3, all user management and role definition is carried out in the NetWeaver Administrator running on the SAP NetWeaver Application Server, Java EE 5. User Management User management according to portal procedures Creation of VC Role for all Visual Composer modelers User management according to NWA on portal platform Permissions according to portal roles Deploy and Run Options In Visual Composer for NetWeaver 7.0, models can be deployed to Adobe Flex 1.x. Visual Composer 7.3 enables deployment to Flex 2.0 (via Web Dynpro) and on a range of browsers, including Microsoft Internet Explorer, Netscape Navigator and Mozilla Firefox. Deploy Options Deploy to and run in portal No deploy-to-portal option. Can deploy to Web Dynpro application

14 Deploy directly to Adobe Flex 1.5 or Adobe Flex 2 or to Web Dynpro Hot deployment (direct to runtime) only Deploy to Web Dynpro HTML or to Web Dynpro Flex 2.0 Two build types: Hot deployment Nightly build (onto source-control system)

15 4 The New Modeling Flow Visual Composer 7.3 includes a number of new features that enhance the modeling workflow and make it more intuitive. One of the prime differences from Visual Composer for NetWeaver 7.0 is the manner in which you compose, configure and lay out the model elements. This is based on the following changes: New concept of binding controls to fields: implemented in defining fields for display and in composing/configuring controls Whereas in Visual Composer for NetWeaver 7.0, fields selected for display were automatically "assigned" an appropriate control, in Visual Composer 7.3, you need to bind a control to a selected field in order to have the field visible in the UI. For more information, see "Controls and Fields" in the Visual Composer Concepts [External] section of the Modeling Composite Applications with Visual Composer manual. "Visible" Fields To make a field visible in the UI, enter a To make a field visible in the UI, checkmark in the column with the eyeglasses open the Define Data dialog box. header ( ). Enter a checkmark in the column with the eyeglasses header ( ) to bind the field to a control, displayed in the Control column. (You can select other controls from the dropdown list in that column, as needed.) Support for clustered data (nested tables) Visual Composer 7.3 supports data received in clusters, which is the standard in Web services. Clustered data is data that is structured in a hierarchy. When mapping data from clustered data sources and to clustered data targets, you choose the node(s) that are the source of the data and map to the nodes that represent the target(s) of the mapping. New means for defining, mapping and initializing data Based on the enhancements described in the previous two bullets, a new set of dialog boxes has been created for defining field-control combinations and for mapping the data between two elements, in both "flat" and clustered datasets. For more information, see the Mapping Data [External] section of the Modeling Composite Applications with Visual Composer manual.

16 To define or map data, select the model element and choose the appropriate option (Define Data or Map Data) from the context menu. Compose and Configure a Model Design and Layout "tabs" are now at the bottom-left of the boards. 1. In the Find Data task panel, search for and 1. In the Search task panel, search for drag data services onto the Design board. and drag data services onto the Design board. You can also use the Visual Composer Models repository to search for and reference components in your model. 2. From the Compose task panel, drag the 2. From the Compose task panel, drag model elements onto the Design board, or the model elements onto the Design drag out from the data services to connect board, or drag out from the data them. services to connect them. 3. Map the fields from one element to the 3. For each UI element, you can define other by double-clicking the connecting line the fields and their bound controls by and using the field mapping table in the choosing the Define Data option in the Configure task panel. context menu of the item. Use the Map Data option in the context menu to define the data flow of connecting lines.

17 Configure and Lay Out the UI Use the Layout board for configuring and laying out the UI. Layout of elements including controls within each UI element is "free", according to the Auto (Absolute) default. Other options are Horizontal and Vertical. Layout of elements is presently restricted to Horizontal flow and Vertical flow. The Absolute positioning option is not available. For laying out controls, you can use the Columns field in the Configure task panel to organize the controls in any number of columns. For full information, see Defining Layout Options [External] in the Modeling Composite Views with Visual Composer manual. 1. To define controls for a UI element, click on its edge and use the table at the bottom of the Configure task panel to create new controls and determine their visibility. 2. To configure the attributes of a control, use the Control Properties dialog box. 1. To define controls for a view, drag controls from the Compose task panel onto the view. 2. To configure the attributes of a control, select it and use the Configure task panel. The grouping of the options in the task panel is, in general, similar to the tabs of the Control Properties dialog box.

18 5 Where Is the...? A number of standard and familiar functions in Visual Composer for NetWeaver 7.0 have been revamped and moved to different locations in Visual Composer 7.3. This section tells you where to find them.... Find Data Task Panel Use the Search task panel. With the integration of Visual Composer into an SOA architecture along with the implementation of source control and componentization you can discover a range of different data services and components for your model. As such, the task panel functionality has been significantly expanded. For more information, see Discovering Data Services [External] in the Modeling Composite Views with Visual Composer manual.... List of Fields in Configure Task Panel The list of fields used for mapping or defining controls in Visual Composer for NetWeaver 7.0 is now available as follows: Field Lists Type of List Visual Composer for Visual Composer 7.3 NetWeaver 7.0 Field - Control (or Column - Control), for UI elements Configure task panel Define Data dialog box Right-click UI element and choose Define Data. Mapping of Input Field and Assigned Value, for data flow Configure task panel Map Data dialog box Right-click connecting line Lines and choose Map Data. Input Fields and Output Fields Configure task panel Not available of data services Data services are generally considered "black components" and as such, their contents are not displayable. Initialization values for None Define Data dialog box Start/End points, Signal Right-click element, In/Out, User Data, Data Store, choose Define Data and DataIn/DataOut click the Initialize Data... Control Properties Dialog Box ( ) toolbar button Go to the Layout board, click the control and open the Configure task panel. Remember, in Visual Composer 7.3, you define controls from the Compose task panel and configure them in the Configure task panel. For more background, see Adding Controls [External] and Configuring Controls [External] in the Modeling Composite Views with Visual Composer manual.

19 ... Create Toolbar Option The Create Toolbar context-menu option has been replaced in Visual Composer 7.3 with the Show toolbar checkbox in the Configure task panel, when the UI element is selected. To create buttons for the toolbar, switch to the Layout board and the Compose task panel, and drag the relevant controls to the toolbar area. This method replaces defining buttons in the Create Toolbar Buttons dialog box.

20 6 How Do I...? A number of standard and familiar Visual Composer for NetWeaver 7.0 functions have been revamped and are implemented differently in Visual Composer 7.3. This section tells you how to perform them.... Map Fields To map data between a UI element and a data service, in which the datasets are "flat" (not clustered): 1. Right-click the connecting line and choose Map Data from the context menu. The Map Data dialog box is displayed: 2. In the Assigned Value column, enter the field name, value or dynamic expression that represents the value that is output by the element to the Target Input Field of the other element (such as the data service). To map from or to clustered datasets: 1. Right-click the connecting line and choose Map Data from the context menu. A special Map Data dialog box is displayed:

21 2. Expand the tree at the left to display the source nodes to be mapped. Do the same for the target nodes at the right. 3. Drag from each source node that you need on the left, to the corresponding source node on the right. 4. Select each field from the right hierarchy whose mapping values you want to define and in the Assigned Value column in the table at the bottom, define the appropriate mapping value.... Add a Control to a View After adding the view to the logical flow on the Design board: 1. Switch to the Layout board and open the Compose task panel. 2. Choose the control that you need and drag it onto the view. Note that by default, each control is placed automatically under existing controls in a vertical position (Vertical flow). Absolute positioning is presently not available.... Define an Action 1. On the Layout board, select the relevant control and open the Configure task panel. 2. In the Action field, click the ellipsis ( ) on the right. (Alternatively, you can right-click the control on the Layout board and choose Action from the context menu.) The Define Action dialog box is displayed. 3. Click the Add Action (+) button to create a predefined or custom action and enter the relevant properties at the right.

22 ... Define an Entry List 1. On the Layout board, select the relevant control and open the Configure task panel. 2. In the Entry list field, click the ellipses ( ) on the right. (Alternatively, you can right-click the control on the Layout board and choose Entry List from the context menu.) The Entry List Wizard is displayed. 3. On the first screen, select the type of entry list and click Next. The subsequent screens will walk you through the creation of the entry list you require.... Add an Image to a View Presently, this option relates only to images defined by a URL or from the standard Web Dynpro collection. On the Layout board, drag the Image icon from the Compose task panel. Then change to the Configure task panel and in the URL field, click the ellipses ( ) on the right (Alternatively, you can right-click the control on the Layout board and choose Browse from the context menu.). The Browse Images dialog box is displayed. For more information, see Defining Images [external] in the Modeling Composite Views with Visual Composer manual.

23 7 Did You Know That...? You can right-click a control to change its type On the Layout board, right-click the control whose type you want to change and choose Change Control Type <New Control> from the context menu, where <New Control> represents the type of control you want to change to. The list of available controls depends on the current view element, the current control type, and the type of the field that is bound to the control. Creating containers such as tabbed dialog boxes and wizards is more intuitive and direct in Visual Composer 7.3 In Visual Composer 7.3, you start with the actual container and create the layers within it, rather than building the containers from single layers. Creating transitions is automated and intuitive as well. The following table describes the changes and availability of layers/containers between the two Visual Composer versions. Layers and Containers Wizard Tabstrip Link list Link tree Accordion Standard layers (such as toggle) (Popup view) Wizard Tabstrip None None None View switch Popup container with nested view For more information, see Containers [External] in the Modeling Composite Views with Visual Composer manual. You can use classifications to search in the SAP service registry for enterprise services Selecting one or more classification category narrows your search for the enterpriseservice operation(s) that you need. For more information, see Discovering Data Services [External] in the Modeling Composite Views with Visual Composer manual. The Model menu in Visual Composer 7.3 contains a list of recently-opened models. To change the number of models displayed in the menu, use the Number of recent models to display option in the Model group of the Tools Options list.

24 8 Tips for Rebuilding Models This section contains items to consider when modeling components in Visual Composer 7.3, based on applications modeled in Visual Composer for NetWeaver 7.0. The need for certain workarounds required in Visual Composer for NetWeaver 7.0 has been eliminated in Visual Composer 7.3, based on componentization and redefinition of containers. The following points are tips that you should review and are not ordered according to any required sequence. Use the Search task panel to rediscover data services, including Web services, enterprise services and possibly other components. What were imported as "flat" Web services in NetWeaver 7.0 will now probably be clustered. For mapping and other information, see The New Modeling Flow [Page 15] and How Do I...? [Page 20] in this document. If you created hyperlinks to other applications, recreate them in your new model. For each element in your original model, you will need to list the virtual fields that were used. In Visual Composer 7.3, redefine the fields and link each one to the appropriate control. For more information, see The New Modeling Flow [Page 15]. You need to recreate popup windows that were created separately and defined by a Popup Signal in Visual Composer for NetWeaver 7.0. To do so, use the Popup container: If the contents of the popup are fairly basic, use can define the view directly within the container. If the contents are complex, use a Nested View inside the Popup container. For full information about creating popups, see the Defining Popups [External] section in the Modeling Composite Applications with Visual Composer manual. When redefining popups in Visual Composer 7.3, you map data to/from the popup using the Map Data option from the context menu for each connecting line, rather than the two tables used in Visual Composer for NetWeaver 7.0. If you used eventing in your original model, be aware that the concept of eventing between iviews has changed, due in part to componentization. In Visual Composer 7.3, each component that you model can be reused elsewhere, and referenced in a different model. Therefore, two views can be "linked" in a single application by defining matching in and out signals as needed.

25 9 Related Content What s New in Visual Composer for SAP NetWeaver 7.2? Visual Composer Migration Handbook How to transport VC content from VC 7.0 to VC 7.11 or 7.2 The Modeling Composite Applications with Visual Composer manual