Industrial Projects‎ > ‎MarcoFlow‎ > ‎

MarcoFlow Demo

Demo Scenario 1: Home Assistance

In this demo, we want to develop an application that supports the scenario graphically described in Figure 1: A patient can ask for the visit of a home assistant (e.g., a paramedic) by calling (via phone) an operator of the home assistance service. Upon request, theoperator inputs the respective details into his management console and inspects the patient’s data and personal health history in order to provide the assistant with the necessary instructions to assist the patient. The home assistant views the description in his own application, visits the patient, and files a report about the provided service. The report is processed by the back-end system and archived. If no further exams are needed, the UI orchestration ends. If exams are instead needed, the respective details need to be sent to the operator so that he can book the exam in the local hospital, asking the patient for confirmation (again via phone). Upon confirmation of the exam booking, the system also archives the booking, which terminates the responsibility of the home assistance service.

(click image to enlarge)

Figure 1 The distributed UI orchestration to be developed during the demo. The gray arrows indicate synchronization or orchestration points; they number labels indicate their order in time.

Our goal is to develop an application that supports this process. This application includes, besides the process logic, two mashup-like, web-based control consoles for the operator and the assistant that are themselves part of the orchestration and need to interact with (and are affected by) the evolution of the process. Furthermore, the UI is itself component-based and created by reusing and combining existing UI components (each of the two pages in Figure 1 is, for instance, composed of four UI components). For each new request, the operator starts a new instance of the application, raising the need for correlation of services and UI components.

If we analyze the scenario, we see that the envisioned application (as a whole) is highly distributed over the Web: The UIs for the actors participating in the application are composed of UI components, which can be components developed in-house (like the New Request component) or sourced from the Web (like the Map component); service orchestrations are based on web services. The UI exposes the state of the application and allows users to interact with it and to enact service calls. The two applications for the operator and the assistant are instantiated in different web browsers, contributing to the distribution of the overall UI and raising the need for synchronization.


Screen cast of demo  [MOV]

Demo Scenario 2: Distributed Search 

In this demo we show a simple UI orchestration example, which however allows us to showcase most of the features of UI orchestration. Specifically, we show how we develop a distributed application that is composed of two web pages that are operated by two different actors in parallel. The first page (we call it the Master page) allows its user to perform Yahoo! Local searches (step 1 in Figure 2) and to view search results not only in text form, but also by placing them onto a Google map (step 2). Each time the user of the Master page performs a new search, the result set he obtains is shared with the user in the Slave page (step 3), which is so able to view the same information as the user of the Master page. In addition, we also want to allow the user of the Slave page to locate search results on a Google map (step 4), but indipendently of the interactions of the map in the Master page.

(click image to enlarge)

Figure 2 The distributed search scenario

This simple example allows us to showcase the three main features of MarcoFlow:

  1. Intra-page UI synchronization: steps 2 and 4;
  2. Distributed UI synchronization: step 3; and
  3. Web service orchestration: step 1 (in order to perform the search, we need to interact with an external web service).


Screen cast of demo

 AdditionalInfo: Here