Academy of Better Business

A More Attractive SAP Portal

Adobe Flex technology enhances business websites

Company websites based on SAP NetWeaver Portal may now be equally attractive and dynamic as websites designed using the Flash technology. Graphics created with the help of Adobe Flex makes the use of web applications much more pleasant and easier.

Business internet or intranet portals are often quite unsophisticated, not to say primitive. The focus is usually on the contents and functionality, at the ex-pense of the visual aspects.

It should, however, be borne in mind that in the philosophy of websites creation, it is very hard to separate the contents from the graphics. What is the use of valuable data made available on the intranet if their presentation makes it difficult to find or view them?

The owners of an internet portal always want to make it as accessible and useful as possible. Employees who check the HR information via the Em-ployee Self Service (ESS) do not bother HR staff with questions. Accepting orders via the internet means less work for the Sales Department and lower costs of the sales processes. Thus, the portal and its advantages need to be ‘sold’ to all users and to do it, we need attractive graphics and transparent navigation. Well-considered use of dynamic elements in the presentation of data will not limit the functionality, but rather highlight it.

Rich Websites

A solution offering such a powerful functionality is an approach called Rich Internet Application (RIA). The term was introduced in March 2002 by Macromedia (part of Adobe Systems since 2005) to refer to dynamic websites created using the Flash technology, although the concept of “rich websites” itself was known earlier under other names. RIA is a response to the limitations of a standard internet page model consisting of static text and pictures.

RIA focuses mainly on the data presentation layer perceived from the user’s perspective. The data usually come from a database or a data warehouse and the business logic remains on the side of the server (PHP, J2EE, .NET, ColdFusion).

As a result, a clear division between the layers and data security is ensured and the server capacity is freed up. The communication between the server and the Flex application can be delivered by either simple http services or WebServices.

Consequently, the presentation layer in the form of a Flex module is available also to the existing environments, in accordance with the principles of the Service Oriented Architecture.

The two key characteristics that give RIA advantage over standard websites are dynamic content change and a single-screen interface. A possibility to interact with individual components without having to refresh the whole page after each change, is a completely new quality for the user, thanks to which the use of Internet applications is much more convenient. In this way, we gain the same flexibility as in the case of desktop software, translated into the Internet space.

The concept of a single screen allows for the simultaneous presentation of all information currently required by the user. Thus, the need to scroll the page is eliminated and all crucial information is displayed in a clear and visible way. How is it possible to squeeze a number of screens into one?

An example of the approach adopted by RIA is different kinds of elements (boxes, tables, menus) which dynamically change their sizes once selected by the user (clicking on a button or moving a cursor over a box). Hence, all basic information is presented on the initial screen.

A user who is interested in more detailed data e.g. concerning a table in one of the corners of the screen, moves the cursor over the table to expand it all over the screen and can see all the details. After the analysis is over, the table can be minimized to the original size and all that is done without a need to refresh the page.

Another popular solution is an application in which an additional panel is displayed after clicking on a button. At the same time, the size of the upper panel is reduced, so that the whole application can still remain on a single screen.

Flex for the Demanding Clients

Despite its visual attractiveness, Flash technology was unable to meet the requirements of the more complex applications. Thus, in 2004 Macromedia offered a new approach to RIA. The new invention received a catchy and telling name Flex. Like Flash, the technology is based on ActionScript (ver. 2.0) programming language and MXML user interface markup language.

Thanks to the constantly upgraded ActionScript lan-guage, programs written in Flex are equally attractive as the Flash applications. All kinds of visual effects are possible.

All the elements, such as buttons, frames or plain text can be processed to create sophisticated animations. For example, when you click on a button, a panel with miniature video shots is displayed and each of the videos can be watched in a pop-up.

The same panel can be dragged and placed within another panel containing a library of the video collection, which after adding a new item will automatically update the graph next to it. You can also change the type of the graph, e.g. from a piechart to a bargraph or replace it with Flash animation. The only limit is the user’s imagination.

MXML, on the other hand, is responsible for more effective development of applications from the pro-gramming perspective. The standard components of the majority of software, such as tables, menus, buttons, bookmarks etc. have been defined as ready markups. As a result, the time needed to write a typical, non-complex application has been reduced to a minimum. The elements may obviously be modified or, if it is not sufficient, new components can be created from a scratch.

Hence, the programmer has unlimited possibilities. With each new version of the Flex technology, the repository of markups is expanded. Components which make it possible to play music or videos, sophisticated text editors or graph creators are now a standard.

Flexible SAP NetWeaver Portal

Adobe Flex applications have quickly won the hear-ts of the Internet users and attracted attention of the large corporations. The clients of Adobe already in-clude MasterCard, U.S. Army, Bayer, Mercedes-Benz, Boeing, LG, eBay, IBM, Intel and Oracle. SAP AG joined the group using the Flex technology in SAP NetWeaver Portal.

When you move the cursor over the picture, the picture gets bigger an the basic information  is displayed in the box next to it.

When you click on the picture, the layout of the page changes and detailed data are shown.

Example of the use of Adobe Flex technology in SAP NetWeaver Portal

Based on the Adobe product, a tool was created which enables modelling SAP portal pages without a need to write the program code. SAP NetWeaver Visual Composer, as the product was named, allows for the import of data from various SAP systems (e.g. using BAPI and WebServices) and their presentation as Flex forms. In the next step, the forms are fitted into the portal pages and the user receives a functional and aesthetic application.

As the combination of Visual Composer and Flex was widely appreciated, SAP decided to take a decision about a more extensive use of the Flex technology in its products. The possibilities for integration of Flex applications with the WebDynpro technology employed in SAP NetWeaver Portal are systematically expanded.

Flash and Flex elements can now be integrated not only using the Visual Composer, but also via PAR archives. As a result, tools like Flex Builder can be used to create more sophisticated applications which can then be placed on the portal pages.

SAP also paid attention to the Adobe AIR techno-logy which, in simple terms, can be called a desktop version of Flex. A growing interest in the Adobe product can also be observed in the SAP community. The number of blogs focusing on Flex in SAP products has been increasing at an exponential rate.

With Adobe Flex, we get an excellent tool to enliven corporate websites. The great interest in the product becomes understandable once you learn all the possibilities that it offers. A question which might be asked is whether the technology is sufficiently ad-vanced to support the creation of visually and func-tionally attractive Internet pages in an uncomplica-ted and pleasant way? „In order to become certain, you first need to have doubts” – that’s why I strongly encourage each and everyone of you to have a go and see the opportunities offered by Flex by yourself.