<-- IE錯誤修正 --> Creating Your First Desktop App With HTML, JS and Node-WebKit - RiS社群 | FileMaker 跨平台企業應用



快速發表主題
返回   RiS社群 | FileMaker 跨平台企業應用 > PHP / ASP.NET / HTML5 / jQuery > HTML5 = TAG + CSS3 + JavaScript APIs > jQuery 討論區 (jQuery 豐富資源)

jQuery 討論區 (jQuery 豐富資源) 包含 jQuery 有關學習、教學、Frameworks 使用、程式與應用範例等,將集中於此。


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2015-01-08
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
預設 Creating Your First Desktop App With HTML, JS and Node-WebKit

Click the image to open in full size.
These days you can do pretty much anything with JavaScript and HTML. Thanks to Node-WebKit, we can even create desktop applications that feel native, and have full access to every part of the operating system. In this short tutorial, we will show you how to create a simple desktop application using Node-WebKit, which combines jQuery and a few Node.js modules.

Node-WebKit is a combination of Node.js and an embedded WebKit browser. The JavaScript code that you write is executed in a special environment and has access to both standard browser APIs and Node.js. Sounds interesting? Keep reading!

Installing Node-WebKit

For developing applications, you will need to download the node-webkit executable, and call it from your terminal when you want to run your code. (Later you can package everything in a single program so your users can only click an icon to start it).

Head over to the project page and download the executable that is built for your operating system. Extract the archive somewhere on your computer. To start it, you need to do this in your terminal:

# If you are on linux/osx/path/to/node-webkit/nw /your/project/folder# If you are on windowsC:\path\to\node-webkit\nw.exe C:\your\project\folder# (the paths are only for illustrative purposes, any folder will do)This will open a new node-webkit window and print a bunch of debug messages in your terminal.

You can optionally add the extracted node-webkit folder to your PATH, so that it is available as the nw command from your terminal.

Your First Application

There is a Download button near the top of this article. Click it and get a zip with a sample app that we prepared for you. It fetches the most recent articles on Tutorialzine from our RSS feed and turns them into a cool looking 3D carousel using jQuery Flipster.

Click the image to open in full size.Directory Structure


Once you extract it, you will see the files above. From here this looks like a standard static website. However, it won’t work if you simply double click index.html – it requires Node.js modules, which is invalid in a web browser. To run it, CD into this folder, and try running the app with this command:

/path/to/node-webkit/nw .This will show our glorious desktop app.

Click the image to open in full size.Our node-webkit app


How it was made

It all starts with the package.json file, which node-webkit looks up when starting. It describes what node-webkit should load and various parameters of the window.

package.json

{ "name": "nw-app", "version": "1.0.0", "description": "", "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "window": { "toolbar": false, "width": 800, "height": 500 }, "license": "ISC", "dependencies": { "pretty-bytes": "^1.0.2" }}The window property in this file tells node-webkit to open a new window 800 by 500px and hide the toolbar. The file pointed to by the main property will be loaded. In our case this is index.html:

index.html

Tutorialzine Node-Webkit Experiment <div class="flipster"> <ul>

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
介紹新知或別人沒有的好東西 [EZo 實做] 在 Node.js 使用 EZo Engine EZoUI jQuery 討論區 (jQuery 豐富資源) 0 2012-08-31 03:01 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 08:37 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝明易資訊有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2