Sencha Inc. | HTML5 Apps

Blog

Sencha Touch 2 RC—Now with Native Packaging

February 22, 2012 | Alex Voloshyn

Today, we’re happy to announce the release candidate of Sencha Touch 2 as well as our native packaging for Windows and Mac.

Download Sencha Touch 2 RC   View Release Notes

UPDATE: Sencha Touch 2 GA is now available. Go download that instead!

Six full-featured example apps

To provide some inspiration, we’re shipping six combination examples written by the Sencha Touch core team. Each uses best practices to help you get started on building your next great application.

  1. Jog with Friends Jog with Friends
    Combines Facebook’s social graph with a favorite activity.
  2. Touch Style Touch Style
    An infinite carousel of endless fashion items to keep every shopaholic happy.
  3. O'Reilly O’Reilly
    A conference template that’s as impactful as its content.
  4. TouchTweets TouchTweets
    Highlights how easy it is to consume all those @Sencha tweets.
  5. KivaTouch KivaTouch
    Help individuals around the globe.
  6. GeoCongress GeoCongress
    Keep a watchful eye on what your elected officials are up to.

In addition to the new examples, we have fixed various bugs and added some more features:

Ext Direct

Combined with your favorite server side stack, you can now invoke remote methods client side using Sencha Touch.

// Calling a method on the server
myRemoteClass.myRemoteMethod();

Enhancements to DataView

We now have a new option on DataViews that give your lists padding and rounded corners.

Ext.create('Ext.List', {
    ui: 'round'   // It's that simple
});

While we’re all accustomed to using carousels when transitioning between cards, we thought it would be helpful if we could add in the ability to horizontally scroll Lists. DataViews can now scroll horizontally giving you all the momentum scrolling goodness you’ve come to love.

Ext.create('Ext.List', {
   inline: { wrap: false }  // Smooth horizontal scrolling
});

Bridging to Native APIs

While we wait for native APIs to be exposed in standard browsers (WebKit just landed Vibration API), you can get access to many commonly requested APIs by packaging your app in a native shell. With the release of our native packager, you now have access to these popular APIs via JavaScript. In addition to a sample app and demo video, we’ve written a guide on Using Native APIs to show how simple using native APIs from JavaScript can be. This release candidate has the following APIs:

  • Connection – tells you whether or not the device has a current connection to the internet
  • Notification – allows you to use native notification windows (the native version of Ext.Msg)
  • Orientation – gives you as much information as the device provides about its current orientation
  • Camera – allows your app to take pictures or select from the camera library (with your user’s permission)

Screencast

Quick walkthrough of packaging your web app for native distribution. View on Vimeo

SDK Tools Update

Back in October of last year, we previewed our native packaging for iOS and Android as part of our SDK Tools. Although we only released the Mac OS version, we talked about being able to build these mobile applications on multiple platforms. Today’s release now supports the ability to package and sign iOS applications on Windows.

Download SDK Tools
Download for Mac   Download for Windows

Getting Started

Once you download and install the SDK tools, you can start packaging your HTML5 app in a native shell by running a simple command.

// Packaging made simple
sencha package ios.json
Let's take a look at the json config file for packaging on Windows
// Source of your ios.conf
{
        "versionString":"1.0",
        "iconName":"icon.png",
	"applicationName":"MyGreatApp",
	"applicationId":"com.yourcompany.MyGreatApp",
        // Your webapp path
	"inputPath":"C:/projects/MyGreatApp/www/",
       // Native app destination
	"outputPath":"C:/projects/MyGreatApp/ios/",
       // Destination App Store!!!!
	"configuration":"Release",
        "platform":"ios",
	"deviceType":"iPhone",
        // Your Developer Cert
	"certificatePath": "c:/certs/Developer.p12",  
        "certificateAlias":"iPhone Developer",
        "orientations": ["portrait",
		"landscapeLeft",
		"landscapeRight",
		"portraitUpsideDown"
	]
}
If all goes well you should see the following:
The application was successfully packaged
The application was successfully signed
To help get you started, we've written a native packaging guide to help get you started with the process. We think this functionality opens up a whole new world for web developers around the globe. Sencha is excited to offer these capabilities to the mobile community free of charge.

Summary

We are extremely proud of this progress we’ve made in this release candidate. We’ve worked around the clock refining and polishing Sencha Touch 2 for general release! We believe that Sencha Touch 2.0 raises the bar for mobile web experiences. We hope you think so too.

