RTL support in Sencha Touch


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

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");
}

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)

          main_rtl

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)

list

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.

panel_rtl

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

About

Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: , , , ,
Posted in Sencha Touch
10 comments on “RTL support in Sencha Touch
  1. Ranjit says:

    Hello Sebastian,

    Using same files listed in following link
    https://github.com/vahid-sohrabloo/sencha-touch-RTL

    and customised as per the need to support different component and devices (iOS, Android, Blackberry & Windows ).

    Thanks

  2. Alok Ranjan says:

    Sebastian – the touch folder basically contains Sencha SDK, which you shall be able to download from Sencha’s website. Once you have that, you need to download rtl specific files and copy into respective directories mentioned by Ranjit.

    • Sebastian says:

      Alok, of course but according to Ranjit shuold be there two files regarding RTL solution:
      /touch/sencha-rtl.js
      /touch/resources/css/sencha-touch-rtl.css

  3. Sebastian says:

    HI,

    where can I find the files, because they were removed from git

    Thanks

  4. Dawesi says:

    This article is out of date. Sencha Touch 2.2 now has RTL support included. Please do not use this external library with current versions and refer to Sencha’s documentation. Sencha’s RTL supports all of our supported platform and is an extensive addition to the framework.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: