Step by Step Guide for Creating Flash Islands Using Webdynpro Java | Adobe Flash | Apache Flex

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

Using Flash Island This article shows you a step-by-step manner how to create a simple flash Island using Java Web Dynpro. When the lead selection changes the chart is populated based on the medal tally of selected country. The Adobe Islands will be developed in the Adobe Flex Builder and loaded into the MIME repository.boc.bpx.sap. A simple Flash Island is a pie chart which shows the medal tally of individual countries.com | BOC . Architecture .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. and Bronze) are displayed in a table. Country Names and medals (Gold.com 3 . table which displays the medals of all countries are created using the Webdynpro Table UI element.sap. Silver.sap.com | BPX .sdn. Tools to develop Rich Islands Flex SDK Flex Builder3 or Plug in for Eclipse SAP COMMUNITY NETWORK © 2008 SAP AG SDN . Chart is created using the pie chart control available as part of the Flex charting component.

sdn.com | BPX . 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.sap. 3) Set the compiler to respective version.com | BOC .com 4 .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.bpx. SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sap.boc.

swc in the following directory: \usr\sap\ce1\j00\j2ee\cluster\apps\sap. SAP COMMUNITY NETWORK © 2008 SAP AG SDN . 2) CE 7.com | BPX .com | BOC .boc.Step by Step Guide for creating Flash islands using Webdynpro Java Creating Flex component 1) You need to include the WDIslandLibrary.co m\tc~wd~dispwda\root\global\activeComp 3) Right click on your Flex project in flex builder and select Properties.sap.bpx.1 EHP1 Trial version.swc as part of your flex project.sap.sdn. 4) Choose the library Path tab and click on Add SWC Button.sap.com 5 . you can find the WDIslandLibrary.com\tc~wd~dispwda\servlet_jsp\webdynpro\resources\sap.

bpx.0.com | BPX .boc.sap.sdn.Step by Step Guide for creating Flash islands using Webdynpro Java 5) Make sure the compiler SDK version is set to Flex 2.com | BOC .sap.1 SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sap.com 6 .

sap.com 7 .boc.bpx.Step by Step Guide for creating Flash islands using Webdynpro Java SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sap.sap.com | BPX .com | BOC .sdn.

[Bindable] public var Medal:String. } private function displayGold(data:Object.com | BPX . public function initApp():void { FlashIsland.sap.com/2006/mxml" layout="vertical" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000. } ]]> </mx:Script> <mx:Panel title="PieChart Control" layout="vertical" color="0xffffff" borderAlpha="0.substr(0.adobe.ArrayCollection.Count + '\n' + temp + "%". index:Number.sap.sap.0x323232]" paddingTop="0" initialize="initApp()"> <mx:Script> <![CDATA[ import sap.boc.collections.bpx. [Bindable] public var dataSource:ArrayCollection. return "Total "+ data.register(this).FlashIsland.com 8 .0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www. field:String.0"/> </mx:calloutStroke> <mx:radialStroke> <mx:Stroke weight="0" color="#FFFFFF" alpha="0. percentValue:Number):String { var temp:String= (" " + percentValue).6).20" weight="2"/> </mx:stroke> SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sdn.com | BOC .Step by Step Guide for creating Flash islands using Webdynpro Java MXML Source <?xml version="1.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.Medal + ": " + data. [Bindable] public var Count:String. import mx.20"/> </mx:radialStroke> <mx:stroke> <mx:Stroke color="0" alpha="0.

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

So what it means is if you have any variable or method written as follows will be exposed by the framework.com | BOC .com | BPX .sap. Copy the .sap.bpx.com 10 .boc.sap. Data Binding between Flex component and Webdynpro All public variables or public set/get method are exposed to the island framework.Step by Step Guide for creating Flash islands using Webdynpro Java Click Finish Now a new folder will be created named bin-release.swf file and place it inside the mimes folder of webdynpro project.sdn. SAP COMMUNITY NETWORK © 2008 SAP AG SDN .

sap.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.sdn.sap.boc.com | BOC . SAP COMMUNITY NETWORK © 2008 SAP AG SDN .bpx.com 11 .sap.com | BPX . • 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.

bpx.sap.com 12 .. Your screen should look as follows SAP COMMUNITY NETWORK © 2008 SAP AG SDN . Add a view container Ui element to the view. Using apply template create a table using the node Medals as Data Source and add all the attributes as Table Columns.sdn..n 0.boc.sap.. This will be the container for the Flash Island.com | BOC .1 0.sap.n 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.Step by Step Guide for creating Flash islands using Webdynpro Java Name Data Type Singleton Collection Cardinality 0.com | BPX ..

sap.sap.com | BPX .com | BOC . Create new View Right click on the Root Element (Transparent Container) Select Replace With->Flash Island SAP COMMUNITY NETWORK © 2008 SAP AG SDN .swf file in the mimes folder of the project.bpx.sap.boc.com 13 .sdn.Step by Step Guide for creating Flash islands using Webdynpro Java Creating Flash Island Place your .

sap.com | BOC .boc.sdn. 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 .sap.Step by Step Guide for creating Flash islands using Webdynpro Java Select Ok.com | BPX .sap.bpx.com 14 .

sap.boc.com | BOC . SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sap. Following image shows the binding of context structure available in Webdynpro and Bindable variables in Flex. this is achieved using Property.sap.sdn. Insert Event is used to assign events to the island.bpx.com | BPX .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.com 15 . Data Source and Events To achieve this we need to create one data source and two Properties.

SAP COMMUNITY NETWORK © 2008 SAP AG SDN . 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.sdn.boc.com | BOC .sap.sap.com 16 .com | BPX .bpx.sap.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.

sap.bpx. SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sdn.com | BOC .com | BPX .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.boc.sap.com 17 .

com | BPX .com | BOC .com 18 . SAP COMMUNITY NETWORK © 2008 SAP AG SDN .bpx.sap.sap. 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.boc.sdn.Step by Step Guide for creating Flash islands using Webdynpro Java Building.

com | BOC .boc.sap.Step by Step Guide for creating Flash islands using Webdynpro Java Result SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sdn.sap.sap.com | BPX .com 19 .bpx.

sap. visit the User Interface Technology homepage.com | BPX .sap.bpx. SAP COMMUNITY NETWORK © 2008 SAP AG SDN .sdn.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.boc.com | BOC .com 20 .sap.

including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP.com | BPX . SAP will not be held liable for any damages caused by using or misusing the information. Changes made based on this information are not supported and can be overwritten during an upgrade.sdn.boc. SAP responsible or liable with respect to the content of this document. You agree that you will not hold.bpx. SAP COMMUNITY NETWORK © 2008 SAP AG SDN . 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.com 21 . or seek to hold.sap. and anyone using these methods does so at his/her own risk.sap.com | BOC . code or methods suggested in this document.sap.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.

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.