Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • NW.js Essentials
  • Toc
  • feedback
NW.js Essentials

NW.js Essentials

By : Benoit
4.8 (5)
close
NW.js Essentials

NW.js Essentials

4.8 (5)
By: Benoit

Overview of this book

If you are an experienced Node.js developer who wants to create amazing desktop applications using NW.js, this is the book for you. Prior knowledge of HTML5, jQuery, and CSS is assumed.
Table of Contents (11 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Meet NW.js
1. Meet NW.js
NW.js under the hood
Features and drawbacks of NW.js
Downloading and installing NW.js
Development tools
Writing and running your first "Hello World" app
Summary
2
2. NW.js Native UI APIs
chevron up
2. NW.js Native UI APIs
The App API – the core of your applications
The Window API – working with windows on NW.js
The Screen API – screen geometry functions
The Menu API – handling window and context menus
File dialogs – opening and saving files
Opening files through file dragging
The Tray API – hide your application in plain sight
The Clipboard API – accessing the system clipboard
The Shell API – platform-dependent desktop functions
Summary
3
3. Leveraging the Power of Node.js
3. Leveraging the Power of Node.js
Routing and templating in NW.js
Node.js global and process objects
The window object
Using NW.js' main module
Handling paths in NW.js
NW.js context issues
Working with Node.js modules
Summary
4
4. Data Persistence Solutions and Other Browser Web APIs
4. Data Persistence Solutions and Other Browser Web APIs
Data persistence solutions
XMLHttpRequest and BLOBs
Handling media files
Shedding some light on security issues
The Web Notifications API
Summary
5
5. Let's Put It All Together
5. Let's Put It All Together
Let's get started!
A matter of style
The HTML5 skeleton
Let's dive deep into the application logic
The application layer
The NativeUI layer
Summary
6
6. Packaging Your Application for Distribution
6. Packaging Your Application for Distribution
The manifest file
The general logic behind the packaging procedure
Packaging NW.js applications for Mac OS X
Packaging NW.js applications for Microsoft Windows
Packaging NW.js applications for Linux
Securing your source code
About NW.js application licensing
Summary
7
7. Automated Packaging Tools
7. Automated Packaging Tools
Web2Executable
node-webkit-builder and grunt-node-webkit-builder
generator-node-webkit
Summary
8
8. Let's Debug Your Application
8. Let's Debug Your Application
Remote debugging
The DevTools API
Live reloading NW.js
Troubleshooting common issues
Summary
9
9. Taking Your Application to the Next Level
9. Taking Your Application to the Next Level
NW.js boilerplates
Development ideas
Resources and tutorials
Summary
10
Index
Index

File dialogs – opening and saving files

Before talking about file dialogs, I have to do a little introduction. It is probably obvious, but while in the browser, file dialogs allow you to upload or download files, in NW.js, they do nothing but pass the path of the selected folder or files. So, any following operation will be done on the original file, not on a copy.

WebKit enables you to open file dialogs through the file input field but with many limitations due to security concerns. In NW.js, those limitations have been removed, and the default file input fields have been enhanced in order to give a full native user experience.

A faster way to open a file dialog is to add an event listener to the file input field as follows:

<input id="fileDialog" type="file">
<script>
document.querySelector('#fileDialog')
  .addEventListener("change", function() {
    var filePath = this.value;
    alert(filePath);
  });
</script>

In the preceding...

End of Section 6
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete