Flashbuilder Sap Gettingstarted

Adobe Systems, Inc. Page | 1

Getting Started with Adobe® Flash® Builder® Plugin for SAP® NetWeaver® Gateway Services


Copyright

© 2011 Adobe Systems Incorporated. All rights reserved.

October 31, 2011

This Adobe Labs document is licensed for use under the terms of the Creative Commons

Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and

transmit the user guide for noncommercial purposes only so long as (1) proper attribution

to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the

user guide contains a notice that use of the user guide is governed by these terms. The best

way to provide notice is to include the following link. To view a copy of this license, visit

http://creativecommons.org/licenses/by-nc-sa/3.0/

Adobe, the Adobe logo, ActionScript, Adobe AIR, AIR, Dreamweaver, Flash, Flash Builder,

Flex, JRun, and LiveCycle are either registered trademarks or trademarks of Adobe Systems

Incorporated in the United States and/or other countries. SAP NetWeaver Gateway is a

trademark or registered trademark of SAP, Inc. in the United States and other countries.

Microsoft and Windows are either registered trademarks or trademarks of Microsoft

Corporation in the United States and/or other countries. Apple, Macintosh, and Mac OS are

trademarks of Apple Inc., registered in the United States and other countries. Java is a

trademark or registered trademark of Oracle Systems, Inc. in the United States and other

countries. Linux is the registered trademark of Linus Torvalds in the U.S. and other

countries. All other trademarks are the property of their respective owners.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.


Table of Contents

Introduction 4

Adobe® Flash® Builder® Plugin 4

Feature Summary 4

SAP® NetWeaver® Gateway Service 4

Getting Started 5

Basic Workflow for Web Applications 5

Create a Flex Project 5

Connect with SAP Netweaver Gateway Service 8

Binding Data Service with display component 14

Compile and Run the Application 18

Using Associations 19

Requirements 19

Example Collection 19

Flash Builder Plugin Implementation of Associations 21

Flash Builder Workflow for Associations 21

Un-Installing the Flash Builder Plugin 26

Un-Install the Plugin from Adobe Labs 26


Introduction Welcome to Getting Started with Adobe® Flash Builder Plugin (Plugin) for SAP NetWeaver

Gateway Services (NGS). This document will provide you with the guidance to get you going

building a Web application that runs in a browser and to provide you references for further

investigation. Flex Mobile applications will be addressed in a separate tutorial although the

Plugin for SAP NetWeaver Gateway functionality remains the same.

Adobe® Flash® Builder® Plugin

The Adobe Flash Builder Plugin (Plugin) for SAP NetWeaver Gateway Services (NGS) enables

Flex developers to build web and mobile applications that access SAP data published via

REST-based NGS. The plugin works within the existing Flash Builder Data Centric

Development (DCD) workflow. Simple wizards allow developers to connect with and browse

a Gateway Server‟s Service Catalog and then generate ActionScript service wrappers and

value objects for selected services.

Feature Summary

The Plugin provides the following:

1. An SAP NetWeaver Gateway wizard for Flash Builder DCD workflows;

2. A NGS catalog browser;

3. Service introspection and ActionScript service wrapper generation; and

4. Flash Builder Data Services panel and Design view drag-and-drop integration.

SAP® NetWeaver® Gateway Service

Information on SAP® NetWeaver® Gateway Services (Gateway) can be found on their SAP

Developer Network pages and there is a demo system available for testing and prototyping.

Fundamentally, Gateway offers connectivity to SAP data using any programming language

or model without the need for SAP knowledge by leveraging REST services and OData/ATOM

protocols. Gateway is a combination of:

1. technologies that provide a simple way to expose SAP data as REST services for

anyone to access;

2. tools that enable you to build and publish Consumption Models (sub-sets of SAP

data) which are logical groups of related entities (tables/views) specific to a use

case (application);

3. hosting services (Gateway Server) that provide access to a service catalogue,

