Two years ago, we set out on a journey to make the web mobile. Today, we’re raising the bar with the release of Sencha Touch 2 Beta.

Thank you to our community for your feedback during our sneak peaks with our Preview Releases. Your contributions in the forums, reporting bugs, adding feature requests, and your inspirational teamwork in the Q&A threads have kept us focused on what’s really important to you—delivering quality. We’ve taken all your feedback and we’re proud to deliver a release that we hope will exceed your expectations.

Download Sencha Touch 2 Beta   View Release Notes

What’s New?

With every major release, we strive to bake in the latest innovate approaches to help you create impressive applications. And learning how to use these techniques is now easier than ever.

API Documentation, Guides, and Examples

We’re investing a great deal of time in creating comprehensive documentation for Sencha Touch 2. Every major class now has a full introduction complete with code samples and how it fits into the wider context of your app. As well as class docs, we’re adding over 20 brand new guides covering everything from getting started through to building and deploying your applications.

On top of this, our documentation center now allows you to experiment with inline code editing.

Touch 2 Docs feature 20 new guides, code samples, and editable examples.
Visit the Touch 2 Docs

We’re continuing to lead the way when it comes to innovation in our learning materials. We’re also proud to continue sharing all of the hard work we put into our documentation tools under the open source JSDuck project, a part of Sencha Labs.

New Facebook Integration Example

We’re adding an example showcasing Sencha Touch’s seamless integration with the Facebook Graph API. Jog With Friends combines the Facebook JavaScript SDK on the client side with a 200 line node.js script backed with MongoDB on the server side. For a live demo, check out http://ju.mp/senchajwf on a WebKit browser.

Foundational Improvements

Each major new version of Sencha Touch brings with it an opportunity to advance the state of what can be done with the mobile web. Here are just a few of the improvements we’ve made in Sencha Touch 2.

A New Class System

Sencha Touch 2 benefits from the supercharged class system that powers Ext JS 4. The upgraded system enables powerful new capabilities like dynamic loading, custom builds and new features like mixins. This makes developing your app easier from the first line of code all the way through to creating a minimal custom build that contains only the classes your app actually uses.

As a developer though, the biggest improvement you’ll probably notice is the use of the new config system. Sencha Touch components have always been very configurable, but for version 2 we’ve made a big improvement to the consistency of the API.

Every single configuration can now be set and updated in a very predictable way through the use of generated getter and setter functions. These functions always follow the same format and can be called at any time so once you know the config name you automatically know what function to call to update it:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

var panel = Ext.create('Ext.Panel', {
    html: 'Sencha Touch 2 rocks'
});
alert(panel.getHtml()); // alerts the current value of the html config
panel.setHtml('It sure does'); // changes your panel html to a new value

These functions always follow the same format, which makes learning the framework really easy. As well as the getter and setter functions we provide hook functions which makes it easy to create your own configs—check out the new class system guide to find out more.

MVC with History Support

One of the most frequently asked questions about web frameworks is how to structure your apps to make them easy and fun to create and maintain. With Sencha Touch 2, we’re bringing significant improvements in our MVC architecture, providing new functionality and a cleaner, leaner API.

History support is baked right into Controllers in this new release, making it easy to add back button and deep linking support into your application. We have a full guide on history support and you can see it in action on your device by checking out the upgraded Kitchen Sink example.

Setting up routes is easier than ever—just define the urls your app needs to react to inside your controller along with a function to call when that url is detected. For example here’s how we can easily create an ecommerce application that shows product details when the user navigates to urls like http://myapp.com/#products/123:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

Ext.define('MyApp.controller.Products', {
    extend: 'Ext.app.Controller',
    config: {
        routes: {
            'products/:id': 'showProduct'  // It’s that easy
        }
    },    
    showProduct: function(id) {
        console.log('showing product ' + id);
    }
});

Check out the full guide on History Support to find out how to add this to your app.

Multi Device Profiles

One of the challenges of a multi-device world is building an application that runs seamlessly across operating systems and screen sizes. With Sencha Touch 2 we provide a simple mechanism that enables you to write your app once then customize it for each device it runs on.

This is achieved by configuring Device Profiles, which usually split your app into Phone and Tablet modes. Define all of the models, views, controllers and store that you want to reuse in your Ext.application and anything profile-specific inside the configuration for each Profile.

For example, let’s say we’re creating a Facebook app and want to show a simple feed view on Phones and a detailed one on Tablets. We can start by telling our Application that it has two profiles:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

Ext.application({
    name: 'FB',
    profiles: ['Phone', 'Tablet'],
    controllers: []
});

Now we set up a Tablet Profile that’s activated when we detect that we’re running on a Tablet device:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

Ext.define('FB.profile.Tablet', {
    config: {
        controllers: ['Feed'],
        views: ['DetailedFeed', 'Timeline']
    },
    isActive: function() {
        return Ext.os.is.Tablet;
    }
});

And one for Phones:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

Ext.define('FB.profile.Phone', {
    config: {
        controllers: ['Feed'],
        views: ['SimpleFeed', 'Timeline']
    },
    isActive: function() {
        return Ext.os.is.Phone;
    }
});

When the app boots up, it will automatically figure out which Profile to activate and use its specialized models, views and controllers. Check out the Device Profiles guide to find out how to use them in your app.

New Components—Component Data View and Navigation View

In addition to using the new XTemplates in your dataviews, we’re adding one of the most asked for features—using components in your data views. You can now add buttons, or any components, to items.

The KivaTouch demo app uses a Component DataView to show funding progress.

Giving your users the proper visual cues helps your applications flow more naturally. With Sencha Touch 2, wiring up view transitions are now simpler than ever when using a Navigation view. If you choose to use a navigation view, navigational controls such as back buttons will be handled for you. As an added bonus, we’re adding sexy animations when switching between cards.

Sencha Touch 2 Navigation View. View video on Vimeo Dive In

Now that we’re in beta, we encourage you to dive right in. We have a stable API, and we have more guides to help get you going quickly. If you’re looking to port your Sencha Touch 1.0 app we have a backwards-compatibility build that helps you through the migration process. We also have an upgrade guide to help you out.

Note: those of you who have been using the Sencha Touch 2 Preview releases, be aware that we have cleaned up the builds we generate and as a result you may need to change which build of Sencha Touch you use. Most people should now be using sencha-touch-debug.js while developing, but for a complete list of the builds we generate see the builds guide.

Features We’re Still Working On: Android ICS Performance

Sencha Touch 2 has significantly faster performance on Android 2.x browsers – with fast list scrolling being a particular point of pride. We’ve always treated the browser in Android 3.x as fundamentally broken, and do not plan to officially support it in Touch 2. We are currently working on improving performance in Android 4.0 – the Ice Cream Sandwich release. So far, we have found no acceptable mechanism to achieve fast and flicker-free animations. We have filed a bug with a simplified test case showing poor performance on a variety of mechanisms with the Android bug list. If you’d like to help prioritize this bug, please go to the bug page for Android bug number 24833, and “star” the bug by clicking on the star icon just before the headline. Solving this bug will help, not just Sencha Touch 2, but the entire web community developing content for the Android 4 browser. Feel free to add your own test cases as well!

Summary

