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"); }
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
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
thanks Ranjit, this is what I thought
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.
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
HI,
where can I find the files, because they were removed from git
Thanks
Hi,
If you were talking about the files mentioned in “Reference” section of this article then they still exist,
https://github.com/vahid-sohrabloo/sencha-touch-RTL
If looking for the source code for the example shown in this article then you can find this at below link:
https://github.com/walkingtree/sample-projects/tree/master/SenchaTouch/SenchaRTL
Let me know if you were looking for something else.
Thanks
HI,
I look at the second link (https://github.com/walkingtree/sample-projects/tree/master/SenchaTouch/SenchaRTL), and there are not files into touch folder, where the following files show be there:
/touch/sencha-rtl.js
/touch/resources/css/sencha-touch-rtl.css
The other project (https://github.com/vahid-sohrabloo/sencha-touch-RTL) is using the same files or you have created another new version?
Thanks
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.
Thanks Dawesi for your comment.
The article that I have written is definitely for the older version of Sencha Touch. So, from that perspective, it does have certain relevance. However, after reading your comments, I did try to find out the RTL support in Sencha Touch. I have gone trough following documents and I am yet to find the implicit support for RTL:
http://cdn.sencha.com/touch/sencha-touch-2.2.1/release-notes.html
http://senchatouchdev.com/wordpress/2013/04/08/sencha-touch-2-2-rc-notes/
http://www.sencha.com/blog/hello-sencha-touch-2-2/
I do see some other links which are talking about RTL support and I wonder if you are referring to one them. For example following link talks about RTL support:
https://github.com/vahid-sohrabloo/sencha-touch-RTL
If you can point me to the correct documentation, it will be much appreciated.
BTW, Sencha has definitely introduced RTL in ExtJS, I wonder if you are pointing towards that. Anyways, it will be great to get the exact input from you.
Thanks & Regards,
Ranjit
Sorry, I’m wrong. There is no public version of RTL support in Sencha touch. It would not take much to rework the CSS to implement tho in 2.2 – much easier than 2.0.x