Module framework for brig, to let developer implement own module for brig easily.
Install module via NPM
npm install brig-moduleWith brig-module, you can create useful brig module which can be packaged and published to NPM server.
The first step is making preparation for your own NPM package. Create a project which includes structure:
- types/
- MyItem.js
- index.js
- package.json
- README.md
Note that: If you don't know how to package a NPM module, please go to NPM official website to learn more.
The entry of this NPM module is index.js, it should contains:
index.js
var BrigModule = require('brig-module');
var brigModule = new BrigModule();
brigModule.addType(require('./types/MyItem'));
module.export = brigModule;Implement your QML type by using BrigModule.TypePrototype.
types/MyItem.js
var BrigModule = require('brig-module');
// Create prototype of type named MyItem
var proto = module.exports = new BrigModule.TypePrototype('MyItem');
// This type has a property named msg, which has default value.
proto.defineProperty('msg', 'hello');
// This type has a method named sum, which has two parameters
proto.defineMethod('sum(a,b)', function(a, b) {
return a + b;
});
// instance of type was created
proto.on('instance-created', function(instance) {
instance.on('msgChanged', function() {
console.log('msg was changed, new value is ' + insntace.getProperty('msg'));
});
});Now you can package your brig module which contains your customized type. Using NPM command to make a link or upload package to NPM server.
npm publishLoad your module in your brig application:
app.js
const Brig = require('brig');
const brigMyItem = require('brig-myitem');
const brig = new Brig();
brig.on('ready', (brig) => {
// Load your module
brig.loadModule(brigMyItem);
brig.open('Application.qml', (err, window) => {
// You have a window here
});
});Then your customized QML type can be used in QML enviromnet:
Application.js
import QtQuick 2.3
import QtQuick.Controls 2.0
import Brig.MyItem 1.0
ApplicationWindow {
visible: true;
color: 'black';
title: 'My Application';
width: 1280;
height: 768;
MyItem {
id: myItem;
msg: 'new msg';
}
Component.onCompleted: {
var ret = myItem.sum(1, 2);
console.log(ret);
}
}Licensed under the MIT License
Copyright(c) 2017 Fred Chien <[email protected]>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent