silver light island and javawebdynpro

24
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com © 2010 SAP AG 1 How to Use Silverlight Islands within Web Dynpro for Java Applies to: 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. Author: Web Dynpro Java Team Company: SAP AG Created on: 29 June 2010

Upload: adi08066011

Post on 08-Apr-2015

81 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 1

How to Use Silverlight Islands

within Web Dynpro for Java

Applies to:

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.

Author: Web Dynpro Java Team

Company: SAP AG

Created on: 29 June 2010

Page 2: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 2

Table of Contents

Introduction ................................................................................................................................................... 3

Prerequisites ................................................................................................................................................. 4

Objectives ..................................................................................................................................................... 4

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

Appendix:.................................................................................................................................................... 19

Legend ....................................................................................................................................................... 23

Text Symbols........................................................................................................................................... 23

Copyright .................................................................................................................................................... 24

Page 3: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 3

Introduction

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)

Page 4: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 4

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

Page 5: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 5

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

ebdynpro\resources\sap.com\tc~wd~dispwda\root\global\activeComp\

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).

Page 6: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 6

3. Confirm the next dialog boxes with the default settings.

4. After creating the project, browse in the Solution Explorer to the project’s References, right click the node, and choose Add Reference…

5. Choose the WDSilverlightIslandLibrary.dll library, which you should copy from the

location mentioned above on the server to your local file system.

Page 7: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 7

The prepared project should look as follows:

Page 8: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 8

Implementing the EmployeeViewer UI

This section explains how to create the Employee Details viewer as a Silverlight application.

The complete code is contained in the appendix to this document.

To create the Silverlight UI, you use the MainPage.xaml.

The UI is created with a grid layout and standard controls, such as TextBlock and Image.

<Grid x:Name="LayoutRoot" Background="WhiteSmoke">

<Grid.RowDefinitions>

<RowDefinition Height="35"/>

<RowDefinition Height="35"/>

<RowDefinition Height="35"/>

<RowDefinition Height="35"/>

<RowDefinition Height="35"/>

<RowDefinition Height="35"/>

<RowDefinition Height="40"/>

<RowDefinition Height="40"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100"/>

<ColumnDefinition Width="100"/>

<ColumnDefinition Width="120"/>

</Grid.ColumnDefinitions>

<TextBlock Margin="10" Grid.Row="0" Grid.Column="0">Pers. Number: </TextBlock>

<TextBlock Margin="10" Grid.Row="0" Grid.Column="1" x:Name="PersNumber"/>

<Image Margin="10" Grid.Row="0" Grid.Column="2" Grid.RowSpan="6"

Width="100" VerticalAlignment="Top" x:Name="Image"/>

The final result looks as follows:

Page 9: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 9

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

island.StoreProperty(this, "searchTerm", SearchTerm.Text);

Page 10: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 10

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:

private void Button_Next(object sender, RoutedEventArgs e)

{

//Fire the event which can be handled by Web Dynpro

island.FireEvent(this, "showNextEmployee");

}

private void Button_Previous(object sender, RoutedEventArgs e)

{

//Fire the event which can be handled by Web Dynpro

island.FireEvent(this, "showPreviousEmployee");

}

private void Button_Search(object sender, RoutedEventArgs e)

{

// Update the property which can be accessed by Web Dynpro

island.StoreProperty(this, "searchTerm", SearchTerm.Text);

//Fire the event which can be handled by Web Dynpro

island.FireEvent(this, "search");

}

The name used in the method is the name of the event that is visible to the Web Dynpro application via the

Silverlight Island (for example showNextEmployee).

As you can see in the Button_Search event handler, first the searchTerm property is propagated to the

Web Dynpro context (see also the previous section) and the search event that triggers the search for the

given search term is fired afterwards.

Page 11: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 11

The Resulting XAP File

When the application is finished and built, a XAP file is created. This is used to embed the Silverlight application in Web Dynpro:

Page 12: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 12

The Web Dynpro Java DC

To embed the Silverlight Island create a Web Dynpro DC with the following application, components, views, and windows:

The data is encapsulated inside the EmployeeData Web Dynpro component that is contained in the Web

Dynpro DC tc/wd/tut/data/employees and has the following Web Dynpro context structure:

The attributes that are to be displayed by this tutorial application must be mapped to the TutorialComp

component controller context and to the context of the TutorialView and the

SilverlightEmployeeView.