We hope you enjoy playing around with the examples, and diving in to building your next great app. It’s been a lot of hard work getting to this point, and we thank you for all the feedback. Please keep sharing your ideas.

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

Sencha Designer 2 Now Supports Sencha Touch

Sencha Designer 2 Beta features support for Sencha Touch and Ext JS JavaScript frameworks.
Download Sencha Designer 2 beta today

We’re thrilled to announce that Sencha Designer 2 Beta is available for download! Designer 2 makes it easier than ever to build desktop and mobile applications using Ext JS and Sencha Touch.

We’ve been working hard to bring you the next generation of Designer that will help you quickly build Ext JS and Sencha Touch applications. Experienced users will enjoy the productivity gains of the visual development environment, while folks new to Sencha will have a much easier time learning how to work with our frameworks and quickly build a complete application.

Ext JS and Sencha Touch are incredibly rich: they provide UI components, charting, controllers, models and data stores. In Designer 2, we make all of these features easily accessible and neatly organized to make it easier to discover all their capabilities.

From Ext Designer 1 to Sencha Designer 2

Designer 1.0 was the first step in tooling for Sencha frameworks. Designer 1 was a visual UI builder that made it easy to scaffold and design the UIs for your applications. You used it in conjunction with another code editing tool in order to build Ext JS 3 apps.

In Designer 1.2, we adding the ability to target multiple frameworks and also added support for Ext JS 4. You could continue to build views and stores utilizing all of the new widgets available in the new framework, like charts, enhanced stores, and more.

While you told us that you loved the features of Designer 1.x, we kept hearing that you wanted Designer to do more to help you build fully functional applications in a collaborative way.

Designer 2: Easier, Faster, Stronger

When started planning Designer 2, we wanted to improve every aspect of the tool. To achieve this goal, we adopted the mantra “Easier, Faster, Stronger.”

• Easier because we believed that the learning curve of building Sencha apps could be shortened. In Designer 2, all components come with handy in-line documentation, and there are quick links to go deep into the API reference. More fundamentally, developers can try things quickly and get instant feedback. The Designer canvas is a live view giving you immediate feedback. Learning the dozens of components in Touch or Ext JS is now a breeze.

• Faster because traditionally, web based development proceeded like this: write some code, refresh the browser, check the changes. Over and over again. While better web debugging tools have come a long way, debugging and error checking is still a tedious and sometimes unpredictable process.

  Designer 2 is different: all code generated by the tool is guaranteed to work out of the box. You can’t arrange components in a way that will break the frameworks’ conventions. Every property or event of every component is available in Designer, removing guesswork and eliminating digging through the API docs.

  Moreover, the Project Inspector has been greatly enhanced. It’s the heart of your project, and it shows your views, controllers, models, and stores all in one place, along with information about the project’s structure. All components and their relationships are there where you can see and analyze them.

  If you need to jump into a project somebody else started, the Designer Project Inspector makes it easy. At one glance, you can see the entire project and understand how the application is built without thumbing through pages of code.

• Stronger because Designer 2 helps you create well-structured applications from day one, and ensures that generated code follows best practices. Most (if not all) of the boilerplate code is generated for you, so you can focus on the code that really matters: the controller logic that’s at the core of your unique application.

What’s new in Designer 2?

Designer 2 represents a significant leap ahead in functionality, and here is a brief list of what’s new and what changed since the previous version:

Support for Sencha Touch 2

This feature has consistently been the top request from our community, and now it’s here! Sencha Touch 2 is now a first-class citizen of Designer. Visual development of mobile web applications is now a reality. This beta includes the PR4 release of Sencha Touch 2.

Code editor

Designer now includes a built-in editor so you can add your own code any time you want. You can toggle between the design view, which gives you access to Designer visual controls, and code view, where you write your JavaScript. The files are saved to .js files on the file system, so you can use your editor of choice, or the built-in editor in Designer.

New Toolbox

The component Toolbox has been expanded and improved: it now includes all the components you need to create a fully functional application like Controllers, Models and even a brand new store that connects to Sencha.io. We also worked to make the vast array of components more manageable by adding base categories. This allows you to narrow down the selection quickly, and create your own to fit your personal workflow.

New Project Inspector

The Project Inspector shows the entire application at a glance. The root Application node contains your launch function, while the Controller, View, Store and Model nodes help you keep things organized as you’re building an MVC application.

Event Bindings

There’s a new panel that displays all the Event Bindings available for a component, and you can use this to bring your UI to life. And when your application grows in scope, you can stay organized by moving your event bindings into a controller.

Source control friendly file format

Developers share code using source control, but developers using Designer 1 had a hard time doing that because of the monolithic nature of our project files. Designer 2 projects are better: gone is the single file archive (you still can package them that way for easy sharing via email). Now, each view, model, store is its own file. Designer 2 makes it easier to work in a project team.

In-line documentation

In Designer 2 every component, property and configuration comes with handy in-line documentation, and if you need more there are quick links to go deep in to the API reference.

Caveats for the Beta Release!

We’re excited to share with you our first beta of Designer 2. While we’re excited to see our community give it a whirl, it is still a beta, and there’s still some work left to do. In the following weeks the team will concentrate on two things:

• Further quality improvements of the existing feature set
• Improvements in the user experience and the UI design

Certain features that were not quite ready for the beta have been disabled – don’t worry they’ll be back soon. As of today’s beta, the most notable absence is packaging for mobile devices.

The coming weeks are going to be fundamental to make Designer 2 the application you’ve been waiting for, so we need your feedback. We will be running usability tests to make sure we catch bugs on our own before the official release, but if you find something that doesn’t work as you expected, or think you have an idea that would make the application better, go ahead and let us know. All feedback will be evaluated carefully.

If you’re local to the San Francisco Bay Area, and are interested in participating in the usability testing that we’re doing, we’d love to hear from you. Click here to apply for the usability test.

Since the application is going to improve and change significantly before release, the Designer documentation for beta is very basic. We are releasing an introductory article to get you started, and more material will become available as Designer takes its final shape.

We don’t recommend that you adopt the beta of Designer 2 yet in your production environment. Designer 2 has an auto-update feature, so as we make updates, we’ll be pushing changes directly to the application, and you can choose to accept or decline the updates.

To share your ideas, comments and critiques with us, please use the Sencha Designer 2 forum.

To report bugs, please use the Designer 2 Bug Forum.

Promotions, pricing and availability

We are updating pricing for the product at the launch date: individual copies of Designer will be $399, with discounts for 5 and 20 packs.

Special offer: buy an Ext Designer 1.x License today and take advantage of promotional pricing of $279. Plus, you’ll receive a free upgrade to Designer 2.x License when released. Hurry, this offer ends on March 31, 2012.

Upgrading: if you bought Ext Designer 1.0 after January 1st, 2012, you’re entitled to a free upgrade to Sencha Designer when it ships! In order to get your upgrade license please contact the email address designer.upgrade@sencha.com and we will take care of everything for you.

If you purchased an Ext Designer 1.x license prior to January 1st, 2012, you can upgrade to Designer 2 for $199 from now until March 31, 2012. To take advantage of this offer please email us at designer.upgrade@sencha.com. Note that after March 31, 2012, the upgrade price increases to $279.

