• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. OpenXUP─an Alternative Approach to Developing Highly Interactive Web Application
    • Jin Yu Boualem Benatallah Fabio Casati
    • Proceedings of the 6th international conference on
    • Web engineering
    • Reporter : Che-Min Liao
  • 2. OutLine
    • Ideally , web application should have the same level of productivity as traditional desktop applications :
      • High usability
      • Secure client environment
      • Low latency
      • Consistent look and feel
    • From the developer’s point of view , a development framework should include following features :
      • Familiar programming model with a rich UI toolset
      • Hiding the network complex
      • Centralized administration
    • The web development community has been trying to address them with different approaches :
      • Java Applet
      • AJAX
    • Both approaches have some limitations
    • To satisfy the above requirements and overcome limitation existing approaches , we propose a framework called OpenXUP
      • For developers , the framework provides a programming environment that closely resembles desktop applications.
      • For end users , the framework aim at bringing web applications closer their desktop counterparts
    • To illustrate the requirements of a rich web UI environment , we show an example application , XCat
  • 6. Using Existing Web UI Technologies
    • Technologies such as Java Applet , ActiveX , and .NET Smart Client :
      • As the user interface and application logic become more complex , the file that needs to be downloaded becomes larger and larger
      • The applet approach also requires developers to maintain two pieces of code , one for the client side and one for the server side
      • Developers need to take care of the communications between the applet and the server side
      • The execution of downloaded code by the client may impose security risks to the end user’s computer
  • 7. Using Existing Web UI Technologies
    • AJAX (Asynchronous JavaScript + XML) :
      • It is constrained by the capability of DHTML and browser’s JavaScript engine
      • UI code is fairly scattered
      • Some UI code needs to be on the server side (e.g. page transitions)
    • IDEs such as Microsoft Atlas :
      • Large scale JavaScript programming is harder to maintain and debug than traditional programming languages like Java
      • Developers have to master multiple languages , JavaScript and DHTML on the client side , and another language (e.g. Java 、 C#) on the server side
    • A key component of OpenXUP is the Extensible User Interface Protocol ( XUP )
      • A SOAP-based protocol for communicating events and incremental user interface changes on the web
      • UI events can be delivered from the client to the server asynchronously
      • User interface changes are delivered from the server to the client as incremental updates , not one full page at a time
    • On the server side :
      • OpenXUP offers a set of event-driven APIs , which are designed to be familiar , closely resembling the APIs from desktop GUI toolkits
      • All application code resides on the server side , it makes web application easier to debug and maintain
    • On the client side :
      • The client fully leverages the rich UI capability offered by native desktop GUI toolkits such as Windows Forms and Java Swing
      • The client renders UI and processes native events , but leaves application specific logic to the server side
  • 10. Background
    • A UI model is a representation of the user interface which the end user perceives and interacts with :
      • A tree of UI components (e.g. buttons 、 panels)
      • A set of events (e.g. mouse click)
      • A list of resources (e.g. button images)
    • UI models may have XML-based representations. We call these representations UI languages :
      • XUL (XML User Interface Language)
      • XAML (Extensible Application Markup Language)
      • UIML (User Interface Markup Language)
      • SUL (Simple User Interface Language)
  • 11. Background
    • Listing 1 shows an example UI model. The root of the UI model is a window ; within it there is a panel which contains two push buttons.
  • 12. Background
    • UI definition is a description of user interface.
    • UI definition is typically coded in declarative languages such as XUL and HTML.
    • UI logic contains code that handles UI events and communicates with application logic code.
    • UI logic is typically coded in a programming language. For example , in Java Applet , it is Java , and in AJAX , it is JavaScript.
  • 13. Framework Components
    • Consistent with the web architecture , OpenXUP is client/server-based and uses existing web protocols (HTTP and SOAP)
  • 14. Framework Components
    • The XUP client has two main tasks :
      • To manage the interaction with the end user (display UI components and capture UI events)
      • To communicate with the server (transform UI events to XML messages and then send them to the server ; receive UI updates in XML messages from the server and then render them)
    • The XUP server process event requests from the client and send back component and resource updates in the response.
  • 15. Framework Components
    • The server side includes application-specific code (XUP application ) provided by application developers
    • The server side middleware components :
      • Application manager
      • Event dispatcher
      • XML serializer
    • XUP application developers use the set of event-driven APIs provided by the server to process events and update the UI.
    • An event handler is a piece of code in the XUP application. The server invokes the application by calling registered event handlers upon receiving event request.
  • 16. Location of UI and Application Code
    • In the applet approach :
      • Both UI definition and UI logic are programmed , rather than declared.
      • Both UI definition and UI logic are on the client side.
      • Most of application logic is on the server side.
    • In the AJAX approach :
      • UI definition is provided by HTML , and the UI logic is programmed in JavaScript.
      • Both UI definition and UI logic are on the client side.
      • Most of application logic is on the server side.
  • 17. Location of UI and Application Code
    • In OpenXUP :
      • UI definition is provided by UI languages such as XUL or SUL.
      • UI logic is programmed.
      • UI definition is executed on the client side.
      • UI logic is executed on the server side.
      • Application logic resides on the server side.
  • 18. Protocol Messages
    • The runtime behavior of the framework can be described in three phases of protocol message exchanges :
      • Startup─the end user starts by establishing a session with an XUP application
      • User Interaction─the end user interacts with the application which causes events and UI updates to be exchanged between the client and the server.
      • Session Termination─the end user terminates the session with the application.
  • 19. Startup
    • The client beings by sending a startup request , which includes the name of the application and a list of UI model namespaces supported by the client.
    • The server locates the application through the application manager and creates a user session.
    • The server then creates an initial UI model
    • Then the server sends a response through the XML serializer , including the session ID and the initial UI model.
    • The client renders its initial UI model through view manager.
  • 20. User Interactions
    • After the startup phase , the end user interacts with the application by manipulating the UI view , which triggers native UI events.
    • The view manager will capture those native events and send them to the server through the XML serializer.
    • Upon receiving an event request , the server locates the XUP application and user session , and passes the event to the event dispatcher
    • Event handler execute the necessary application logics and update the UI model.
  • 21. User Interactions
    • The server then returns the UI model updates to the client.
    • The client receives the XUP response and then updates its UI component.
  • 22. Session Termination
    • There are multiple ways for an end user to terminate the session with an XUP application :
      • A particular event on a UI component may be interpreted by the application as a termination notice.
      • The end user may explicitly exit the application by instructing the client to send a shutdown request to the server.
      • The server may close the user session due to inactivity.
  • 23. Implementation
    • Currently the client is implemented in .NET ; it can be deployed as a standalone windows program or as a browser plug-in.
    • The server is a toolkit running inside the ASP.NET web application server , offering a set of event-driven APIs for application development.
    • RemoteJFC
    • XWeb
    • XForms
    • Macromedia’s Flex framework
    • X11
    • NeWS
    • VNC
    • DPS
    • OpenXUP offers richer and morepowerful UI component.
    • Users will perceive much faster response time.
    • OpenXUP offers a secure client environment.
    • For developers , OpenXUP offers an efficient UI development environment , similar to their familiar desktop GUI toolkits.