Examples

Below are some example applications packaged for native runtimes using Sencha Desktop Packager. They are created using HTML, JavaScript, and CSS and most of them use ExtJS.

They can be packaged to run on Windows, OS X or Linux desktops just like any other native apps. By taking advantage of the functionality provided by Sencha Desktop Packager JavaScript extensions, fully functional desktop applications can be written entirely in HTML, JavaScript and CSS.

Even without using native APIs during the development process, the examples have the look and feel of native apps when run directly on the target platforms. You can launch the applications as you would any native app by double-clicking. You can point to them with shortcuts / links, and associate file extensions with them.

File Browser

This example can be found in examples/FileBrowser of Sencha Desktop Packager download package.

The File browser is a simple JavaScript file browsing desktop utility that takes advantage of the Ion.io utilities.

The application opens in the the user's home directory, which it obtains from Ion.io.userHomePath. It uses a Go up button which, when selected, points the browser at the parent directory. Clicking on any directory, indicated by the icon, will move into that directory. When a new directory is loaded, the example uses Ion.io.listDirectory to create the list of directories and files.

Clicking on text files, marked by the icon, will display the contents of the file by calling Ion.io.readFile and the writing the data into the innerHTML of a textArea in the HTML document.

NOTE: The example as written assumes that files with certain extensions are text files. No error checking is done.

This example could easily be extended to do smarter checking on text files and to display image files. Here is the file browser open to a read-me file:

Area chart

This example can be found in examples/AreaChart of Sencha Desktop Packager download package.

The Area Chart example is based on the Ext JS Area Chart example, which displays 7 sets of random data in an area series.

We modified the example by adding a native desktop menu and moving the Regenerate Data function to that menu.

The menu we added also demonstrates how Ion.io can be used to let the app user interact with the local file system through these functions:

• Save the chart data to a local file using Ion.io.writeFile.
• Load the chart data from a local file using Ion.io.readFile.
• Browse for chart data files on the local filesystem using Ion.io.browseFiles.

Just for fun, we also added a menu that lets you change the color scheme of the chart too.

Here's the Area Chart example, packaged for the desktop using Sencha Desktop Packager:

Form grid

This example can be found in examples/Form of Sencha Desktop Packager download package.

This Ext JS Form example shows that an Ext.form.Panel can contain any Ext Component by inheriting from the Ext Container class. This includes all the subclasses of Ext.Panel, including the GridPanel.

The grid demonstrates the use of the following:

• creation of derived fields in a record created using a custom convert function
• column renderers
• radio buttons grouped by name, which is set by the value of the derived rating field.

The user can sort the list by Company, Price, Change, % Change, Last Updated, and Ratings using the Sort menu.

Below is the screenshot of the Form grid application.

Maps

This example can be found in examples/Maps of Sencha Desktop Packager download package.

The Maps example is based on the Ext JS Google Maps example.

The example is modified by adding some features to the existing Ext JS example. A native desktop menu is added for accessing various functionalities of Maps. The menu options added for displaying Traffic layer, Biking layer, searching Restaurants and stores, makes use of the Google Maps JavaScript API's.

A search box is added for finding locations and addresses by entering the text in the input box.

This could be easily extended to have many more features like, adding reviews or some description to the restaurants that are being searched, or add more layers to show the weather, satellite view, etc.

This example could be totally transformed into a fully functional desktop Application.

Here's the Maps example, packaged for the desktop using Sencha Desktop Packager:

Calendar

This example can be found in examples/Calendar of Sencha Desktop Packager download package.

The Calendar example is based on the Ext JS Calendar example. The example is modified by adding a native desktop menu for accessing various functionalities of the calendar.

Below is the screenshot of the Calendar example.

Earth and Mars

This example can be found in examples/EarthMars of Sencha Desktop Packager download package.

The Earth and Mars example is based on Khronos SDK Demo example. The example demonstrates the support for WebGL (Web Graphics Library) for rendering 3-D graphics.

Note: WebGL requires a capable graphics card and therefore it may run only on modern systems.

The screenshot of the example is shown below.

Sphere

This example can be found in examples/Sphere of Sencha Desktop Packager download package.

The Sphere example is based on Google's WebGL samples. It demonstrates the use of WebGL-based scene with environment mapping using dynamic cubemap.

Note: WebGL requires a capable graphics card and therefore it may run only on modern systems.

The screenshot of the example is shown below.

Packaging Tool

This example can be found in examples/PackagingTool of the Sencha Desktop Packager download package.

PackagingTool is a simple application for editing Sencha Desktop Packager manifest files. The application itself was created using Sencha Architect 2.2 and includes an archive of the Architect project in PackagingTool.xda.

It can be used to examine and modify the manifest files of other examples as well as your own projects. You can also package and run applications directly from this example application.

Note that if you try to use this example to package itself while it is running, ionpackage will fail.

General Settings Tab

These are the settings used when running ionpackage and must be set before you can select Package or Run from the Application menu. The tool remembers these settings in local storage, so once you set them, they will be reloaded for you automatically the next time you run the application.

Field	Content
Ionpackage Path	The path of the directory where `ionpackage` is installed.
Runtime Path	The directory to run `ionpackage` from.
Overwrite	If checked, run `ionpackage` with the `--overwrite` argument

Manifest File Tab

These are the fields of the manifest file. See Getting Started guide for details about what each of these fields means.

This version of Packaging Tool will retain any other fields you may have in your manifest file, but will not let you edit them.

How to Use

You can use this example to examine, package and run the other examples. First, package and run this example using ionpackage following the instructions in the Getting Started guide.

The first time you run Packager Tool, you will have to configure where the ionpackage executable is installed on your machine, and the directory where the ionpackage executable should be run. The runtime directory is important for manifest files that have a relative path for outputPath, because it will determine where the packaged application is created. All of our examples follow this pattern. (see Quick Reference: Manifest File) You may also want to select the overwrite checkbox to automatically overwrite the output when you package the same app more than once.

Once Packaging Tool is set up, switch to Manifest File tab, and select the File -> Open... menu item and navigate to the configuration file of the example you want to build and run. The contents of the manifest file will be read in, and will populate the fields under the Manifest File tab.

Now all you have to do is select Package followed by Run from the Application menu. Or you can select Package and Run to get it all done at once. PackagingTool will hide while it is running the application and will re-appear after the application exits.

Simple Task

This example can be found in examples/SimpleTask of the Sencha Desktop Packager download package.

The Simple Task example is a Personal Task Management application example. It is based on Ext JS Simple Task example. The example is modified by adding a native desktop menu for accessing various functionalities of Simple Task example.

The screenshot of the example is shown below.