ULC OpenDolphin Multi-channel Demo

The following set of applications show how the state of a ULC application can be presented in different UI technologies on multiple channels/devices using OpenDolphin. There are four applications:

  1. A ULC Application : Shares its server side state with other applications using the OpenDophin Event Bus.
  2. A JavaFX desktop application : Uses OpenDolphin Java client to bind JavaFX UI to OpenDolphin Presentation Model and communicate with the OpenDolphin server side application.
  3. A JavaScript application : Uses OpenDolphin JS client to bind JavaScript UI to OpenDolphin Presentation Model and communicate with the OpenDolphin server side application.
  4. A ULC Application with ULCFxBrowser : Runs the above mentioned JavaScript application (with OpenDolphin JS client) inside the ULCFxBrowser.

The OpenDolphin clients (JavaFX and JavaScript) of applications 2 to 4 share the same Presentation Model on the server side. The OpenDolphin JS client can run in a Web Browser on desktop, tablet or a smart phone or even as a native smart phone application when wrapped in PhoneGap. All applications are integrated through the OpenDolphin EventBus. The ULC application uses ULCOpenDolphin component that allows it to subscribe and publish data to the OpenDolphin Event Bus.

Start all four applications by clicking on the respective image below. The ULC, JavaFx and ULCFxBrowser applications are deployed through Java Web Start. You will require JRE 1.7 update 25 or higher. The JavaScript application runs in the Web Browser. A record can be added, modified and deleted by any application. Changes made by any application are reflected in all the other applications.

OpenDolphin JS Client

OpenDolphin FX Client

OpenDolphinJSClient sample OpenDolphinFXClient sample

ULC Client

OpenDolphin JS in ULCFxBrowser Client

OpenDolphinULCClient sample OpenDolphinJSinULCFxBrowser sample

Application Functionality

The following table describes how to use the applications and lists the corresponding OpenDolphin and ULC OpenDolphinAdapter component.

Functionality

Procedure

Features

Add a record There is an Add(+) button at the top in each client. Click on Add(+) button to create add an empty record. Click on Add button creates a client side presentation model (except for ULC client) and adds as a new row. It will also create a corresponding server side presentation model with the same PM id. The applications are subscribed to OpenDolphin Event Bus. If any client adds a new row, a command is sent to OpenDolphin server to create a new presentation model and publish the event to the Event Bus. All the other applications will be notified that a new row is added and so that they can update their presentation model/state.
Update and Save a record Click on a row to select it. The details of the row are shown in the form. Edit the form and click on Save button. On updating the form, the underlying presentation model will be synchronized with the form fields (except for ULC client). There is OpenDolphin client side API for binding JavaScript and JavaFx UIs to the presentation model. For more information visit open-doplhin.org. As soon as you save the record, the event will be published on the Event Bus and other applications will be notified.
Reset the form changes Click the Reset button to reset form changes to their base value. OpenDolphin based applications just call reset on the underlying client side presentation model. Client side presentation model will be reset in case of JS and FX client. For more information visit open-doplhin.org. ULC application does the reset programmatically.
Delete a record Select a record and click on the Delete button. Click on Delete button deletes a client side presentation model (except for ULC client). If any client deletes a row, a command is sent to OpenDolphin server to delete the presentation model and publish the event to the Event Bus. The applications are subscribed to OpenDolphin Event Bus and will be notified that a row has been deleted so that they can update their presentation model/state.

Download source code for the demo from : here.

Copyright (c) 2000-2014 Canoo Engineering AG, Kirschgartenstr. 5, CH-4051 Basel, tel. +41 61 228 94 44. All Rights Reserved.