Follow Sencha Touch 2 Development

If you missed all the great progress in our development of Sencha Touch 2, catch up with our release blog posts from the last three weeks:

There are 66 responses. Add yours.

Jarred Nicholls Sencha Employee

3 years ago

Wow, code signing on Windows! Genius! wink

Ralph Haygood

3 years ago

This is great! The connection, notification, and camera APIs will be very useful to me. I hope you’ll eventually add support for accessing contacts, which would be very useful to me and undoubtedly many other developers.

Jay Garcia

3 years ago

Congrats guys!! I have been looking @ the API on a daily basis, and extremely intelligent design and hard work is evident in the source code.  I absolutely love working w/ this framework more than any other to date!

Steffen Hiller

3 years ago

Niiice! I’m getting used to the weekly releases!! :D

Steffen Hiller

3 years ago

Big props for the horizontal list and round dataview corners! smile

Steffen Hiller

3 years ago

And huge props for the native packaging of course!

(Sorry, spam filter.)

Alessandro Mussini

3 years ago

Great job indeed!

BC

3 years ago

Great work! Native packaging looks promising. Can we get a roadmap when other native API’s will be supported? My vote is GeoLocation should be first up.

EZboy

3 years ago

Are charts included?

Harold

3 years ago

What an unbelievable release.  I just tried the windows packager, and followed the directions on how to create a cert, and I’m floored!!  I have an iOS app on windows in secs!  While I know there are build services like phonegap build, but I haven’t tried it.  Sencha’s packager is too easy to not give it a try.

I can’t thank you guys for giving web developers like myself such an amazing set of frameworks and tools.  Nice job guys!!

Dave Lowndes

3 years ago

Is it too late to get rid of the _* files so we don’t have to deal with this bug that prevents the Android SDK building with Sencha Touch 2.0?

http://code.google.com/p/android/issues/detail?id=5343

interfaSys

3 years ago

A few issues remain with PlayBook 2.0. I opened the kitchen sync example full screen in the browser.
- Top icons are replaced with white squares
- Forms demos are broken. The first one doesn’t scroll and there are severe redrawing issues when transitioning from one example to the next.
- White flashes at the end of each slide in bottom tabs example
- Dropdown selectors, action sheet and picker all use the “phone picker” instead of showing the information properly like on the desktop. Seems like a profile issue.
- Double taps generate single tap first

Jip Spinnewijn

3 years ago

Cool to see you guys making so much progress!
This framework is getting better every time.
I am still dissapointed in the performance of the new Navigation View, though.
The show/hide animations when pushing and popping on Android are too choppy (See the O’Reilly example).

Will this be optimized before the final version?

Lakewood

3 years ago

Native API!! Awesome!!

Javier Roca

3 years ago

Hi, i have a question regarding Native Packaging for Android, i have a app build with sencha touch, hosted on a nodejitsu server because i use node.js, socket.io for the real time response, my question is on the JSON file “webAppPath”: “” should i put the nodejitsu path? sorry i don’t get the magic of the sdk to convert the web base app to native, for your help thanks, regards

Javier Roca

3 years ago

sorry Noob question i read more about the packaging and this schema resolve my doubt http://blog.nodejitsu.com/single-page-apps-with-nodejs/SPAs.png  regards Sencha Rocks!!

Robert Dougan Sencha Employee

3 years ago

@Jip Spinnewijn
Unfortunately Android browsers are simply not good enough to animate the NavigationView component, so we disable it by default. Having multiple animations like that (button, title and card) is simply too much, as you have noticed. I’m afraid there isn’t much we can do about it. :(

Zaur Guliyev

3 years ago

When will ST 2 GA be available? And will there be any chart support before April 2012?

Arjen

3 years ago

Good job! Well done!

Is orientation (device API) about GEO location?

Alessandro

3 years ago

Great work !!
Just a wish…..
Is it planned to have a native packaging on Desktops through QT (you know it very well !)?
This would be very useful for anyone developing for both mobile devices and desktop touch.
I immagine something like a single EXE (on Windows) with the full js apps statically compiled with QT.
This could also protect our apps (JS) from being stolen and It will be possible to compile for the main three desktop environments (Windows/MacOS/Linux).

Thanks for your great work

Alex

3 years ago

Fantastic! Worked like a charm.

interfaSys

3 years ago

@Alessandro - Great idea smile

Sean

3 years ago

Thanks for the windows sdk tools. We have been working with them for the last five hours on 2 different machines, trying to generate an Android app, but no luck yet. We have followed the guide etc. but the sencha package command executes quickly with no errors and that’s it - no output.

Please could you guys provide a simple windows walkthough for Android, it would be very much appreciated.

Zyphrax

3 years ago

Great work guys. I like the weekly updates.
Keep it up!

Edmund Leung

3 years ago

@Sean
We have seen some issues with the Android packaging when multiple JDK versions are installed on the machines. If this is the case for you, try keeping only JDK 1.7 on the machine. Also, please ensure <JDK>\bin is in your path environment variables.  If the suggestions don’t work, please send me a private message from the forum and we can help investigate the issues.

Andrew Hewlett

3 years ago

What changed from Beta 2.0 and RC that would make my stores and itemTpl items to stop associating data?

Dave

3 years ago

Some better output from the packaging commands would be welcome. I run the command after triple checking my configuration but I get no output at all - just a silent fail. The generate worked fine but the package command - nothing.

Tommy Maintz

3 years ago

@Andrew

Check the bug forums for more information. There are also overrides provided there.

Jarred Nicholls Sencha Employee

3 years ago

@Dave: no output?  Which OS are you running the tools on, and which mobile OS are you targeting?  You can always post on the forums and we can help out.

Nom4d3

3 years ago

Native Packaging is something that make me fell more comfortable to come back to write apps using sencha touch. Nicely done guys!

About the SDK 2.0 for Windows… I’m trying to package my ExtJS application and nothing happens. The jsb3 file is not generated and I get no errors. Even with—verbose.

estesbubba

3 years ago

Can this be used for push notifications?

Andrew Hewlett

3 years ago

The issue was to do with width on DataView and how fullscreen: true makes the rendered DIV hidden.  Figured out.

Antonio

3 years ago

@ Edmund

Could you please take a look at my post?
http://www.sencha.com/forum/showthread.php?182947-Packaging-an-application-for-Android-using-Sencha-Touch-Native-Packaging-on-Windows-7&p=741129#post741129

Since I can not make the native packaging to work.
Thanks.

Robert Dougan Sencha Employee

3 years ago

@interfaSys
The Blackberry PlayBook will not be supported in Sencha Touch 2.0

@Zaur Guliyev
We are planning a release of Sencha Touch 2 Charts in the near future.

@Arjen
The orientation API is used to detect any motion on your device, and it follows the W3C specification found here: http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation

@estesbubba
Not with this release, but perhaps in the future.

interfaSys

3 years ago

@Robert Dougan - Thanks for the clarification :(

Milan

3 years ago

I’m so glad to see that Touch is nearing it’s release. Now, finally Sencha can dedicate some man power to ExtJS and maybe get out 4.1 before Easter.

Robert Dougan Sencha Employee

3 years ago

@interfaSys
Sorry, I meant 2.0. The Playbook *will* be supported at point in the 2.x release schedule.

interfaSys

3 years ago

Aaaah smile Much better news smile

Isaac

3 years ago

Nice, RC is looking good. Works much better than the ExtJS 4.1 betas.

When are you going to release the SDK tools for Linux e.g. Ubuntu or Redhat ?

Thanks for the excellent work.

Denis

3 years ago

Thank you Team! I can’t wait to use this smile

Arjen

3 years ago

@Robert Dougan: Thank you for the explanation and web reference.

Where can I find more information about the SDK Tools? I’ve downloaded and installed it on my computer, but what is next? I tried the command line help… where can I find some more guidance? In the past I’ve read about setting up a basic MVC application with such a tool. Are there Docs for tools available?

Kurt

3 years ago

Great work!  I love Sencha!!!

DenisMP

3 years ago

Are you going to be releasing a packaging kit for android as well or is phonegap the solution for that?

Robert Dougan Sencha Employee

3 years ago

@Arjen
In the RC, the SDK Tools can only be used to build and package your app. In the future, you will be able use Sencha Command in the SDK Tools to generate “base” files for controllers, models, stores and views.

For more information about building your app, you can read the guide here: http://docs.sencha.com/touch/2-0/#!/guide/building

Nadia

3 years ago

Good news for me.Sencha Touch 2 RC is so nice.

Arjen

3 years ago

@Robert Dougan: Thank you. Using Sencha Command to generate “base” files for controllers, models, stores, and views will be very usefull. I remember these in one of the first presentations of beta 2 (at a conference… or was it about ExtJS). Nevertheless, such tools are more than welcome.

Alex Webb

3 years ago

Have any iOS apps which were packaged in Windows been successfully submitted to the App Store? I’ve heard that Apple really frowns on this and I’m concerned about an increased risk of the app being rejected.

Sudhir

3 years ago

Fantastic ! If I am reading this correct, I dont need Mac to release iPhone app if using Sencha Touch 2 and Sencha SDK ? Sounds big news !

interfaSys

3 years ago

@Sudhir - not really. It’s illegal to compile an iPhone app without a Mac and you need a Mac to send it to the App store.

Arjen

2 years ago

@interfaSys: So, that’s why it is called packaging instead of compiling? Do you need to compile for iPhone anyway and thus need a Mac?

Christophe

2 years ago

I just can’t seem to be able to install it on my iphone. I followed the video in this article and everything works but when I sync with itunes it says ‘sencha native’ failed to install. Anyone else having the same problem?

Soenhay

2 years ago

When will charts be included?

Nithya

2 years ago

Will Charts 2.0 be a part of Sencha Touch 2.0 release?

Trozdol

2 years ago

Wow! I’m so exited for this! :D

So it looks like there won’t be a need for PhoneGap I suppose…

down2

2 years ago

this is great stuff.

TomG

2 years ago

I was trying to replicate what is shown in the screencast.
When i change the iphone.json file (the input and outputfolder), I get this message in terminal:


2012-03-02 14:38:41.981 stbuild[4607:f0b] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘*** -[NSFileManager copyItemAtPath:toPath:error:]: source path is nil’
*** First throw call stack:
(
0   CoreFoundation               0x00007fff91a09fc6 __exceptionPreprocess + 198
1   libobjc.A.dylib               0x00007fff874f2d5e objc_exception_throw + 43
2   CoreFoundation               0x00007fff91a09dfa +[NSException raise:format:arguments:] + 106
3   CoreFoundation               0x00007fff91a09d84 +[NSException raise:format:] + 116
4   Foundation                 0x00007fff8a65d1f3 -[NSFileManager copyItemAtPath:toPath:error:] + 107
5   stbuild                   0x00000001000037a1 -[nkbuild processConfig:] + 3882
6   stbuild                   0x0000000100001061 main + 346
7   stbuild                   0x0000000100000ed4 start + 52
)

Any ideas anyone?

Isaac

2 years ago

1. When will Linux SDK tools be available please ? Sencha touch v2 is useless to developers on Linux without the SDK tools as it can never be deployed to a production environment without the SDK!
2. When will Touch Charts v2 PR, Beta or RC be available ?

Otherwise RC2 is looking good.

Cheers

Alexander Voloshyn

2 years ago

@TomG: you use old nkbuild which was released back in October, update your SDK tools to use latest (it’s stbuild now, not nkbuild)

???

2 years ago

??????;;;;;~

Mike Pearson

2 years ago

@Robert Dougan, @Isaac

Also very interested to know when Touch Charts v2 is available. I assume Charts 1 is incompatible with Touch 2?

Mike

Isaac

2 years ago

@Mick Pearson As far as I know and in my own testing Charts v1 is incompatible with v2 unless your willing to fire up an IFRAME and run both Sencha Touch v1 and v2 on the same page - not a good solution at all.

Sencha Touch Charts v2 was touted by Sencha as being available with the Sencha Touch v2 Final release, but now thats been rephrased to “sometime after Sencha Touch v2 Final”.

I look forward to being able to fire up some nice charts in the awesome environment that is Sencha Touch v2 Final.

Ashok Vilvanathan

2 years ago

This what am waiting for. Great!!!

Tom Stevenson

2 years ago

So it seems Sencha have acquired NimbleKit? I really hope that this isn’t just a talent acquisition, with NK being pushed to the sidelines :(

It’s all gone very quiet on the NimbleKit site with no sign of the devs for ages and only other users contributing help & code.

Giorgio

2 years ago

When will SDK tools be available for Linux?

riclf

2 years ago

Can you provide a comparison between your native packager abilities versus use of PhoneGap ?  Thanks.

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

Commenting is not available in this channel entry.