Please note that Sencha Complete which will include Designer 2, will remain priced at $999.

So, go ahead, download the Designer 2 beta trial or purchase Ext Designer 1 from the Sencha Store, and share your experiences with us!

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

Click through to see a video of Sencha Animator animations playing in an Apple iBook.

Like everybody else on the US west coast, this morning we woke up in a world where Apple is poised to transform the way we consume textbooks. One of the compelling features of this new and exciting medium is the ability to easily publish interactive books through iBook Author.

iBook Author lets you embed interactive content in your books to create more engaging experiences for learners, and our first thought here at the Sencha HQ was to try using Sencha Animator to create that interactive content.

So after a few minutes of fiddling, we found a fairly straightforward way to embed an Animator project in an iBook.

Step 1: Preparation in Animator

Open a Sencha Animator project you’d like to place inside your iBook. Take a screenshot of the stage area to create a “cover” for the animation, and rename it “Default.png”. This cover image will be used to show the animation in the page when inactive. Make sure it’s the same size as the stage.

Sencha Animator Rocking Boat project. See the animation and our original article, Rocking the Boat of Flash with CSS3 Animations.

Export the project as you normally would, then place your Default.png inside the output folder.

Step 2: A Little Hacking…

Now comes the tricky part: you need an “info.plist” descriptor file in your output folder, so we provided one ready for you in our project file available to download at the bottom of this article.

Edit the info.plist file to enter the dimensions of your animation, then the BundleName to match the export folder’s name (e.g. myExportFolder), and finally add the extension “.wdgt” to the folder.

If you’re working in Mac OS X, the icon of the folder will change to that of a Dashboard widget. If you’re on Windows or Linux, you can create a widget but you will need Mac OS X Lion in order to complete the process, since iBook Author only runs on that version of Apple’s operating system.

Finishing Up in iBook Author iBook Author and Sencha Animator in action. Download the project files below to get started.

Now that you have an animation file ready, you just need to add an HTML widget to your book, and drag the .wdgt file in the widget’s properties as we show in the screenshot.

Now you’re ready to export your book and enjoy the results of your work! Of course, you’ll need the new iBooks Author app and Sencha Animator on your Mac. Download our demo Sencha Animator iBook project below to get started.

• Download Animator->iBooks Project File
• Start your 30-day trial of Sencha Animator 1.1
• Download iBooks Author from Apple (Available for free on the Mac App Store)

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

I wanted to share my thoughts on my progress learning Ext JS 4.1 as a developer new to Sencha. As an application developer I have used many different development environments and application frameworks throughout my career and whenever I learn something new I compare back to my experience. Overall I have been very impressed with Sencha frameworks as they provide a professional foundation to build an application atop.

Interpreted

The single hardest shift for me is embracing the interpreted nature of JavaScript within the Ext JS framework in general. While not new to interpreted systems, I personally expect compiler emitted errors/warnings/flags, syntax auto-completion, and strong typing for member variables, return types and assignments. Having come most recently from Java, I find that being shown errors and autocompletion as I type is a great productivity enhancement but these benefits are tied to the nature of a strongly typed and compiled language. The general lack of these facilities in working with JavaScript is really the first hurdle in moving to web technology. Truth is, as I got more comfortable with the interpreted nature of the the language, I quickly found myself enjoying the advantages:

• JavaScript’s flexibility is a double edged sword. The language’s freedom is a joy but you must use best practices to avoid common pitfalls.
• Modern browsers offer developers great insight into application behavior at runtime. I have found the Chrome developer Console and Debugger JavaScript tools to be invaluable.
• Ext JS uses JavaScript as a meta-language to provide deeper OOP/MVC/Class Loading/Mixin support is very elegant for larger scale application development. These facilities exist in very few frameworks and really differentiate Ext JS and Touch. The ability to extend components or leverage a clean MVC pattern within an application make it very developer friendly as a framework.
• Leveraging JavaScript object literals and JSON for data/component instantiation is very productive. The ability to load components remotely, define UI as objects at runtime, and leverage client layout templating is very powerful. The syntax of larger object literals using xtype takes some getting used to. I found myself formatting my code more than normal to avoid the dreaded missing comma errors deep within an object literal.
• Using the Eclipse VJET Plugin was a great productivity boost for JavaScript and Ext JS development. The plugin provides auto-completion for JavaScript and there are several open source syntaxes for Ext JS. Being able to see instances, warnings/errors, and in-context return types is a very pleasant addition based on my past experience. VJET VJET+ExtJS

Ext JS “Standard Library”

Ext JS provides a foundational set of helper classes and methods to make building applications easier. I found that the Ext.Array, Ext.Date, Ext.String, Ext.Object, Ext.Loader classes make working with data very easy and generally simplify building applications. Every application will use these common libraries and having them included and integrated into the framework is great.

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

Ext.require( [ 'widget.*' , 'layout.*' , 'Ext.data.*' ] ); 
Ext.Array.each( [ 1, 2, 3, 4 ], function( name ) { console.log( name ); });
Ext.Object.getSize( { age:23 , height:6, name:"Ted" } );  //3

Containers

Ext JS provides a rich set of containers (Ext.window.Window, Ext.panel.Panel, Ext.container.Container, Ext.grid.Panel, etc.) to allow developers to easily create nested views and more complex application logic. In Ext JS, containers’ layout behavior is programmatic and allows you to set the behavior of a container at runtime to ‘vbox’, ‘hbox’, or any of the Ext.layout.container types. Additionally you can set sizes dynamically by assigning values to the ‘flex’ property on items within a container.

Xtype

Ext JS provides a loosely typed data format called Xtype to allow you to pass trees of containers and controls as a single object. It is a very, very powerful technique and really makes building lots of UI components at all at once easy. In Flex and Android I used declarative XML for component initialization and layout but these are closely tied into compiler workflow. In an interpreted system, you want to leverage a format that is rapidly parsed and supports remote loading. As Xtype is a JavaScript Object Literal, it is parsed at the speed of the JavaScript engine in use. On both mobile and desktop targets, this is very fast. While you can create components independently, using xtype for component generation is much more productive once you get the hang of it. Here are 3 xtypes passed within an Array:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

[ { xtype: 'container', html:'First Item', flex:1 } ,
{ xtype: 'splitter' } ,
{ xtype: 'container', html:'Second Item', flex:1, maintainFlex:true } ]

If this were assigned to a container’s ‘item’ property, it would render a split view. I found this very simple and elegant, compared to the complexity in other frameworks.

Styling

I have styled components in several frameworks. In Ext JS, abstracting style properties as runtime loaded CSS for all components is very powerful. Better still, generating CSS from the provided SASS/Compass source formats makes building a global style change quite easy. In both Flex and Android, style is baked in at compile-time and is less flexible than a runtime interpreted model. While I now feel comfortable generating a base color change in Ext JS, it will take me some time to absorb the finer details of CSS styling of the components. This is easily one of the more complex areas of the framework and will take me time to fully understand.

Hello Sencha

Given this is my first real post on Ext JS on Sencha.com, I thought it would be good to post the simplest example possible. The example creates a window with an image inside. Feel free to paste into a local html file and open in a browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Sencha</title>
    <!--styles-->
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/extjs/4.1.0.b1/resources/css/ext-all.css">
    <!--extjs 4.0.2-->
    <script type="text/javascript" src="http://cdn.sencha.io/extjs/4.1.0.b1/ext-all.js"></script>
    <!--app-->
    <script type="text/javascript">
      //define the application
      Ext.application({
        launch: function() {
          //create a window
          var win = Ext.create( 'Ext.window.Window' , {
            title: 'Hello Sencha',
            height: 285,
            width: 250,
            layout: 'fit',
            //add an image to the window by an xtype object
            items: {
              xtype: 'image',
              src: 'http://www.sencha.com/files/blog/old/blog/wp-content/uploads/2010/06/sencha-logo.png'
            },
            listeners:{
              beforehide: function( com, owner, opt ){
                alert('hiding win');
              }
            }
          });
          //show the window
          win.show();
        }
      });
    </script>
  </head>
  <body></body>
</html>

I will continue to document my journey learning Ext JS and Touch frameworks as I go. There is clearly a lot to learn and hopefully sharing my experience will help others new to Sencha. More to follow.

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

We are excited to announce that the first minor release update for Sencha Animator is now available. In addition to general bug fixes, we’re happy to introduce a few new features and improvements to make working with Animator easier and more productive.

Experimental support for Firefox 7+

Firefox recently introduced support for CSS animations, and we wanted to give our users access to animation on newer Firefox browsers. Animator now exports -moz as well as -webkit animations. If your customers use Firefox 7 and above, they can take advantage of this new Animator capability.

Sencha Animator 1.1 has support for Firefox CSS3 animations

As we continue to work on support for Firefox, you may notice a few issues (e.g., div elements with gradients applied will fail to render). Improving Firefox support will be one of the areas we will focus on in coming updates.

A new color picker Sencha Animator 1.1 features a new color picker

This latest release of Animator makes selecting colors easier and gives users more control. The new color picker features separate hue, saturation, luminosity, and transparency scrollers with integrated preview to fine tune color selections. You can also use RGB values if you prefer to work in the RGB color space. Animator keeps both sets of values up to date seamlessly, so you can switch color spaces as your project demands it.

More workflow improvements

The new color picker is the most visible new feature but it is not the only one. On the basic UX front, new users can now create a Sencha ID without leaving the application; we hope this will make the experience of using Animator for the first time more convenient. To help users who work on smaller screens, we also added the ability to turn off the rulers around the main stage.

We also took a look at how we could improve the editing experience in Animator’s stage. The application positions child objects relative to their parents, according to the rules of CSS positioning. This generates behaviors that at first sight might look strange for designers used to traditional graphic design packages. In the case of nesting objects inside other objects, this can make objects appear to be in the wrong place on the stage.

The new version of Animator compensates for this, maintaining the child object’s position on the stage for ease of editing, while still preserving the correct CSS under the hood. This takes care of the majority of cases when objects are nested, but it won’t always work if extreme transformations have been applied to the objects.

Let’s look at an example involving two objects to see how Animator accomplishes this. Object A is at x=100, y=100 on the stage. Object B is at x=300, y=300. According to the rules of CSS positioning, which position a child object relative to its parent, nesting Object A inside of Object B will make Object A jump to a stage position of x=400, y=400.

Animator compensates for this during nesting by adjusting for the difference between the original positions of the two objects (300-100=200) when determining the new relative position of Object A. When Object A is nested inside Object B, Animator places the Object A child at a relative position of x=-200, y=-200 to place it in the same stage position that it was before nesting.

Export has also been improved, with a new “split export” feature. The new version of Animator lets you split your export up, exporting HTML, Javascript, and CSS separately instead of exporting a single file with all code embedded inline. In addition, Animator exports now also work around some Android 2.x CSS issues with the implementation of fill mode for greater browser compatibility.

Bug fixes

We fixed a number of bugs mostly to address animation editing, automatic updating, a previous incompatibility with Mac OS X Snow Leopard, and export behavior. See the changelog for a complete list. We are serious about providing a trouble free experience in Animator, and we encourage you to report bugs in the Bug Forum.

Press Play to start…

The Animator team hopes you will enjoy this update and that you will keep creating beautiful animations with our tool.

For now, go ahead and update, either by accepting the update prompt you will get inside Animator on startup, or download Sencha Animator 1.1, and show us what you can do with it.

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

It’s that time of year, and we’re once again publishing our HTML5 wishlist. But before we do that, let’s see how our 2011 wishes went. On balance, we didn’t do so bad. Out of our ten wishes, four came through. Here are the HTML5 wishes that became reality in 2011. We wished for:

• A richer CSS3 effects toolbox; and lo there was CSS Filters, a port of the sophisticated filters available in SVG to the DOM.
• High performance position: fixed for mobile browsers; and we were granted it in iOS 5’s Mobile Safari. Now we’re waiting for other devices to catch up.
• Pervasive GPU acceleration; and we were pleased to see the BlackBerry PlayBook and Android 4.0 join iOS’s excellent implementation of accelerated graphics.
• Websockets stabilization: and we got a Christmas present of RFC 6455 and the W3C Candidate Recommendation for the web sockets protocol and API respectively.

But our other six wishes didn’t fare so well. There was only minor progress toward deeper device access on mobile browsers and developers continued to use native wrappers to access cameras and microphones. WebSQL stayed dead as a standards track technology (and its performance even decreased in iOS 5). We also saw slow progress on IndexedDB implementations. The rival HTML5 codec camps remained entrenched with little prospect of harmony, even as the mobile patent battles raged across global jurisdictions and institutions, and live debugging on mobile browsers remained a difficult task.

In the “welcome surprise” category, Microsoft impressed us with its support for HTML5 in the IE10 preview, showing a solid commitment to the latest HTML5 and CSS3 standards. Finally, and disappointingly, many of WebKit’s nicest proprietary extensions, like background-clip: text, remained off the standards track and omitted from other browsers.

So, looking forward to 2012, we’ve got a new top ten wish list for HTML5 and for the browser makers. Some of 2011’s top wishes make a comeback, but others are brand new. We don’t claim these are definitive, but a motley collection of what we think would be most interesting for developers creating the rich and responsive applications that HTML5 was built for.

10. HTML Media implementations

Although we got some support for photo uploads in Android, web browser support for media capture and other HTML5 media technologies remains elusive. As a result, mobile web developers, in particular, have to wrap their web apps in a shell to get device API access. Camera access is the #1 feature reason for HTML5 developers to deploy to native rather than web, and given Apple’s leadership in almost every other area of mobile web, it remains a glaring omission for Mobile Safari.

9. HTML5 audio quality

While long-playing HTML5 audio works in most places, short-form audio, particularly for the features that games need, is lacking. Synchronizing audio with video or animations, multi-channel and mixing are all features that developers want. There are a number of early stage drafts to create standards for richer media handling, so that’s encouraging. Perhaps by the end of the year, we’ll be looking at solid desktop support, at the very least, with some standardization in round 2 of working drafts. We wish.

8. Better Offline Caching

HTML5 cache manifests are great for basic offline application support, but they require developers to know in advance what their assets are, declare them in a file and link the file into their pages. Mobile browsers in particular have had idiosyncratic and occasionally buggy interpretations of cache manifests. So, we’re wishing for a more dynamic, easier caching mechanism, ideally one that has some JavaScript APIs.

