Sencha.com

Sencha - JavaScript Grid and UI Components

Sencha

Sencha Touch 2 RC—Now with Native Packaging

| 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”:#native-packaging.

Download Sencha Touch 2 RC   View Release Notes

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

h3. 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:

h4. 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();

h4. 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
});

h4(#native-packaging). 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)

h4. Screencast

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

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

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

notextile..

// Packaging made simple
sencha package ios.json

Let’s take a look at the json config file for packaging on Windows

notextile..

// 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:

notextile..

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.

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

h4. 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:

* *Feb 1*: “Sencha Touch 2 Beta”:https://staging.sencha.com/blog/sencha-touch-2-raising-the-bar/
* *Feb 8*: “Sencha Touch 2 Beta 2”:https://staging.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/ and a tutorial on DataView
* *Feb 14*: “Sencha Touch 2 Beta 2”:https://staging.sencha.com/blog/sencha-touch-2-beta-3-kindle-fire-and-chrome-support/ added support for Kindle Fire, and Chrome for Android
* *Feb 22*: Sencha Touch 2 Release Candidate
* *Mar 6*: “Sencha Touch 2 GA”:https://staging.sencha.com/blog/announcing-sencha-touch-2/

Comments

  2. Ralph Haygood says

    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.

    Reply

  3. Jay Garcia says

    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!

    Reply

  8. BC says

    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.

    Reply

  10. Harold says

    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!!

    Reply

  12. interfaSys says

    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

    Reply

  13. Jip Spinnewijn says

    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?

    Reply

  15. Javier Roca says

    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

    Reply

  17. Robert Dougan says

    @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. :(

    Reply

  20. Alessandro says

    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

    Reply

  23. Sean says

    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.

    Reply

  25. Edmund Leung says

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

    Reply

  27. Dave says

    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.

    Reply

  29. Jarred Nicholls says

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

    Reply

  30. Nom4d3 says

    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.

    Reply

  32. Andrew Hewlett says

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

    Reply

  36. Milan says

    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.

    Reply

  39. Isaac says

    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.

    Reply

  41. Arjen says

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

    Reply

  47. Arjen says

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

    Reply

  48. Alex Webb says

    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.

    Reply

  49. Sudhir says

    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 !

    Reply

  50. interfaSys says

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

    Reply

  51. Arjen says

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

    Reply

  52. Christophe says

    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?

    Reply

  57. TomG says

    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?

    Reply

  58. Isaac says

    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

    Reply

  59. Alexander Voloshyn says

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

    Reply

  62. Isaac says

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

    Reply

  64. Tom Stevenson says

    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.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to Sencha newsletter

Sencha is committed to protecting and respecting your privacy. For further details on how your data is used and stored, please review Sencha Privacy Policy. You can unsubscribe from these communications at any time.

Sencha.com

US: 1 (800) 212-2802

info@sencha.com