Creation of Mobile Applications with BEA WebLogic Workshop 8.1


02/25/2005

Abstract


In the last year, major mobile carriers such as Vodafone, AT&T Wireless and T-Mobile have launched large volumes of color internet-capable phones and PDAs to the mass-market. This has created a significant opportunity for enterprises to enhance the return on their existing IT investment through:

  • Reduced call-center costs through increased end-user self-service.
  • Increased customer acquisition and reach.
  • Improved customer service and experience.
  • Enhanced customer relationship management.
  • Increased productivity through faster access to information and faster decision-making.

Developing mobile applications, however, has traditionally required the adoption of parallel development and deployment technologies such as proprietary user-interface languages, tools and enterprise application integration products. This has negatively impacted the return on investment due to the high expense of purchasing additional technology, the cost of maintaining duplicate IT platforms, and the cost of maintaining and/or re-training extra development staff.

Fortunately, the integration principles of WebLogic Workshop can address these challenges by integrating the mobile development and deployment process into the standard Workshop development process and run-time architecture, thus reducing significantly the traditional mobile cost of ownership.

In this article, we show how Workshop can be used to develop a complete e-business application that can be built from re-usable controls and then delivered to PCs, PDAs and smartphones through a single portal layer. In doing, we will illustrate the various issues and challenges that arise and how the Workshop Integrated Development Environment addresses them. Finally, we show you how the MobileAware and BEA partnership provides developers and IT staff with a single development and deployment platform for desktop and mobile-oriented applications that is tightly integrated with the BEA WebLogic 8.1 platform.

1. Why Create Mobile Applications?


There are a number of compelling reasons to leverage mobile computing within the enterprise, ranging from revenue generation to reduced costs for the organization. These reasons can be broadly divided into five categories:

  • Increase revenue
  • Increase customer acquisitions
  • Enhance customer relationship
  • Reduce customer interaction costs
  • Increase productivity

Increasingly in Asia, Europe and the US, color mobile data devices and PDAs are becoming mainstream with robust data connectivity through 2.5G and WiFi networks. The devices offer the opportunity for enterprises to leverage their existing web investment to offer a personal information channel to the consumer. By utilizing permission-based direct marketing to the mobile device, enterprises can notify consumers about existing and new offerings and provide relevant information to the consumer. By using this personal relationship, enterprises can reduce the time to sale and increase the frequency of sale. In addition, where the products are digital in nature (such as digital music, games, client software), enterprises can also use the mobile channel as a delivery mechanism to the user. This, in effect, opens up new sales and distribution channels for enterprises.

Furthermore, the mobile channel represents an excellent mechanism to provide immediate and timely after-sales services to the consumer. By providing online support service to the user's mobile device, the customer can track the orders, support requests and generally feel that they are receiving proactive support from the enterprise. This consequence of a proactive self-care approach is to reduce churn and increase customer loyalty. Mobile banking represents a common example of a proactive self-care strategy that has delivered both quantitative and qualitative benefits to the customer and to enterprises.

Today, most enterprises recognize that a key cost center for the organization is customer-interaction. Over the last decade, most customer-facing organizations have migrated from face-to-face customer support to the call-center and finally to web-based customer-support. Each of these migrations has reduced the costs of supporting customers. By migrating towards mobile self-care, enterprises can further increase the percentage of call-center interactions handled by the existing web-based self-care. The consequence of this is to reduce the number of interactions handled by the call center thus increasing the return-on-investment on the existing web-based self-care systems.

The previous examples have focused on using mobile computing to improve the quality of the relationship between the organization and the consumer and reduce the cost-base of maintaining this relationship. Mobile computing, however, can also be utilized to improve the productivity of the internal organization. Today, most enterprises are deploying enterprise information portals (EIP) to provide a single point of access to relevant business information and applications. The purpose of this activity is to improve efficiency by providing faster analysis and decision-making. By extending the EIP to mobile devices, enterprises can eliminate the "not-at-desk" syndrome that currently limits the efficacy of enterprise portals.

2. Barriers to Adoption of Mobile Applications


Notwithstanding the clear benefits of mobile application infrastructure to enterprises, there has been limited historical uptake due to three primary issues:

  • Cost of developing, integrating and maintaining mobile application software.
  • Quality of customer experience.
  • Impact on enterprise brand.

