image

Sencha Desktop Packager is a new product, included with the Sencha Complete: Team bundle, which enables you to take your existing Ext JS web application and package it as a native desktop application. From here, you may deliver your application to your customers who are running Windows and Mac OS X.

HTML5 technologies allow you to develop advanced, interactive and high-performance applications. Yet, those benefits may only be harnessed if an application’s users are running a modern web browser. In a corporate IT environment with locked-down desktops, deploying advanced rich Internet applications can be a challenge. Often, the user is restricted to a particular version of a browser with no foreseeable chance of an upgrade — they may be running the latest and greatest hardware, but stuck on an old IT-standardized browser. For this scenario, integrating the application with a web run-time and delivering them together is the only viable choice.

Watch a demo!

Sencha Desktop Packager is designed to overcome this deployment limitation. The Packager leverages Chromium, an open-source project from Google that also powers the Google Chrome browser. Not only does the Packager make it easy to transform web apps to native, it also makes it easy to integrate with native APIs. We provide APIs that the application can use to integrate with the desktop, including but not limited to window and menu management, file system access and native dialogs.

Using Sencha Desktop Packager is easy. It’s distributed as a simple ZIP archive, requiring no installation; simply unpack the archive to a working directory. The archive also includes the documentation and a collection of ready-made examples.

After the package has been unzipped, the only tool you need to use is the ionpackage command-line executable (ionpackage.exe on Windows). This tool is used together with a JSON configuration file — often referred to as the manifest — as follows:

Let’s create a simple configuration file:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

The JSON file contains configuration settings which specify the name, version and location of the application. For convenience, we also enable autoShow for the main window.

For this configuration to work, we have to supply the application. As an example, we use a very simple ‘Hello, world!’ message in hello/index.html as follows:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.xml .imp font-weight: bold; color: red;
.xml .es0 color: #000099; font-weight: bold;
.xml .br0 color: #66cc66;
.xml .sy0 color: #66cc66;
.xml .st0 color: #ff0000;
.xml .sc-1 color: #808080; font-style: italic;
.xml .sc0 color: #00bbdd;
.xml .sc1 color: #ddbb00;
.xml .sc2 color: #339933;
.xml .sc3 color: #009900;
.xml .re0 color: #000066;
.xml .re1 color: #000000; font-weight: bold;
.xml .re2 color: #000000; font-weight: bold;
.xml span.xtra display:block;

By running the ionpackage tool with this configuration file, a native Windows or Mac OS X application is produced and saved to the specified output directory; ‘HelloApp’ in this case. Use Explorer or Finder to locate the application, and launch it:

image

The freshly built application is self-contained. It’s designed to work on a vanilla installation of Windows (from Windows XP to Windows 8) and Mac OS X (10.6+). From here, the executable and its related dependency files can be integrated with any third party application installer.

Of course, Sencha Desktop Packager provides much more than just a run-time shell. It also comes ready with an additional API (see the complete reference) that provides various extra desktop functionality. Let’s see how we can add some menus to our application. For example, in the application code, you can add the following function:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

When the above function is invoked, a native menu bar will be created. It will contain one top-level menu called File which in turn will have more sub-menu items. The following screenshot shows the result:

image

Another benefit of using the Sencha Desktop Packager is to have access to the file system. This means an application can read and write persistent data to a storage device on the user’s system. Sencha Desktop Packager provides simple functions for these operations. In the following code fragment, the user is prompted with a modal dialog to open a file and read its contents:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

The dialogs produced by the application are also native. They’re indistinguishable from the standard file dialogs of Windows or Mac OS X. You’ll also note that the APIs are synchronous (blocking) so you don’t need to provide a callback.

The Sencha Desktop Packager also gives applications the ability to control their main application window, e.g. adjusting the position, changing the dimensions, going full-screen, etc. This is possible via a set of window management APIs. Here’s an example of positioning and resizing the main window:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

Changing the state of the window is also possible:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

In addition, the native full-screen feature of Mac OS X 10.7+ is also supported.

The additional native functionality enabled by the Sencha Desktop Packager helps you build applications that act and feel like other desktop applications. The archive distribution of Sencha Desktop Packager also includes several examples from Ext JS which have been modified to take advantage of these desktop integration features. Take a look and try them out.

image

You can get the Sencha Desktop Packager through Sencha Complete: Team. For more information, please read the online documentation.

.right, .alignright float: right; margin: 0 0 10px 10px;
.left, .alignleft float: left; margin: 0 10px 10px 0;

Read this article:

Creating Native Applications with Sencha Desktop Packager