brig：node.js + qml 華麗大冒險

Brig Node.js + QML 華麗大冒險

Fred Chien錢逢祥

LXDE

cfsghost At Githubcfsghost@gmail.com

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