A Step by Step Guide for Creating an Intermediate Level Visual Composer Application.pdf

7/17/2019 A Step by Step Guide for Creating an Intermediate Level Visual Composer Application.pdf

http://slidepdf.com/reader/full/a-step-by-step-guide-for-creating-an-intermediate-level-visual-composer-applicationpdf 1/21

A Step by Step Guide for Creatingan Intermediate Level VisualComposer Application.

Appl ies to:

Visual Composer enhancement package 1 for SAP NetWeaver Composition Environment 7.1For more information, visit the User Interface Technology homepage.

Summary

This step-by-step guide continues the Step by Step Guide for Creating a Basic Visual Composer Application.

You can use this exercise in order to explore more advanced capabilities of Visual Composer.

Comments

• In this example we will use simulated services. Simulated services are not real services, theyare a representation of a service and they hold static data

• This example assumes you are using the NWDS (the NetWeaver development studio)

Author : Yogev Lidor

Company: SAP

Created on: December 2008

Author Bio

Yogev is a Visual Composer Solution Expert working in the Visual Composer Solution Office.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2008 SAP AG 1

https://www.sdn.sap.com/irj/sdn/nw-ui

https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/50ff2c7d-9fb8-2b10-e387-c358f4b30307





A Step by Step Guide for Creating an Intermediate Level Visual Composer Application.

Table of Contents

Scenario Description...........................................................................................................................................3

Prerequisites.......................................................................................................................................................3

How to?...............................................................................................................................................................3

Define a web-service destination ....................................................................................................................3

Modeling the Scenario ....................................................................................................................................7

Adapting the Layout ......................................................................................................................................15

Adding the Forecast WS...............................................................................................................................15

Related Content................................................................................................................................................20

Copyright...........................................................................................................................................................21


© 2008 SAP AG 2




Scenario Description

In this scenario we will extend the sales representative application. We will add some informationon the selected item as well as the option to view the address of the customer and the currentweather.

Prerequisites

1. You have successfully implemented the model described in the Step Guide for Creating a Basic

Visual Composer Application. 2. The model you have created in the previous guide is open.

How to?

Define a web-service destination

I will use a web-service called WeatherForecast. In order to use this web service in Visual Composer, pleasefollow the next steps:

1. Browse to <server:port>/nwa (login required)

2. Select “SOA Management => Destination Template Management”

3. Click New

4. Change the Destination Type to WSDL.

5. In the Destination Name field type WeatherForecast

6. In the URL field type http://www.webservicex.net/WeatherForecast.asmx?WSDL

7. Click NEXT.


© 2008 SAP AG 3




http://www.webservicex.net/WeatherForecast.asmx?WSDL








8. In step number two click Finish:

9. Click the Home button (top right of the screen).

10. Under SOA management click the SOA Middleware global settings.

11. Configure your proxy settings (they can be copied from your web browser settings) as follows andsave:


© 2008 SAP AG 4




12. Go back to NWDS. From the top menu select Window and then Preferences.

13. In the Preferences window go to Destination Configurations and choose Web Service Configuration

14. Click the Create button.

15. In the Destination Name field type WeatherForecast

16. Change the Destination Type to WSDL.


© 2008 SAP AG 5




17. In the WSDL/WSIL field type http://www.webservicex.net/WeatherForecast.asmx?WSDL

18. Click Finish and then OK.


© 2008 SAP AG 6







Modeling the Scenario

Go back to your open model in NWDS and follow the next steps:

1. Switch to the Compose task panel and drag a Switch view onto the design board.

2. To add a view, click the Add view button of the switch view:

3. Drag the out1 table into the first view:


© 2008 SAP AG 7




4. Switch to Layout board by clicking the Layout button at the bottom of thestoryboard.

5. Add a button to the out1 table. Do that by dragging a button from the Compose taskpanel to the top toolbar of the table:

6. Next we would like this button to show us the selected customer’s orders. To do that rightclick the button and from the dropdown menu select Action:


© 2008 SAP AG 8




7. Click the Add Action button and add a Custom Action:

8. Name your action ORDERS and click Close.

9. Double click your button and change its text to Show Orders:

10. Drag the Orders service (filename - Orders.zip) onto the Design board (don’t forget to import it firstYou can read further more about this process in the previous guide: Step by Step Guide for Creatinga Basic Visual Composer Application).

11. Connect the out1 table to the Orders service:


© 2008 SAP AG 9

https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/302f8e8b-d0b7-2b10-7ab1-b81b6c4da753






12. Select the Line you have just created and define its Event name as Orders:

13. Drag a line out of the Orders service to the second View (View2) and from the dropdown menuselect Table view.

