RTL support in Sencha Touch

0 0

By Ranjit Battewad Sencha Touch April 9, 2013

Overview

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.

Problem Statement

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:

List
Form Panel
Tab Panel

Pre-requisites

Working knowledge of Sencha Touch 2.0
Sample Sencha Touch application . Download this sample application as we will be using it in the article.

Details

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:

List
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:

var lang = localStorage.getItem("b4e39e88-994e-4393-a6f0-b696f0a35dd2_LANGUAGE_KEY");
 if(lang === "rtl"){
 loadJsFile("touch/sencha-rtl.js");
 loadCssFile("touch/resources/css/sencha-touch-rtl.css");
 loadCssFile("resources/css/app-rtl.css");
 }
 function loadJsFile( fileName ){
 var fileReference = document.createElement('script');
 fileReference.setAttribute("type", "text/javascript");
 fileReference.setAttribute("src", fileName);
 document.getElementsByTagName("head")[0].appendChild(fileReference);
 console.log(fileName + " JS file loaded successfully");
 }
 function loadCssFile( fileName ){
 var fileReference = document.createElement("link");
fileReference.setAttribute("rel", "stylesheet");
fileReference.setAttribute("type", "text/css");
fileReference.setAttribute("href", fileName);
document.getElementsByTagName("head")[0].appendChild(fileReference);
console.log(fileName + " CSS file loaded successfully");
}

var lang = localStorage.getItem("b4e39e88-994e-4393-a6f0-b696f0a35dd2_LANGUAGE_KEY");

if(lang === "rtl"){

loadJsFile("touch/sencha-rtl.js");

loadCssFile("touch/resources/css/sencha-touch-rtl.css");

loadCssFile("resources/css/app-rtl.css");

}

function loadJsFile( fileName ){

var fileReference = document.createElement('script');

fileReference.setAttribute("type", "text/javascript");

fileReference.setAttribute("src", fileName);

document.getElementsByTagName("head")[0].appendChild(fileReference);

console.log(fileName + " JS file loaded successfully");

}

function loadCssFile( fileName ){

var fileReference = document.createElement("link");

fileReference.setAttribute("rel", "stylesheet");

fileReference.setAttribute("type", "text/css");

fileReference.setAttribute("href", fileName);

document.getElementsByTagName("head")[0].appendChild(fileReference);

console.log(fileName + " CSS file loaded successfully");

}

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)

Observations:

Left side image shows Data List widget in LTR mode (Default).

Right side image shows List in RTL mode (Observe image and text alignment)

Observation:

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

Conclusion

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.

Reference

https://github.com/vahid-sohrabloo/sencha-touch-RTL

https://github.com/walkingtree/sample-projects/tree/master/SenchaTouch/SenchaRTL