Developing Web Applications for Mobile Devices

Transcription

1 Developing Web Applications for Mobile Devices Jochen Müller, Torsten Lenhart; Dirk Henrici; Markus Hillenbrand and Paul Müller Department of Computer Science University of Kaiserslautern {jmueller;t_lenhar; henrici; hillenbr; Abstract Today even small mobile devices access the internet. Therewith, mobility issues have become an important technical and economic topic -- not only in new but in proven and successful web applications as well. The main problem derives from a growing development of heterogeneity in hardware and software of mobile devices. To overcome this problem, this paper presents a framework to develop Web Applications for Mobile Devices. This framework issues important points when developing web application that also focuses on mobile users. This includes completely new developments, as well as development that issue an upgrade of existing web applications to mobile devices. An important element in this framework is the employment of the fairly new CC/PP standard. 1. Introduction In the course of time the Internet has developed to a vitally part of our society. Location independent, on the job or at home, from nearly everywhere this infinite amount of data, information, and services in the Web can be accessed. The next step leads to an interaction of mobile devices, web applications, wireless, and wired networks and even makes cooperation between them necessary. Because of the existing amount of information, data, and services in the WWW, and the users need to access this information, mobility issues of these web applications, are an interesting economic theme. Therefore the adaptation of these Web applications to the characteristics of the underlying network technologies and mobile devices becomes an important process [1]. The section 2 outlines the problems resulting from the heterogeneity of mobile devices, telecommunications networks and Web application, while section 3 gives an overview of the applicable techniques and methods for the adaptation process. Section 4 presents an implementation of the framework on a Java Web architecture. Finally, section 5 concludes this paper and outlines possible future work. 2. Problem Description Since functionalities of mobile devices have evolved, these small and smart technological entities have become important tools in our daily life. But behind the term mobile device, there is a broad range of products [2]. The heterogeneity of these product types becomes apparent when reading the different product terms, like notebooks, sub-notebooks, tablet PCs, PDA, handhelds, smartphones and mobile phones. Differences between these types will blur more and more [3]. This paper only focuses on devices that have a wireless internet connection, and a browser that supports TCP/IP. But the heterogeneity not only lies in hardware characteristics like display size, resolution, or network connection, but differences in software like operating system and web browsers. Table 1. Characteristics of Mobile Devices Class Browser Display Notebooks IE 1, Safari Inch (1600x1200) Sub-notebooks IE, Safari Inch (1024x768) Tablet PCs IE Inch 1 IE := Microsoft Internet Explorer

2 Handhelds/ PDA Smartphones Pocket IE, Web Pro, Web Browser Doris, Opera, Pocket IE, Web er, Web Pro, Web Browser (1024x768) 3 4 Inch 240x320/ 320x320 >2.1 Inch >176 x 208 The capabilities of mobile devices to connect to different networks have evolved. Beside communication over the mobile cellular networks (GSM and UMTS), more and more devices can also access wireless data networks (IEEE ). Depending on e.g. bandwidth and costs the device must now decide to which network to connect. There are two basic approaches when developing a web application. On the one hand the Write once, run everywhere paradigm ( single authoring ), which claims that it should be possible to display web application on different browsers and mobile devices based on one version. On the other hand there is the multiple authoring approach, with specified versions for different devices. Under an economic point of view it does not appear meaningful to program individually existing Web contents to fit the characteristics of device and their operating systems. Therefore the programming effort would be too high. Neither an adequate adaptation of content to all the specific characteristics seems possible, therefore the broad range of different software and hardware characteristics is too big. Instead a generic approach should be traced, adapting Web applications to a special context. The following approach combines these two strategies, and uses as much multiple authoring as necessary and as much single authoring as possible. The problem description points out that before adaptation or selection for a mobile device is realized, an identification of the context must take place[4]. The meaning of the term context is a major research theme in mobile communication issues []. In this paper the following adapted definition of context from [] is used: Context is any information that can be used to characterize the situational capabilities of a mobile device and functional aspects of its user. Situational capabilities include network, hardware and software performance, and functional aspects comprise time, quality and cost issues. 3. Mobilization of Web Applications Generally the content adaptation can be realized either on the server or on the mobile device. An adaptation of the content on the mobile device would make a transfer of all relevant data necessary. But in the mobile computing context, such high communication is expensive, and limited communication bandwidth and the occurring transmission costs are a major problem [1]. The transmission of a picture via DSL to a desktop PC makes sense, where as the transmission via a slow GSM connection will take too long and further on most mobile devices are not capable to probably display the picture. Therefore the work concentrates on a server side adaptation of the content. 3.1 Process Overview When realizing the adaptation process on the server side this process can be split in two main actions: First of all the characteristics of the requesting mobile device must be identified (Identification), so that the context of the Adaptation is clear. Then the Web Content can be customized to the context (Customization). Central Element is the definition of a Device Capability Object (DeCO), which aims to save all session dependent information, like the characteristics of the mobile device, or the transmission rate. DeCO is created during the Identification and builds the base for customization. 3.2 Identification The Identification of the device capabilities is based on a three steps approach (c.f. Figure 1). The step will only be executed if identification of the step before fails. In a first step the program checks if the CC/PP (Composite Capability / Preference Profile) exists. CC/PP is a W3C standard for expressing capabilities and preferences of clients and users. CC/PP is based on the XML serialization, which itself uses the Resource Description Framework (RDF). RDF was developed in order to support the exchange of meta data and characteristic information of resources. CC/PP is thereby an implementation of this framework, regarding the exchange of user preferences and equipment characteristics between Clients and servers [5, 6]. With this new standard, it is

3 now possible to make complex characteristic information about mobile devices transparent. Although CC/PP is the only effective possibility to realize a complete definition of DeCO, it will take some time until most of the browser vendors will integrate this standard into their products. Therefore a rougher identification can be realized through the following two approaches [7, 8]. The second step analyzes an HTTP Request from the client. This request consists of several partly optional Header-Fields like Accept, Accept-Language or User Agent. Especially the User Agent string contains relevant information. For the identification this string is used as a key to find the information inside the DB. In this table the relevant information about the mobile devices is stored. Identification CC/PP UA string Keyword / Pattern Device Capability Object Figure 1. Client Identification Process DB Table 2. Examples of UA strings Type UA String Siemens S55 ReqirelessWeb/3.2 S55 Pocket PC Mozilla/4.0 (compatible; MSIE 4.01; Windows CE;PPC 240x320) Nokia7250 Nokia7250/1.0 (3.14) Profile/MIDP-1.0 Configuration/CLDC-1.0 Unfortunately the protocol describes very roughly the contents of these fields [4, 8]. Therefore browsers tend to fill these fields with a variety of strings. At least an identification of main characteristics of the mobile device can be realized through keyword or pattern recognition. Therefore the whole UA string is scanned. The definition of keywords (e.g. S55 or Nokia7250) and of pattern (e.g. 240x320 or Wind) can easily be augmented. The accuracy of the identification diminishes from the first to the third step. 3.3 Customization Customization is based on two sub-processes, selection and adjustment (c.f. Figure 2). An analysis of the mobile device product range has shown that it makes sense to differentiate three main types, which have quite different characteristics. Therefore in the first step the selection of the right view is realized. This step is following a multiple authoring approach. Based on the identified classes three different views have to be provided. The characteristics of notebooks, sub-notebooks and PC-Tablets do not differ much from the desktop PC. Therefore the standard view is applied to these devices. A second class is defined for Handhelds/PDA. The focus of these devices lies in small office applications. Especially because of the much smaller display size of this devices, an own midi view is created. The third class compromises smartphones and mobile phones. These devices have the fewest capabilities, and in difference to the handhelds their focus lies in mobile telecommunications, not in office applications. Therefore a mini view is created. Programming three different types, is a big effort, but for a high quality adaptation unavoidable. Although several device characteristics or combination of characteristics can build up the base for an alternative selection, at present it seems consequent to focus on display size.

4 Device Capability Object Customization Selection Adjustment Standard Standard TAG Library Figure 2. Content Customization Process The Adjustment process is also based on the device capability object. This process follows a single authoring approach. Therefore a TAG library was choose to dynamically process the source of the web application on run time. Based on this library the selected view will particularly be adapted. Depending on the identified characteristics specified elements of the tag library can be applied to the chosen view. The Adjustment Library consists of content adaptation methods. This Library can easily be augmented and is based on different decomposition and transcoding techniques which are in detailed described in []. The above described framework has been drafted for all web applications. In the next chapter it will be applied to an existing framework of web application. 4. Case Study The above described concept was integrated in an existing web portal. This regional web portal provides a broad range of services and information to inhabitants and tourists of this region. The mobility issues concern of these Web applications can bring a higher value added to the end user. The framework is described in greater detail in [11] and is based on the Model--Controller (MVC) design pattern [15]. MVC strictly divides any application into a data model containing all the data, a controller which is responsible for the data flows and manipulation within the application, and one or more views upon the data which present the information to the end user (c.f Figure 3). Figure 3. Model controller Design Pattern The design pattern makes it possible to change the data inside the model while the views are updated automatically. The data models have been realized using JavaBeans, while the views and the controllers are implemented as Java Server Pages. Main changes that have been made concern the Controller and the. The Model structure kept the same, only few tables have been added, which identify the mobile device through UA string or keyword / pattern recognition. A key element of the framework is the DeCO. For this web applications DeCO was realized using Java. To realize the different processes three processors have been added to the Controller (c.f Figure 4). Following the description above, they are based on different Java classes. Main task of the the Identification Processor is the creation of the DeCO, which was realized by three Java classes, that accomplish their tasks following the identification process model. The adaptation process is realized through a selection and adjustment processor. The selection is realized through an evaluation of the available data in the DecO. To keep the same URL for different mobile devices the selection processor uses the concept of a master view, which links to the chosen view. The adjustment processor adopts the selected view and processes the implemented tags through a library. This is realized with the JSP Extension Tags [14]. Depending on the identified caharctersitics in the DeCO Tags will particularly be executed.

5 Model Select.-Pro. Adjust.-Pro. Controller DeCO Ident.-Pro. Master Request [1] S. Nylander, Different Approaches to Achieving Device Independent Services an Overview, Swedish Institute of Computer Science, Technical Report, T2003:16, [2] W. G. Yee and S. B. Navathe, Design Consideration for Mobile Client-Server Database Applications, LNCS 2538, Springer, Berlin 2002, pp [3] P. Mertens (Ed.), XML-Komponenten in der Praxis, Springer, Berlin 2003, pp Stand. Figure 4. MVC Overview 5. Conclusion and Future Work In this work a concept for adapting web applications to the characteristics of mobile devices has been introduced. The realization includes the fairly new CCPP standard for the identification of the mobile device and is based on a JSP Tag library to provide dynamic adaptation on run time. This approach has been realized on an existing web application framework. Several tests have successfully been realized with mobile device simulators. Real performance studies are planned. At present the three processors have only a rough character. Therefore the work is concentrated on an improvement of these processors. The structure of the existing database has not been changed, only few tables have been added. Another field of interest is the usage of Web Services. Identification, selection and adjustment of the Web applications could be realized using the new and promising Web Services technology [13]. As Web Services can run on different hosts, it would be easy to share them between different Web applications that need identification, selection and adjustment. 6. Acknowledgements This work is supported by the Foundation Rhineland-Palatinate for Innovation. 7. References [4] D. Gourley and B. Totty, HTTP, The Definitive Guide, O Reilly 2002 [5] R. Lewis, Glossary of Terms for Device Independence, W3C Device Independence Working Group, [6] R. Gimson, Device Independence Principles W3C Device Independence Working Group, [7] E. Izdepski, Ultimate Device Support with CC/PP, [8] Gimson, Roger Delivery Context Overview for Device Independence W3C Device Independence Working Group [9] User Agent Strings, [10] S. Nylander, M. Bylund, A. Waern:, The Ubiquitous Interactor Mobile Services with Multiple User Interfaces, Swedish Institute of Computer Science, Technical Report, T2003:17, [11] M. Hillenbrand and B. Reuther, Building Blocks for Web Applications, Journal, Publisher, Location, Date, pp [12] V. Turau, R. Pfeiffer, Java Server Pages Dynamische Generierung von Web-Dokumenten, dpunkt.verlag, Heidelberg, 2000 [13] M. Doll, M. Tomczyk, K. Wehrle, M. Zitterbart: Ansätze für eine Web-basierte Initiierung qualitätsbasierter Kommunikationsdienste, KIVS 2003, Leipzig, Germany, 2003, pp [14] K. Avedal et al., Professional JSP, Wrox Press, Birmingham 2000