service descriptions (metadata) and operations; and

4. exposed SAP data as Gateway Services that are essentially a set of REST resources

(Entity Sets/Collections such as Person, Account,…), accompanying relationships

(associations) and operations (CRUD).

http://www.sdn.sap.com/irj/sdn/gateway

http://www.sdn.sap.com/irj/sdn/gateway?rid=/webcontent/uuid/1051f6d9-e87a-2e10-d188-e2786c7878b1


Getting Started

Basic Workflow for Web Applications

Objective: Provide an introduction to the Adobe® Flash® Builder® Plugin for SAP

NetWeaver® Gateway Service developer workflow.

Create a Flex Project

Before being able to use the NGS Wizard you must be within and active Flex Project. This

tutorial will focus on creating a Web Application that runs in a browser. Flex Mobile projects

will be addressed in another tutorial.

1. Create a Flex Project either by:

a. From the Package Explorer > Right Click > New > Flex Project; or

Figure 1 - Create Flex Project from Package Explorer

b. From Eclipse Main Menu > File > New > Flex Project

Figure 2 - Create a Flex Project from the Eclipse Main Menu

Right Click


2. Enter the „Project Name‟ and click [Next] button.

3. Application Server Type: None > Next or Finish


4. Click [Finish]

5. Flex Project is created:

Figure 3 - New Flex Project


Connect with SAP Netweaver Gateway Service

Connect with a SAP NetWeaver Gateway Server/Service that has been setup and exposed:

1. Initiate the DCD Wizard for Gateway Service Main Menu > Data > Connect to

Data/Service > Select Service Type > SAP Gateway – opens the „Connect with the

SAP NetWeaver Gateway Service‟ browser

Figure 4 - Initiate the DCD wizard for Gateway Services

http://www.sdn.sap.com/irj/sdn/gateway


2. Access SAP Gateway Server by clicking on [Configure] button. Enter Server address

and authentication details > Connect

Note: There is a publically accessible SAP Gateway Demo System for testing and demo

application development. The credentials are illustrated in the screen shot above (Password

is "ESW4GW"). Details of the system and services are available here:





3. Service Catalog will be retrieved and displayed:

4. The „Search‟ text box can be used to filter the list of services:


5. Select a „Service‟ row item and the corresponding Service (group of

collections/entity sets) will be retrieved and displayed. Information tabs include

Associations and Details of the Service collection. Once a service is selected click

[Next] to proceed to code generation.

6. At this stage you can confirm the details of what will be generated.

7. Where multiple services may be used in an application the Data Type Prefix can be

used entered to differentiate methods and classes.


8. Click [Finish] to proceed with code generation.

9. When you connect to a service, Flash Builder generates an ActionScript class file

that provides access to the service operations which includes service wrapper

classes and value objects (Custom Data Types).

10. See Flash Builder code generation for client applications for more details on code

generation that is common to the Data-Centric Development wizards. The snap

shot below illustrates the services and valueObjects packages:

a. _Super_SERVICE_NAME.as – Within the services package the super class

contains the implementation of the service wrapper. Never edit the super

class, which is a generated class. Modifications you make to the super class can

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-56c6d6d11210238e6e8-8000.html#WSbde04e3d3e6474c4-416123bd1210251dfbd-8000

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-56c6d6d11210238e6e8-8000.html#WSbde04e3d3e6474c4-416123bd1210251dfbd-8000

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-56c6d6d11210238e6e8-8000.html#WSbde04e3d3e6474c456c7478f12130f1ea43-8000

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-56c6d6d11210238e6e8-8000.html


be overwritten. Any changes you make to the implementation can result in

undefined behavior;

b. SERVICE_NAME.as – Also within the services package are the modifiable

service classes that extend _Super_SERVICE_NAME.as and is the class that

you can add custom code; and

c. _Super_VALUE_OBJECT.as and VALUE_OBJECT.as classes which are the

custom data types that the Service Class will pass to the view layer of the

application. The service wrapper will serialize/de-serialize message traffic to

and from the SAP NetWeaver Gateway service into typed value objects.


Binding Data Service with display component

There are several ways to bind service operations to a user interface component. You can

drag service operation from the Data/Service view onto a component in the Design Area.

You can also open the Bind to Data dialog to select an operation to bind to a component. To

create visual control and bind it to a data service:

1. Select Design View for the main application file. Drag and drop a DataGrid onto the

design surface.

2. Drag a data service onto the DataGrid

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-668f02f4120d422cf08-7ff4.html#WSbde04e3d3e6474c4-668f02f4120d422cf08-7ff2


3. Click [OK] for the next two dialogs

4. Code is generated to provide the columns (GridColumn) for the DataGrid based on

the $metadata for the collection which looks like:

a. Design View


b. Source View – as you can see all of the columns defined in the $metadata are

generated as GridColumn(s):

c. As required trim out or re-arrange the GridColumn(s) as required for your

application:


5. Flash Builder generates code to trigger services operations and bind data returned

to a user interface control (see Adobe online help). When you bind a service

operation to a control, Flash Builder generates the following code:

a. Declarations tag containing a CallResponder and service tag (DEMO_FLIGHT):

b. Service call trigger such as the „creationComplete‟ event handler to the

DataGrid that triggers the service call when the DataGrid has dispatched it‟s

FlexEvent.CREATION_COMPLETE event:

a. Handler code to the script block that submits the request to the service –

NOTE: „null‟ is provided as the parameter to fetch all records:

b. Data binding between the control and the data returned from the operation

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-56c6d6d11210238e6e8-8000.html#WSbde04e3d3e6474c41cd68546121027044e9-8000

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/events/FlexEvent.html


Compile and Run the Application

Now that the code is in place the application should compile and run:

1. Within the Package Explorer, right-click on the main application file (FlexGateway in

the example) > Run As > Web Application:

2. Flash Builder will compile the application and run it inside the browser:


Using Associations

Objective: Describe the use of associations between collections within an SAP®

NetWeaver® Gateway service.

Requirements

The following is required to work through the hands-on aspects of this section:

1. Access to SAP‟s Gateway Demo Server, details of the system and services are

available here:

http://www.sdn.sap.com/irj/sdn/gateway?rid=/webcontent/uuid/1051f6d9-e87a-

2e10-d188-e2786c7878b1.

Example Collection

The service on the SAP Gateway Demo Server can be accessed as follows:

1. Using the DCD Wizard for Gateway Service Main Menu > Data > Connect to

Data/Service > Select Service Type > SAP Gateway – opens the „Connect with the

SAP NetWeaver Gateway Service‟ browser

Figure 5 - Initiate the DCD wizard for Gateway Services




2. Followed by clicking on [Configure] button. Enter Server address and authentication

details and click [Connect]:

Figure 6 - Password is 'ESW4GW'

3. Select the „DEMO_FLIGHT‟ row (service) item and the corresponding collections/

entity sets will be retrieved and displayed. „DEMO_FLIGHT‟ includes the association

„flight_data_r‟ association between the two collections:


Flash Builder Plugin Implementation of Associations

See Flash Builder code generation for client applications for more details on code

generation that is common to the Data-Centric Development wizards. The following is a

snap shot of the „services.demo_flight package, within that package are two files

representative of the service wrapper generated for a SAP NetWeaver Gateway Service:

1. _Super_SERVICE_NAME.as - The super class contains the implementation for the

EmployeeService class. Never edit the super class, which is a generated class.

Modifications you make to the super class can be overwritten. Any changes you

make to the implementation can result in undefined behavior. For SAP NetWeaver

Gateway Service the following has been implemented:

a. select<Entity_Set_Name>Collection for queries that can return 1-N records

