Kevoree Browser Runtime

[maxleiko]

Here you can test the new browser runtime http://runjs.kevoree.org This is supposed to be a responsive application, so your mobile phone should be able to use it too (just be sure to use a WiFi connection at least or be ready to wait)

The main goal of this runtime is to be able to give kevoree-js components an UI within a browser.
As an example, you can have a look at the Kevoree Javascript Standard Library components:

• Ticker
• ConsolePrinter
• Chart
• MsgSender

If you want to have a component with an UI in the Kevoree Browser Runtime, you have to provide several mandatory files:

• browser/kevoree-comp-.min.js
• browser/kevoree-comp-.html

The name must be the one of your DeployUnit (which is your npm module name)

And some optional ones:

• browser/kevoree-comp-.js
• browser/ui-config.json

The two .js files can be generated by using Grunt tasks
For instance in this Gruntfile, you have the tasks browserify and uglify that will handle the generation of the *.js files for you.

Note that the uglify task is really time-consuming, so you might want to disable it while developing your own components

The browser/ui-config.json file is a description file that you will need if you want to add external libraries/css to your UI (but I will explain that later)
The browser/kevoree-comp-.js browserified file is for DevMode only. Because it is not uglified, the debug is easier :)

Last, but not least, you will need to add a control method for your UI in your component. This control method must be named uiController and must return your actual AngularJS controller wrapped in an array with your depencies injection names (to prevent uglifying task to change the name of those parameter as AngularJS with naming-convention) As an example (taken from the Ticker component ):

uiController: function () {
        var that = this;
        return ['$scope', '$interval', function ($scope, $interval) {
            $scope.name = that.getName();
            $scope.value = that.value || '<no tick yet>';
            $scope.count = that.count;
            $interval(function () {
                $scope.value = that.value;
                $scope.count = that.count;
            }, 1000);
        }];
    }

Now, you can also use the parameter instance as a depency injected parameter of your controller method to get a reference to your current component instance (instead of using the famous var that = this)

uiController: function () {
        return ['$scope', '$interval', 'instance', function ($scope, $interval, instance) {
            $scope.name = instance.getName();
            $scope.value = instance.value || '<no tick yet>';
            $scope.count = instance.count;
            $interval(function () {
                $scope.value = instance.value;
                $scope.count = instance.count;
            }, 1000);
        }];
    }

This is a basic AngularJS controller that allows you to retrieve your data (from $scope) in your view :)