The TutorialView is the main View that shows all employees and some general attributes in a Web

Dynpro table and defines a ViewContainerUIElement named SilverlightViewContainer to embed the

SilverlightEmployeeView that contains the Silverlight Island.

Page 13: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 13

Page 14: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 14

Creating the SilverlightIsland UI Element in Web Dynpro for Java

To embed a Silverlight Island, the RootElement of a Web Dynpro view must be replaced with a

SilverlightIsland UI element. “Converted” views of this type can only contain one Silverlight Island and

no other UI elements.

The replacement of the RootElement can be done in the context menu of the RootElement by choosing

Replace With SilverlightIsland:

On the RootElement, which is now a SilverlightIsland, you can set properties. The most important

property is the source. The value must be the name of the XAP file belonging to the Silverlight application.

The XAP file must be copied into the mimes folder of the TutorialComp component.

Page 15: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 15

Page 16: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 16

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

island.StoreProperty(this, "searchTerm", SearchTerm.Text);

Page 17: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 17

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)

private void Button_Next(object sender, RoutedEventArgs e)

{

//Fire the event which can be handled by Web Dynpro

island.FireEvent(this, "showNextEmployee");

}

Page 18: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 18

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.

Page 19: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 19

Appendix:

Complete code of the Silverlight UI implemented in MainPage.xaml:

<UserControl x:Class="EmployeeViewer.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot" Background="WhiteSmoke">

<Grid.RowDefinitions> <RowDefinition Height="35"/>

<RowDefinition Height="35"/> <RowDefinition Height="35"/>

<RowDefinition Height="35"/> <RowDefinition Height="35"/>

<RowDefinition Height="35"/> <RowDefinition Height="40"/>

<RowDefinition Height="40"/> </Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/>

<ColumnDefinition Width="120"/> </Grid.ColumnDefinitions>

<TextBlock Margin="10" Grid.Row="0" Grid.Column="0">Pers. Number: </TextBlock> <TextBlock Margin="10" Grid.Row="0" Grid.Column="1"

x:Name="PersNumber"/> <Image Margin="10" Grid.Row="0" Grid.Column="2" Grid.RowSpan="6"

Width="100" VerticalAlignment="Top" x:Name="Image"/>

<TextBlock Margin="10" Grid.Row="1" Grid.Column="0">First Name: </TextBlock> <TextBlock Margin="10" Grid.Row="1" Grid.Column="1" x:Name="FirstName"/>

<TextBlock Margin="10" Grid.Row="2" Grid.Column="0">Last Name: </TextBlock> <TextBlock Margin="10" Grid.Row="2" Grid.Column="1" x:Name="LastName"/>

<TextBlock Margin="10" Grid.Row="3" Grid.Column="0">Department:</TextBlock>

<TextBlock Margin="10" Grid.Row="3" Grid.Column="1"

x:Name="Department"/> <TextBlock Margin="10" Grid.Row="4"

Grid.Column="0">Salutation:</TextBlock> <TextBlock Margin="10" Grid.Row="4" Grid.Column="1"

x:Name="Salutation"/> <TextBlock Margin="10" Grid.Row="5" Grid.Column="0">Sex:</TextBlock>

<TextBlock Margin="10" Grid.Row="5" Grid.Column="1" x:Name="Sex"/> <StackPanel Orientation="Horizontal" Grid.Row="6" Grid.Column="0"

Grid.ColumnSpan="2"> <Button Margin="10" Width="60" Height="20"

HorizontalAlignment="Left" Content="Previous" Click="Button_Previous"/>

<Button Width="60" Height="20" HorizontalAlignment="Left" Content="Next" Click="Button_Next"/>

</StackPanel>

<StackPanel Orientation="Horizontal" Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2">

<Button Margin="10" Width="60" Height="20" HorizontalAlignment="Left" Content="Search"

Click="Button_Search"/> <TextBox Width="120" Height="20" HorizontalAlignment="Left"

FontSize="11" FontFamily="Arial" x:Name="SearchTerm"/> </StackPanel>

</Grid> </UserControl>

Page 20: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 20

Complete code of the Silverlight wrapper class implemented in MainPage.xaml.cs:

using System;

using System.Collections.Generic;

using System.Linq; using System.Net;

using System.Windows; using System.Windows.Controls;

using System.Windows.Documents; using System.Windows.Input;

using System.Windows.Media; using System.Windows.Media.Animation;

