Adobe Flex, one of the leading Web 2.0 candidates, provides organizations with development tools, a user interface (UI), and connectivity components that simplify the development of robust Internet applications and allow users to harness the power of enterprise services. Adobe Flex is making a comfortable home for itself in the SAP ecosystem, because it’s a solid and rapidly productive platform for application re-skinning and improving SAP UIs. For many Web developers and SAP application architects who are seeking to apply these technologies and are ready to use tools and frameworks provided by SAP NetWeaver Composition Environment (CE) 7.1, I provide the information and direction on how to best apply and achieve that goal in real business scenarios. First, I provide an overview of the Adobe Flex technology and connection to SAP products, tools, and technologies. I discuss when and how to integrate Adobe Flex into the development of your Web applications that primarily consume Web services as data providers. To help illustrate the development process, I have chosen the Find Material by ID and Description Web service of the enterprise (ES) bundle available-to-promise (ATP). First, I show you how to drill down to display the details of this Web service and then understand technical aspects of it, which serve as the foundation and prerequisite for the development process.

Adobe Flex Technology as Part of SAP NetWeaver Technology

Within service-oriented architecture (SOA), SAP’s strategy for a clean separation of presentation from business logic and objects eases the integration of Adobe Flex-based solutions. Adobe Flex provides developers with the technical capabilities to modernize the client-side components of their applications. Adobe Flex is a true service-oriented client (SOC) for delivering applications that securely and intelligently interface with SAP back-end systems. SAP introduced Adobe Flex into various basic elements of SAP Business Suite and in SAP NetWeaver tools and development framework. Tools and technologies, such as Visual Composer, Web Application Designer (WAD for BI reporting), Xcelsius, Web Dynpro for ABAP and JAVA, Business Service Pages (BSP), Guided Procedures (GPs), and many more are available in the integration. Here are just a few of them:

• SAP NetWeaver Business Client (NWBC). NWBC is a robust desktop client. It offers a single point of entry to SAP and non-SAP applications. It can render standard applications such as Web Dynpro for ABAP or Java, SAPGUI applications, SAP NetWeaver Business Warehouse (BW) reports, Flex components, and Adobe forms. This client software uses a state-of-the-art UI technology that can flexibly consume portal services, application content, and tasks directly from SAP back-end systems. It represents a new breed of clients that bridge the gap between thick clients (e.g., SAPGUI) and thin HTML clients, while catering to the high demands of business users with rich Internet applications (RIA) such as those based on Adobe Flex and Adobe AIR for Flex (Figure 1).
  Note SAP has moved to a new naming convention for SAP NetWeaver Business Intelligence (SAP NetWeaver BI). It is now SAP NetWeaver Business Warehouse (SAP NetWeaver BW).
  

  Figure 1

  SAP NetWeaver business client
   
  Note Adobe AIR is a Flex desktop application that you develop using Flex technology. It requires Flex integrated runtime so the application can work with any operating system.
• SAP NetWeaver Visual Composer. Flex technology embedded in the SAP NetWeaver platform improves user experience with Visual Composer in a wide range of applications including analytics, business-process automation, self-service, and online commerce. This highly productive, model-driven tool enables business analysts or developers to compose visually robust applications that use analytic services, enterprise services, Remote Function Calls (RFC), application program interfaces, and stored procedures. It is a powerful design tool that facilitates the creation of content for SAP NetWeaver Portals, using a visual UI rather than manually writing code. SAP has augmented Visual Composer’s capabilities with the ability to render the resulting models into Flex. Leveraging the extensive user-interaction functions of Adobe Flex with SAP NetWeaver Visual Composer helps you build more meaningful business applications (Figure 2).
  

  Figure 2

  Sample portal iView developed with Visual Composer
• Adobe Flash Islands for Web Dynpro. Web Dynpro framework provides UI elements that dramatically reduce development effort and enforce a unified look and feel of Web Dynpro-based applications. However, various business applications still need more UI capabilities, such as animated graphs, tile control, slider control, and actionable buttons, that do not compete with the UI elements provided by the Web Dynpro framework. To fulfill such UI requirements, Adobe Flash Island is supported within the Web Dynpro for ABAP or Java framework. Adobe Flash Island allows you to create Internet components that support integration, data exchange, and interaction with applications built with Web Dynpro for ABAP or JAVA. This can totally change the face of an enterprise application interface. Now developers can imagine highly interactive engaging UIs with innovative data visualization. Figure 3 shows an example of a Web Dynpro application with a Flash application with a Flex chart based on Web Dynpro table records.
  

  Figure 3

  Example of a Web Dynpro application with a Flex chart
   
  Note Web Dynpro development using ABAP or Java always binds data and the UI with context mapping. This application-specific central storage memory deals with the run-time data exchange between the UI and back-end system.
  Note The SAP-provided MIME Repository has, for the most part, satisfied basic UI needs for application development. For specialized UIs, you can now consider using Flex technology.
• Xcelsius 2008. Xcelsius 2008 products focus on various presentations, for example the dashboard shown in Figure 4. (Discussion of this product goes beyond the scope of this article.)
  

  Figure 4

  Example of dashboard developed using Xcelsius

As you can see, SAP provides a broad range of development tools and technologies that increase the scope of creativity and innovation in business applications. Except for Visual Composer, you can integrate Flex components in Xcelsius, business client, and Web Dynpro applications. Also you can develop Flex applications that can access SAP data, deployed on any Web server or installed on your desktop as a client application. So far you have seen the possibilities of Flex integration in SAP’s various development tools and technologies. In the next section you will learn more about Flex technology and its development environment.

Flex Technology and Development Environment

The development process for Flex applications is similar to that used in other object-oriented environments such as Java and C++. Using Flex Builder or a text editor, you can write source code, which is then compiled to bytecode. These bytecode files extension are SWF (stands for Shockwave Flash) and known as flash files. Users then deploy these files to a Web server just as they would an HTML file or an image. When the flash file is requested by a browser, it is downloaded and the byte code is executed by the Flash Player runtime available with the browser. Flash files execution inside the Flash Player allows users to interact with applications and perform various operations. It can even the generate SOAP, HTTP, or AMF requests to connect back to the server. The typical runtime Flex architecture is shown in Figure 5.   Flex application layout and UI components are defined in an XML-based language called MXML. Flex provides a MXML extensive class library for visual components, containers, and remote service objects and data models. It also provides for data binding with UI controls and accesses server-side data. An ECMA scripting language (e.g., ActionScript 2) is embedded in MXML to handle user events and system events, or to construct complex data models. This is an object-oriented language, similar to JavaScript and ECME script. Like XForms, Flex also keeps data model, data presentation, data validations, and data services separate (similar to the MVC style). Figure 6 shows Flex application framework.   You can use any XML editor for scripting of MXML, but Adobe Flex Builder 3.0 for Flex application development is an Eclipse-based IDE that is integrated with the Flex server. It also provides components that allow connecting to the server, doing normal HTTP calls, connecting to remote Java objects, and interacting with Web services from the browser itself. It can be integrated with existing J2EE and .NET application models. Figure 7 shows a sample Flex application code that renders a table with two records.   Flex consists of a variety of visualization UI components, such as pie charts, bar charts, tickers, tables, accordions, maps, as well as specific application controls interacting with back-end business applications. Flex technology minimizes the number of server roundtrips required by delegating processing tasks to the client. Communication between different UI controls on the same page can be implemented locally on the client. For example, the communication between a presentation data table and a pie chart that visualizes the data in the table is also done on the client machine without accessing the server. So far you’ve seen the Flex technology runtime architecture, development framework, and its various development aspects. If you are an experienced Web Dynpro developer, you can compare certain aspect of Flex development with Web Dynpro development. This comparison will help if you plan to integrate Flex into Web Dynpro applications. See Table 1.