Cost of Mobile Application Lifecycle
Mobile application development normally requires the use of new mobile development tools and languages. This requires the re-training of staff to use these tools and requires separate teams for wired and wireless development. This increase in staff and lack of common tools and methods is one of the primary cost drivers in the enterprise.

Most enterprises already have implemented a set of business logic that captures the business processes of the organization. The integration of the mobile application logic with the existing enterprise business logic can significantly increase the cost of mobile application development due to the additional custom integration tasks required.

Maintaining mobile applications can be expensive due to the additional vertical applications that need to be maintained and the constant need to upgrade applications to support new devices as end users adopt them. It is possible to adopt a policy whereby only a limited number of devices are supported. However, this is a limited and ultimately costly approach as it creates barriers to adoption amongst users, requires users to have a second device in addition to their preferred device and cannot support external users.

Quality of Customer Experience
The end-user experience of mobile application logic is critical to user adoption. To maximize user adoption and frequency of usage, the application needs to be optimized for the user's device. Optimized applications enable the user to navigate quickly to the information they need and see that information in a manner that is easily understood and actionable. Achieving this requires that mobile applications are abstracted from the specific requirements of different devices and can be automatically optimized to whatever device is being used.

Impact on Enterprise Brand
Introducing mobile applications can cause a dilution of the enterprises brand due to incoherency between the visual templates used for the mobile, PDA and PC interfaces and lack of consistent access to enterprise services from different devices. Enterprises need to ensure that they enforce consistency across each of its digital interaction channels

The next section will show how the Workshop Integrated Development Environment and the MobileAware Mobility Extension can be combined to reduce the mobile application total cost of ownership, improve the customer experience and ensure consistency of the enterprise brand across different channels.

3. Creating Mobile Applications Using WebLogic Workshop


The core development cycle of Workshop involves a standard set of steps designed to simplify the process of creating e-business applications. This includes the creation of controls that encapsulate business logic (from processes, databases, web services), the creation of page flows that capture the application logic and the creation of NetUI interfaces that enable views to be rapidly created and integrated into the page flow and control architecture.

In order to fully utilize Workshop's automated capabilities for mobile application development, the standard Workshop design process should be re-used and enhanced - specifically:

  • Controls must be re-usable to support rapid creation of mobile business logic.
  • Page flow must be re-usable and extensible to support mobile page flows.
  • NetUI interface objects must be re-usable for mobile device navigation and presentation.

3.1 The MobileAware Mobility Extension for BEA WebLogic Workshop
Through extending the Workshop IDE with the MobileAware Mobility Extension, WebLogic Workshop enables business developers to:

  • Create mobile services that exploit wireless devices and network assets quickly and at low cost.
  • Create mobile applications, mobile portals and mobile business processes.
  • Extend existing web applications and portals to mobile devices and PDAs.

1

Figure 1: Mobility Extension for Workshop

The Workshop Mobility Extension consists of a number of primary components that are described below:

Enable Multi-Channel: Any application project (e.g. portal) can be configured for multi-channel delivery by selecting the "Enable multi-channel" option for the highlighted project. Selecting this option configures the application project to deploy and use the MobileAware Everix run-time mobility server component.

1

1

Figure 2: Enable Multi-Channel Option & IDE Mobility Properties

IDE Mobility Properties: Enables configuration of different emulators for testing application appearance and flow on a range of devices, configuration of device management and diagnostics tools, and configuration of device categories and subsets for device targeting.

Mobility Palette: Using a "drag & drop" technique, mobility meta-data can be applied to any NetUI-defined interface to enable delivery to mobile devices. Includes support for wizard-based generation of layouts for different device categories, click-to-dial for embedding telephony commands in applications, multi-device image handling, and device-category styling.

1

Figure 3: Mobility Meta-Data Palette

Mobility Toolbar: Toolbar extension that enables launching of device emulators for smart phones and PDAs in addition to the Workshop test browser. The Mobility Toolbar also provides a diagnostics application that enables the simulation of advanced mobile requirements for detailed testing of applications.

1

Figure 4: Mobility Toolbar and Emulator Launch Capability

