This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
Web Dynpro for Java 7.20. For more information, visit the Web Dynpro Java homepage.
Summary
In this tutorial you will learn how to integrate a Silverlight application into a Web Dynpro application via a Silverlight Island UI element. This UI element enables the embedding of a Silverlight application within a Web Dynpro view as well as data flow and eventing between the Silverlight Island and Web Dynpro.
The Tutorial Example Application .................................................................................................................. 4
Preparing the EmployeeViewer Silverlight Project ......................................................................................... 5
Implementing the EmployeeViewer UI ........................................................................................................... 8
Implementing the wrapper class for the Silverlight application ........................................................................ 9
Defining the Data Flow .................................................................................................................................. 9
Handling the Silverlight Event ...................................................................................................................... 10
The Resulting XAP File ............................................................................................................................... 11
The Web Dynpro Java DC........................................................................................................................... 12
Creating the SilverlightIsland UI Element in Web Dynpro for Java ............................................................... 14
Enabling Data Flow and Eventing Between SilverlightIsland and the Web Dynpro Component ......... 16
Text Symbols........................................................................................................................................... 23
In this tutorial, you will learn how to integrate a Silverlight Island into a Web Dynpro application.
Silverlight Island is based on Microsoft’s Silverlight technology (http://silverlight.net). Silverlight is a cross-platform development framework for creating rich Internet applications (RIA) that run identically on all major browsers and operating systems.
Web Dynpro Silverlight Island offers the ability to enrich the standard Web Dynpro model with new building blocks. These components are implemented in Silverlight and run locally on the user’s machine or browser. These islands are embedded in Web Dynpro views and are able to use the Web Dynpro context for data binding and can trigger Web Dynpro actions to enable the Web Dynpro action event handling.
To integrate a Silverlight control into Web Dynpro, you must create a wrapper class, which provides the conversion of the Web Dynpro context data and events to control-specific code. A Silverlight Island is instantiated within the Silverlight application and serves as the communication bridge between the Silverlight application and Web Dynpro. On the Web Dynpro side, there is a Silverlight Island UI element inside a Web Dynpro view, which embeds the Silverlight Island.
Web Dynpro View Silverlight Application
Wrapper class
Silverlight Control(s)
Silverlight IslandSilverlight Island
UI Element
registers
embeds
The core of the Silverlight Island is the Silverlight control that is to be integrated in a Web Dynpro application. Ideally this should be a third-party control or a custom-built control. It is also possible to integrate multiple controls within one Silverlight application/Silverlight Island.
Important for Silverlight Control Developers and Developers of Web Dynpro applications using Silverlight Islands:
Always use Web Dynpro controls unless you need highly graphical areas.
Do not replace existing Web Dynpro controls by Silverlight controls just to make it look different.
Do not include UI blocks that can be independently implemented as Web Dynpro controls outside the island, unless the high degree of interactivity between Silverlight parts and these parts justifies putting all of them into the Silverlight Island.
Do not use Silverlight controls for formatted text input or output.
Do not use Silverlight for region-specific input and output (time-points, currencies, units of measurement).
Do not use Silverlight for layout elements that depend on the writing direction of the logon language.
When using third-party or custom controls, SAP recommends to implement a user interface governance process to ensure harmonization, to drive clear user interface decisions that are aligned with business goals and strategy, and to effectively implement those goals. You can find helpful information at http://www.sapdesignguild.org/resources/uiguidelines.asp and SAP Guidelines for Best-Built Applications That Integrate with SAP Business Suite (most relevant sections are: Accessibility, User-Centered Design and UI Governance)
In order to ensure proper multi-language support, all text must be provided by the backend. But for performance reasons these texts should be sent just once. All language dependent texts visualized in islands must be handled by the Web Dynpro context.
Prerequisites
You need to install the NetWeaver Developer Studio (NWDS), release 7.20 or higher, to compile and deploy the tutorial application. The SAP Java AS to which this application is deployed should be of the same version as the NWDS or a newer version.
The tutorial application is available as a development component (DC). You need to import the software component HM-WDUIDMKTCNT, which contains the DC tc/wd/tut/slvrlght/empl. The exact steps
are described in a separate document.
One further prerequisite is basic knowledge about Web Dynpro for Java and Microsoft Silverlight. For example, this tutorial does not explain how to create a Web Dynpro application, component, view, view layout, and so on.
Objectives
After working through this tutorial, you are able to:
Create a simple Silverlight application with a Silverlight Island wrapper to be used within Web Dynpro
Integrate the Silverlight Island in a Web Dynpro view
Enable the data flow and event handling between the Silverlight Island and Web Dynpro
The Tutorial Example Application
Although we do not recommend replacing existing Web Dynpro controls by Silverlight controls, this tutorial uses simple Silverlight standard controls (for example TextBlocks and Buttons) to keep the example simple and easy–to-understand.
The example application shows a Web Dynpro View that does the following:
Gets employee data from a data-providing Web Dynpro component
Shows a Web Dynpro table with general data for all employees
Embeds a Silverlight Island that does the following: o Shows the details of the selected employee o Triggers events that can be handled by the embedding Web Dynpro application to show the
next or previous employee or the next employee that matches some of the search criteria
Provides data to the Silverlight Island
Receives data from the Search input field
Handles the events of the Silverlight Island
How to Use Silverlight Islands within Web Dynpro for Java
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
The resulting Web Dynpro UI with an embedded Silverlight Island looks as follows:
Preparing the EmployeeViewer Silverlight Project
To implement a Silverlight application with a wrapper for Web Dynpro, you need the following:
Microsoft Visual Web Developer 2008
Microsoft Silverlight Player browser plug-in (http://www.microsoft.com/Silverlight/Install.aspx).
Currently version 2 and 3 are supported.
Silverlight Island library WDSilverlightIslandLibrary.dll.
As explained, to enable the use of a Silverlight control in Web Dynpro, you need a wrapper class that
registers the control with a Silverlight Island. This wrapping enables the communication between the Silverlight control and the Web Dynpro Framework. The Silverlight Island library is available on the SAP NetWeaver Application Server CE at the following path: ...\usr\sap\<SystemID>\j<InstanceNumber>\j2ee\cluster\apps\sap.com\tc~wd~dispwda\servlet_jsp\w
After starting the Microsoft Visual Web Developer, work through the following steps:
1. Create the Silverlight project by choosing File new Project…
2. Select the Visual C# / Silverlight project type and the Silverlight Application
template and enter a name for the application and the solution, for example EmployeeViewer (The tutorial examples uses C#, but you can also use Visual Basic if preferred).
Implementing the wrapper class for the Silverlight application
To prepare for this, you must do the following:
Import the SAP library that contains the SilverlightIsland class
Define a SilverlightIsland instance to communicate with the embedding Web Dynpro
application
Change the MainPage constructor to take a parameter of type StartupEventArgs (You must also
adapt the code where the constructor is invoked in App.xaml)
Register the Silverlight application with the SilverlightIsland instance
using SAP;
namespace EmployeeViewer
{ public partial class MainPage : UserControl
{ //The silverlight island instance
private SilverlightIsland island = new SilverlightIsland(); …
public MainPage(StartupEventArgs e)
{ InitializeComponent();
// register the page at the silverlight island
island.Register(this, e);
} …
Defining the Data Flow
For data that is to be provided from the embedding Web Dynpro application to the Silverlight Island, you have to define properties or data sources in the wrapper class.
In Web Dynpro terms, a property is associated with a Web Dynpro context attribute, whereas a data source is associated with a Web Dynpro context node.
This sample shows the details of a single employee, therefore simple properties for each context attribute are created:
//The properties shared with Web Dynpro via the silverlight island
[IslandProperty(typeof(string))]
public string employeePersNumber {
get { return PersNumber.Text; } set { PersNumber.Text = value; } }
[IslandProperty(typeof(string))]
public string employeeFirstName {
get { return FirstName.Text; } set { FirstName.Text = value; } }
[IslandProperty(typeof(string))]
public string employeeLastName {
get { return LastName.Text; } set { LastName.Text = value; } }
…
The name of the property (for example employeePersNumber) is the name that is visible to the Web
Dynpro application via the Silverlight Island.
To provide data from the Silverlight Island to the embedding Web Dynpro application, the value has to be
propagated via the SilverlightIsland instance as follows:
// Update the property which can be accessed by Web Dynpro
For example, this can be done within a Silverlight event handler (see below). The name used in the method is the name of the property that is visible to the Web Dynpro application via the Silverlight Island (for example
searchTerm).
Handling the Silverlight Event
To fire events within the Silverlight application that can be handled by the embedding Web Dynpro
application, you have to invoke the FireEvent method of the SilverlightIsland instance as follows:
Enabling Data Flow and Eventing Between SilverlightIsland and the Web
Dynpro Component
To enable the data flow between Web Dynpro and the Silverlight Island for each Silverlight Island property, you must add a corresponding UI Element property to the SilverlightIsland UI element within the Web Dynpro view.
This can be done in the context menu of the RootElement by choosing Insert Property.
The id property can have an arbitrary value that is only visible within the corresponding view.
The value property must be bound to the corresponding Web Dynpro context attribute (or can have a fixed
value, too).
The name property must have the value of the name of property as it is defined within the Silverlight Island
wrapper class as a Silverlight property (for example employeePersNumber)
The readOnly property must be set to false to enable data flow in both directions (This is only important if
you have data flow from the Silverlight Island to Web Dynpro. This is for example the case for
SearchTermProperty).
[IslandProperty(typeof(string))]
public string employeePersNumber {
get { return PersNumber.Text; } set { PersNumber.Text = value; } }
or as a parameter of the StoreProperty method (for examplee searchTerm)
// Update the property which can be accessed by Web Dynpro
To enable the handling of events fired by the Silverlight Island for each Silverlight Island event, you must add a corresponding event property to the SilverlightIsland UI element within the Web Dynpro view.
This can be done in the context menu of the RootElement by choosing Insert Event.
The id attribute can have an arbitrary value that is only visible within the corresponding view.
The name attribute must have the value of the name of the event as it is defined within the Silverlight Island
wrapper class as a parameter of the FireEvent method (for example showNextEmployee)
The onAction attribute must be bound to a corresponding Web Dynpro action. When the Silverlight Island
event is handled, the defined Web Dynpro action is fired. This is then handled by the corresponding Web Dynpro action event handler as defined within the Web Dynpro view.
The code of all Web Dynpro action event handlers is contained in the appendix to this document.
How to Use Silverlight Islands within Web Dynpro for Java
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
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, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server,
Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
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.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, 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 other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.
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 fo r 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 constituti ng an additional warranty.