Step by Step Guide for Creating Flash Islands Using Webdynpro Java

7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java

1/21

Step by Step Guide for creatingFlash islands using WebdynproJava

Appl ies 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 EnhancementPack for Webdynpo J ava

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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2008 SAP AG 1
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a074ad07-82bf-2b10-b0a6-897e4e96b942https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a074ad07-82bf-2b10-b0a6-897e4e96b942https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b006b4c2-82bf-2b10-d28a-b0c599e7fa0dhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b006b4c2-82bf-2b10-d28a-b0c599e7fa0dhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b006b4c2-82bf-2b10-d28a-b0c599e7fa0dhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a074ad07-82bf-2b10-b0a6-897e4e96b942


2/21

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.............................................................................................................16Flash 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


2008 SAP AG 2


3/21


What is Flash Islands?

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

Using Flash Island

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

Architecture

.

Tools to develop Rich Islands

Flex SDK

Flex Builder3 or Plug in for Eclipse


2008 SAP AG 3
http://www.adobe.com/products/flex/flexdownloads/http://www.adobe.com/products/flex/flexdownloads/http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3emailhttp://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3emailhttp://www.adobe.com/products/flex/flexdownloads/


4/21


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 Island6) Add Properties and events based on the requirement.


2008 SAP AG 4


5/21


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.com\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.


2008 SAP AG 5


6/21


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


2008 SAP AG 6


7/21



2008 SAP AG 7


8/21


MXML Source

import sap.FlashIsland;

import mx.collections.ArrayCollection;

[Bindable]

publicvar dataSource:ArrayCollection;

[Bindable]

publicvar Medal:String;

[Bindable]

publicvar Count:String;

publicfunction initApp():void

{

FlashIsland.register(this);

}

privatefunction 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 + "%";

}

]]>


2008 SAP AG 8


9/21


Creating swf file

Using the Project->Export Release build


2008 SAP AG 9


10/21


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.


2008 SAP AG 10


11/21


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.


2008 SAP AG 11


12/21


Name Data Type Singleton CollectionCardinality

SelectionCardinality

Medals true 0..n 0..1

Chart False 0..n 0..1

Count integer

Medal String

Bronze Integer

Country String

Gold Integer

Silver Integer

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 asTable 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


2008 SAP AG 12


13/21


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


2008 SAP AG 13


14/21


Select Ok.

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


2008 SAP AG 14


15/21


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 inFlex, this is achieved using Property, Data Source and Events

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


2008 SAP AG 15


16/21


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 inFlex

Property

Embed this view in to the view container UI element.


2008 SAP AG 16


17/21


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.


2008 SAP AG 17


18/21


Build ing, Deploying and Running the Project

Build the project using DC Build

Deploy it to the server (J 2EE Engine)

Launch the application using the URL.


2008 SAP AG 18


19/21


Result


2008 SAP AG 19


20/21


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.


2008 SAP AG 20
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a074ad07-82bf-2b10-b0a6-897e4e96b942https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a074ad07-82bf-2b10-b0a6-897e4e96b942https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b006b4c2-82bf-2b10-d28a-b0c599e7fa0dhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b006b4c2-82bf-2b10-d28a-b0c599e7fa0dhttps://www.sdn.sap.com/irj/sdn/nw-uihttps://www.sdn.sap.com/irj/sdn/nw-uihttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/b006b4c2-82bf-2b10-d28a-b0c599e7fa0dhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/a074ad07-82bf-2b10-b0a6-897e4e96b942


21/21


Disclaimer and Liabili ty Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is notsupported 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 orcode sample, including any liability resulting from incompatibility between the content within this document and the materials andservices offered by SAP . You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of thisdocument.

Documents

Step by Step Guide for Creating Flash Islands Using Webdynpro Java