The Mobility Toolbar additionally provides the capability to manage target devices from within Workshop, enabling addition/removal of devices in the device repository and device profile configuration for optimization of NetUI for different device types.

1

Figure 5: Mobility Toolbar and Device Management Capability

3.2 Developing a Multi-Channel Application Using Workshop
For simplicity, we'll look at the steps involved in mobilizing an existing "Restaurant Finder" Workshop application for optimal delivery to mobile and PDA devices instead of describing the process of creating an entire multi-channel application from scratch.

1

Figure 6: Restaurant Page Flow

We've already installed and configured BEA Platform 8.1, the Everix Mobility Server and Workshop Mobility Extension, and subsequently imported the "Restaurant" project.

As shown in the page flow above, the Restaurant application provides a search engine that allows a user to select a type of cuisine (e.g. French, Italian) and a price range and subsequently returns a list of restaurants matching the search criteria. The Restaurant application also includes a Horoscope, an appointment timetable, as well as a header, footer, and a menu of information links.

In order to make the Restaurant application appealing when accessed from both wireless and wired networks, we'll look at how to:

  • Extend the business logic with device controls.
  • Extend the Workshop IDE NetUI functionality with additional mobile behavior.

3.2.1 Extending Business Logic with Device Controls
This section illustrates extending the application Business Logic with mobile extensions.

Workshop provides the ability to define reusable controls that can be integrated into any application. This is particularly useful for abstracting wireless specific technologies and interfaces from application developers. For example, MobileAware has developed a suite of controls that allows an application to query the device profile for an end-user device by interfacing with the Everix Device Repository. This permits developers to create different business flows specific to a given delivery channel (e.g. mobile device, PDA, PC) or individual device.

Conditional logic can be included based on the delivery channel or based on particular attributes of a device (e.g. color-screen, supported image formats, etc.). An example of this would be to allow PC users to access the restaurant application without being charged, while charging mobile device users for accessing the application.

1

Figure 7: Using Device Management Controls

3.2.2 Extending NetUI with Mobile Behavior
This section illustrates the use of some of the NetUI mobile extensions to optimize delivery of the Restaurant application to mobile devices.

1

Figure 8: Using the Mobilise Page Meta-Tags

The first step is to enable the Restaurant application for multi-channel delivery. Right clicking on the Restaurant Project and selecting 'Enable multi-channel' automatically configures an Everix Servlet Filter in the web.xml of the Restaurant application and copies in necessary supporting libraries.

Starting the WebLogic Server and running the application launches the test browser and displays the Restaurant application. Now the challenge is to ensure the application is optimized for delivery to mobile and PDA devices.

From the Workshop design view, dragging 'Mobilise Page' from the Mobility Palette into the NetUI design view automatically adds in the Everix JSP Tag Library declaration and also adds additional 'template' markup allowing the page to be processed by the Everix Mobility Server for delivery over wired and wireless networks.

Next, the content on the page is split into logical Groups that will be used to define the navigation and layout of the content on mobile devices. For example, the Restaurant application page can be split into 6 independent groups as shown to the right e.g. "horoscope" group.

We delineate the logical groups by highlighting an area to be grouped and dragging 'Group' from the Mobility Palette onto the highlighted area so that the presentation of each 'Group' can be independently optimized. In the Group Dialog box, each 'Group' is assigned a Group ID, a Title, etc.

1

Figure 9: Determining the Logical Groups

Now that the content has been split into logical groups, we can go about defining the desired look and feel for mobile devices.

This is done by dragging 'Layout' from the Mobility Palette onto the NetUI design view, specifying a layout file name, and deciding to which device class the layout is applicable. Workshop then automatically scans the application and generates an appropriate layout for the given device category. The example to the left below shows this process for specifying the layout file that will be used for mobile devices. This process can be repeated to define an additional layout file for PDAs if desired.

1

1

Figure 10: Creating a Mobile Device Layout and Viewing the Layout File

Opening the specified layout file as shown to the right above, shows us the default layout that was produced. We now have the option of re-ordering or removing Groups from the display, as well as further refining the desired look and feel.

Without making any further changes, emulators can be used to preview the content. Returning to the Restaurant NetUI design view and launching an emulator from the toolbar, you can see (as shown to the right) that a navigation menu has been created from the logical groups that were defined and the subsequent ordering of the groups in the layout file.

