SlideShare une entreprise Scribd logo
1  sur  67
Télécharger pour lire hors ligne
用最潮的 JavaScript

盡情開發 KDE/Qt 程式



       Fred Chien
首先聲明
今天我沒有梗了
雖然昨天看了一晚的新聞找靈感
加上是技術議程
肯定無趣
我們何不速戰速決
成為下午茶解放軍
我是誰?
Who Am I
Fred Chien
   錢逢祥
就是昨天發表退學宣言那位
就是昨天發表退學宣言那位
後來才聽說今年有 Youtube 全球線上直播
不過我現在 R2
無論如何
Businessman
  奸商現在式
要幹大事業就找我!
cfsghost At gmail.com
Blog
fred-zone.blogspot.com
Startup in Taiwan
    Mandice Software.
       MANDICE.COM
CEO, Mandice
慣C

救火    Startup            惡搞
     Mandice Software.



         創新
潮
回到今天正題
征服 KDE/Qt
  用 Node.js
等等等等等等等等!!
   等一下!!!
怎麼又是你!?
你講 GNOME
你搞 LXDE
KDE 的場子還來呀?
   到底哪一國的?
...
身為專業的走路工
   你知道
正題
Node.js + Qt
Why Don't Use QtQuick?
Qt 內建的 JavaScript Solution 不好嗎?
我想答案顯而易見
Node.js 有上萬個 Module
     有千軍萬馬支援
QtQuick 開發者是孤軍奮戰
    什麼都要自己想辦法
現在更是   孤兒軍 奮戰
  Nokia 脫手了 Qt 以後
在 JavaScript 這件事上
Resource, Developer, Documentation...
不是同一個數量級
 與 Node.js 相比
不過
不可否認
Qt 仍然很優秀
  我們得承認
穩定。跨平台。功能完備。
  熱情。臉蛋正。身材火辣。
豈有不染指一下的理由?
Node.js + Qt = ?
Node-Qt
github.com/arturadib/node-qt
Architecture


               JavaScript Application

                  Node-qt Add-on
               Qt Library       Node.js
                       Linux
Qt Works on Several Platforms


            JavaScript Application

               Node-qt Add-on
            Qt Library       Node.js


         MS Windows/Linux/MacOS/...
Live Demo
反正 demo code 不是我寫的
npm install node-qt
  請記得一定要先裝 Qt Library
Sample code
var qt = require('node-qt');
var app = new qt.Application;
var window = new qt.QWidget;

// Prevent objects from being GC'd
global.app = app;
global.window = window;

window.resize(100, 100);
window.show();

// Event Loop
setInterval(app.processEvents, 0);
Normal Program Flow


       Execute Program

         Do Something

                Exit
Normal Program Flow


         Execute Program
Window



          Do Something

                Exit
GUI Application Flow Should Be

            Execute Program


             Do Something



                  LOOP
                          Process Events
Sample code
var qt = require('node-qt');
var app = new qt.Application;
var window = new qt.QWidget;

// Prevent objects from being GC'd
global.app = app;
global.window = window;




                                     !
window.resize(100, 100);
window.show();

// Event Loop

setInterval(app.processEvents, 0);
Event Handler
    事件處理
Sample code for PaintEvent
window.paintEvent(function() {

      /* Do Something ... */

});
Using PaintEvent
window.paintEvent(function() {

      var p = new qt.QPainter();
      p.begin(window);
      p.drawText(20, 30, 'Hello Qt!');
      p.end();

});
mousePressEvent

mouseReleaseEvent

 mouseMoveEvent

  keyPressEvent

 keyReleaseEvent

       ...
Live Demo
   Again
Node-Qt
github.com/arturadib/node-qt
支援度尚不完整
  v0.0.1
肯定有很多問題
  v0.0.1
四個月前
 v0.0.2
不要太期待
 v0.0.2
More Demo?
原作者不會投入太多時間
  但我有空會去補完它
Q&A
Thanks

Contenu connexe

Tendances

Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹wantingj
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程Simon Su
 
