• Home
  • Events
  • About
  • One Page Searchable/Linked JavaScript API Guide

    May 30th, 2013

    Many of us here at Canoo are dedicating more and more time to really learning JavaScript… We’ve already run through a few mobile-based JavaScript projects and the amount of Angular.js projects is definitely growing. So now seems like a good time to dig deep (or take a second-look) into JavaScript.

    The new application frameworks are exciting, but you won’t get far without a good understanding of the core JavaScript API. That’s why we made ourselves a Core JavaScript cheatsheet.

    It’s all in one page, so you can search without clicking or navigating. And all the links refer back to the Mozilla documentation. So if you’re tired of shuffling through documentation trying to remember the parameter order for Arrays.reduce, then this is the thing for you. Just click the big image and away you go!

    JavaScript Cheatsheet

    JavaScript Cheatsheet

     

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Git and GitHub training with Tim Berglund

    May 29th, 2013

    How and when were the source text changed? This question is quickly resolved using a version control system. While the majority of people have been working with central systems such as CVS or SVN until now, more and more developer teams are switching to the distributed system Git. Last Monday Canoo offered those who are interested in the potential future deployment of Git the opportunity to participate in a Git and GitHub training session. Course instructor Tim Berglund explained how to use VCS effectively and not least the benefits for software projects due to distribution. Feedback from the participants was an unanimous thumbs up!

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    New version of the CanooNet app for iPhone

    May 17th, 2013

    Great news for all fans of the CanooNet app – the new version makes your iPhone even more eloquent. The comprehensive reference for the German language contains around 5,000 new dictionary entries and returns supplementary information on over 10,000 search results. What’s more, the offline app is now compatible with iOS 6. You can acquire the latest version 3.2 of the CanooNet app quickly and easily in the app store. We trust you will enjoy trying out the enhanced features!

    And please note: the CanooNet app is available for 5.99 € until June 30, 2013. You save 60%!

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    AfterburnerDolphin – Effective enterprise JavaFX development

    May 17th, 2013

    OpenDolphin

    During the last JavaOne, Canoo announced the open sourcing of Dolphin.
    OpenDolphin is a library that provides a remoting solution to bridge the world of Enterprise Java and Desktop Java or other client technologies (mobile, web).

    Since then, a lot has happened around OpenDolphin and it keeps gaining more and more attention.
    For me personally, it was from the first time I heard of it a very interesting project, but due to daily business and other projects I didn’t have the time to get into it.
    Using JavaFx as the first client technology to be implemented was also a little hurdle as I haven’t done any serious work with JavaFX, yet. But now, I’ve finally found some time to play with JavaFx and OpenDolphin ;-).
    (Besides, there is an JS implementation of OpenDolphin – it proves that OpenDolphin doesn’t tie you to a client UI technology.)

    Afterburner.fx

    As I attended to Adam Bien’s Airhacks Workshops in March, he introduced the Afterburner.fx mini-framework to the audience and released it a few days later.

    Afterburner.fx is a minimalistic MVP framework for JavaFX that provides
    “Zero-Configuration” dependency injection (DI) of models and services
    and
    Convention-based unification of presenter, view, FXML and css.

    ScenceBuilder

    Thus it enables the usage of the JavaFX scene builder (a UI design tool) to implement a clear seperation of layout and logic (as the layout is encapsulted in the xml). In his talk “Enterprise JavaFX 8” Adam describes it as an implementation of “inversion of control”.
    The outcome is a very powerful set of lightweight technologies to build JavaFx applications.

    The wiring between the UI XML and the code a pretty minimal. On the one hand, in XML, you just need to define the controller class:

    And optionally, event handler methods can also be set via XML with

    In the code, the UI components get injected by the @FXML annotation and the name used as fx:id :

    Combine the power

    My idea on the moment I saw it was to bring those two projects together to benefit from the features of both projects:

    • A clean and easy way to create the UI and build up the client
    • a powerful and non the less easy to use library for client-server communication and clear speration between logic on the server-side and UI-related code on the client with open-dolphin.

    AfterburnerDolphin

    You can find the outcome of this idea at my AfterburnerDolphin project at github.

    It demonstrates the things mentioned above:

    client structure

    In the client module, you can find a clearly structured app, the design and layout clearly seperated (as extracted to xml and css files) from the logic (look at the App class and the DemoPresenter).

    It’s all tied together via DI and convention-based confguration of afterburner.fx .

    The client creates a PresentationModel and binds the button text value to the value of that model.
    (DemoPresenter, Line 43)

    On a button click, the client communicates via OpenDolphin with the server (server module, ApplicationAction) where the command for a new value (current date) of the presentation model’s attribute is created and send as a response.

    (ApplicationAction, Line 17)

    That demonstrates how easy this set of technologies lets you set up a well structured multi-tier application 😉 and implement a roundtrip between client and server.

    Any business logic can be handled on the server, the client only need to implement the presentation. And the implementation and maintenance of the client UI is eased up by the clear structure implemented with the help of afterburner.fx .

    The UI of this sample application is very simple, as you can see from the screen shot – before and after click on the button. The date used as die new button text is set on server side.

    demo-beforeclickdemo-afterclick

    Conclusion

    I think, the combination of AfterBurner.fx and OpenDolphin provides a very powerful featureset.
    At first, it’s easy and quick to setup and design UI Layout with Scence Builder.
    After that, AfterBurner.fx and OpenDolphin allow you to build an application with clear, distinct seperation between layers:

    • UI layout (in XML)
    • UI logic (in client code)
    • Business Logic (and more) (in server code)

    You can be up and running very quickly with a short time to initiate application development. With the clear seperation, I would expected the setup to provide the foundation for a very maintainable project.
    And with OpenDolphin you protect your investment as you can very quickly provide an multi-channel application (providing an mobile app UI based on the already developed server code) or switch to another UI technology and reuse the business logic implemented on server side.

    Further steps

    Fork AfterburnerDolphin on github.

    Find out more about Afterburner.fx, visit the Afterburner.fx Homepage.

    Get more information on OpenDolphin with the OpenDolphin documentation.
    Or look at the OpenDolphin videos on youtube.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    dolphin.js – going multi-channel with OpenDolphin

    May 13th, 2013

    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.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    css.php