Blog

Creating Native Applications with Sencha Desktop Packager

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:

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:

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:

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:

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:

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:

// Move the window to the center of the current screen
Ion.ui.mainWindow.center();// Minimize the window
Ion.ui.mainWindow.minimize();// Set window to fullscreen
Ion.ui.mainWindow.fullscreen();

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.

Written by Ariya Hidayat
Ariya is a passionate technologist and open-source advocate with over a decade of experience dealing with different varieties of hardware and software. These days his focus is mainly on web technologies. He is a WebKit reviewer and has been contributing to WebKit in the last 3 years.Follow Ariya on Twitter

Paolo

I completely agree with Alex. Where does this commercial policy come from?
Don’t you like having lots of stand alone licenses around the world?
Well, if you do, let them have the best at reasonable costs, please.

Frik

slemmon

Our organization would potentially be interested in a desktop packager as well. We had a 5-seat support license, but realistically it was just 3-4 of us building the apps on the client side. A more flexible pricing model other than just the Team bundle might net a sale from us. But, I won’t be able to persuade procurement to purchase Team for 10 of us (for 4 of us).

stewardsencha

“Build awesome apps for any device” was what got my attention late in 2008. It turned out to be all sizzle and no steak. Beta after bleeding beta. And ultimately separate solutions per device. A bare-faced lie.

$21,9500 ?! That certainly is an “unprecedented web application development solution”

houyu

sencha,you dispointed me..so expensive, what do you want to do? got mad?
and I tell you guys ,there is another solution, ‘node-webkit’,the same structure and better performance,
here is the link, https://github.com/rogerwang/node-webkit
as you see,they are the same dame thing,guess what? it is free,sencha,you hear me ?

Garry@TriSys

Wow - I didn’t realise the price of this @ $21,000 - You can buy into the Microsoft development stack for less than £1,000 and tap into millions more developers, and public domain code samples, for significantly less money. As a prospective customer, this has put me off. We need individual licenses, especially as our model is having highly specialised (one-man-band) contract developers - this is the way the industry is today and tomorrow. With this high price, contract developers will be harder/impossible to find, and this will result in us using other frameworks.

Awesome Bob

BLiNNeMaNS

ehr.. Sencha Complete single user doesn’t have the packager, Awesome bob..
As you can see here: http://www.sencha.com/products/complete/
when you scroll down to the “need more?” it clearly states the packager only comes with the ‘Sencha Complete: Team’ variant.

Rob Walker

Wow - way to go Sencha. You really got my interest until I saw the price.
Not much use coming up with a really nice solution if you price it out of the hands of the everday developers that will do your best word of mouth marketing for you.
Seriously - whoever is doing your sales and marketing course needs to go back to school

slemmon

Has anyone had any luck working with Sencha sales to get a Team purchase with less than 10 seats? I contacted sales and the rep confirmed that Complete does not include the desktop packager and that the minimum seat requirement for Team is 10. However, I’ve seen some folks indicate that they worked with sales and were able to get a Team purchase with less than 10 seats.

I’m the Sencha evangelist in my company and have raised interest with other developer groups, but don’t yet have 10 developers - and all of our budgets are unique so even if I had 10 total I’d have a tough time wrangling the financing between the workgroups. I found Appjs which does a commendable job, but is still not quite the comprehensive solution that Team’s desktop packaging looks to be. Thoughts?

Alex

This is exactly what Node-Webkit (https://github.com/rogerwang/node-webkit) does well and for free !!!.
NW is available for Win,Linux and Mac.
I used NW for several ST2 apps and it is really fast and simple.
@Sencha: You should give it for free in my opinion…

Brad

Michael Mullany

Hi guys - we’ve been hearing the same stuff from everyone, and we’re working on a new package/price that will make this available at a much lower entry price. We really did think that the packager would most appeal to large teams at bigger companies, but clearly there’s a ton of interest from smaller teams and solo devs so stay tuned for news on the new pricing.

Awesome Bob

Well listening to your customers should probably have come first. It is obvious now that you didn’t because of what you just said. Why wasn’t this available to individuals first and then in a team package or simultaneously? I’ve already invested my time in learning Node-Webkit because it’s free and does the exact same thing. I hope this is a great learning experience for your company.

slemmon

Alex

@Michael Mullany
My suggestions:
1) Create a “single developer” package with ST2+Charts+Desktop packaging + Eclipse Plugin
2) Improve Sencha architect with a code editor supporting all the functionalities of the Eclipse Plugin and provide it as addon to the previous package (for GUI driven developers)
3) Both should have a fair entry price for small,single and poor developers

BTW: The Sencha frameworks are great !! And expanding your developer base is for sure your warranty for an expanded market.

Justin Hsiao

Stephen

I have a project I am starting for a client and wanted to purchase sencha complete all week but yet I would really like to have the desktop packager and data connector. I do not want to jump on and buy sencha complete just for you to later offer the other features I dont have funds to throw away. Any update on pricing and timeline so those of us on hold can let our clients know.

I have tried to call all each day this week at several different times and never got an answer regardless of extension chosen, support, sales, accounting etc. Makes me wonder if it is even worth paying for the premium support package since you guys dont answer your phones… it sort of has the feeling of a one man shop behind the sencha team.

I have also sent an email using your contact info almost two weeks ago and am yet to get a reply.

Stephen

Caylan

Michael Mullany
Sencha Employee

@stephen - my last attempt to comment got swallowed by our own comment filter so I’ll try again and hope for the best. We’ll have a new price & package for SDP announced in January. We get a ton of inquiries every day and we try our best to keep up with them, but we don’t always succeed.

|Stephen

Understand that things get busy, but it is coming up on two weeks now that I have been trying to call and email you guys. I have a project that I need to start as soon as I wrap up their website in the next few days and want to order your suite, but not until my questions are answered. I would appreciate a call back.

digitalpoins

Hi friends - we’ve heard the same thing from everyone, and we’re working on a new package / price that will make it available to a much lower entry price. We really think that the packager that will be most attractive to the great team at a great company.