Skip to end of metadata
Go to start of metadata

Link to Content's target Space :

https://wiki.sdn.sap.com/wiki/display/EmTech/SAP+Rich+Islands+for+Adobe+Flash

Applies to:

SAP NetWeaver 7.0 Enhancement Package 1 and higher – Web Dynpro ABAP

Summary

A Step by Step guide how to create a color picker in WD ABAP using Adobe Flex.

Author: Michael Hardenbol 

   
Company:     CIBER Netherlands
Created on:    March 21, 2011
Author(s) Bio

Michael Hardenbol is an SAP NetWeaver Consultant at CIBER Netherlands. Particularly interested in creating solutions for customers with the same look and feel they are used to in there day to day internet usage. Making the UI as user friendly as possible.

Table of Contents

Start by creating a new Flex Project in Flash Builder

Start by creating a new Flex Project in Flex Builder.

  1. Open Adobe Flash Builder
  2. Choose File->New->Flex Project.
  3.  Name your flex project "Color_Picker" or something else. As application type select 'Web'. And for SDK be sure you select a version below '3.4'. Because version  '3.4' and above are not working at the moment.
  4. Click Next. On the next screen, leave the default output folder of bin-debug. Click Next again.
  5. Now we have to add the SAP Flashislands Component. Which can be downloaded from the MIME Repository under 'PUBLIC->BC->UR->nw7->FlashIslands'  filename 'WDIslandLibrary30.swc'.

    Choose the library path tab and click Add SWC. Which will have the following result.
  6. Click Finish.

The Flex coding

Switch to 'Source' mode if your not in there already. And add the following piece of code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#eaf1f6" backgroundGradientAlphas="1.0,1.0" height="210"
       width="250" initialize="initApp()" cornerRadius="0" borderStyle="none" borderThickness="0" horizontalAlign="left">
	<mx:Script>
		<![CDATA[
			import sap.FlashIsland
			import mx.collections.ArrayCollection;

			[Bindable]
			public var color:String;


			public function initApp():void
			{
				FlashIsland.register(this);
			}


			public function sendSubmit():void
			{
				var _color:uint = co1.selectedColor;
				color = "#" + _color.toString(16);
				FlashIsland.fireEvent(this, "newSel");
			}

			private function displayColor(color:String):uint{
				return StyleManager.getColorName(color);
			}
		]]>

	</mx:Script>
	<mx:Canvas  x="0" y="0" backgroundColor="{displayColor(color)}" height="210" width="250">
		<mx:ColorPicker id="co1" close="sendSubmit()"  selectedColor="{displayColor(color)}" x="0" y="0" />
	</mx:Canvas>
</mx:Application>

The 'initApp()' method will be called add the start of the flash component to register the flashisland with the Web Dynpro controller. The 'sendSubmit()' method will send the color to the Web Dynpro on the selection of a color. In the sendSubmit we will trigger an event at WD side.
More about the connection between the Web Dynpro and the Flex Component will be discussed later on.

Export the swf file by clicking 'project->export release build' The newly exported file will be available in the workspace directory of the flash builder. This file will be used later on to import in the mime repository.

Create a WD component

  1. Create Web Dynpro component 'zcolorpicker'. With a window and a view.
  2. We now need to create a context node to store the color in the component controller.
  3. Add an context attribute to the node of the type String for the color.

Build the layout of V_COLORPICKER.

  1. We can now map the context from the Component Controller to the V_COLORPICKER view via Drag and Drop.
  2. At the layout tab of the webdynpro add a inputfield to display the hexdecimal value which will be returned by the flash island and add a ViewContainerElement which will be the container for the view which will be holding the FlashIsland. Create the data binding to the inputfield appropriately.

Creating the COLOR_ISLAND

  1. Create a new view called 'V_COLOR_ISLAND'
  2. Map the context from the Component Controller to the V_COLOR_ISLAND view via Drag and Drop.
  3. Right click at the root element and choose 'Swap Root Element' choose typ 'FLASH_ISLAND'.
  4. Import the MIME object and save it with default settings.
  5. Set  the following property settings to the 'Rootelementcontainer'.
  6. Add a GACProperty attribute to the 'ROOTUIELEMENTCONTAINER'. Map the value to the context node. The name property has to be the same as is used in the flex component in this case 'color'. This is used for data binding.
  7. Add a GACEvent attribute to the 'ROOTUIELEMENTCONTAINER'. The name property has to be corresponding with the name given in flex. Because there is no real action used after selecting i called it DUMMY. This will trigger a wddomodifyview which will display the changes to the context.
  8. Embed the Islands View within the Window/View Container

Testing the application

  1. Create a Web Dynpro Application.
  2. Hit F8 and you will have the following result.

Related Content

Useful Information

A Step by Step guide how to create a color picker in WD ABAP using Adobe Flex.