Step by Step Guide for creating Flash islands using Webdynpro Java

Applies to:
Composition Environment (CE) Enhancement Pack 1 and above.

Summary
In this article we will be looking at one of the new feature Flash islands introduced with CE Enhancement Pack for Webdynpo Java Download sample files: 1. Flex Project for using as Flash Island in Web Dynpro 2. Sample Application for using Flash Islands in Web Dynpro Author: Ayyapparaj KV

Company: Bristlecone India Pvt Ltd Created on: 24 November 2008

Author Bio
Ayyapparaj KV Is a Netweaver certified consultant working for Bristlecone

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 1

Step by Step Guide for creating Flash islands using Webdynpro Java

Table of Contents
What is Flash Islands?........................................................................................................................................3 Architecture.........................................................................................................................................................3 Tools to develop Rich Islands.............................................................................................................................3 Process Flow ......................................................................................................................................................4 Flex Part..........................................................................................................................................................4 In Webdynpro..................................................................................................................................................4 Creating Flex component....................................................................................................................................5 MXML Source .....................................................................................................................................................8 Creating swf file ..................................................................................................................................................9 Data Binding between Flex component and Webdynpro .................................................................................10 Steps to be carried out in Webdynpro ..............................................................................................................11 Context Structure needed for the Project .........................................................................................................11 Creating Flash Island........................................................................................................................................13 Properties of Individual components.............................................................................................................16
Flash Island................................................................................................................................................................16 Data Source ...............................................................................................................................................................16 Property .....................................................................................................................................................................16

Supplying the context with data........................................................................................................................17 Building, Deploying and Running the Project ...................................................................................................18 Result................................................................................................................................................................19 Related Content................................................................................................................................................20 Disclaimer and Liability Notice..........................................................................................................................21

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 2

Step by Step Guide for creating Flash islands using Webdynpro Java

What is Flash Islands?

The new Flash Island UI element makes it possible to use Adobe Flex components in the SAP WebDynpro framework. The Adobe Islands will be developed in the Adobe Flex Builder and loaded into the MIME repository.

Using Flash Island

This article shows you a step-by-step manner how to create a simple flash Island using Java Web Dynpro. A simple Flash Island is a pie chart which shows the medal tally of individual countries. Country Names and medals (Gold, Silver, and Bronze) are displayed in a table. When the lead selection changes the chart is populated based on the medal tally of selected country. Chart is created using the pie chart control available as part of the Flex charting component, table which displays the medals of all countries are created using the Webdynpro Table UI element.

Architecture

Tools to develop Rich Islands

Flex SDK Flex Builder3 or Plug in for Eclipse

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 3

Step by Step Guide for creating Flash islands using Webdynpro Java

Process Flow
You can create this application by carrying out the following steps Flex Part 1) Create a Flex Project 2) Add SAP provided component as part of the library. 3) Set the compiler to respective version. 4) Create MXML file 5) Build and export it as swf In Webdynpro 1) Create a view 2) Make the root element as flash Island 3) Place the swf file in mimes folder of the project 4) Set the properties for the flash Island 5) Add Data Source as Child of Flash Island 6) Add Properties and events based on the requirement.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 4

Step by Step Guide for creating Flash islands using Webdynpro Java

Creating Flex component

1) You need to include the WDIslandLibrary.swc as part of your flex project. 2) CE 7.1 EHP1 Trial version, you can find the WDIslandLibrary.swc in the following directory: \usr\sap\ce1\j00\j2ee\cluster\apps\sap.com\tc~wd~dispwda\servlet_jsp\webdynpro\resources\sap.co m\tc~wd~dispwda\root\global\activeComp

3) Right click on your Flex project in flex builder and select Properties. 4) Choose the library Path tab and click on Add SWC Button.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 5

Step by Step Guide for creating Flash islands using Webdynpro Java

5) Make sure the compiler SDK version is set to Flex 2.0.1

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 6

Step by Step Guide for creating Flash islands using Webdynpro Java

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 7

Step by Step Guide for creating Flash islands using Webdynpro Java