Now that we can see how the content will be presented to mobile devices, we can tailor the presentation for optimal display on mobile devices. For example, returning to the mobile Layout page, we can change the display setting on the 'restaurant' group to display the full restaurant search form.

1

Figure 11: Mobile Device Navigation Menus

Changing the 'display' option shown in the Property Editor to 'all' from the default setting of 'headings' does this. As you can see on the emulator to the left below, the entire search form is now displayed instead of simply being shown as a link as in the example above.

1

Figure 12: Search Form in the Navigation Menu & Application of Cascading Style Sheet

We can further style the presentation by leveraging Cascading Style Sheets. Returning to the Restaurant NetUI design view, we drag 'Stylesheet' into the page and select the appropriate device class to target with the stylesheet in the dialog box. A stylesheet file is automatically generated and a reference to it placed into the Restaurant project. When the stylesheet file is generated, individual templates are created for each referenced class shown in the Restaurant NetUI source view. The example to the right above shows the result of adding 'color: yellow' into the timetable template in the generated MenuDriven.css stylesheet file.

One last example shows an extension of NetUI that allows developers to overcome the challenge of delivering appropriate images to mobile devices. Right clicking on an image in the NETUI and selecting 'Mobilise Image' allows the developer to convert images to the WBMP format supported by most mobile devices. 'Alt text' can also be added that will be displayed on phones that do not support WBMP image formats. It is also possible to use an integrated conversion tool to make a WBMP image from the source image. The example above shows the conversion of a Scorpion GIF image from the Horoscope group into an associated Scorpion WBMP image. After the conversion, the underlying markup is modified accordingly to include the WBMP image in the content sent to mobile phones in place of the Scorpion GIF image that is delivered to PC browsers.

1

Figure 13: Image Conversion

3.3 Key Mobile Development Challenges Addressed by Workshop IDE
The example described in this whitepaper illustrates the use of Workshop to create an application that can provide services to PCs, PDAs and mobile devices. In doing so, it has demonstrated the various mobile challenges addressed by Workshop.

  1. Workshop significantly reduces the time and cost required to develop mobile applications as the same personnel can be used for desktop-oriented and mobile-oriented development. This avoids expensive hiring and training.
  2. The complete Workshop control architecture can be leveraged to provide integration of mobile into the existing business processes and also significant increase the re-use of existing business logic.
  3. Workshop automatically optimizes the user interface and application navigation for mobile devices. This enables business developers to focus on the application functionality.
  4. Maintenance of mobile applications is greatly simplified, as the standard application methodology and toolset are re-used for the management of mobile application as well as traditional web applications. In addition, Workshop offers device management tools that significantly reduce the cost of maintaining support for new devices as they are introduced to the user community.
  5. Workshop enables the enterprise to maintain brand consistency across all digital channels as a single application source is used to drive each of the channels.

4. The MobileAware-BEA Partnership for Multi-Channel Application Development


The BEA WebLogic Platform combines with the MobileAware Everix Mobility Server platform to provide the most effective solution for mobile e-business.

1

Figure 14: MobileAware BEA WebLogic Mobility Solution

The Everix platform fully extends the complete BEA WebLogic platform and enables the WebLogic Workshop IDE to create and manage:

  • Multi-Channel web applications that leverage the full capability of the WebLogic platform
  • Multi-Channel portals that integrate wired and wireless access to enterprise and consumer portals
  • Rapid mobilization of existing deployed portals, without impacting current performance
  • Extension of WLI-based business processes to mobile devices to increase business responsiveness

Developers familiar with Workshop can, within hours, start creating multi-channel portal solutions based on BEA infrastructure. No additional tools or methodologies are required.

MobileAware is a key partner in the WebLogic Service Delivery Framework (WSD). With Everix, WSD can demonstrate rapid creation of revenue generating mobile data services. Today, MobileAware and BEA are being used as the foundation of solutions offered by global system integrators including Ericsson, Accenture and HP

1

Figure 15: MobileAware BEA Solution Zone

For more information on the MobileAware BEA mobility solution, please contact bea@mobileaware.com or go to the MobileAware BEA solution zone at http://developer.mobileaware.com/bea/index.jsp.