Logo Morfeo

Declarative Models for Ubiquitous Web Applications

Morfeo-MyMobileWeb — Position Paper

José Manuel Cantera Fonseca, Telefónica I+D, jmcf@tid.es
Ignacio Marín Prendes, Fundación CTIC, ignacio.marin@fundacionctic.org
Javier Soriano, Universidad Politécnica de Madrid, jsoriano@fi.upm.es
Juan J. Hierro, Telefónica I+D, jhierro@tid.es


This paper outlines the position of the Morfeo-MyMobileWeb Consortium with respect to the usage of declarative models in the definition of user interfaces and interactions in ubiquitous web applications. This work has been produced in response to a call for papers done under the Workshop on Declarative Models of Distributed Web Applications.

Table of Contents

1 Introduction
2 State of the art
  2.1 (X)HTML
  2.2 XForms
  2.3 DIAL
  2.4 AJAX Frameworks and Javascript
  2.5 Propietary declarative markup languages
3 MyMobileWeb
  3.1 MyMobileWeb Features
4 IDEAL: Interface DEscription Authoring Language
5 Conclusions
6 About Morfeo-MyMobileWeb


A References

1 Introduction

(X)HTML was born as a general purpose language to create hypertext documents in the Web. (X)HTML technologies have been very successful, enabling the creation of any kind of content in a flexible and versatile way. Additionaly, these markups, in combination with scripting mechanisms [ECMAscr] and server side technologies (servlets -[Servlet]-, JSP -[JSP]-, PHP -[PHP]-, etc), have been used for the development of application user interfaces.

Although, Web Applications built on (X)HTML are nowdays a reality, developers are demanding more powerful abstraction mechanisms, that hide all the complexity that implies the creation of a rich user interface in (X)HTML. The response of the market has been the appearance of AJAX Toolkits (Dojo, Yahoo, etc. [AJAX] and higher-level tag-based abstractions, such as JSF [JSF], XAML [XAML] or XUL [XUL]. Neither of this technologies are open standards widely accepted by the industry, nor they are suitable for ubiquitous applications.

This paper explains the Morfeo-MyMobileWeb [MMW] position with respect to the problem described above. We advocate standardizing a new open declarative markup language for defining the user interface of any application in the Web space, including the Ubiquitous Web. This standardization effort might be done within the W3C or through the creation of a widely-supported open source project capable of defining a "de facto" standard. The new markup language should not be seen as a competitor of (X)HTML languages, but a rather complementary higher level language with differentiated use cases. Moreover, this new language and (X)HTML should be interoperable.

We present the work done in the Morfeo-MyMobileWeb project, in which we have defined a declarative markup language intended to the specification of the user interface of mobile applications, that avoid commitments to device capabilities or modes of interaction. This language demonstrates that a declarative markup can be a useful tool for overcoming the problems of adaptation and rendering found in ubiquitous web applications. Additionally, we have made some experiments around this language related to declarative semantic annotations, which can be used in the adaptation proccess for improving the user experience.

Finally, taking into account our experience under the MyMobileWeb project, we make a proposal about the structure and design principles around this new declarative language, IDEAL, which will intended to the specification of user interfaces in the desktop and the ubiquitous web.

2 State of the Art

Web application development presents a lot of advantages. The most remarkable are deployment simplicity and flexibility. On the other hand, there are also a lot of challenges that developers have to face with, specially in those applications with more demanding functionalities. For instance, applications that need to to work on any device or applications with a richer user interface. As a result developers have started to use new abstractions and frameworks that leverage (X)HTML, simplifying the development and reducing the time to market. These new frameworks and tools are incompatible between them, and are based on different foundations. In the next paragraphs we center the discussion around what are the limitations of different (X)HTML technologies and what are the propietary solutions that developers are adopting. These solutions have different drawbacks which are also described.

2.1 (X)HTML

(X)HTML is a general purpose language intended to the publication of any kind of hypertext document. Thanks to the flexibility of (X)HTML the Web is a success and there are tons of information published in the Internet. Since the 90s user interfaces have been developed in (X)HTML. However, user interface developers always have encountered Web programming more rudimentary than programming with classical user interface frameworks, such as Visual Basic [VB], Java-Swing [Swing], Motif [Motif] or others. From the standpoint of ubiquitous user interface development, the more important limitations of (X)HTML are:

The XHTML 2 [XHTML2] specification, the theoretical successor of (X)HTML, does not fix up any of the issues raised above and it is incompatible with classic (X)HTML.

The Web Applications specification, developed by the WHATWG [WHAT-WG] in response to their disagreement with XHTML 2, has made an attempt to define a solution to some of the above issues. However, it is failing due to its HTML basis, browser vendor biases and the restriction imposed by backwards compatibility requirements. The (X)HTML-classic new version, which development has been restarted recently within the W3C, will be based on the WHATWG work and, consequently it will not provide a response to the requirements demanded by rich and ubiquitous user interfaces.


XFORMS [XFORMS] is the new generation forms technology standardised by the W3C to supersede HTML 4.01 forms. XFORMS extends classical HTML Forms by providing a more declarative approach to define validations, relevancy and data binding. XFORMS also defines typical user interface components intended to capture input information via forms (input, range, submit, etc).

XFORMS has always been critized due to its complexity compared with HTML Forms. As a result, there is now ongoing work in the W3C for defining a simpler notation for XFORMS, XFORMS Transitional [XFormsTrans], almost based on the ideas postulated by the Web Forms 2 [WebForms2] specification, developed by the WHATWG. This notation will be a compatible extension to the existing notation in classical HTML 4.01 forms. XFORMS separate clearly the model and the presentation and adopts XPATH [XPATH] as the expression language used to address portions of the model. XFORMS is intended to be used in a variety of host languages including XHTML 1.1 and XHTML 2.0 (at the moment XHTML 2.0 is work in progress).

XFORMS improves classical HTML 4.01 forms providing a more declarative approach, but still suffers from different problems which limit its usage in user interface development:

As a corollary it can be said that XFORMS improves partially the validation and data binding problems found in the development of user interfaces, but the rest of issues detected in (X)HTML still remains while programming in XFORMS.

2.3 DIAL

The Device Independent Authoring Language ([DIAL]) is an XML language profile of XHTML version 2 [XHTML2], XForms [XForms] and Content Selection for Device Independence [DISelect], created by the W3C Device Independence Working Group (now superseded by the Ubiquitous Web Applications Working Group [UWA].

In contrast to (X)HTML, DIAL is intended to the creation of content adaptable (at the server side) to multiple devices and not to direct browser interpretation. DIAL is a general purpose language for publishing hypertextual information in a device independent scenario. The language DISelect provides some interesting constructs for selecting content to be served to different devices, although the same functionality can be easily achieved by means of popular server side technologies (JSP, PHP, etc.). DISelect has the disadvantage of using only XPATH as the expression language used for declaring selections.

At the moment of writing, the DIAL specification is still at the working draft stage (the same as XHTML 2). From an industrial perspective, the XHTML 2 dependency of DIAL is, in our opinion, an issue, due to the uncertain future of XHTML 2. This has been stressed by the fact of the recent decision taken by the W3C of resuming the work under classic HTML (HTML 5).

From a user interface development perspective, due to its XHTML and XForms roots, DIAL suffers the same problems that we have explained in the past sections. Instead of duplicating the same points already explained, we are going to describe some use cases, typically found in the development of ubiquitous user interfaces, that cannot be easily authored in DIAL:

The use cases above are some of the most representative that can be used to demonstrate DIAL lacks. The conclusion is that it is needed a higher level language than DIAL, aimed to facilitate authors task when defining ubiquitous web user interfaces. This new language will allow to use typical user interface patterns in a declarative way, without requiring authors to write tons of unmaintainable markup, script, DISelect sentences and custom server-side adaptation code. This new language should be complementary to DIAL (intended to the general problem of publishing documents in the Ubiquitous Web) and should interoperate with it and DISelect.

2.4 User interface AJAX frameworks and Javascript

The popularization of AJAX-based technologies has rocketed the demand for rich web user interfaces. The foundations of AJAX-based frameworks and toolkits are:

The former facts are the rationale behind the decision taken by several companies to implement Web-based user interfaces in detriment of the traditional Java-based or Windows-based rich clients. Google application suite is the most representative example of this new paradigm of application development.

There are in the market and in the open source space different AJAX frameworks and toolkits that provide user interface components useful for the development rich internet applications. Each user interface component is normally a well-known Javascript object that have to be instatiated within a page. These Javascript objects publish different methods for adding event listeners, modifying the state of the component or adding data. Some of the most representative examples of these toolkits are Dojo and Yahoo controls. When using this programming approach user interface developers and designers are suffering from different problems:

The previous facts lead us to the conclusion that AJAX toolkits are powerful but inmature tools for the development of applications in the ubiquitous web. The lack of standardization and reliance on Javascript has ended up with the deprecation in the usage of markup declarative code in favour of the procedural buggy-prone scripting code.

2.5 Propietary declarative markup languages

In the last years there has been a tendency towards the specification of user interfaces via markup languages. Declarative markups avoids the necessity of writing procedural code in the creation of the structure of the different units of interaction (screens). Additionally, a markup language is more portable than the propietary serialization formats managed by visual programming tools years ago. The most representative examples of this technology are:

Although these languages are powerful and have attracted a big amount of developers, they still present different shortcomings:

The developer community is starting to being conscious about the importance of having a unified, open standard for the declaration of user interfaces and rich internet applications. A good example of this tendency is an open source Apache project, XAP, that defines a language, XAL [XAL], aimed at reducing the amount of Javascript code needed to create AJAX desktop applications. In addition to the open source approach, the XAL project also has the advantage that it is not tied to any AJAX toolkit.

3. MyMobileWeb

MyMobileWeb is a low-cost, modular, open-standards-based, open source software platform that simplifies the development of top-quality mobile applications and portals, providing an advanced content adaptation environment. It includes different modules which cover all the basic requirements that must fulfill a complete and integrated mobile web site, hiding applications all the complexity related to dealing with multiple delivery contexts. MyMobileWeb uses WURFL [WURFL] to recognize and obtain the capabilities of devices. As a value-added feature, MyMobileWeb incorporates some experimental modules capable of exploiting semantics in a mobile environment, implementing the concept of "Semantic Mobile Web". A detailed description of MyMobileWeb can be found in [MMW-mobi].

3.1 MyMobileWeb Features

The most important features implemented by MyMobileWeb are:

Figure 1 .- MyMobileWeb authored unit and CSS

The results achieved in the MyMobileWeb project are demonstrating that declarative markup languages based on abstractions are a powerful approach for developing ubiquitous web applications. All the use cases, presented before, that are not easily managed using DIAL, are resolved by MyMobileWeb without no much effort from the developer. The declarative markup, in addition to CSS, can used for defining user interfaces that are not biased to any device or specific representation. Moreover, well-established user interface technologies, (data binding, declarative validations, etc) can be used to resolve common issues found when doing adaptation, for example, pagination of very long contents.

4 Interface DEscription Authoring Language

Taking into account our experience with the declarative language designed in the MyMobileWeb project, we are making a proposal for a new declarative language intended to the specification of user interfaces in the desktop and ubiquitous web. The figures below illustrate the main ideas and design principles around this new language, called IDEAL (Interface DEscription Authoring Language):

It has been done an initial, preliminary, work to define use cases and requirements for this new language, [DFAUI-Reqs]. Part of this work has been done under the Web Applications Format Working Group, despite of the reluctance of of some of its members (mainly browser vendors) to create a declarative markup for applications. Now it is time to create a specification for this new language, and the brand new Ubiquitous Web Applications Working Group might be the right place to do that.

Interface Description Authoring Language structure     Interface Description Authoring Language structure 2
Figure 2 .- Interface DEscription Authoring Language Vision

5 Conclusions

There is a gap in the area of open, standards-based declarative models for ubiquitous web applications. Technologies such as (X)HTML, XForms or DIAL are incomplete or even not suitable for tackling the issues that arise when designing this kind of applications. The popularization of AJAX technologies have increased the necessity of providing new languages that avoid the dependency on specific toolkits or scripting. In particular these new languages and its abstractions will be very helpful in the area of ubiquitous web applications, where automatic adaptation to different devices or modes of interaction has to be done.

MyMobileWeb, is a complete yet growing open source platform that address some of the challenges found in the area of declarative models for ubiquitous web applications. MyMobileWeb provides a a user interface declarative language independent of the target device or modes of interaction. This language is based on abstract user interface components and containers, which are rendered in different ways depending on the delivery context and/or hints provided by the designer. This platform is working and there are some ongoing projects using it, which demonstrates the viability of our approach.

The experience acquired in the development of the MyMobileWeb project has lead us to start thinking in the standardization of a new declarative language in the area of ubiquitous and desktop web applications. This new language, called IDEAL, should be modular, extensible and capable of interoperating with (X)HTML or DIAL.

The W3C has now the opportunity to lead the activities around the development and standardization of the IDEAL language. This effort should be done in cooperation with the open source and developer communities in order to get the maximum support. We look forward to working and participating (in the context of W3C) in this exciting and rather important subject, which it is critical for the evolution of the Ubiquitous Web.

6 About Morfeo-MyMobileWeb

Morfeo-MyMobileWeb is a project hosted by the Morfeo [Morfeo] open source community, which is sponsored by Telefónica I+D. The ongoing project activities are being funded by the Spanish Ministry of Industry, Tourism and Commerce (MITyC), with Official Project ID FIT-350401-2006-2. The project is sponsored, coordinated and leaded by Telefónica I+D and there are other Spanish companies and institutions participating:

The project has been labeled as an Eureka-CELTIC [EUREKA] [CELTIC] project. As a consequence, a new phase of the project has commenced this year, with the participation of new partners from other European countries. The internationalization of the project will introduce new stakeholders with new use cases, enhancing the features of MyMobileWeb project as a global solution to current problems in the Ubiquitous Web.

A References

AJAX: Wikipedia definition (see http://en.wikipedia.org/wiki/Ajax_%28programming%29).
The Celtic Initiative (Eureka Cluster), (see http://www.celtic-initiative.org).
Compound Document Formats Working Group, Kevin Kelly chairman (see http://www.w3.org/2004/CDF/).
Cascading Style Sheets Home Page, (see http://www.w3.org/Style/CSS/).
"Delivery Context: Interfaces (DCI) Accessing Static and Dynamic Properties", Keith Waters et al., W3C Candidate Recommendation 19 October 2006 (See http://www.w3.org/TR/DPF/.)
Declarative Format for Applications and User Interfaces, Editor's Draft, Coach Wei & José M. Cantera (see DFAUI-Reqs.
Device Independence Authoring Language, Kevin Smith, Vodafone Group. W3C Working Draft 16 May 2006 (See http://www.w3.org/TR/dial/).
DISelect Content Selection for Device Independence (DISelect), R. Lewis et al., W3C Working Draft, 2 May 2005. (See http://www.w3.org/TR/cselection/)
Cascading Style Sheets Home Page, (see http://www.w3.org/DOM/).
Eclipse - An open development platform, The Eclipse Foundation (see http://www.eclipse.org/).
Eureka. A network for market oriented R&D, (see http://www.eureka.be/).
Standard ECMA-262, ECMAScript Language Specification 3rd edition, December 1999, ECMA International (see http://www.ecma-international.org/publications/standards/Ecma-262.htm).
Flash Platform, Adobe Inc. (see http://www.adobe.com/products/flash/platform/).
Macromedia Flex product information, Adobe Systems Inc. (see http://www.adobe.com/products/flex/).
Forms in HTML documents, HTML 4.01 specification, Dave Ragget et al., editors (see http://www.w3.org/TR/html401/interact/forms.html).
HTML 4.01 Specification, Dave Raggett, Arnaud Le Hors and Ian Jacobs, 24 Dec 1999, W3C Recommendation (see http://www.w3.org/TR/html401/).
Java Platform, Enterprise Edition, Sun Microsystems (see http://java.sun.com/javaee/).
JavaScript, Mozilla Foundation (see http://developer.mozilla.org/en/docs/JavaScript).
JavaServer Faces technology, Sun Microsystems (see http://java.sun.com/javaee/javaserverfaces/).
JavaScript Object Notation (see http://www.json.org/).
JavaServer Pages technology, Sun Microsystems (see http://java.sun.com/products/jsp/).
JSR 170: Content Repository for JavaTM technology API, David Nuescheler Specification Lead (see http://www.jcp.org/en/jsr/detail?id=170).
Open Laszlo 4, Adobe Systems Inc (see http://www.openlaszlo.org/).
"Morfeo project", (see http://www.morfeo-project.org).
"MyMobileWeb project", (see http://www.morfeo-project.org/mymobileweb).
"MyMobileWeb - An open source platform for developing .mobi-compliant applications", Jose M. Cantera, 16 Mar 2007.
Java Servlet Technology, Sun Microsystems (see http://java.sun.com/products/servlet/).
PHP Hypertext Processor, The PHP Group (see http://www.php.net).
MOTIF, The Open Group (see www.opengroup.org/motif/).
RSS, (see http://en.wikipedia.org/wiki/RSS_(protocol).)
Swing (Java Foundation Classes (see http://java.sun.com/javase/6/docs/technotes/guides/swing/index.html).
Ubiquitous Web Aplications Activity, Dave Raggett chairman (see at http://www.w3.org/2007/uwa/).
Visual Basic Developer Center, Microsoft Corp. (see http://msdn.microsoft.com/vbasic/).
Web Hypertext Application Technology Working Group, (see http://www.whatwg.org/).
Web Forms 2.0, Ian Hickson, editor (see http://www.whatwg.org/specs/web-forms/current-work/).
Wireless Universal Resource FiLe, Andrea Trasatti, Luca Passani et al (see http://wurfl.sourceforge.net).
XAL, Coach Wei, editor (see http://www.openxal.org.)
Extensible Application Markup Language, Microsoft Corporation (see http://msdn2.microsoft.com/en-us/library/ms747122.aspx).
XML Binding Language 2, Ian Hickson editor, (see http://www.w3.org/TR/xbl).
XForms 1.0 (Second Edition), John M. Boyer et al., March 14 2006, W3C Recommendation (see http://www.w3.org/TR/xforms/).
XForms Transitional, Dave Raggett, 25 March 2007 (Last Update), Editor's Draft for a specification (see http://www.w3.org/2007/03/XForms-Transitional/).
XHTML 1.1 - Module-based XHTML - Second Edition, Shane McCarron and Masayasu Ishikawa, 16 Feb 2007, W3C Working Draft (see http://www.w3.org/TR/xhtml11/).
XHTML 2.0, Jonny Axelsson et al., 26 July 2006, W3C Working Draft (See http://www.w3.org/TR/xhtml2/).
Extensible Markup Language(XML) 1.0 (Second Edition), Tim Bray, Jean Paoli, C. M. Sperberg-McQueen, 2000. W3C Recommendation available at http://www.w3.org/TR/REC-xml.
XML-Schema (see http://www.w3.org/XML/Schema).
XPath 2.0, Anders Berglund et al., W3C Recommendation 23 January 2007 (see http://www.w3.org/TR/xpath20/.
XUL (XML User Interface Language), Mozilla Foundation (see http://www.mozilla.org/projects/xul/).

Valid XHTML 1.0 Strict