This document discusses using JavaScript and Node.js with QML (Qt Modeling Language) for building applications. It provides an example of creating a basic window in QML using only a few lines of code. It also demonstrates how to load a QML file and interact with it from Node.js by setting and getting properties, triggering signals, and listening for signals. The document encourages learning more QML syntax and provides examples for building an IRC client or countdown timer combining Node.js and QML. It notes that with this approach, C++ is no longer needed and over 300,000 NPM modules can be utilized. It concludes by mentioning packaging Qt libraries as an NPM module and asking if there are any questions.

1. Brig
Node.js + QML
華麗大冒險

2. Fred Chien
錢逢祥

3. LXDE

4. cfsghost At Github
cfsghost@gmail.com

6. Somebody ask me
有人問我

7. What Javascript can do for me?
JavaScript 能幹麻？

8. I said
我總是說

9. You can do everything with it
可以用來做任何事

10. ...
每次講到這

11. Start talking about Java
有很多人就把 Java 掏出來

12. They don't know
殊不知

13. 紅茶拿鐵
Black Tea Latte

14. 紅茶拿鐵
Black Tea Latte
奶茶
Milk Tea

15. 紅茶拿鐵
Black Tea Latte
奶茶
Milk Tea
是不一樣的！

16. 快把你掏出來的 Java 收回去！
有 S 沒 S 差很多

17. 不知何年何月
才能完全破除迷思和謬誤

19. 講到迷思

20. on JSDC
這次 JSDC

21. Today
今天

22. 再次脫離一下 Web
Escape from Web Again

23. 沒有 HTML
No HTML

24. 沒有 CSS
No CSS

25. 我們來談談
Let's talk

26. 新東西
Something New with JavaScript

27. 不然要幹麻？
來 Conf 就是要聽點新奇的東西

29. Brig
github.com/cfsghost/brig

30. $ npm install brig
NPM

31. version 5+

33. QML
Qt Modeling Language

34. http://qt.io/

35. 簡單的語法
Easy Syntax

36. 酷炫
Fantastic

37. 原生的效能
Native

38. 內建 JavaScript 引擎
Built-in

41. How Easy Is QML?
QML 有多簡單呢？

42. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
Make A Window in QML

43. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
Make A Window in QML
最基本的模組

44. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
Make A Window in QML
控制相關模組

45. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
Make A Window in QML
元件類型 {
屬性: 參數
...
}

46. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
Make A Window in QML
視窗可顯示
視窗寬度
視窗高度

47. A Window You Have Now!
現在我們有一個視窗了！

48. $ qmlscene window.qml
Run with Qt Utility

50. Lode QML File with Brig
用 Brig 載入 QML 檔案

51. 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

52. setProperty()
getProperty()
getPropertyNames()
Set/Get Property

54. More QML
多學一點 QML 語法吧

55. http://github.com/cfsghost/QML-Example
More QML Examples

57. QML + Node.js

59. Countdown
Timer

61. IRC

62. IRC

63. Node.js QML
Component
Update UIIRC Server

64. Node.js QML
Component
Update UIIRC Server
Trigger Signal

65. Hundred thousands NPM Modules You Can Get
你有數十萬個 NPM 模組

66. No need C++
不再需要 C++

67. ApplicationWindow {
…
signal updateMessage(var msg);
onUpdateMessage: {
console.log(msg);
}
}
Define a signal in QML

68. 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

69. 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

71. TODO

72. NPM Module
打包 Qt Library

73. Any Questions?

74. Thanks