• Home
  • Events
  • About
  • dolphin.js – going multi-channel with OpenDolphin

    The OpenDolphin approach to client-server applications has many known benefits, here are just the most important ones:

    • clear separation of what to display (server) and how to display (client)
    • application logic on the server (efficiency and protection of investment)
    • full exploitation of the native clients capabilities (fidelity)
    • generic presentation models (independence of client and server)

    These benefits derive mainly from a client-server split at the presentation model layer.

    Read more about the architecture and concepts in the online documentation or have a look at the extensive set of sample applications:

    JavaFX as a modern Java UI toolkit is certainly a natural choice to go along with OpenDolphin on the Java client. But the clear separation of concerns (what and how to display) makes it easy to deploy any UI framework on the client. In the demos you’ll find examples of JavaFX and Swing clients that happily coexist with exactly the same server code.

    Since the costs to switch the client technology are fairly low with OpenDolphin, going web and mobile is the next logic step. Dolphin.js leverages exactly that potential.

    Dolphin.js is an OpenDolphin client implementation in JavaScript allowing you to connect your web application to an OpenDolphin server. It follows the same concept as the Java implementation, therefor most of your OpenDolphin knowledge is applicable to it.

    The usage of Dolphin.js is best introduced with an example. You’ll find the Dolphin.js jump start project in Canoo’s github account. A video of the jump start application can be found here.

    Dolphin.js uses require.js for modularization which is an AMD implementation. Dolphin.js integrates into your JavaScript project as follows (head section):

    <script type=”text/javascript” src=”../scripts/require.js”></script>
    <script type=”text/javascript” src=”../scripts/dolphin.min.js”></script>
    <script type=”text/javascript” src=”config.js”></script>

    It is important to list the require.js dependency first. In config.js you can define external dependencies to third party libraries. Your application runs as an AMD module (body section).

    Any dolphin.js app is structured as follows:

    require([
        'Dolphin',
        'comm/ClientAttribute'
    ], function (Dolphin, ClientAttribute) {
        var url = window.location.protocol + ‘//’ + window.location.host + “/dolphinServer/tutorial/”;
        var dolphin = new Dolphin({ serverUrl: url, clearSession: true });
         // your app code here
     }

    ‘Dolphin’ is the core module and required for any app. Typically you want to create a presentation model with client attributes, therefor you need ‘comm/ClientAttribute’ as well. The Dolphin constructor takes the (Dolphin) server URL and optionally a flag if the browser session should be cleared upon reload. Once you have a Dolphin instance you are ready to create and bind your UI to the presentation model.

    The following snippet creates a presentation model with a ‘temperature’ client attribute and binds it to an HTML input field:

            var tempAttr = new ClientAttribute(“temperature”);
            var weatherMold = dolphin.getClientDolphin().presentationModel(
                “weatherMold”,
                “weather”,
                tempAttr
            );
            var tempInput = document.getElementById(“tempInput”);
            tempInput.addEventListener(“input”, function () {
                var value = tempInput.value;
                tempAttr.setValue(value);
            });
            tempAttr.on(“valueChange”, function(data) {
                tempInput.value = data.newValue;
            });

    The binding to the temperature attribute is stable and reflects any changes in the input field or model vice verse.
    Binding to individual HTML elements is the most basic integration which works with any JavaScript framework.

    Future version of dolphin.js will support direct integration in JS frameworks such as backbone.js and angular.js which provide model-view bindings out of the box.

    The code example shown is only the most basic usage of Dolphin.js. For a master-detail and a server push implementation have a look at the jump start project code. Dolphin.js is very lean (currently around 700 lines of code) so it’s straightforward to read through the source code. The jump start project also features a mobile (JavaScript) client.

    Our experience in porting the Dolphin from Java to JavaScript shows that specific ports to native mobile plattforms as iOS and Android are feasible and the next step.

    Dolphin.js demonstrates the inherent multi-channel capabilities of OpenDolphin. With such an approach you no longer have to bet on the next UI client technology, but rather are able to react quickly to changing UI demands at the least possible costs.

    Get in touch with us for more information on OpenDolphin and it’s multi-channel capabilities.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • DZone
    • Y!GG
    • Webnews
    • Digg
    • del.icio.us
    • DotNetKicks
    • Facebook
    • Google Bookmarks
    • Newsrider
    • Twitter
    • YahooBuzz

    Leave a Comment


    9 − six =

    css.php