Accessibility

SAP

Rich Islands for Adobe Flash

SAP

Rich Islands for Adobe Flash is an evolution of SAP's strategy to embrace rich Internet technology, enhancing their customer's user experience while leveraging their existing investment in their business applications. Rich Islands represent the integration of the Adobe Flash Platform into SAP's Web Dynpro, the UI framework within NetWeaver that SAP and its customers and partners use to develop and extend SAP applications. By taking advantage of this integration with the Adobe Flash Platform, SAP developers can deliver high-impact user experiences that increase usability and drive adoption of business applications.


How do Rich Islands for Adobe Flash work?

Rich Islands for Adobe Flash allow a custom-developed Flex or Flash control to be integrated into SAP's Web Dynpro applications with minimal effort. SAP provides a set of libraries that handle the mapping of data sources, properties, events and event parameters, as well as a way to bind the SWF files into Web Dynpro as a standard UI element. Using Flash or Flex, developers are only limited by their imaginations as to what they can create and then integrate into SAP's Web Dynpro.

Who should be interested?

Examples

Rich Product Selector

Rich Product Selector example

This SAP SDN Mentor's example presented at Tech-Ed 08 shows a number of new Web Dynpro features and a Rich Island that selects products "coverflow" style. (View full size +)

Xcelsius dashboards

Xcelsius dashboards

Business Object's popular Xcelsius dashboards, built with Adobe Flex, can also be integrated as Rich Islands. (View full size +)


Architecture

In the architecture diagram below, you can see how SAP’s programming model is rendered at runtime into the Web Dynpro browser session, which contains the Rich Island. The Rich Island behaves as a Web Dynpro control, but is a SWF running in Adobe Flash Player. (see Figure 1).

Rich Islands for for Adobe Flash for Web Dynpro

Figure 1.Rich Islands for for Adobe Flash for Web Dynpro. (View full size +)

Getting started with Rich Islands for Adobe Flash

Rich Islands for Adobe Flash is currently in ramp up with select SAP customers and will be available with Enhancement Pack 1 for SAP's NetWeaver, currently slated for a Q1 2009 release.

The SAP-developed libraries that provide the integration will ship with Web Dynpro ABAP 7.01 and Web Dynpro CE for Java 7.11. Currently, preview releases can be downloaded from SAP's Developer Network:

https://www.sdn.sap.com/irj/sdn/downloads

To see tutorials covering some basic uses of Rich Islands for Adobe Flash within the Web Dynpro environment, visit the Rich Islands for Adobe Flash page on the SAP Developer Community Wiki at:

https://www.sdn.sap.com/irj/sdn/wiki?path=/display/EmTech/SAP+Rich+Islands+for+Adobe+Flash

Learning Adobe Flex for SAP developers

The following content is a compilation of links and resources that will guide SAP developers on how to build Flex applications for integration as Rich Islands in SAP Web Dynpro applications.

Before beginning, you will need to install Adobe Flex Builder.

Flex Builder 3

Explore rich Internet applications

Introduction
In 2002, Macromedia coined the term rich Internet application (RIA) to refer to a dynamic web experience that is rich and engaging, as well as interactive. This section introduces SAP developers to the power of RIAs created with Adobe Flash and Adobe Flex and rendered with the Adobe Flash Player and Adobe AIR runtimes.
Experience rich Internet applications
  1. Website: Nike Air built with Adobe Flash
  2. Website: FotoFlexer built with Adobe Flex
  3. Website: eBay Desktop deployed on Adobe AIR
Compare Adobe Flash, Flex, Flash Player and AIR
Learn the differences between these related Adobe products and understand why programmers prefer Adobe Flex, and designers prefer Adobe Flash, for creating RIAs.
  1. Video: Comparing Flash Flex, Flash Player, and AIR (5 minutes)
Create engaging user experiences for SAP software
This presentation describes how RIAs are enhancing SAP user interfaces. It also includes examples of real-world implementations of the technologies for SAP customers.
  1. Slide deck: Creating Engaging Experiences for SAP Software (3.3 MB)
Use RIAs in Web Dynpro
Thomas Jung of SAP discusses the future of RIAs with Web Dynpro.
  1. Video: Using RIAs in Web Dynpro (1 min)
