Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,306 views

Published on

使用 Node.js 與 QML 開發擁有酷炫 UI 的嵌入式或桌面應用程式。

Published in: Technology
  • Be the first to comment

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

  1. 1. Brig Node.js + QML 華麗大冒險
  2. 2. Fred Chien 錢逢祥
  3. 3. LXDE
  4. 4. cfsghost At Github cfsghost@gmail.com
  5. 5. Somebody ask me 有人問我
  6. 6. What Javascript can do for me? JavaScript 能幹麻?
  7. 7. I said 我總是說
  8. 8. You can do everything with it 可以用來做任何事
  9. 9. ... 每次講到這
  10. 10. Start talking about Java 有很多人就把 Java 掏出來
  11. 11. They don't know 殊不知
  12. 12. 紅茶拿鐵 Black Tea Latte
  13. 13. 紅茶拿鐵 Black Tea Latte 奶茶 Milk Tea
  14. 14. 紅茶拿鐵 Black Tea Latte 奶茶 Milk Tea 是不一樣的!
  15. 15. 快把你掏出來的 Java 收回去! 有 S 沒 S 差很多
  16. 16. 不知何年何月 才能完全破除迷思和謬誤
  17. 17. 講到迷思
  18. 18. on JSDC 這次 JSDC
  19. 19. Today 今天
  20. 20. 再次脫離一下 Web Escape from Web Again
  21. 21. 沒有 HTML No HTML
  22. 22. 沒有 CSS No CSS
  23. 23. 我們來談談 Let's talk
  24. 24. 新東西 Something New with JavaScript
  25. 25. 不然要幹麻? 來 Conf 就是要聽點新奇的東西
  26. 26. Brig github.com/cfsghost/brig
  27. 27. $ npm install brig NPM
  28. 28. version 5+
  29. 29. QML Qt Modeling Language
  30. 30. http://qt.io/
  31. 31. 簡單的語法 Easy Syntax
  32. 32. 酷炫 Fantastic
  33. 33. 原生的效能 Native
  34. 34. 內建 JavaScript 引擎 Built-in
  35. 35. How Easy Is QML? QML 有多簡單呢?
  36. 36. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } Make A Window in QML
  37. 37. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } Make A Window in QML 最基本的模組
  38. 38. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } Make A Window in QML 控制相關模組
  39. 39. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } Make A Window in QML 元件類型 { 屬性: 參數 ... }
  40. 40. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } Make A Window in QML 視窗可顯示 視窗寬度 視窗高度
  41. 41. A Window You Have Now! 現在我們有一個視窗了!
  42. 42. $ qmlscene window.qml Run with Qt Utility
  43. 43. Lode QML File with Brig 用 Brig 載入 QML 檔案
  44. 44. 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
  45. 45. setProperty() getProperty() getPropertyNames() Set/Get Property
  46. 46. More QML 多學一點 QML 語法吧
  47. 47. http://github.com/cfsghost/QML-Example More QML Examples
  48. 48. QML + Node.js
  49. 49. Countdown Timer
  50. 50. IRC
  51. 51. IRC
  52. 52. Node.js QML Component Update UIIRC Server
  53. 53. Node.js QML Component Update UIIRC Server Trigger Signal
  54. 54. Hundred thousands NPM Modules You Can Get 你有數十萬個 NPM 模組
  55. 55. No need C++ 不再需要 C++
  56. 56. ApplicationWindow { … signal updateMessage(var msg); onUpdateMessage: { console.log(msg); } } Define a signal in QML
  57. 57. 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
  58. 58. 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
  59. 59. TODO
  60. 60. NPM Module 打包 Qt Library
  61. 61. Any Questions?
  62. 62. Thanks

×