brig：node.js + qml 華麗大冒險
TRANSCRIPT
Brig Node.js + QML 華麗大冒險
Fred Chien錢逢祥
LXDE
cfsghost At [email protected]
Somebody ask me
有人問我
What Javascript can do for me?
JavaScript 能幹麻？
I said
我總是說
You can do everything with it
可以用來做任何事
...
每次講到這
Start talking about Java
有很多人就把 Java 掏出來
They don't know
殊不知
紅茶拿鐵Black Tea Latte
紅茶拿鐵Black Tea Latte
奶茶Milk Tea
紅茶拿鐵Black Tea Latte
奶茶Milk Tea
是不一樣的！
快把你掏出來的 Java 收回去！
有 S 沒 S 差很多
不知何年何月才能完全破除迷思和謬誤
講到迷思
on JSDC
這次 JSDC
Today
今天
再次脫離一下 WebEscape from Web Again
沒有 HTML No HTML
沒有 CSS No CSS
我們來談談
Let's talk
新東西
Something New with JavaScript
不然要幹麻？
來 Conf 就是要聽點新奇的東西
Briggithub.com/cfsghost/brig
$ npm install brig
NPM
version 5+
QMLQt Modeling Language
http://qt.io/
簡單的語法
Easy Syntax
酷炫
Fantastic
原生的效能
Native
內建 JavaScript 引擎
Built-in
How Easy Is QML?
QML 有多簡單呢？
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
Make A Window in QML
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
Make A Window in QML
最基本的模組
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
Make A Window in QML
控制相關模組
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
Make A Window in QML
元件類型 {屬性: 參數
...}
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
Make A Window in QML
視窗可顯示
視窗寬度
視窗高度
A Window You Have Now!
現在我們有一個視窗了！
$ qmlscene window.qml
Run with Qt Utility
Lode QML File with Brig
用 Brig 載入 QML 檔案
var Brig = require('brig');
var brig = new Brig();
brig.on('ready', function(brig) {
// Load QML file
brig.open('window.qml', function(err, window) {
// Set title property for window
window.setProperty('title', 'Hello');
});
});
Load QML File with Brig
setProperty()getProperty()getPropertyNames()
Set/Get Property
More QML
多學一點 QML 語法吧
http://github.com/cfsghost/QML-Example
More QML Examples
QML + Node.js
Countdown Timer
IRC
IRC
Node.js QMLComponent
Update UIIRC Server
Node.js QMLComponent
Update UIIRC Server
Trigger Signal
Hundred thousands NPM Modules You Can Get
你有數十萬個 NPM 模組
No need C++
不再需要 C++
ApplicationWindow { …
signal updateMessage(var msg);
onUpdateMessage: { console.log(msg); }}
Define a signal in QML
var Brig = require('brig');
var brig = new Brig();
brig.on('ready', function(brig) {
// Load QML file
brig.open('window.qml', function(err, window) {
// Trigger signal
window.emit('updateMessage', 'Hey');
});
});
Trigger signal from Node.js
var Brig = require('brig');
var brig = new Brig();
brig.on('ready', function(brig) {
// Load QML file
brig.open('window.qml', function(err, window) {
// Listen to signal
window.on('updateMessage', function(msg) {
console.log(msg);
});
});
});
Listen to signal in Node.js
TODO
NPM Module
打包 Qt Library
Any Questions?
Thanks