7. Web Intents: Standardization & support

Web Intents are a great mechanism to allow web applications to hand off tasks to one another, without knowing in advance who and what the offloading web app is. Invented by Paul Kinlan from Chrome, and inspired by Android’s intents system, they’re a neat way to allow web applications to collaborate on tasks. We’re wishing for a speedy standards track draft and good interoperable Firefox and WebKit implementations by the middle of the year.

6. WebGL Everywhere

It’s here, it works, it’s gorgeous. We’re even supporting a framework for WebGL. It looks fantastic on desktop. Our (probably fruitless) wish for 2012 is that IE10 supports WebGL, and we get ubiquitous WebGL on mobile. With iOS planning to support WebGL only within iAds, at least for now, it looks like we might wait a while to get that broadly, but we’re wishing for it anyway.

5. IndexedDB

2011 put a stake through the heart of WebSQL (thanks to Mozilla’s leadership) but IndexedDB is not ubiquitous yet. On desktop, Safari has yet to ship it, and it’s not here on mobile. Until then, developers continue to roll their own shims on top of local storage and WebSQL to get cross-browser offline data storage. We’re wishing for IndexedDB everywhere this year.

4. Right-sizing images

Sencha.io src helps developers deliver the right image size to any mobile device, but in our opinion this is a neat solution for something that should be solved in standards. Karl Dubost from Opera points out that there was a proposal back in the day to enable this at the HTTP layer. However, given today’s cloud environments where developers often dont get to tweak their web servers and vanilla HTTP is the only thing available, this won’t fly. It needs to be added to either HTML or CSS. We’re hoping the CSS4 Images standard now in “pre-draft” form will get some love and attention this year.

3. Contacts API

We’d like contacts access without having to use a shell API. So would lots of our developers. There’s a spec from Nokia and friends but too few implementations.

2. Background Services

We’d also like to see more capabilities for managing multiple resources and handling background tasks. Chrome, once again, is leading on implementing these OS-y type services. Web notifications are in working draft and we wish they get broader implementation this year. We’d also like to see server-sent events get the wake-up behavior that’s spec’d.

1. Better Mobile Browser Debugging

And for the second year in the row, we’re asking for better mobile browser debuggability and profiling. Chrome’s remote debugging feature has been made to run on BlackBerry PlayBook, there is no reason others can’t follow it. Scriptable debugging/profiling would greatly assist mobile application QA, something that’s currently a painful task in mobile web app (and framework ) development.

So that’s it! We know lots of our wishes have to do with mobile, since that’s where new technologies get adopted and reach critical mass the fastest. But it’s also the environment that’s hardest to hack around shortcomings, since the iOS and Windows Phone environments are so tightly controlled. And there’s a much longer list of things that we could add here (better, easier crypto for one, WebCL and more) but we’ll stop here in the interests of brevity. What’s your favorite wish for 2012? Give us your feedback in the comments!

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

The new Nanocrowd app helps you find great movies to watch instantly on your iPad.
View the Nanocrowd app in the App Gallery

Nanocrowd develops technology that understands why people like things. Our first use of this technology is helping people find movies they’ll enjoy. By knowing why people like things, we can make the process of finding movies faster, easier, and more fun.

These are wild times to be in the movie business, and we have to remain flexible, moving quickly to new platforms. For example, with over 40 million iPads sold (and half of them being used to stream movies and television), the iPad has become a leader in mobile entertainment devices. To support this platform, we recently announced our first movie-search application designed for the iPad, built with Sencha Touch: search.nanocrowd.com.

Why We Chose Sencha Touch

“We wanted to remain flexible and create a single code base that we could extend to other platforms.”

Nanocrowd started life as a desktop application, so our challenge was to convert our movie recommendation website into a mobile movie-watching platform. Our development team didn’t have expertise in mobile or touch; and, even though we were building our first mobile application specifically for the iPad, we wanted to remain flexible and create a single code base that we could extend to other platforms.

After evaluating several technologies, we found that Sencha Touch was the best fit for our needs. It took full advantage of HTML5 and CSS3, offering us the cross-platform framework we needed. We built a quick prototype and found it easy to learn. Most important, Sencha instantly put an elegant face on our mobile application.

To develop our mobile app, we started with lists of channels and movies. To become an intuitive mobile application, it was crucial that we convert our desktop grids and scrolling lists into touch-centric scrolling lists. Sencha Touch made it easy to inject movie and channel data into a pane that had three independent scrolling lists, and the first piece of our application was done.

We also needed to present a wealth of information about the movies our users selected. Sencha allowed us to create multimedia overlays which we could float over any other application pane. We created our “Movie details” overlay which includes a thumbnail image, a JavaScript tag cloud, text about the movie, and checkbox forms for flagging whether a movie has been seen or for clearing alerts.

Finally, we wanted to create a fun trailer-viewing experience. Of course, we had to load the trailer for the movie users selected, but then we also wanted our users to be able to scroll through and watch the trailers for any of the movies in the channel. We created a new pane (with an elegant transition, naturally) that included an embedded YouTube viewer, thumbnails for “next” and “back” scrolling, and information about the movie and the channel.

On this pane, we took full advantage of the HTML5 video display and controls, including not only pause and play but also pinch-zoom for full-screen viewing. These same controls and viewer will be available to us on any platform that supports HTML5. When users are ready to watch a movie, a simple sheet flies in, populated with more information from our database showing them where they can watch the movie. One click launches the website or application where they can watch their movie instantly on their iPad.

Our decision to use Sencha wasn’t based on any single element, but rather on how comprehensive the framework is and how easy it is for us to make our applications feel both native and elegant.

Business Value of Using Sencha Touch

Sencha Touch enabled us to cross over from being a desktop web application to a touch and mobile application without extensive training or hiring. We appreciated how easy it was to get started with the framework—we had a prototype application up and running in a couple weeks and understood what it would take to build the real thing. The “Kitchen Sink” examples and code samples were consistent time-savers, as we frequently found just what we needed by snagging source code straight from the Sencha website. After finishing the prototype, we developed a rich, multimedia mobile application with about 6 person-months of development, all with well-designed elements that give our users a familiar touch experience.

Perhaps even more important to our future is that we’re relying on Sencha to solve problems and issues that arise with device OS upgrades and with new hardware platforms. In the coming year, we plan to release our applications on several different platforms, and not only will the application function well out of the box, but as cross-device browser issues arise with these new devices, we’re depending on Sencha to address them.

Finally, we continue to benefit from the Sencha team’s enthusiastic customer support. They are responsive and helpful in our coding efforts as well as getting us up-to-speed on the touch and mobile platform. As we’ve progressed, Sencha has become a valuable technology partner.

Our Advice to New Developers

Don’t worry about mastering the framework before you begin coding—the sooner you begin to prototype and write some code, the faster you’ll learn to take advantage of all the tools and support that is available. When we started, we thought we were building a prototype, but before we even realized it we’d developed pieces of our application. This prototype/experiment/build process has been very successful for us.

There are two things we wish we’d done sooner. We were slow to take advantage of the theming capabilities in Sencha Touch. We thought we’d add them at the end, but it would’ve been more effective and easier to build them in from the beginning. Be sure to spend some time working with theming sooner rather than later. Also, jump into the forums and establish yourself as an active participant as soon as you get started. Although we used the forums as a resource, we didn’t think we should contribute actively until we were “experts,” and we wish we’d participated more fully from the start.

Final Thoughts

Looking to the future of consumer applications, there will continue to be a variety of platforms and operating systems we’ll need to support. Our customers will be adding new “screens” where they’ll want to watch TV and movies and you know they’ll expect all of their devices to play nicely together. By developing in Sencha Touch, we’re building a foundation that we can extend to those platforms as they emerge and change.

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

We’re constantly updating the Sencha Learn section with new content, here is some great content you might have missed:

New Tutorials for Ext JS 4 and Sencha Touch 2

With the preview of Sencha Touch 2 available, it is a great time to explore the APIs and prepare to upgrade your existing applications. In this article from our newsletter, Upgrading to Sencha Touch 2 PR2, we take a simple existing example app—the Touch 1 CityBars guide—and explore what is required to make it compatible with the Touch 2 PR2 release.

Following up from his highest-rated SenchaCon talk, Jacky Nguyen prepared a great tutorial on the Sencha Class System within Ext JS 4 and Sencha Touch 2. Both frameworks use the classes to manage dependencies, improve reuse, and provide rich features commonly found in class-based languages. Developers writing code using Ext JS 4 and Touch 2 can inherit from internal classes in the frameworks and make their own code object-oriented.

Community member Jay Garcia has posted his own take on the Sencha Touch 2 Class System, which you can find as an 11 minute screencast in this contributed piece to Sencha Learn.

Tommy Maintz continues his Ext JS 4 MVC series of articles. In the previous two articles, he explored architecting a Pandora-style application using the new features of Ext JS 4. In the third installment, he implements controller logic inside of the application’s MVC architecture. Catch up with Part 1 and Part 2 if you haven’t already. Or go straight to Part 3 of Architecting Your App in Ext JS 4.

New Tutorials for Ext GWT 3 Beta

Ext GWT 3 Beta is now available! To allow a smooth transition from Ext GWT 2 to 3, Ext GWT lets you include both v2 and v3 components in the same application. Ext GWT Team Lead Darrell Meyer explains how to run Ext GWT 2 and 3 together in the same app.

Our newest Ext GWT team member Justin Hickman wrote an interesting article on Ext GWT 3 Declarative Markup with UiBinder. UiBinder support has been one of the major driving factors for many of the API changes in Ext GWT 3.0.

Catch up with Ext Designer & Sencha Animator

Check out this tutorial for building a Car Store with Ext Designer 1.2 and Ext JS 4. This article takes the previous “car store” sample project, upgrades it to Ext JS 4, while adding new JavaScript charts.

If you haven’t seen the new Sencha Animator (which recently hit 1.0, and is on special for Flash developers), get familiar with our Quick Start and Guided Tour. Our guided tour provides a brief introduction to Animator functionality and suggests exercises to help you learn your way around the tool.

If any of these articles are a surprise to you, sign up for our newsletter to get them earlier. Get started now, and happy learning!

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

In a previous guest post I described how we upgraded Ext Scheduler to Ext JS 4. As I mentioned then, one key factor that greatly simplified our upgrade was unit testing. While it may sound like an obvious thing to do, unit testing a UI generated by JavaScript is not as trivial as unit testing your server code.

For us, about midway through our upgrade, we realized that we badly needed a tool to help us verify that what used to work in the Ext JS 3 version still worked in the Ext JS 4 version. Doing the testing manually for each feature and API method would simply have taken way too much of our time. After evaluating a few popular options, we realized that none really fit our needs, so we started to design and write our own tool: Siesta. Siesta can help you test plain JavaScript or code built with popular JS frameworks such as Ext JS or NodeJS.

But before we get into the details of Siesta, let’s take a step back and give some more background.

Why testing JavaScript UIs is hard

Testing Ext JS, or any other JavaScript centric UI framework, is hard because the available tools are not really suited for the task. When it comes to DOM and user interaction testing, most popular web UI testing tools don’t offer enough help unless your application uses simple static HTML pages. Using Ext JS, the HTML markup is usually generated by JavaScript code, meaning that you cannot safely rely on pixel coordinates, element IDs or XPath/CSS selectors. Brittle tests become very time consuming, if you have to update them every time that you make a slight change to your UI. A tool to test Ext JS must know about Ext JS and make use of its power. This is where Siesta is different from the rest, because its top priority is Ext JS testing.

What we wanted from a test tool

There are a few underlying reasons why we decided to write our own tool. Here are the main features we needed in a good Ext JS test tool:

• Write tests in JavaScript — we don’t want to have to learn a new language to write tests.
• Automatable — we should not have to open a browser to run our tests
• Extensible — we should be able to easily add our own assertion methods and abstractions.
• Optimized for Ext JS — it should offer high level abstractions to assist with Ext JS testing.
• Simple and user friendly UI — low learning curve, should be very easy to get started

Together, we believe these features provide a very powerful testing tool. Let’s take a peek at the Siesta UI. Below you can see the two main panels of Siesta: The left hand side holds the test suite tree, and the right panel shows the test assertion list for one of the recently executed tests.

The Siesta UI. Click to view larger. How to write a simple Siesta test.

Let’s look at how to write a simple Hello World test. It would look something like this:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

StartTest(function(test) {
  var myTextField = Ext.create("Ext.form.TextField", {
      renderTo : Ext.getBody()
  });
 
  test.click(myTextField);
 
  test.type(myTextField, 'Hello world', function() {
      test.is(myTextField.getValue(), 'Hello world', 'We did it!');
  });
});

A test starts in its StartTest method, which is similar to how you use Ext.onReady in your application. A text field is created and then typed into using the type() method. This method operates asynchronously and in the provided callback function we simply assert that the text field value is what we expect it to be — “Hello world”. When running this and enabling the “View DOM” mode, this is what you see:

Siesta output after running a simple test

Since Siesta can be automated easily using tools like Selenium or the excellent Phantom JS, you could just as well run the test above on the command line. You would then see the following output:

Siesta Command Line

Even complex tests are made trivial by Siesta, for example testing moving, resizing and closing an Ext.Window:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

StartTest(function(t) {
  var win = new Ext.Window({
      height : 200,
      width : 200,
      // Set window position to known state
      x     : 0,
      y     : 0
  });</p>
 
  win.show();
 
  t.ok(win.rendered, 'The window is rendered');
 
  t.hasPosition(win, 0, 0, 'Correct initial position');
  t.hasSize(win, 200, 200, 'Correct initial size');
 
  // Use component query to drag the header 20 px right/down
  t.drag(win.down('header'), null, [20, 20], function() {
      t.hasPosition(win, 20, 20, 'Window could be moved to new position');
 
      // Use regular CSS selector to drag the east resize handle 20 px to the right
      t.drag(win.getEl().down('.x-resizable-handle-east'), null, [20, 0], function() {
          t.hasSize(win, 220, 200, 'Size increased');
 
          t.click(win.down('tool[type=close]'));
 
          t.notOk(win.el.dom, 'The dom element of the window is gone');
      });
  });
});

