Sencha Inc. | HTML5 Apps

Blog

Creating Native Applications with Sencha Desktop Packager

November 26, 2012 | Ariya Hidayat

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:

ionpackage myappconfig.json

Let’s create a simple configuration file:

{
    "applicationName": "HelloWorld",
    "versionString": "1.0",
    "outputPath": "HelloApp",
    "webAppPath": "hello/",
    "settings": {
        "mainWindow": {
            "autoShow": true
        }
    }
}

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:

<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <p>Hello, world!</p>
    </body>
</html>

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:

function addMenu() {
    var fileMenu = Ion.ui.mainWindow.menuBar.addMenu('File');
    var colorMenu = fileMenu.addMenu('Change Color');
    colorMenu.addMenuItem('Red', changeColorRed);
    colorMenu.addMenuItem('Green', changeColorGreen);
    colorMenu.addMenuItem('Blue', changeColorBlue);
}

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:

var result = Ion.io.browseFiles({
    path: Ion.io.userHomePath,
    type: 'open',
    filters: [{
        name: 'JSON Files',
        pattern: '*.json'
    }]
});
 
if (result.success) {
    var read = Ion.io.readFile(result.value);
    if (read.success) {
        var obj = JSON.parse(read.data);
        // Do something with obj...
    }
}

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:

Ion.ui.mainWindow.setPosition(40, 30);
Ion.ui.mainWindow.setDimensions(800, 400);
 
Changing the state of the window is also possible:
 
// 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.

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

There are 48 responses. Add yours.

Alex

2 years ago

Desktop packager sounds great, but, only being available w/ Sencha Complete: Team, which is $2,195 per seat with 10 seat minimum puts it at $21,950 to use it…  Seems awfully steep

You should consider having a stand alone license model for this product, or have variations of the regular Sencha Complete product that include it so that licenses can be obtained in single quantities

Frik

2 years ago

Agree with @Alex

David

2 years ago

The only missing piece of the puzzle is Linux support. 32 and 64 bits should be supported at least with a binary file creation (.bin). Distro-specific packages (deb, rpm) would be just an extra.

Chromium and all the bells and whistles are available to Linux as well, so I don’t really understand the reason of exclusion. What a pitty.

Paolo

2 years ago

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.

Pseudolus

2 years ago

It would appear that Sencha’s target market has left the individual developer and small company behind.  The price is way too steep especially for a new and unproven product.

Frik

2 years ago

Let’s face it…. it’s greed. :(

slemmon

2 years ago

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).

Ricky

2 years ago

People stop complaining.
There are free available alternatives.
Sencha has to make money somehow no ? smile

Ronald

2 years ago

I agree with Alex, little developers need same stuff..

Joly Mathew

2 years ago

This is great product and we are all excited to use it. I must say the pricing is very aggressive and it people will not buy it with that kind of steep price model.

I wish sencha will reduce the price and will provide an open source license model as well and it may help in adopting the product and use more…

stewardsencha

2 years ago

“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”

Go jump in a lake.

Dan Campbell

2 years ago

Yeah, that sucks. We’ve been begging for this feature for a couple years now, but there is no way that we can afford this license. Small business gets screwed again I guess. Ugg.

Jay

2 years ago

Talk to Sencha, they can also do a 5 pack if you contact them.

Kazuhiro Kotsutsumi

2 years ago

I translated it into Japanese.

http://www.xenophy.com/javascript/4004

Provision: Japan Sencha User Group
http://www.meetup.com/Japan-Sencha-User-Group/about/

Awesome Bob

2 years ago

Sencha, if you know anything about a Lean Startup, you’ll recognize when you need to build what your customers want instead if what you assume you can sell.

How about individual licenses now?

houyu

2 years ago

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 ?

Awesome Bob

2 years ago

What happened to my other comments about node-webkit?

rcmartin

2 years ago

Is there a demo available of a sample packaged application?

joe

2 years ago

for $2,1950 I’ll learn c++/objective and c#

Russell Rogers

2 years ago

This is a terrible price. I develop desktop apps using realbasic which allows me to create apes for mac, windows and Linux for a fraction of the price.

Davide C

2 years ago

ExtJs/Sencha are good solutions/products with some “too” bugs grin ...but thanks to staff and community the problem/bug are always solve o bypass.

I work with these products by 2/3 years and I think that the force of ExtJs/Sencha is the Staff and the Support of “Big Community on Internet” ....

A big/terrible price will kill this community with changes for future
I hope ExtJs staff think back

Garry@TriSys

2 years ago

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.

Yuan Yudistira

2 years ago

Titanium will let you create native desktop apps. and it is free.

Tom V

2 years ago

LOL, good luck with that ridiculous pricing.

Priyo

2 years ago

I just re-code my hospital ERP from sencha EXTJS to PHP with YII framework and jquery.. bye-bye sencha

Awesome Bob

2 years ago

Sencha complete is now available on an individual license basis now. I’m trying it out.

BLiNNeMaNS

2 years ago

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

2 years ago

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

2 years ago

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

2 years ago

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…

Peter

2 years ago

I love you sencha, but this shit is retarded.

Please take the desktop packager out of the complete team bundle.

Hear the voices from the customer.

Brad

2 years ago

@Alex THANK YOU SO MUCH! I had no idea that Node-Webkit existed.
That’s exactly what I’ve been searching for. Thank you * infinity!

Michael Mullany

2 years ago

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

2 years ago

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

2 years ago

Thanks for the update, Michael!
I look forward to the announcement.

Alex

2 years ago

@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 wink

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

Frik

2 years ago

Also, if you are not going to include new products into Sencha “Complete”, then you should rename it to Sencha “Incomplete”.

The only reason we went with Sencha Complete was that it implied getting new products.  We did not need Sencha Touch… so we we will be downgrading to plain old ExtJs only when our renewal is up.

smskute

2 years ago

Sencha complete is now available on an individual license basis now.  I had no idea that Node-Webkit existed.
That’s exactly what I’ve been searching for. Thank you * infinity!

Justin Hsiao

2 years ago

I sent in several requests for an evaluation copy but got no words back, can anyone help here? Thanks!

Stephen

2 years ago

@Michael Mullany

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.

I want to purchase I just need my questions answered before doing so…

Eugene Ramirez

2 years ago

Pseudolus

2 years ago

@Stephen

Did you get any response to your questions?

Stephen

2 years ago

no, still no returned phone calls or emails

Caylan

2 years ago

I also want desktop packager with the $995 bundle.

Michael Mullany Sencha Employee

2 years ago

@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

2 years ago

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

2 years ago

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.

Stephen

2 years ago

Thanks Michael for getting back to me.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.