14. Click the Close Button in the Define Data dialog box.

15. Delete the output table from the Design board.

16. To differentiate between the tables, let’s name each table. Double click the table in View1 andchange its Title field to Customers. In the same way, change the other table’s Title to Orders:


© 2008 SAP AG 10




17. Add two more views to your Switch view:

18. Switch to Layout board and select View2.

19. Drag two buttons to the top toolbar of the Orders table.

20. Right click the first button and from the dropdown menu select Action.

21. Add a custom action named OrderDetails and close the window.

22. Change the button’s text to Show Order Details.

23. Right click the second button and from the dropdown menu select Action.

24. Add a custom action named Map&Forecast.

25. Change the button’s text to Map & Forecast:


© 2008 SAP AG 11




26. Switch to Design board. Drag a line out of the Orders table to View3 and from the dropdown menuselect Table view:

27. Close the Define data dialog box.

28. Switch to the Design board.

29. Drag an HTML View from the compose task panel into view4.

30. Drag a line from the Customers_Details service to the HTML View:

31. Right click the line you have just dragged and from the dropdown menu select Map Data:


© 2008 SAP AG 12




32. In the Assigned value field type:

="http://www.map-generator.net/map.php?name="&"spot"&"&address="&@Address&"&width=500&height=400&maptype=map&zoom=14"

33. Define the transitions between the views. Drag a line out of view1 to view2. From the dropdownmenu select Orders.

34. Drag a line out of view2 to view3. From the dropdown menu select OrderDetails:

35. Drag a line out of view2 to view4. From the dropdown menu select Map&Forecast.

36. Let’s add Back buttons. Switch to Layout board and select View2.

37. Add a button with a Back action:


© 2008 SAP AG 13




38. In the same way, add a Back button to the elements in View3.

39. In View4, check the Show toolbar box and add your Back button:


© 2008 SAP AG 14




Adapt ing the Layout

We would like to set a different size for each element of each view. For example, the Orders table should besmall (given the fact that there aren’t many orders for each customer) but the Map should be Large.

1. In the Design board, drag a Panel from the Compose task panel into View2. Put the Orders tableinside the panel:

2. Double click the panel and change its Scale Mode to Fixed scale:

3. Repeat this process with View3.4. Change the Title of the table in View3 to Items.

5. Change the Tile of the HTML view in View4 to MAP.

Adding the Forecast WS

1. Right click the Search button of the right hand toolbar and from the dropdown menu select Refresh:

2. Search the for Service:


© 2008 SAP AG 15




3. Drag the GetWeatherByPlaceName WS onto the Design board.

4. Connect a line between the Customers_Details service output to the GetWeatherByPlaceName WSinput.

5. Right click that line and from the dropdown menu select Map Data:

6. Map the City field to the PlaceName field:

7. Drag a form out of the GetWeatherByPlaceName WS and close the dialog box.

8. Double click the form and uncheck its Visible attribute in the Configure Form task panel:

9. Drag a table out of the form you just created to View4 and from the dropdown select Table view.

10. Configure the table as follows:


© 2008 SAP AG 16




11. Switch to Layout board and select View4.

12. Drag an Image control from the Advanced controls task panel into the WeatherData table:

13. Erase the new column’s name, change the Scale mode to Original size and click its URL field (fromthe Configure Image task panel) :

14. Click the Add Row button .15. Assign the =@WeatherImage to the URL field:


© 2008 SAP AG 17




16. The Design board of the model:

17. Deploy and run your application (filename - Intermediate_VC_App.zip)

Here is a screenshot of View4 at runtime:


© 2008 SAP AG 18




Related Content

Step by Step Guide for Creating a Basic Visual Composer Application

For more information, visit the User Interface Technology homepage.


© 2008 SAP AG 20









Copyright

© 2008 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, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere,Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks ofIBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe SystemsIncorporated 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 ofCitrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, MassachusettsInstitute 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 byNetscape.

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 theirrespective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. Allother product and service names mentioned are the trademarks of their respective companies. Data contained in this document servesinformational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and i ts affiliated companies ("SAPGroup") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors oromissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in theexpress warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting anadditional 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 mayresult 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 thesematerials. SAP has no control over the information that you may access through the use of hot links contained in these materials anddoes not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages.

Any software coding and/or code lines/strings (“Code”) included in this documentation are only examples and are not intended to beused in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules ofcertain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errorsor damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

A Step by Step Guide for Creating an Intermediate Level Visual Composer Application.pdf

Documents

Transcript of A Step by Step Guide for Creating an Intermediate Level Visual Composer Application.pdf