Ext.ux.WebWorker by Vincenzo Ferrari – Version 1.0.0

Categories

Ext.ux.WebWorker is an extension to manage HTML5 WebWorker with ExtJS and Sencha Touch

Show more

Products:

  • Ext JS 4.0
  • Ext JS 4.1
  • Sencha Touch 2.0

Browsers:

  • Chrome (desktop)
  • Firefox (desktop)
  • IE10+ (desktop)
  • Opera (desktop)
  • Safari (desktop)
  • iOS (mobile)

Screenshots

  • ExtJS-WebWorker

    ExtJS-WebWorker is an extension to handle and use the HTML5 WebWorker with ExtJS.

    Show more

Readme

ExtJS-WebWorker

ExtJS-WebWorker is an extension to handle and use the HTML5 WebWorker with ExtJS and Sencha Touch. It has two classes: Ext.ux.WebWorker and Ext.ux.WebWorkerManager The first one is a wrapper for standard HTML5 WebWorker and it provides a lot of interesting and easy-to-use features. The second one is a singleton to register different Ext.ux.WebWorker and it provides functions to work with every registered webworker at the same time.

Usage

Load Ext.ux.WebWorker and Ext.ux.WebWorkerManager via Ext.require:

Ext.Loader.setConfig ({
    enabled: true
});

Ext.require (['Ext.ux.WebWorker', 'Ext.ux.WebWorkerManager']);

Now, you are ready to use them in your code as follows:

// There are two ways to create a worker: from a file or inline.

// Build a worker from a different file
var ww = Ext.create ('Ext.ux.WebWorker', {
    file: 'myWorker.js'
});

// Build a worker inline
var ww = Ext.create ('Ext.ux.WebWorker', {
    blob: 'onmessage = function (e) {postMessage ("A message from worker: + " e.data);}'
});

// Using Ext.ux.WebWebWorkerManager
Ext.ux.WebWorkerManager.register (ww);

Communications supported

Pure text communication

The communication is text-only, without objects or any other kind of data.

var webworker = Ext.create ('Ext.ux.WebWorker', {
    file: 'myWorker.js' ,
    listeners: {
        message: function (ww, message) {
            console.log ('A new message is arrived: ' + message);
        } ,
        error: function (ww, error) {
            Ext.Error.raise (error);
        }
    }
});

Pure event-driven communication

The communication is event-driven: an event and a String or Object are sent and the webworker handles different events.

var webworker = Ext.create ('Ext.ux.WebWorker', {
    file: 'myWorker.js' ,
    listeners: {
        message: function (ww, message) {
            console.log ('A new message is arrived: ' + message);
            ww.send ('parse', 'a string to parse');
            ww.send ('verify equation', {
                equation: 'x+y-z=10' ,
                x: 10 ,
                y: 5 ,
                z: 5
            });
        }
    }
});

// A 'terminate' event is sent from the worker (myWorker.js)
// 'data' has 'log' and 'msg' fields
webworker.on ('terminate', function (data) {
    console.log ('Log: ' + data.log);
    console.log ('Message: ' + data.msg);
});

Mixed communication

The communication is mixed: it can handles text-only and event-driven communication.

var webworker = Ext.create ('Ext.ux.WebWorker', {
    file: 'myWorker.js' ,
    listeners: {
        message: function (ww, message) {
            console.log ('Text-only message arrived is: ' + message);

            ww.send ('parse', 'a string to parse');
            ww.send ('verify equation', {
                equation: 'x+y-z=10' ,
                x: 10 ,
                y: 5 ,
                z: 5
            });
        }
    }
});

// A 'terminate' event is sent from the worker (myWorker.js)
// 'data' has 'log' and 'msg' fields
webworker.on ('terminate', function (data) {
    console.log ('Log: ' + data.log);
    console.log ('Message: ' + data.msg);
});

Ext.ux.WebWorkerManager features

Here's an example of the manager:

var ww1 = Ext.create ('Ext.ux.WebWorker', {
    file: 'myWorker.js'
});

Ext.ux.WebWorkerManager.register (ww1);

var blob = [
    'onmessage = function (msg) {' ,
    '   if (msg.event === "system shutdown") {' ,
    '       var res = {' ,
    '           event: "stop" ,' ,
    '           data: "Computation of worker 2 terminates correctly in 15h13m20s."' ,
    '       };' ,
    '       postMessage (res);' ,
    '   }' ,
    '}'
].join ('');

var ww2 = Ext.create ('Ext.ux.WebWorker', {
    blob: blob
});

Ext.ux.WebWorkerManager.register (ww2);

var ww3 = Ext.create ('Ext.ux.WebWorker', {
    file: 'otherWorker.js'
});

Ext.ux.WebWorkerManager.register (ww3);

Ext.ux.WebWorkerManager.listen ('stop', function (ww, data) {
    Ext.Msg.show ({
        title: 'Worker stopped' ,
        msg: 'Log of the computation: ' + data ,
        icon: Ext.Msg.INFO ,
        buttons: Ext.Msg.OK
    });
});

// This will be handled by everyone
Ext.ux.WebWorkerManager.broadcast ('system shutdown', 'BROADCAST: the system will shutdown in few minutes.');

Ext.ux.WebWorkerManager.stopAll ();

Ext.ux.WebWorkerManager.unregister (ww1);
Ext.ux.WebWorkerManager.unregister (ww2);
Ext.ux.WebWorkerManager.unregister (ww3);

Run the demo

Under construction

Documentation

You can build the documentation (like ExtJS Docs) with jsduck:

$ jsduck ux --output /var/www/docs

It will make the documentation into docs dir and it will be visible at: http://localhost/docs

License

The MIT License (MIT)

Copyright (c) 2013 Vincenzo Ferrari wilk3ert@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Version History

  • Version 1.0.0

    Description:

    ExtJS-WebWorker is an extension to handle and use the HTML5 WebWorker with ExtJS.

License

Other extensions by Vincenzo Ferrari

  • Screenshot

    Ext.ux.WebSocket

    ExtJS-WebSocket is an extension to handle and use the HTML5 WebSocket with ExtJS.

  • Screenshot

    Ext.ux.Deferred

    Javascript promises for ExtJS and Sencha Touch

  • Screenshot

    Ext.ux.GMapManager

    Manager of Google Maps. This singleton provide some useful functions to manage multiple Google Maps with multiple markers each. Github source code: http://github.com/wilk/Ext.ux.GMapManager

  • Screenshot

    Ext.ux.Ajax

    Ajax singleton revisited based on javascript promises

  • Screenshot

    Ext.ux.data.proxy.WebSocket

    An easy-to-use implementation of the ExtJS/Sencha Touch proxy, using HTML5 WebSocket.

Other extensions in tools

  • Screenshot

    Sencha Touch 2 Theme Builder

    A tool to build Sencha touch 2 themes

  • Screenshot

    DVelum

    DVelum is a quick development platform based on ExtJS framework and PHP + MySQL on the server side. The platform opportunities allow to create a ready-to-go application in minutes without using complex XML configuration files, all settings being adjusted in visual interfaces. Automatically generated interfaces are easy to modify with the help of built-in layout designer.

  • Screenshot

    Pinch emulator plugin for Sencha Touch

    Emulation of double touch pinch events for desktops. Can be useful for testing of pinch enabled components on desktop.

  • Screenshot

    jasmine-sencha

    Sencha Touch and Ext JS adaptor for Jasmine

  • Screenshot

    Remote internationalization

    Remote i18n is a set of resources meant to help developers internationalizing their ExtJS applications. Whereas creating several builds (one for each language), at Jnesis, we created an easy way of translating an application content with remote translations before application starts. The resources provided are a package and a sample application to show how it can be implemented.

Reviews

Be the first to leave a review.