Development characteristics Web Dynpro Adobe Flex Development language ABAP and Java MXML and ActionScript MVC pattern Yes No (but can use a Cairngorm pattern) Open source No Yes IDE Eclipse-based SAP NetWeaver Developer studio Eclipse-based Adobe Flex Builder Componentization Yes Yes Predefined UI libraries Yes Yes Browser-dependent Yes, but can be extended Requires Flash player plug-in for browser Supports meta model Yes No Development infrastructure SAP NetWeaver Development Infrastructure (NWDI) Any Java-based development infrastructure (e.g., IBM WebSphere) Event driven Strongly event driven Strongly event driven Web client Browser Browser and desktop client using Adobe runtime, which is a cross-operating system independent UI binding Strong binding using context mapping Loose binding using binding property Screen animation No Inherent feature of Flex and Flash components Supports local client events No Yes Central styles or themes Yes Yes Provides browser history Yes Yes Share objects No Yes Accessible application development No Yes Web service consumption Yes Yes Printing feature Browser-based or PDF-based printing Flex printing classes Ajax-enabled With SAP NetWeaver CE 7.1 With Flex-Ajax bridge

Table 1

Comparison between Flex development and Web Dynpro development

Real-life solutions will most likely be much more complex. Your plan for integrating Flex into Web Dynpro Web applications or standalone Flex solutions that access SAP data should be supported with high scalability, reliability, and security. Before using Flex technology, you need to understand its advantages and disadvantages.

Guidelines to Integrate Flex Technology into SAP Environments

Integration of Flex into SAP development environment can be broadly categorized in two logical groups:

• Flex components integration
• Flex applications integration

You integrate Flex components when you are creating applications that are visually appealing. The components work as an integral part of the main application. However, when you integrate Flex applications, you can build business process applications, such as SAP CRM systems, which focus more on componentization and modularization. Here are some rough guidelines for when and how to integrate Flex into SAP development environments to get the most out of it. If you use these, you are most likely to end up with applications or components that are scalable, flexible, and easy to maintain.

