Nunjucks Powers Mozilla

    sixtyfps
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    SixtyFPS-node

    npm

    SixtyFPS is a UI toolkit that supports different programming languages. SixtyFPS-node is the integration with node.

    The complete C++ documentation can be viewed online at https://sixtyfps.io/docs/node/.

    Warning: Pre-Alpha SixtyFPS is still in the early stages of development: APIs will change and important features are still being developed.

    Installing SixtyFPS

    SixtyFPS is available via NPM, so you can install by running the following command:

    npm install sixtyfps

    Using SixtyFPS

    To initialize the API, you first need to import the sixtyfps module in our code:

    let sixtyfps = require("sixtyfps");

    This step also installs a hook in NodeJS that allows you to import .60 files directly:

    let ui = require("../ui/main.60");

    Combining these two steps leads us to the obligator "Hello World" example:

    require("sixtyfps");
    let ui = require("../ui/main.60");
    let main = new ui.Main();
    main.run();

    See /examples/printerdemo/node for a full example.

    API Overview

    Instantiating a component

    The exported component is exposed as a type constructor. The type constructor takes as parameter an object which allow to initialize the value of public properties or callbacks.

    require("sixtyfps");
    // In this example, the main.60 file exports a module which
    // has a counter property and a clicked callback
    let ui = require("ui/main.60");
    let component = new ui.MainWindow({
        counter: 42,
        clicked: function() { console.log("hello"); }
    });

    Accessing a property

    Properties are exposed as properties on the component instance

    component.counter = 42;
    console.log(component.counter);

    Callbacks

    The callbacks are also exposed as property that have a setHandler function, and that can can be called.

    // connect to a callback
    component.clicked.setHandler(function() { console.log("hello"); })
    // emit a callback
    component.clicked();

    Type Mappings

    .60 Type JavaScript Type Notes
    int Number
    float Number
    string String
    color String Colors are represented as strings in the form "#rrggbbaa". When setting a color property, any CSS compliant color is accepted as a string.
    length Number
    physical_length Number
    duration Number The number of milliseconds
    angle Number The value in degrees
    structure Object Structures are mapped to JavaScrip objects with structure fields mapped to properties.
    array Array or Model Object

    Models

    For property of array type, they can either be set using an array. In that case, getting the property also return an array. If the array was set within the .60 file, the array can be obtained

    component.model = [1, 2, 3];
    // component.model.push(4); // does not work, because it operate on a copy
    // but re-assigning work
    component.model = component.model.concat(4);

    Another option is to set a model object. A model object has the following function:

    • rowCount(): returns the number of element in the model.
    • rowData(index): return the row at the given index
    • setRowData(index, data): called when the model need to be changed. this.notify.rowDataChanged must be called if successful.

    When such an object is set to a model property, it gets a new notify object with the following function

    • rowDataChanged(index): notify the view that the row was changed.
    • rowAdded(index, count): notify the view that rows were added.
    • rowRemoved(index, count): notify the view that a row were removed.

    As an example, here is the implementation of the ArrayModel (which is available on sixtyfps.ArrayModel)

    let array = [1, 2, 3];
    let model = {
        rowCount() { return a.length; },
        rowData(row) { return a[row]; },
        setRowData(row, data) { a[row] = data; this.notify.rowDataChanged(row); },
        push() {
            let size = a.length;
            Array.prototype.push.apply(a, arguments);
            this.notify.rowAdded(size, arguments.length);
        },
        remove(index, size) {
            let r = a.splice(index, size);
            this.notify.rowRemoved(size, arguments.length);
        },
    };
    component.model = model;
    model.push(4); // this works
    // does NOT work, getting the model does not return the right object
    // component.model.push(5);

    Keywords

    none

    Install

    npm i sixtyfps

    DownloadsWeekly Downloads

    2

    Version

    0.1.6

    License

    SEE LICENSE IN LICENSE.md

    Unpacked Size

    57.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • sixtyfps