Touchscreens are available on a variety of devices, ranging from smartphones to tablets. They have taken the way we interact with and design our applications to a whole new level. People love to use their phones, tablets and other touch devices. As a result, developers are giving more thought to building quality applications for touch screen devices — it is now a top priority for responsive UX design.
A large part of touch UX design is ensuring the apps you design respond intuitively to your user’s needs. One of the best ways to supercharge your Ext JS cross-platform web applications is with Sencha Touch effectively. In this post, we will show how.
Table of Contents
What is Sencha Touch?
Once a stand-alone product, Sencha Touch is no longer supported on its own. Instead, its core functionality has merged with Ext JS, which provides you with an even more powerful suite of tools to conveniently develop all of your cross-platform mobile and web applications.
How to implement touchscreen support on Ext JS?
The first way to implement Touch on a device using Ext JS is Event Normalization. Event Normalization refers to the process of translating simple mouse events to their equivalent touch and pointer events. Simply put, it enables your Ext JS application to run flawlessly on touchscreen devices.
Here is how it works: If your code requests a listener for a mouse event, Ext JS attaches an equivalent touch or pointer event to the request. For example, here is a scenario where the application attempts to attach a mousedown listener with the following code:
If the device supports touchscreen events, the event system translates mousedown to touchstart:
In cases where your devices support pointer-events, the event system translates mousedown to pointerdown:
As you can see, you can implement touchscreen support in the form of Event Normalization for your Ext JS web applications is very easy. There is no complexity and very little code you need to write to make it work.
Gesture systems are another way to implement touchscreen support in ExtJS. From a browser’s perspective, there are three types of events: touch, pointer, and mouse. Upon interpreting their sequence and timing, Ext JS can synthesize more complex events, like drag, swipe, and tap.
To enable your Ext JS application to listen for specific gesture events like longpress, you just need to use this single line:
Origionally, Sencha Touch was specifically designed for touch events. Now, however, Ext JS offers full support for pointer and mouse events using the Gesture System. Gestures respond to any type of input –they can be triggered using both touch input and single-point gestures, like tap and swipe. The end result is a versatile gesture system that works seamlessly across all modern devices.
Should I use Ext JS for developing applications for touchscreen devices?
In short, if you want to develop your apps quickly, easily and efficiently, yes you should Ext JS to develop applications for touchscreen devices. Ext JS will save you time and effort. It enables normalized events and gesture recognition by default. This means that, in most cases, you don’t have to take any special action to activate touchscreen support for your application. So, yes, you should definitely consider using Ext JS.