Ext JS 5 Tablet Support

Guest Blog Post

Ext JS has been recognized as the leading framework for desktop web applications. The landscape of computer usage, both personal and enterprise, has been changing dramatically since tablets started challenging PC sales worldwide. Sencha recognized this shift and launched new features and optimizations in Ext JS 5.

Ext JS 5 learned a bunch of new tricks from Sencha Touch 2. Years of experience gathered with the best mobile web application framework made its desktop counterpart ready for an impeccable presentation on modern tablets. We can see those updates across the board — in the class system, event management, widgets, and even the new deployment options.

In addition to presenting rich web applications on tablets, Ext JS 5 fully supports all interaction patterns tailored for touchscreen devices

Class System

The cornerstone of the new capabilities for tablets comes in the latest Class System updates. While Ext JS 4 introduced the config system, it wasn’t exactly enforced until Sencha Touch 2. Developers can now get the most out of the config object, getters, setters, updaters, appliers, and even the mighty Ext.factory in Ext JS 5.

Mind you, the new Ext JS config system doesn’t require use of the config object, which follows the requirements of version 4. However, it is capable of translating properties of config object into their root counterparts, automagically.

To better explain this concept, observe the following Ext JS code snippet:

Normally, the html property should come outside of the config block, at least in Ext JS. Because Ext.Component has a member function called setHtml, the class system feeds the value to the setter.

This important practice helped Ext JS 5 reuse the code written for Sencha Touch 2 and vice versa. It’s not just that it allows developers to share code among applications written in the two frameworks, it also enabled Sencha to incorporate many important features from Sencha Touch in Ext JS 5.

Events

Touch is the central input method for touchscreens, which is why Sencha bundled touch event and gesture support in Ext JS 5. The key player in this upgrade is the new event normalization pattern that translates common events into the variants relative to the platform.

In this particular example, the mousedown event will be used as intended on most desktop clients. However, the event management system will automatically identify touchscreen devices and switch to touchstart or pointerdown, based on browser support. Event translation is essential for proper interaction with tablets.

Event updates are bi-directional, adding new features to both mobile and desktop applications. Ext JS widgets now react on swipe, longpress, and other gestures otherwise designed for mobile applications, even when executed in a desktop browser. Naturally, the events that require multiple touches (e.g. pinch, rotate) can’t be ported to a mouse-operated desktop environment. Of course, it was not the intention to encourage developers to port a mobile experience over to desktops, but to ensure consistency in presentation.

With touch events enabled, momentum scrolling made its way to the framework as well. The Touch Scroller is now an integral part of Ext JS 5, enabled automatically on touchscreen devices. No configuration necessary.

Both Class System and event management updates added a significant boost to tablet support. End users will experience these features by interacting with views and widgets. Let’s see how widgets are laid out for optimum tablet support.

Widgets

The quest for optimal touchscreen presentation goes beyond enabling touch events. Certain mouse-based interaction patterns (e.g. mouseover/hover, right click) will not work on tablets. Widgets that support those events on desktop browsers now employ alternative means of interface manipulation.

Grid panel is the perfect example of such a widget. If we observe header menus, we will quickly notice that it takes a number of interactions to turn them on.

Expanded grid header menu

First, to activate the menu, we mouse over the column header. Then the UI shows an arrow button aligned to the right. Finally, we press the button to pull down the menu.

This particular workflow is impossible to replicate on touchscreens, as is. Nonetheless, the grid panel is touchscreen-aware and capable of replacing the native desktop pattern native with a touchscreen alternative. When viewed on a tablet device, grids will show header menus on longpress event, requiring a user to simply tap on a column header a bit longer than usual.

Another interesting example is row highlighting. It’s interesting because there are now alternatives for it on tablets. The main purpose of highlighting is easier recognition of a mouse pointer placement. Because touchscreens don’t have that problem, row highlighting becomes obsolete.

Widgets in Ext JS 5 are not only optimized for presentation on tablets, they also include new features from Sencha Touch 2. For example, icon-enabled buttons make user interfaces even more beautiful.

The iconCls property now works in Ext JS 5 as well. Because buttons are baked into other widgets such as TabPanels, we see that the whole stack has been updated.

The new TabPanel with icon support

The new Sencha Charts package is yet another example of how beautifully these two frameworks interact with one another. Charts prove that the new class system and event management updates make user interfaces truly device agnostic, while maintaining persistent API and performance. Definitely give Charts a try, whether you develop in Ext JS 5 or Sencha Touch 2.

Sencha Charts is the first package shared between Ext JS 5 and Sencha Touch 2 (complete).

In addition to these specific updates, any widget can have mobile-specific design rules with the introduction of the responsive configuration plugin. Any configuration property that has a setter can be updated based on orientation, or even more carefully planned viewport dimension rules. Phil Guerrant wrote a detailed blog post on Designing Responsive Applications with Ext JS, and you can also see the feature in this demo application.

If there’s one takeaway from this section, it’s that Ext JS 5 provides developers with enough tools to make widgets device agnostic. When developing for mouseover or right click, have touchscreens in mind and plan for alternative event listeners. The framework offers a number of solutions with built-in widgets. Observe, learn, and reuse them to build successful apps.

Finally, a perfectly crafted tablet application should find its way to a user’s device.

Deployment

After you finish all the hard work of crafting the perfect desktop and tablet application, the time comes for deployment. Luckily more than one option is available:

1. Browser. The simplest and the most straightforward solution is to deliver a web application through HTTP(S) protocol to a client’s browser. Don’t forget to use the Sencha Cmd ‘sencha app build production’ command to minify, compress, and optimize the source code.
2. Sencha Space. Enterprise applications require enterprise solutions. Space helps deliver and manage secure web applications in a BYOD environment, and works flawlessly with Ext JS 5 applications.
3. Cordova. Hybrid application developers will welcome the improvements in integration between Ext JS 5 and Sencha Cmd 5. The new building capabilities allow developers to easily wrap apps for Cordova (or PhoneGap) with a simple “sencha app build native” command.

Conclusion

Ext JS 5 doesn’t just make applications viewable on tablets. It enables the entire workflow from sprint zero to release, bundles powerful interaction capabilities, and even helps you deploy apps. More importantly, it’s all simple, making the learning curve comfortable even for beginners. As you start to build your next Ext JS 5 app, remember that someone will use it on a tablet and they’re gonna love it.