MXML Source
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" initialize="initApp()"> <mx:Script> <![CDATA[ import sap.FlashIsland; import mx.collections.ArrayCollection; [Bindable] public var dataSource:ArrayCollection; [Bindable] public var Medal:String; [Bindable] public var Count:String; public function initApp():void { FlashIsland.register(this); } private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String { var temp:String= (" " + percentValue).substr(0,6); return "Total "+ data.Medal + ": " + data.Count + '\n' + temp + "%"; } ]]> </mx:Script> <mx:Panel title="PieChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center"> <mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232" showDataTips="true" dataProvider="{dataSource}" > <mx:series> <mx:PieSeries labelPosition="callout" field="Count" labelFunction="displayGold"> <mx:calloutStroke> <mx:Stroke weight="0" color="0x888888" alpha="1.0"/> </mx:calloutStroke> <mx:radialStroke> <mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/> </mx:radialStroke> <mx:stroke> <mx:Stroke color="0" alpha="0.20" weight="2"/> </mx:stroke>

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 8

Step by Step Guide for creating Flash islands using Webdynpro Java

</mx:PieSeries> </mx:series> </mx:PieChart> </mx:Panel> </mx:Application>

Creating swf file

Using the Project->Export Release build

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 9

Step by Step Guide for creating Flash islands using Webdynpro Java

Click Finish Now a new folder will be created named bin-release.

Copy the .swf file and place it inside the mimes folder of webdynpro project.

Data Binding between Flex component and Webdynpro

All public variables or public set/get method are exposed to the island framework. So what it means is if you have any variable or method written as follows will be exposed by the framework.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 10

Step by Step Guide for creating Flash islands using Webdynpro Java

Steps to be carried out in Webdynpro

To do this you first have to carry out the following steps common to all Web Dynpro applications: Creating a project Creating a component with a window and a view. Creating an application Now your project structure will look as follows

Context Structure needed for the Project

Create context as mentioned below in component controller.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 11

Step by Step Guide for creating Flash islands using Webdynpro Java

Name

Data Type

Singleton

Collection Cardinality 0..n 0..n 0..1 0..1

Selection Cardinality

Medals Chart Count Medal Bronze Country Gold Silver integer String Integer String Integer Integer

true False

Map the context from component controller to view controller. Using apply template create a table using the node Medals as Data Source and add all the attributes as Table Columns. Add a view container Ui element to the view. This will be the container for the Flash Island. Your screen should look as follows

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 12

Step by Step Guide for creating Flash islands using Webdynpro Java

Creating Flash Island

Place your .swf file in the mimes folder of the project.

Create new View Right click on the Root Element (Transparent Container) Select Replace With->Flash Island

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 13

Step by Step Guide for creating Flash islands using Webdynpro Java

Select Ok. When you right click on the Flash Island Element you will be able to get the following menu

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 14

Step by Step Guide for creating Flash islands using Webdynpro Java

Insert Data Source is used to assign Datasource for the flash island Insert Property is used to assign Properties for the Island. Insert Event is used to assign events to the island. Following image shows the binding of context structure available in Webdynpro and Bindable variables in Flex, this is achieved using Property, Data Source and Events

To achieve this we need to create one data source and two Properties.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 15

Step by Step Guide for creating Flash islands using Webdynpro Java

Properties of Individual components Flash Island Connecting .swf with the Flash Island is done using the property swfFile.

Data Source If you look in the above image you will be able to see that dataSource is the name of the property defined in Flex

Property

Embed this view in to the view container UI element.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 16

Step by Step Guide for creating Flash islands using Webdynpro Java

Supplying the context with data

You have to supply the context with data. You can do this in the wdDoInit method (or in a supply function) in the controller.

Following code is used to populate the Sub Node Medal using supply function.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 17

Step by Step Guide for creating Flash islands using Webdynpro Java

Building, Deploying and Running the Project

Build the project using DC Build Deploy it to the server (J2EE Engine) Launch the application using the URL.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 18

Step by Step Guide for creating Flash islands using Webdynpro Java

Result

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 19

Step by Step Guide for creating Flash islands using Webdynpro Java

Related Content
Downloads: Flex Project for using as Flash Island in Web Dynpro Sample Application for using Flash Islands in Web Dynpro For more information, visit the User Interface Technology homepage.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 20

Step by Step Guide for creating Flash islands using Webdynpro Java

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

SAP COMMUNITY NETWORK 2008 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com 21