Module: Client - ninazeina/SXP GitHub Wiki

Role

The client is an HTML-based GUI.
It is written in Javascript/CSS using AngularJS and Bootstrap, and packaged as an electron app.

Advice

To understand the code:

read non-nodule specific SXP wiki pages.
read this wiki page first.
read index.html and app.js, follow from there.

An alternative to electron to run the GUI, is to directly use chrome and its DevTools:

google-chrome --disable-web-security --user-data-dir html/index.html
Crtl-Shift-I

You get much more debugging information. It may even be used to edit, as an alternative to keeping an open atom.io or eclipse pane.

Subpackages

html : our html pieces
modules : our js code
libs: standard libraries
css, client/fonts.

Technologies used

Electron

The GUI is HTML-based. Often this is not so easy to run, either because of browser security policies or having to run a local server etc. Electron is a way to make your HTML-based front-end into standalone application, with Chromium built into it. A synthetic introduction is here. Electron-packager makes the result into a single executable file for you platform.

Bootstrap

Boostrap (BS) just makes HTML nicer and responsive. Basically, you import the BS CSS style sheet and the BSS library, and that is it: you now have access to more tags, with more parameters, with more responsive behaviour. See for instance this and that.

AngularJS

AngularJS makes it easy to have an HTML View, which is the View of a Model and a Controller written in JS. In particular, it lets you easily

Bind contents from the View, with variable of the Model, i.e. changing one changes the other
Change part of the view according to states of the Controller.

A synthetic introduction is here. Here are some AngularJS things that are helpful to know for a quick start:

With declarations like

<html ng-app="app">
...
<body ng-controller="appController as app">
...
<div ui-view></div>

the tag ui-view is the placeholder for the View. The app.js file specifies the Model; that is the variables declared within:

module.controller('appController', function($rootScope) {
 this.title = "SXP network";
 ...

Then, different js modules may contain different pieces of the Controller and Views. This works as a state machine, to each state we associate an appearance (View, html code), a controller function (Controller, js code), and an http route to enter that state via url.

module.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/', //route
                templateUrl: 'home.html', //appeareance
                controller: ...//controller function

The variables of the model can be accessed with $scope.app.title within js code, and with ̀{{app.title}} (1-way) or ng-model=... (2-way) within html code. The state of the model can be changed with $state.go('home') within js code, with <a href ui-sref='home'>...<\a> within html code, or by accessing the corresponding route url.

AngularJS also provides ways to conveniently access resources from the backend:

var user = User.get({id: $scope.app.userid,function() {$scope.user = user;});
//In the beginning user is created empty. It will be filled in as the data gets retrieved.
//I know that is has been filled when the anonymous function gets called.
//I can then save the result in scope.user

By simply declaring such a resource:

module.factory('User', function($resource) {
    return $resource(RESTAPISERVER + '/api/users/:id',
        //Just specified the route to access the resource.
        //The :id will become and id=... if a value for it is specified
        {
            id: '@id'
        },
        //Just specified where to get this value from.
        //E.g. if calling User.get(obj), if obj has attribute id, take its value.
        {
            update: {
                method: 'PUT'
            }
        });
});

See here.