Tablet support for "translate" EXT JS 5

Original: EXT JS 5 Tablet Support

Ext JS has been recognized as the leading framework for desktop Web applications. Since the tablet began to challenge the global PC sales, whether personal or corporate, computer-lateral applications have dramatically changed. Sencha is aware of this change and has introduced the EXT JS 5 with new features and optimizations.

Ext JS has learned some new tricks from Sencha Touch 2. Years of the best mobile Web application framework experience precipitation to cope with the desktop display on modern tablets, it is more than Zhuo. These updates can be learned through class systems, event management, widgets, and new deployment options.

In addition to being able to display rich applications on a tablet, the EXT JS 5 also fully supports all interactive modes that are tailored for touch-screen devices.

class System

In the newest class system, the new features required for the tablet are updated. The configuration (config) system was introduced in Ext JS 4, but it was not exactly enforced until Sencha Touch 2. Developers can now take advantage of the configuration object, access method (getter), modification method (setter), Update method (Updater), and powerful ext.factory in ext JS 5.

To be sure, the new Ext JS configuration system does not require the use of configuration objects, which are backwards compatible with version 4. However, it can automatically convert the properties of a configuration object to the corresponding root property.

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

Typically, HTML attributes should be defined outside the Config block in the early Ext JS, because Ext.component already contains a member function named Sethtml, which the class system will pass to the access method.


This important way helps ext JS 5 reuse The code written for Sencha Touch 2, and vice versa. This is not just about sharing code in two frameworks, it can also incorporate many of the Sencha's important functions from Sencha touch into ext JS 5.

Event

Touch's core input approach is based on touch-screen, which is why Sencha bundles the touch event and gesture interaction support to Ext JS 5. The key point of this upgrade is to transform public events into events of different platforms for the new unified model of events.

In this example, the MouseDown event is applied to most desktop clients. However, the event management system automatically recognizes the touchscreen device and switches it to touchstart or Pointerdown depending on the browser. To be able to interact properly with the tablet, event conversions are required.

Event updates are bidirectional, adding new functionality to the mobile application and also adding new functionality to the desktop application. Ext JS Widgets are now able to respond to sliding, long presses or other gestures designed for mobile applications, even when running on a desktop browser. Of course, events involving multi-touch (such as clamps, rotations, etc.) do not migrate to the desktop's mouse operating environment. This is not to encourage developers to apply the mobile experience to the desktop, but to ensure the consistency of the presentation.

When a touch event is enabled, momentum scrolling (momentum scrolling) can be applied to the frame in its way. Touch Scroller is now an integral part of the EXT JS 5 and can be automatically applied to touchscreen devices without any configuration required.

Both the class system update and the event management update have significantly added support for the tablet. End users can experience these new features by interacting with views and widgets. Let's look at how widgets are supported by the layout to get the best tablet.

Small Parts

Finding the best touchscreen display has gone beyond touch events. Some mouse-based interaction modes (such as Mouserover/hover, right-click) cannot be used on a tablet. Widgets that support these events on a desktop browser can now use other means for interface manipulation.

The Grid panel is a perfect example of such widgets. If you look at the title menu, you'll find that it requires a lot of interaction to open them.

First, to activate the menu, move the mouse over the column header. The UI then displays an arrow button on the right. Finally, press the button to pop up the menu.

This particular process cannot be completely duplicated on the touchscreen. In spite of this, the grid panel has touchscreen-aware and can replace the local desktop mode with the touchscreen mode. When the grid is displayed on a tablet device, it can display the title menu by long-pressing events, which only requires the user to touch the column headings longer than usual.

Another interesting example is the row highlighting. It's interesting because there are now alternatives on the tablet. The main purpose of highlighting is to facilitate the identification of the mouse pointer position. Because the touchscreen does not have this problem, the row highlighting appears a bit outdated.

The EXT JS 5 widget not only optimizes the display on the tablet, but also includes new features from the Sencha Touch 2. For example, an icon-enabled button makes the user interface more beautiful.

Property Iconcls now works well in Ext JS because the buttons are incorporated into other widgets, such as the label panel, and we see that the entire stack has been updated.

The new Sencha image package is another example of how wonderful the implementation of the two frameworks is. The diagram proves that the new class system updates and event management updates allow the user interface to truly be device agnostic while maintaining the persistence of APIs and performance. Whether using Ext JS 5 or Sencha Touch 2 for development, be sure to try a table.

In addition to these specific updates, any widget has responsive configuration items that are specifically introduced for mobile design guidelines. Any configuration attribute with access methods can be updated for any direction-based or well-curated dimension rules for the viewable area. Phil Guerrant has written a detailed blog post "Designing Responsive applications with EXT JS" and can also see these new features in the sample program.

If there is any omission in this section, it is that ext JS 5 provides developers with enough tools to enable the widget to achieve device independence. When developing a mouseover or right-click, consider and plan for the desired alternate event listener for the touchscreen. The framework provides solutions that use built-in widgets. This requires observing, learning, and reusing them to create successful applications.

Finally, a perfect, well-crafted tablet application will find the right way for the user device.

Deployment

After all the hard work done to make the perfect desktop and tablet app, the next thing to do is deploy. Fortunately, there are several options available:

1. Browser : The simplest and most straightforward solution is to deliver the Web application to the client browser through the HTTP protocol. Don't forget to use the Sencha cmd "Sencha app Build Production" command to narrow, compress, and optimize your source code.
2. Sencha Space: Enterprise applications require enterprise-class section scenarios. Space facilitates the delivery and management of secure Web applications in a BYOD environment, as well as the perfect running of the EXT JS 5 application.
3. Cordova: Developers of hybrid applications would like to integrate the Ext JS 5 and Sencha CMD 5 improvements. The new build feature enables developers to easily use the Sencha app buildnative command to encapsulate applications based on Cordova.

Summary

EXT JS 5 Not only allows applications to be displayed on the tablet, but also includes the entire workflow from 0 to release, as well as a bundle of powerful interactivity and even assistance in deploying your application. More importantly, it is very simple, so that the learning curve is more suitable for beginners. When you start building the next Ext JS 5 app, be sure to remember that some people might use it on a tablet and fall in love with it.

Grgur Grisogono
Grgur are a Principal at Modus Create and are the co-author of Ext JS in Action SE. Grgur have experience in JavaScript, CSS, HTML5, Sencha Touch, Ext JS, Web apps and hybrid mobile. He is active in the European Sencha community.