using System.Windows.Shapes; using System.Windows.Media.Imaging;

using SAP;

namespace EmployeeViewer

{ public partial class MainPage : UserControl

{ //The silverlight island instance

private SilverlightIsland island = new SilverlightIsland(); //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; } }

[IslandProperty(typeof(string))] public string employeeDepartment {

get { return Department.Text; } set { Department.Text = value; } } [IslandProperty(typeof(string))]

public string employeeSalutation { get { return Salutation.Text; } set { Salutation.Text = value; } }

[IslandProperty(typeof(string))] public string employeeSex { get { return Sex.Text; } set { Sex.Text = value; } }

[IslandProperty(typeof(string))] public string employeeImageUrl {

get { return Image.Source.ToString(); } set { Image.Source = new BitmapImage(new Uri(value, UriKind.Absolute)); } }

public MainPage(StartupEventArgs e)

{

InitializeComponent(); // register the page at the silverlight island

island.Register(this, e); }

private void Button_Next(object sender, RoutedEventArgs e)

{ //Fire the event which can be handled by Web Dynpro

island.FireEvent(this, "showNextEmployee"); }

private void Button_Previous(object sender, RoutedEventArgs e)

{ //Fire the event which can be handled by Web Dynpro

island.FireEvent(this, "showPreviousEmployee");

}

private void Button_Search(object sender, RoutedEventArgs e) {

// Update the property which can be accessed by Web Dynpro island.StoreProperty(this, "searchTerm", SearchTerm.Text);

//Fire the event which can be handled by Web Dynpro island.FireEvent(this, "search");

} }

}

Page 21: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 21

Code of the Web Dynpro action event handlers that are used to handle the Silverlight events, implemented in

Web Dynpro view SilverlightEmployeeView:

/**

* Declared validating event handler.

* * @param wdEvent generic event object provided by framework

*/ //@@end

public void onActionMoveToNextEmpl(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

{ //@@begin onActionMoveToNextEmpl(ServerEvent)

wdContext.nodeEmployee().moveNext(); //@@end

}

//@@begin javadoc:onActionMoveToPreviousEmpl(ServerEvent)

/** * Declared validating event handler.

* * @param wdEvent generic event object provided by framework

*/ //@@end

public void onActionMoveToPreviousEmpl( com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

{ //@@begin onActionMoveToPreviousEmpl(ServerEvent)

wdContext.nodeEmployee().movePrevious(); //@@end

}

//@@begin javadoc:onActionSearch(ServerEvent) /**

* Declared validating event handler. *

* @param wdEvent generic event object provided by framework */

//@@end public void onActionSearch(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

{ //@@begin onActionSearch(ServerEvent)

String searchTerm = wdContext.currentContextElement().getSearchTerm(); if (searchTerm == null || searchTerm.trim().length() == 0) {

wdComponentAPI.getMessageManager().reportWarning("Please enter a search term!");

return; }

int currentLeadSelection = wdContext.nodeEmployee().getLeadSelection();

boolean found = false;

//start search with element after current lead selection found = searchEmployeeAndSetLeadSelection(searchTerm, currentLeadSelection + 1,

wdContext.nodeEmployee().size() - 1);

if (!found) {

//search from the beginning found = searchEmployeeAndSetLeadSelection(searchTerm, 0,

currentLeadSelection); }

if (!found) { wdComponentAPI.getMessageManager().reportWarning("Search term was not found");

}

//@@end }

Page 22: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 22

//@@begin others

private boolean searchEmployeeAndSetLeadSelection(String searchTerm, int startIndex, int endIndex) {

for (int i = startIndex; i <= endIndex; i++) {

IEmployeeElement employeeElement = wdContext.nodeEmployee().getEmployeeElementAt(i);

if (searchTerm.equalsIgnoreCase(employeeElement.getPers_number()) || searchTerm.equalsIgnoreCase(employeeElement.getFirstname())

|| searchTerm.equalsIgnoreCase(employeeElement.getLastname())) {

wdContext.nodeEmployee().setLeadSelection(i); return true;

} }

return false; }

//@@end }

Page 23: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 23

Legend

Text Symbols

Symbol Usage

Note

Recommendation

Warning

See also

Page 24: Silver Light Island and JavaWebdynpro

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

© 2010 SAP AG 24

Copyright

© Copyright 2010 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, 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,

PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX,

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.