depending on queryOptions (null is default returning all records); and

b. getAssociated<Associated_Collection_Name>_for_<item of Collection_Name>

where records associated with <item of Collection_Name> will be retrieved

from <Associated_Collection_Name>.

2. SERVICE_NAME.as - In our example is the class that extends

_Super_SERVICE_NAME.as and is the class that you can add your implementation.

Flash Builder Workflow for Associations

Scenario: We will be linking to DataGrids in Flex Project, one will be the master (flight data

collection) and the second will contain associated flight data (1-N records).

Adding Master-Detail data controls can be done manually or by using the drag-and-drop

capabilities of the Design View. Using the drag-and-drop approach:

1. First, right-click on the existing (master) data grid and select „Generate

SelectionChange Handler‟:

http://help.adobe.com/en_US/Flex/4.0/AccessingData/WSbde04e3d3e6474c4-56c6d6d11210238e6e8-8000.html


2. Flash Builder will generate the selection change handler code. When the user clicks

on a row of data it will trigger event code added to the DataGrid declaration

(selectionChange=) that calls the „dataGrid_selectionChangeHandler‟ (added to the

Script block – this can be seen when you switch to Source View):

3. From Design View, with the DataGrid selected, you will see on the „Properties‟ view

the „On selection change‟ – click on the lightning bolt and then „Generate Service

Call‟. A dialog box should appear with service method options for the Service Class

(DEMO_FLIGHT). Select the „getAssociatedFlight_data…‟ and click [OK] and Flash

Builder will generate the service call within the selectionChangeHandler method

(Source View):

4. Now what is needed is to define the parameter that the getAssociate… method will

us as a filter. In this case we are looking for records associated with the selected

Z_demo_flight object, therefore we need to add the following code to get the

selected item (as a Z_demo_flight object)from the DataGrid and pass it as a

parameter to getAssociated…:


5. In the Design View, drag and drop a new DataGrid from Components list onto the

application below the existing DataGrid (which is bound to the flight data

collection).


6. Right-click on the new DataGrid and select „Bind to Data…‟ from the pop-up menu >

[OK] from the Bind Operation > Select the „getAssociatedFlight_data… that returns

Flight_data data type:


7. The above sequence will lead to the second DataGrid (Flight Data) being modified

to show the properties of Flight_data as columns of the DataGrid. Additionally, it

will bind the DataGrid to the result received from the service request:

8. Final compellation of the application should result in the application running in the

browser and the first DataGrid loading on creationComplete. Clicking on a row in

the first DataGrid will cause the application to fetch associated records and

displaying them in the second DataGrid:


Un-Installing the Flash Builder Plugin

Objective: Describe how to un-install Adobe® Flash® Builder® Plugin for SAP

NetWeaver® Gateway.

Un-Install the Plugin from Adobe Labs

In order to uninstall the Flash Builder Plugin:

1. Start Eclipse and open from the Eclipse Main Menu select > Help > About Flash

Builder (bottom of the list).

Figure 7 - Scroll to the bottom and select “Adobe Flash Builder”

2. The “Adobe Flash Builder” dialog box will display. Click on the [Installation Details]

button.

Figure 8 - Click [Installation Details]

3. From the list on the “Installed Software” tab select the “Adobe Flash Builder SAP

Gateway Service Extension” and click [Uninstall] button.

Bottom


Figure 9 - Select SAP Service Extension and click Uninstall

4. The “Uninstall Details” dialog box will be displayed. Confirm the SAP Gateway

plugin is selected and click [Finish].

Figure 10 - Uninstall Details – confirm the correct plugin is selected

5. The Uninstall progress bar will display while the plugin is removed.

6. Restart Flash Builder to complete the un-install.

Figure 11 - Restart Flash Builder to complete the un-install

Flashbuilder Sap Gettingstarted

Documents

Transcript of Flashbuilder Sap Gettingstarted