Node.js 淺談socket.io
Node.js   淺談socket.ioNode.js   淺談socket.io
Node.js 淺談socket.ioSimon Su
 
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門Fred Chien
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Joseph Chiang
 
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkitLainZQ
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServBen Lue
 
Getting started with test automation
Getting started with test automationGetting started with test automation
Getting started with test automationIvan Wei
 
Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出Eric Xiao
 
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017北護樂學程式冬令營 2017
北護樂學程式冬令營 2017Hamilton Wong
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 GulpYvonne Yu
 
twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC
 
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n2010 08-14 web-sitei18n
2010 08-14 web-sitei18ntsunghaolee
 
猴子也能懂的Node.js
猴子也能懂的Node.js猴子也能懂的Node.js
猴子也能懂的Node.jsHopenglishRD
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程洧杰 廖
 
五行完成網頁多國語系
五行完成網頁多國語系五行完成網頁多國語系
五行完成網頁多國語系amostsai
 
Nodejs introduce - using Socket.io
Nodejs introduce - using Socket.ioNodejs introduce - using Socket.io
Nodejs introduce - using Socket.ioCaesar Chi
 
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with WebpackSITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack昱安 周
 

Tendances (20)

Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
 
Node.js 淺談socket.io
Node.js   淺談socket.ioNode.js   淺談socket.io
Node.js 淺談socket.io
 
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit这年头,你只需要懂Node webkit
这年头,你只需要懂Node webkit
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
 
Getting started with test automation
Getting started with test automationGetting started with test automation
Getting started with test automation
 
Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出Node.js中间件 connect模块深入浅出
Node.js中间件 connect模块深入浅出
 
北護樂學程式冬令營 2017
北護樂學程式冬令營 2017北護樂學程式冬令營 2017
北護樂學程式冬令營 2017
 
全新的Qt5
全新的Qt5全新的Qt5
全新的Qt5
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
CP 值很高的 Gulp
CP 值很高的 GulpCP 值很高的 Gulp
CP 值很高的 Gulp
 
twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解
 
2010 08-14 web-sitei18n
2010 08-14 web-sitei18n2010 08-14 web-sitei18n
2010 08-14 web-sitei18n
 
猴子也能懂的Node.js
猴子也能懂的Node.js猴子也能懂的Node.js
猴子也能懂的Node.js
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
 
五行完成網頁多國語系
五行完成網頁多國語系五行完成網頁多國語系
五行完成網頁多國語系
 
Nodejs introduce - using Socket.io
Nodejs introduce - using Socket.ioNodejs introduce - using Socket.io
Nodejs introduce - using Socket.io
 
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with WebpackSITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack
 

En vedette

Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.jsFred Chien
 
How to Write Node.js Module
How to Write Node.js ModuleHow to Write Node.js Module
How to Write Node.js ModuleFred Chien
 
Stem OS Proposal
Stem OS ProposalStem OS Proposal
Stem OS ProposalFred Chien
 
軟體人甘苦談
軟體人甘苦談軟體人甘苦談
軟體人甘苦談Fred Chien
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binaryFred Chien
 
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Fred Chien
 
Qml 培訓課程 multi media
Qml 培訓課程   multi mediaQml 培訓課程   multi media
Qml 培訓課程 multi mediadiro fan
 
Enjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScriptEnjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScriptFred Chien
 
Three.js 一場從2D變成3D的冒險
Three.js  一場從2D變成3D的冒險Three.js  一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險智遠 成
 
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅Jack Yang
 

En vedette (13)

Let s Enjoy Node.js
Let s Enjoy Node.jsLet s Enjoy Node.js
Let s Enjoy Node.js
 
How to Write Node.js Module
How to Write Node.js ModuleHow to Write Node.js Module
How to Write Node.js Module
 
OwaNEXT
OwaNEXTOwaNEXT
OwaNEXT
 
Stem OS Proposal
Stem OS ProposalStem OS Proposal
Stem OS Proposal
 
軟體人甘苦談
軟體人甘苦談軟體人甘苦談
軟體人甘苦談
 
