This article gives brief overview about how we can achieve the RTL support in Sencha Touch. The technologies for creating the Right-to-Left (RTL) application evolved in past five years. Middle Eastern languages such as Hebrew and Arabic are written in Right-to-Left.
RTL is considered as an important accessibility feature for the users who work in Right-to-Left (RTL) languages. In web applications, typically, switching the values between following can make the application support RTL:
- direction: ltr / direction : rtl
- text-align: left / text-algin: rtl
- float : left / float :right
In recent years RTL support for any application became an required feature and helps us engage the users who work with Right-to-Left languages like Arabic and Hebrew. When we talk about web applications, RTL involves not only aligning text in RTL mode but the widgets as well. The web application could be a desktop web app or a mobile web app.
Sencha Touch does not have out-of-box support for RTL. However, we can achieve it through CSS changes and overriding the default behavior of Sencha Touch components. In nthis article we will show you how to build the RTL support in Sencha Touch and how to leverage that to build a mobile web app to allow the user to switch, dynamically, between LTR and RTL.
As part of this article, we will focus on supporting RTL and using it in our application for the following Sencha Touch components, which are widely used components in any application:
- Form Panel
- Tab Panel
- Working knowledge of Sencha Touch 2.0
- Sample Sencha Touch application . Download this sample application as we will be using it in the article.
Follow below steps for converting the application to RTL support:
Step 1: Identify the different components / widgets used in application.
Following component have been selected based on their usage in any application:
- Form Panel
- Tab Panel
Step 2: Create following files in Sencha Touch application
To keep the RTL changes separate without disturbing the core logic, we need these files
- <application dir>/touch/sencha-rtl.js
- <application dir>/touch/resources/css/sencha-touch-rtl.css
- <application dir>/resources/css/app-rtl.css
Step 3: Override the widgets for RTL support
In order to support the RTL mode for Sencha Touch widgets like, Data List, Form Panel and Tab Panel, copy code from sencha-rtl.js and paste in sencha-rtl.js file.
Step 4: CSS changes for the Sencha Touch widgets to support RTL mode
For CSS changes copy code from sencha-touch-rtl.css and paste in the sencha-touch-rtl.css file
Step 6: Application specific CSS changes
If any application specific css changes are required keep them under app-rtl.css file. Hence, required css changes for sample application for RTL support kept in this file. Refer to app-rtl.css file in the sample project
Step 7: Dynamic switching between LTR and RTL mode
In order to identify the users choice between RTL and LTR, when user taps in RTL or LTR flag, lets store its value in localstorage, which can be retrieved and load the files dynamically according to the selected mode in next step.
Step 8: Loading JS and CSS files dynamically
In order to load the files dynamically add the following code to the end of the <application dir>/touch/microloader/development.js file:
After required changes observe the following images for sample application over LTR vs RTL
Observation : Observe the following points in below image
- Left side image shows the LTR mode (Default)
Right side image shows the RTL mode (after switch by tapping on RTL flag- Egypt)
Tab panel alignment in LTR mode – LTR / RTL , Data List , Form Panel
Tab panel alignment in RTL mode – Form Panel, Data List , LTR / RTL
Flag alignment in LTR vs RTL mode (Switched from left to right)
- Left side image shows Data List widget in LTR mode (Default).
- Right side image shows List in RTL mode (Observe image and text alignment)
- Left side image shows Form panel widget in LTR mode (Default)
- Right side image shows Form panel widget in RTL mode.
- Observe the field label is left side in LTR over right side alignment in RTL mode
- Cancel icon
- When user starts typing in text box widget in LTR it will start from left to right whereas it is completely reverse i.e. right to left in RTL mode.
Scope for further widgets
RTL support not stop with Data List , Tab panel and Form panel itself, we can extend this for renaming Sencha Touch widgets as well by overriding default classes , few of them are:
Navigation view – Ext.navigation.ViewRtl
Navigation Bar – Ext.navigation.BarRtl
Toggle – Ext.util.DraggableRtl, Ext.slider.SliderRtl, Ext.scroll.ScrollerRtl etc
Title Bar – Ext.TitleBarRtl
In this article we saw that how we can achieve the RTL support for the Sencha Touch based applications with simple changes and make use of same application for both users who work in RTL languages as well as LTR with dynamic switching between both the modes.