What unit testing can do for your codebase

Testing your code brings lots of advantages, perhaps the biggest one is that it increases your confidence in your codebase. How do you know your code actually works? How do you know if a small change in the core of your application is safe or if it breaks some feature? The only way is to actually manually verify each and every feature of your system—but that’s not realistic unless you have a test suite.

There are other advantages that are definitely worth thinking about:

• You will save lots of time if you can automate your cross-browser testing prior to pushing out a new release of your application. Doing this will move the quality of your releases to a whole new level.

• If you use a write-tests-first approach, you are forced to think about your spec and requirements one extra time, before even writing a single line of code.

• Unit tests help you find tightly coupled code. If you cannot test component A, without also creating a component B and C, then you should probably refactor your code.

• Siesta can automatically detect global variable leaks for you by analyzing the window at the end of a test.

Another advantage, especially for custom components, is that unit tests provide real usage examples for your APIs, which is like extra documentation built into your project.

When refactoring your code or when upgrading the underlying Ext JS version of your application, it is a huge plus to have a test tool to help you verify the state of your application. Or as someone wrote on Twitter recently: “Without unit tests you’re not refactoring. You’re just changing sh—”.

That is why, for big systems without a test suite, programmers are often afraid of refactoring, and instead only make minor cosmetic changes on the surface, patching here and there. As a result, such systems accumulate a lot of cruft, making further development much more costly.

Summing it up…

I hope this post has given you an idea of what Siesta is and how you can benefit from using it. We still have many features to implement. In the next couple of months we’ll be adding support for Sencha Touch testing, code coverage, performance benchmarking, and lots more. I’d like to invite everyone to join our forums and try Siesta. We are constantly looking for new ideas and ways to improve it, so please let your voice be heard in our community forums.

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

As part of our continuing series, we ran the new Galaxy Nexus through our tests to see how it stacks up as an HTML5 app platform.

As part of our continuing series on the HTML5 capabilities of new mobile platforms, today we’re taking a look at the Samsung Galaxy Nexus, the first device to ship with Android 4.0, aka Ice Cream Sandwich. We’ve been hearing rumors over the last few months about the involvement of the Chrome team in Android 4, so we had our hopes up that the browser would be a major step forward. In the past, we’ve reviewed Android 2.x (Gingerbread) devices, like the Galaxy Tab and Android 3 (Honeycomb) devices, and the Motorola Xoom —and have been disappointed by the performance and correctness of the browsers.

“Ice Cream Sandwich is a major step forward for the Android Browser, but still falls short of iOS 5.”

After putting the Galaxy Nexus through our test wringer, we can say that Ice Cream Sandwich is a major step for the Android browser. However, it still falls short of iOS 5. It’s a solid browser for normal page browsing and it adds major new features that support most of the HTML5 spec. It also has taken a big step forward in correctness of rendering, which is a welcome change for people who want to push their mobile browsers to the limit.

Our First-Look “Methodology”

Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. We test in a number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. To get there, we use a variety of tests, including Modernizer, Acid3, SunSpider, Sencha Animator demos and our Sencha Touch Kitchen Sink.

Acid3 and Modernizr

The Galaxy Nexus scores a perfect 100/100 on the Acid3 test, just like Android 3. However, a close look at the Acid3 results reveals that there are still rendering artifacts. In the top right of the test image there is a telltale faint red/pink box which should not be there, since Acid3 requires pixel-for-pixel of the reference image. In practice, this won’t impact web browsing or web development much, but it’s a bit of fit-and-finish that “we’re not quite there yet” on Android.

We then turned to Modernizr, one of our favorite tools to look under the hood of a browser. This time, we used the implementation of Modernizr on haz.io which provides a clean and easy way to look at Modernizer results. The verdict? Ice Cream Sandwich offers very good HTML5 support! Font-face, geo-location, and full support for the CSS3 suite. Support for the various CSS3 effects is probably what we’re most excited about: animations, reflections, 2D and 3D transformations, as well as transitions are all supported. For web developers, you can finally rely on HTML5 in Android 4.0 to build rich user interfaces. We do note that with @font-face support, the device does in fact support it, but TypeKit does not yet detect it correctly. As with Playbook support, Typekit usually has a lag between first ship and support, so don’t be discouraged just because your TypeKit web fonts don’t work yet.

With all the good news, there were features missing. Things of note that were absent from Ice Cream Sandwich were Web Workers, Web Sockets (so no real-time web on Android just yet), weak support for the new Input Types (like datetime or range), and WebGL. SVG was fully supported. We also decided do a head-to-head between iOS 5 and Android 4 on HTML5 support, and extracted some notable differences between the two platforms. This list isn’t comprehensive, but it shows some gotchas for web devs. Developers should use this guide to decide which APIs to take advantage of on a specific platform, or if they want to stick to the common set.

#feature-comparison th { padding-right: 10px; text-align: left; } #feature-comparison td { border-bottom: 1px solid ghostWhite; } .positive { color: green; } .negative { color: #920000; } Feature Android 4 iOS 5 overflow-scrolling No Yes File API Yes No History Management No Yes Shared Workers No Yes Web Sockets No Yes Web Workers No Yes Various Input Types Half Full Emoji (not part of HTML5) No Yes Performance Testing

When checking the user agent received, web servers report that our Galaxy Nexus was using WebKit version 534.40, which is a very modern and up-to-date WebKit. Under the hood, according to the BoyGeniusReport, the Galaxy Nexus contains a dual-core ARM processor, specifically the TI OMAP 4460, which is in the same family (Cortex-A9) as BlackBerry PlayBook and the Kindle Fire. We therefore expected SunSpider scores in the same range as other tablets. As we’ve mentioned before, this current generation of tablets all ship with dual-core processors and all have roughly the same JavaScript optimizations. So the results are again fairly predictable and look like other devices we’ve tested in this generation of hardware.

Like most devices in the dual-core Cortex-A9 family, the Galaxy Nexus has predictably good JavaScript performance. Note: This image was updated on Dec 14 at 1:30 PM PST.

The SunSpider tests are synthetic tests that push the JavaScript engine to its limit. So, next we turned our attention to some more real world tests, looking at CSS3 performance using our own Sencha Animator demos as well as a few other tests.

Like we tried with the Kindle Fire, we threw caution to the wind and started off on our most challenging CSS3 animation test, the Kick Fu game that was developed for the launch of Sencha Animator. To our surprise, the game didn’t even start. We were a bit flummoxed by this given the fact that the whole CSS3 animation suite is supported in ICS. It’s unclear to us at the moment why this occurs. Our running theory is that the JavaScript game controls might be at fault, but it’s a wild guess at this point.

We ran through the rest of our Sencha Animator demos, some of which are very complex but are all JavaScript free, and were pleasantly surprised to see them all work beautifully. We haven’t seen an Android device run these demos well to date, and Ice Cream Sandwich shines here. For developers who want to use CSS3 2D, 3D, animations, and transitions, we’re happy to report that support on Ice Cream Sandwich is now near parity with other leading platforms.