• Always use SAP Web Dynpro Development Infrastructure as the basis of the application to take advantage of transport, versioning, and the team development concept for larger projects.
• Use Flex features, such as rendering, animation, transition, and drag-n-drop to add value to the application.
• Focus on creating light-weight components.
• Select central styles and themes that influence the component CSS.
• Search for SAP-provided Flex component libraries as your first choice before developing your own components from scratch. (Flex library components can be downloaded from SDN at https://sdn.sap.com for which logon credentials are required.)
• Consider tabular presentation using Flex components when data is small in size and can be easily navigate, sorted, and filtered (because paging is a work-around in Flex).
• Reuse available components, which are available for use in the browser’s temporary folders (unless they have been deleted).
• For complete business application development using Flex, use the Flex modularization technique, which prevents underlying independent execution of Flex components and drastically reduces the application size. This also improves the performance of an application and reduces memory usage.
• With a Flex component or application that invokes an SAP enterprise service, use the SAP-developed Eclipse plug-in, which generates ActionScript proxy classes; this eases your development process. (Eclipse ActionScript plug-in is available from the SDN download section.)
• Design and develop components with reusability in mind.
• Focus the Flex component of Xcelsius objects on binding with underlying Excel objects.
• Consider the design time and the runtime environments when developing the Flex component of Xcelsius objects.
• Consider the runtime environment of style sheets and themes when designing Flex components.
• When developing accessibility applications, use Flex accessible components to create a consistent, usable experience for users with disabilities.
• Use the Flex LifeCycle Data Service (LCDS) when developing applications that require real-time messaging.

When you integrate Flex into the SAP development framework, you can build applications that consume Web services as data providers. To help you gain a greater understanding of the possibilities and potential of this integration, take a closer look at the design and execution behavior of the Find Material by ID and Description Web service.

Discover the Details of a Web Service

Web services are developed in such a way that their complexities are hidden from developers. In general Web Services Description Language (WSDL) is used as a primary source to understand Web service definition. Because WSDLs are typically the only Web service descriptions, using them to develop applications can be tedious and time consuming. When a Web service becomes an enterprise service, from a development point of view, you need more detailed information on each element or part of the Web service. The developer perspective has more understanding of technical details in terms of service interface, operations, parameters, and runtime behavior. This information helps to create more efficient and accurate development objects to address all possible business process scenarios at runtime. SAP provides a central place where you, the developer or architect, can easily collect information about Web services and enterprise services — the ES Workplace. To collect technical information for a Web service or an enterprise service, you can use the ES Workplace, which you can find on SDN at https://esworkplace.sap.com/sdn. The ES Workplace provides consolidation information of all available Web service delivered by SAP. There are several ways to find the details of Web service from the ES Workplace, but for quick search, you can use the Search box, as shown in Figure 8.   Enter the name of the Web service (e.g., Find Material by ID and Description), and then click the next icon. The search result page displays the link that matches with the Web service description you entered as the search criteria. Click the Web service link to display the definition, technical data, business context, and integration information associated with the Web service (Figure 9). Note that the technical name of this Web service is MaterialSimpleByIDAndDescriptionQueryResponse_In.   The technical information includes the software component version, the technical name, the namespace, and the mode of operations, as well as other details. You can use this information to derive typical consumption patterns and application navigation design. You can further navigate for comprehensive field-level descriptions and message types using detailed field description links. The Web service operations are described through their three main message types: input message, output message, and error or fault message, as shown in Figure 10. You can expand each message type using the toggle option. You can further expand each field level by clicking the brackets to display all technical detail information to the parameter levels. To know more about the technical details of parameters, you can navigate further to find more on base type, detail description, and permitted value ranges. For example, if you were to navigate the Find Material by ID and Description Web service, you would discover that this Web service is designed to request information based on material IDs and material description. The input message provides a facility to include or exclude single or multiple values or a range of single values or multiple values with wild card, e.g., an asterisk (*), for a request. If a request is successfully processed, output messages provide records that have material IDs and material language with specific descriptions and other material attributes that match the input request criteria.) In addition to this, output messages further provide log information on back-end processing. In case of processing failures either on a back-end system or because of connectivity problems for any reason, a fault message provides the appropriate fault detail information.   Let’s support the observations by execution of this Web service.

Execute a Web Service

Among the various facilities and tools provided by SAP for Web service design and testing is the familiar Web Services Navigator from SAP NetWeaver Application Server (SAP NetWeaver AS). If you have deployed your Web service on SAP NetWeaver AS, the easiest way to test your Web service is by using the Web Service Navigator at https://<was-hostname>:<port>/wsnavigator (by default the port 50000). Select a service from the list (e.g., /SCMB/PDM_PRD002QR, which is the technical name of the Find Material by ID and Description Web service shown earlier in Figure 9). It takes you to the home page of the web service as shown in Figure 11.   On this page, the WSDL link is provided. From here, you can test the selected service. Click the Test link, which takes you to the page that lists all available Web service operations (Figure 12).   Use the Operations link to navigate to the page with the operation request parameters. Test the service to find a material list that matches the description *test*. Because you are using the description parameter to find a material list, you can skip the SelectionByMaterialInternalID node. Select the check box to the right of the SelectionByMaterialInternalID node, as shown in Figure 13, and then enter the parameters for the SelectionByMaterialDescription node (1, 1, EN, and *test*).   Click the Send button to execute the operation. The results display in the Web Services Navigator, as shown in Figure 14.   The results list all the material that matches the selection criteria provided to the Web service. You might also notice that the requested material is based only on a description, but service responses contain complete material details along with an internal ID, description, and log nodes with execution details. This is a very simple test that will help you get the feel of the Web service. Be aware that there are many things you should try to observe in this execution process. For example, examine the combinations of input parameter values that act as requests required to achieve specific results. Also, focus on which values are mandatory, which are single strings, and which are arrays. A detailed understanding of the values of the input parameters and the output parameters will help you decide which UI components require data validations and which require data bindings. Similarly, your understanding will lead to a better handling of results and faults generated by ES Web service while consuming it into application. I suggest you test this Web service a couple of time using various test parameter sets. Ideally, in a professional development environment, I prefer to have all test scripts and results recorded against each test drive. Such test runs help you understand the parameters and value sets, as well as the execution behavior of the Web service.