• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2/19 regular meeting paper

2/19 regular meeting paper






Total Views
Views on SlideShare
Embed Views



4 Embeds 75

http://liouville.blogspot.com 37
http://web204seminar.blogspot.com 30
http://liouville.blogspot.tw 7
http://web204seminar.blogspot.tw 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    2/19 regular meeting paper 2/19 regular meeting paper Presentation Transcript

    • 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
    • OutLine
      • OpenXUP OVERVIEW
      • 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
    • 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
    • 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
    • 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)
    • 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.
    • 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.
    • Framework Components
      • Consistent with the web architecture , OpenXUP is client/server-based and uses existing web protocols (HTTP and SOAP)
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.