We also tested a few other real world areas for performance and correctness. We tried a Canvas based GitHub network graph. Rendering performance was fine and the result was accurate. Pinch/zoom also worked well and didn’t exhibit the low-quality mode toggling, we’ve found in earlier Androids. The resolution and dithering of the page stayed constant as we zoomed and moved around the page. We also tried out Canvas Cycle and it worked reasonably well. The frame rate was solid but it rendered to a very very small part of the screen, most likely due to the very high resolution of the Galaxy Nexus. When we zoomed in, the device managed to keep up reasonably well. The FPS easily dropped by half and audio was never dropped, and the FPS recovered when we zoomed out to the page’s natural size. Very impressive improvement over earlier Androids.

Finally we tested embedded HTML5 audio and video. In one word: finally. We used the test player on html5video.org, which gives you a video tag inline to the page. The Galaxy Nexus is the first phone we’ve seen that actually plays the video inline! iOS 5 on iPad and the iPhone do not play video inline, and we were impressed to see it work very well on Android 4. The video not only plays, but plays inline to the page. This is a big deal for web developers looking to use Video to enhance their web experience.

“The Galaxy Nexus is a big step forward for developers looking to leverage HTML5 on Android.”

Sencha Touch Kitchen Sink

Our Kitchen Sink app is built with Sencha Touch and tests all aspects of our mobile web app framework. The Kitchen Sink gives mobile browsers a good workout as it exercises a huge set of browser features including a wide range of CSS3 effects.

Right off the bat, it’s obvious that the device is more HTML5-friendly than any other Android when using the Kitchen Sink. Rounded corners look beautiful (not pixelated as in earlier Androids), icon mask work correctly, multi-touch is supported and scrolling is substantially improved. It’s not all perfect though: full-screen white flashes were still noticeable when scrolling, even if greatly reduced from the seizure-inducing levels in Honeycomb. Page transitions also occasionally caused the browser to “blink” as it re-renders. Re-renders are most notable when scrolling a page that’s been fully laid out. When starting a scull, the page does a white screen-flash, then begins to scroll fluidly. Our best guess is that the browser is dumping the rendered page to the GPU to use hardware accelerated scrolling, and the blink occurs during that transition. Our guess is the CPU->GPU texture transition is the main culprit here.

Sencha Touch supports 3D transitions, specifically Flip and Cube, and they now work on Android for the first time, although screen-flashes are again a problem artifact. The other big issue we found is that address-bar hiding has changed between Android 3 and 4. This will impact web developers widely. In an single page app, like our Sencha Touch Kitchen Sink, it’s hard to get a hidden address bar to re-appear. On older Androids, pulling the whole page down would side the address bar back and push the page down with it. In ICS, this doesn’t happen reliably, and instead of adjusting the page geometry it actually overlays the address bar on top of the page content. This is not a deal breaker, but a definite change of behavior that developers should watch for.

Ice Cream Sandwich: Suggestions for the HTML5 App Developer

In summary, the Galaxy Nexus and Ice Cream Sandwich are a major step forward for the Android platform. Feature by feature, HTML5 support has gotten much better, rendering has become more accurate, and performance has gotten much faster. Although still behind the current HTML5 gold standard of iOS5, Android 4.0 is night and day compared to previous versions. We’re excited to see Google put this level of effort into Android’s web capabilities. And we hope they keep their foot on the gas! (And we’re keeping our fingers crossed that the Kindle Fire will get an upgrade to ICS in the New Year!)

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

Ext GWT 3.0 Beta Now Available. Download Ext GWT 3.0 Beta Today

Today we are happy to announce the availability of Ext GWT 3.0 Beta!

We consider this Ext GWT 3.0 Beta to be feature complete (with one exception, the tri-state tree). Moving forward we will focus solely on fixing bugs that we find and that the community reports. In the time since Developer Preview 5, the team has been hard at work finishing the new 3.0 features and working to fix bugs that have been reported by the community. We're excited in Ext GWT 3.0 to include the following major features:

• Adoption of GWT Events and Handlers
• First class support and interoperability with GWT Widgets
• Interface based design (supports easier testing and the MVP pattern)
• Improved model support (POJO based)
• Compile time templates
• Cells, including support for cells in data widgets
• Cell based fields
• New and improved strongly typed layout engine
• Full UiBinder support
• New native Draw and Charting API (no plugins!)
• Custom theming based on Appearance pattern and ClientBundle

For a list of changes in 3.0 Beta, please refer to the release notes.

Download Ext GWT 3.0 Beta View Demo

The improvements in Ext GWT 3.0 allow you to take advantage of new functionality with a minimal learning curve. Also, the addition of the new plugin free charting components enable you to extend your applications with powerful data visualization and analytics capabilities, all without needing brower plugins. The new charting components leverage SVG and VML giving developers compatibility across all desktop browsers. And because v2 and v3 can coexist in the same applications (stay tuned for detailed instructions in a upcoming blog post), you can plan for an orderly upgrade that fits your development cycle.

Special promotion through the end of 2011

We’re also offering a discounted special for the Ext GWT 2.x commercial bundle. From now until the end of the year, if you purchase an Ext GWT 2.x bundle, you’ll receive a 20% discount off the current price and receive Ext GWT 3.0 GA when it’s available at no additional cost! This special is available until the end of 2011, so take advantage of it now to lock in savings.

Buy Ext GWT 2.x + Support for 20% off through December 31st. You’ll be eligible for Ext GWT 3.x when available in the early half of 2012.

You can take advantage of this offer immediately at the Sencha store.

Additionally, we are pre-announcing updated Ext GWT 3.0 commercial pricing that will take effect after the release of Ext GWT 3.0 GA in the early half of 2012. Of course, Ext GWT 3.0 will continue to be available under the GPLv3 license, giving you the flexibility to choose the license that works best for your scenario.

Ext GWT 3.x prices to take effect in early half of 2012.

Maven

The final release of 3.0 will be put into Maven central and no extra repository is required. However, the releases before GA are released as snapshot releases.

To get the snapshot releases, you will need to add the following repository section to your pom.xml: /** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .xml .imp {font-weight: bold; color: red;} .xml .es0 {color: #000099; font-weight: bold;} .xml .br0 {color: #66cc66;} .xml .sy0 {color: #66cc66;} .xml .st0 {color: #ff0000;} .xml .sc-1 {color: #808080; font-style: italic;} .xml .sc0 {color: #00bbdd;} .xml .sc1 {color: #ddbb00;} .xml .sc2 {color: #339933;} .xml .sc3 {color: #009900;} .xml .re0 {color: #000066;} .xml .re1 {color: #000000; font-weight: bold;} .xml .re2 {color: #000000; font-weight: bold;} .xml span.xtra { display:block; }

<repository>
  <id>sonatype-snapshots</id>
  <name>Sonatype Snapshots</name>
  <url>https://oss.sonatype.org/content/repositories/snapshots/</url>
  <snapshots>
    <enabled>true</enabled>
  </snapshots>
</repository>

We have several artifacts available:

• gxt-release - A zip of the release, similar to how Ext GWT was released before 3.0
• gxt - The core component and data classes
• gxt-charts - The new drawing and charting API
• gxt-legacy - Classes to ease porting projects from earlier Ext GWT versions
• uibinder-bridge - Optional support to allow complete configuring non Widget types using in UiBinder XML. Will not be required when Google releases 2.5

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }