Financial Application Example

Fin App
Twitter Bootstrap
Angular

Description

This example emulates a real-world financial/trading application.

It uses AngularJS as the main framework, Twitter Bootstrap for the presentation/layout and, of course, jQuery.

Download


Installation

You can either use the hosted version of this application, or download the files using the link above and host it yourself.

Using the hosted version:

Self-hosting: first, download the example using the link above and point Wesk to the unzipped folder containing the example:


Which parts of Wesk are demonstrated in this application?

Pretty much every functionality of Wesk is demonstrated in this application:

Window Management using attributes

To see this in action, take a look at menu.template.html:

<li><a href="graph.html" wesk="Charts" wesk-width="800" wesk-height="600">Charts</a></li>
<li><a href="notifications.html" wesk="Notifications" wesk-width="800" wesk-height="237">Notifications</a></li>
<li><a href="windows.html" wesk="Windows" wesk-width="800" wesk-height="600" wesk-left="250">Windows</a></li>

Opening, closing, moving, resizing

The files contain many examples, but here are the main ones:

/app/home/home.controller.js

$scope.refresh = function() {
    // Here, wesk.ready() is not necessary since this is a user action.
    // In other words, by the time the user clicks on Refresh, Wesk will be loaded.
    wesk.getAll().then(function(windows){
        $scope.windows = windows;
        $scope.$apply();
    });
};
$scope.close = function(win) {
    wesk.close(win.id);
};
$scope.maximize = function(win) {
    wesk.maximize(win.id);
};
$scope.minimize = function(win) {
    wesk.minimize(win.id);
};
// When calling functions that are going to be called on page load (such as onWindowEvent here),
// always use the wesk.ready(fn) function to make sure Wesk is properly loaded.
wesk.ready(function() {
    wesk.onWindowEvent(function() {
        $scope.refresh();
    });
    wesk.screens().then(function(screens){
        $scope.screens = screens;
        $scope.$apply();
    });
    $scope.refresh();
});

/app/windows/windows.controller.js, the random resize function:

$scope.randomResize = function() {
    wesk.resize(
        $scope.manualWindow.width + Math.random()*10-5, 
        $scope.manualWindow.height + Math.random()*10-5, 
        $scope.manualWindow.id).then(function(updatedInfo){
            $scope.manualWindow = updatedInfo;
            $scope.$apply();
        });
};

Using the monitor information

One screen is dedicated to showing how you can use your monitor information (size and position) to display windows that fit your screen (with a bit of math!)

The magic is in the file /app/menu/menu.controller.js because it runs when you click the Ticker Map menu item (on the menu template)

The function will basically try to fit as many Ticker windows as possible on your first screen – adjusted perfectly to your work area:

$scope.openTickers = function(){
    wesk.screens().then(function(screens){
		// 713 x 190
        var targetWidth = 713;
        var targetHeight = 190;
        var screen = screens[0]; // Take the first screen
        var xCount = Math.floor(screen.workingArea.width / targetWidth); // Find out how many of these we can fit horizontally
        var yCount = Math.floor(screen.workingArea.height / targetHeight); // Find out how many of these we can fit vertically
        var calculatedWidth = screen.workingArea.width / xCount; // Recalculate each window width so it fills the entire screen
        var calculatedHeight = screen.workingArea.height / yCount;
        for (var x = 0; x < xCount; x++) {
        	for (var y = 0; y < yCount; y++) {
        		var xPosition = (x * calculatedWidth) + screen.workingArea.x;
        		var yPosition = (y * calculatedHeight) + screen.workingArea.y;
        		wesk.open('ticker.html', 'Ticker', calculatedWidth, calculatedHeight, xPosition, yPosition);
        	}
        };
    });
}

Communication between two windows

Two different screens are needed for this. One for sending messages and the other for receiving them.

You can of course have multiple senders (who will all be able to send messages), and multiple receivers (who will all receive the messages at the same time)

The code lives in /app/communication/comone.controller.js and /app/communication/comtwo.controller.js.

Here is the sending bit: it couldn't be simpler:

$scope.sendMessage = function() {
    wesk.coms.publish('myTopic', $scope.message);
};

And the receiving bit: not very difficult either:

wesk.ready(function() { // Wesk needs to be ready to be able to register message topics
    wesk.coms.on('myTopic', function(message) {
        $scope.messages.push(message);
        $scope.$apply(); // Tells Angular that something changed
    });
});

Desktop Notifications

A very simple example of desktop notifications:

$scope.sendNotification = function(){
    wesk.notify($scope.title, $scope.message).then(function(isDone){
        console.log("A notification was displayed!"); // Not compulsory
    });
}