Find more RIA resources
  1. Website: Flex Showcase on Flex.org
  2. White papers: Analysts reports on RIAs
  3. Article series: Anatomy of a Flex RIA
  4. Website: InsideRIA (O'Reilly Media)
  5. Blog post: When to use Flex and Ajax together

Develop Rich Islands for Adobe Flash

Introduction
Rich Islands for Adobe Flash can be integrated into SAP Web Dynpro applications, but are not created with the SAP development tools. SAP users should use Adobe Flex Builder to create Rich Islands for Adobe Flash. Note: SAP developers who already use NetWeaver Developer Studio should consider using the Eclipse plug-in version of Flex Builder 3. Both development environments are Eclipse-based, and work seamlessly together.
Download the Free Flex SDK
The Adobe Flex 3 Software Development Kit (SDK) includes the Flex framework (component class library) and Flex compiler, enabling you to freely develop and deploy Flex applications using an IDE of your choice.
  1. Web page: Download the Adobe Flex SDK
Download Adobe Flex Builder 3
You can accelerate application development with Adobe Flex Builder 3 software, which is an Eclipse-based development environment that comes in both Standard and Professional editions.
  1. Web page: Download Adobe Flex Builder
Introducing Flex Builder
  1. Video: Get an introduction to the Flex Builder interface and features. (7 minutes)
Creating a Flex Builder workspace and project
  1. Video: Step through creating a workspace and projects in Flex Builder. (7 minutes)

Learn the programming languages of Flex and Flash

Introduction
Flex applications are created with two programming languages. MXML is an XML-based language that is primarily used for UI elements. ActionScript is used to for programming and business logic.
Understand MXML
  1. Video: Learn about the Flex XML-based tag library called MXML. (4 minutes)
Code with MXML and ActionScript
  1. Tutorial: Learn how MXML and ActionScript work together to form the Flex coding environment.
ActionScript 3 Primer
  1. Slide deck/Website: Get a basic understanding of the concepts behind ActionScript 3.0 from Grant Skinner.

Create a Flex application

Explore the pre-built components
The Flex framework contains pre-built components. Interactively explore these components, and the code that implements their functionality, in the Adobe Flex Component Explorer.
  1. Flex RIA: Flex Component Explorer
Use pre-built Flex controls
  1. Video: Learn to use and modify pre-built Flex controls to create a data collection form. (4 minutes)
Use controls
  1. Tutorial: Learn to use common Flex controls, including text-based, button-based, and list-based controls.
Work with containers
  1. Video: Use containers to control the size and positioning of Flex application elements. (12 minutes)
Use containers
  1. Tutorial: Learn to use layout and navigation containers.
Position and lay out Flex components
  1. Tutorial: Understand absolute and relative positioning, as well as constraint-based layout.
Bind data between controls
  1. Video: Learn how to bind values from one control to another. (5 minutes)
Handle user events
  1. Video: Learn to handle user events on pre-built Flex controls. (6 minutes)
Use data binding
  1. Tutorial: Learn the primary approaches for tying data in one Flex control to another.

Integrate Rich Islands for Adobe Flash into Web Dynpro

Rich Islands for Adobe Flash demos and tutorials
SAP has created a series of tutorials, which include videos and step-by-step guides for integrating Rich Islands with Web Dynpro.
  1. Wiki: Rich Islands for Adobe Flash wiki on the SAP Community Network

Customize the look and feel of Flex applications

Style and customize pre-built Flex components
  1. Flex RIA: See how to style Flex components to match your custom RIA with the interactive Flex Style Explorer.
Skin and animate Flex applications
View the "Day 4: Adding Visual Appeals" section of this video training series to learn how to change the look and feel of your Flex islands. You will explore how to do this using drawing tools as well as programmatically with ActionScript.
  1. Videos and Exercises: Flex in a Week video training, Day 4

Appendices: Deepen your Flex knowledge

Appendix A: Create accessible Flex applications
  1. Website: Adobe Flex accessibility home
  2. Website: Flex accessibility best practices
  3. Website: Using Flex with JAWS
  4. Slide deck: Developing accessible Flex applications (Andrew Kirkpatrick)
Appendix B: Build multilingual applications
  1. Video: Localizing Flex applications (5 minutes)(Enrique Duvos)
Appendix C: Delve deeper into Flex
There are many resources to help you develop your Flex expertise. The Flex Developer Center in the Adobe Developer Connection is the primary resource for Flex developers. From here, you can view Getting Started tutorials, view Sample applications, read articles by industry experts, and explore new books. You can also access the Flex in a Week video training course and exercises. Most importantly, you can find core documentation, including the Flex language reference.
  1. Website: Adobe Flex Developer Center
  2. Videos and exercises: Flex in a Week
  3. Documentation: Adobe Flex 3 Language Reference
  4. Best practices: Flex SDK coding conventions and best practices

Additional resources

Additional information, demos, and tutorials are available on SDN at https://www.sdn.sap.com/irj/sdn/wiki?path=/display/EmTech/SAP+Rich+Islands+for+Adobe+Flash