Date post: | 03-Apr-2018 |
Category: |
Documents |
Upload: | carlos-bravo |
View: | 226 times |
Download: | 0 times |
of 21
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-897e4e96b9427/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
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
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 2
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
3/21
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 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
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
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/7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
4/21
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 Island6) Add Properties and events based on the requirement.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 4
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
5/21
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.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.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 5
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
6/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 6
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
7/21
Step by Step Guide for creating Flash islands using Webdynpro Java
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 7
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
8/21
Step by Step Guide for creating Flash islands using Webdynpro Java
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 + "%";
}
]]>
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 8
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
9/21
Step by Step Guide for creating Flash islands using Webdynpro Java
Creating swf file
Using the Project->Export Release build
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 9
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
10/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 10
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
11/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 11
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
12/21
Step by Step Guide for creating Flash islands using Webdynpro Java
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
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 12
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
13/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 13
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
14/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 14
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
15/21
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 inFlex, 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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 15
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
16/21
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 inFlex
Property
Embed this view in to the view container UI element.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 16
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
17/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 17
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
18/21
Step by Step Guide for creating Flash islands using Webdynpro Java
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.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 18
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
19/21
Step by Step Guide for creating Flash islands using Webdynpro Java
Result
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
2008 SAP AG 19
7/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
20/21
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 SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
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-897e4e96b9427/28/2019 Step by Step Guide for Creating Flash Islands Using Webdynpro Java
21/21
Step by Step Guide for creating Flash islands using Webdynpro Java
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.