QML + Node.js
QML + Node.jsQML + Node.js
QML + Node.js
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
 
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
 
李宜霖簡報
李宜霖簡報李宜霖簡報
李宜霖簡報
 
Qml 培訓課程 multi media
Qml 培訓課程   multi mediaQml 培訓課程   multi media
Qml 培訓課程 multi media
 
Enjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScriptEnjoy Writing Modern Desktop Application in JavaScript
Enjoy Writing Modern Desktop Application in JavaScript
 
Three.js 一場從2D變成3D的冒險
Three.js  一場從2D變成3D的冒險Three.js  一場從2D變成3D的冒險
Three.js 一場從2D變成3D的冒險
 
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
 

Similaire à 用最潮的 Java script 盡情開發 kde qt 程式

開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)Sheng-Hao Ma
 
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化uilsdsjy
 
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台AppBen Lue
 
做卓有成效的程序员
做卓有成效的程序员做卓有成效的程序员
做卓有成效的程序员Lv Jian
 
C++ gui qt
C++ gui qtC++ gui qt
C++ gui qtbiehege
 
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色Chris Wang
 
初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdfgdscnycu
 
Introduction of Reverse Engineering
Introduction of Reverse EngineeringIntroduction of Reverse Engineering
Introduction of Reverse EngineeringYC Ling
 
Python&GUI
Python&GUIPython&GUI
Python&GUILeo Zhou
 
09 creating windows phone game with cocos2d-xna
09   creating windows phone game with cocos2d-xna09   creating windows phone game with cocos2d-xna
09 creating windows phone game with cocos2d-xna乐费 胡
 
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian ShanghaiJackson Tian
 
QML + Arduino & Leap Motion
QML + Arduino & Leap MotionQML + Arduino & Leap Motion
QML + Arduino & Leap Motiondiro fan
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境Will Huang
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統Hsu Ping Feng
 
JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Enginejay li
 
Gtk+陷阱与进阶技巧
Gtk+陷阱与进阶技巧Gtk+陷阱与进阶技巧
Gtk+陷阱与进阶技巧tuhaihe
 
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appBen Lue
 

Similaire à 用最潮的 Java script 盡情開發 kde qt 程式 (20)

開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)開發學校雲端服務的奇技淫巧(Tips for Building  Third-Party School Service)
開發學校雲端服務的奇技淫巧(Tips for Building Third-Party School Service)
 
使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui使用Qt+和open gl®+创建跨平台可视化ui
使用Qt+和open gl®+创建跨平台可视化ui
 
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
 
做卓有成效的程序员
做卓有成效的程序员做卓有成效的程序员
做卓有成效的程序员
 
C++ gui qt
C++ gui qtC++ gui qt
C++ gui qt
 
Qt gui编程
Qt gui编程Qt gui编程
Qt gui编程
 
「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色「設計」在工程師職涯中 扮演的角色
「設計」在工程師職涯中 扮演的角色
 
初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf初窺 Flutter 開發.pdf
初窺 Flutter 開發.pdf
 
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCUFlutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
 
Introduction of Reverse Engineering
Introduction of Reverse EngineeringIntroduction of Reverse Engineering
Introduction of Reverse Engineering
 
Python&GUI
Python&GUIPython&GUI
Python&GUI
 
Flutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCUFlutter實作概述 | GDSC NYCU
Flutter實作概述 | GDSC NYCU
 
09 creating windows phone game with cocos2d-xna
09   creating windows phone game with cocos2d-xna09   creating windows phone game with cocos2d-xna
09 creating windows phone game with cocos2d-xna
 
Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
 
QML + Arduino & Leap Motion
QML + Arduino & Leap MotionQML + Arduino & Leap Motion
QML + Arduino & Leap Motion
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
 
JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
 
Gtk+陷阱与进阶技巧
Gtk+陷阱与进阶技巧Gtk+陷阱与进阶技巧
Gtk+陷阱与进阶技巧
 
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 appHTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
 

用最潮的 Java script 盡情開發 kde qt 程式