Building Multilingual Applications - The Hebrew Challenge Presented by Yigal Ayalon Go4Application

Building Multilingual Applications

- The Hebrew Challenge

Presented by Yigal AyalonGo4Application

The impossible we do at once,

miracles take a little longer

• About the project• What is the problem?• What need to be done?• Text Dictionary• Why Hebrew is different?• Setting Hebrew on UX

What will be covered

• Drop Down Lists• Setting dynamic values to text label• Use of Templates• Demo• Q & A

What will be covered

About the project

• The candidate is filling a request form• After the committee approved the request the candidate

become a tenant• The tenant need to pay for the room expenses by giving 4

checks in advance for the full year • After 2 years he can request for a 3rd year and if he is eligible

he can stay for the 3rd year• At the end of the period he leaves the building

Life Cycle in the house

What is the problem?

• What we are trying to solve?• Is there really a need for Multilingual Applications?• Why do we need to have applications that are not in

English?

What is the problem?

Submit Cancel Sort Record

French Soumettre Annuler Sorte Régistre

German Eingabe Abbruch Sortieren Aufnehmen

Dutch Verzenden Annuleren Sorteren Opnemen

Hebrew בצע עדכון ביטול מיון רשומה

• The reason is obvious, our customers wants to have the application on their native language.

• Alpha has a very good way to handle the different text that will appear for each language.

• It is the Text Dictionary option that use the special tags <a5:t> </a5:t> and the session variable session.__protected__activeLanguage that should be set for the customer preferred language.

• You need to add the <a5:t> tags to every static text. – There is a internationalization Helper Utility in the Alpha

developer that will help you. (Show Demo)

What need to be done?

• Add an entry in the text dictionary table with the proper translation.

• Set the active Language to the customer chosen language.

What need to be done?

• And here is how it is done in the Text Dictionary:

Text Dictionary

• With Hebrew we are facing a bit complex situation

• Hebrew is a Right to Left language

לשמאל • מימין כותבים עברית• It is not just the text direction• The whole behavior of the page should be from

Right to Left.

Why Hebrew is different?

• There are a lot of changes that need to be done in order to display a UX component properly.– Setting the Local CSS with the following:

• body { direction:rtl; }• .A5CWLayout { float:right; }

– Set the default direction for the title bar on pop-up windows to be RTL

– When setting Javascript action to open a window you need to set the Window title direction to be RTL

Setting Hebrew on UX

– When using a list control it should be in a container that should have its style set to: direction:ltr;

– Need to make a change to the Local sub-theme definitions – Javascript and CSS to have the sort mark on the left side.

Setting Hebrew on UX

Why it is so important to set the direction to RTL for Hebrew field?• There are 2 setting that need to be set:

– text-align: right;– direction: rtl;

• Setting just the text-align will get the following result

עם עברית English כתיבה מעורבת• When adding the direction it will fix this mix sentence.

עם עבריתEnglishכתיבה מעורבת

Setting Hebrew on UX

• Although a page is set to Hebrew, there are some field types that need to be always set to LTR, like:– Email address– Numbers– Date and time

• Where there is a button to continue to the next page or month on a date picker it should be set to go to the left and not to the right as it is now the default behavior.

Setting Hebrew on UX

• Since we can’t use Hebrew for setting a drop down list in the Alpha editor, I created a table with the following structure:– List Name– List Value– Save Value

• Getting the values to the Drop Down list is easy, all lists are in just one table

Drop Down Lists

• I created a UX that handle the Drop Lists table:

Drop Down Lists

• In some case you need to have a label with values in the text that is dependent on the data

• In the text dictionary there is the following entry:

Setting dynamic values to text label

• In the OnDialogInitialize Server Side Event you should get the values for the 2 variables, add them to the args and have the following code to create the label:Free_Rooms_Msg = GetHebText("Free Rooms Msg")

e.control.Free_Rooms_Msg = replace_placeholders_with_argument_values(Free_Rooms_Msg,args)

And the result is here:

Setting dynamic values to text label

• In case there is a need to create a printed page with data from the application it can be done very easy by using a template with variables place holders and create an HTML page ready for printing.

• Here is a sample for a receipt printout.

Use of Templates

• Show_Receipt_Detail.a5w in html editor

• Show the application

Demo

Q & A

• Its time for your questions

• If you like to get contact with me, my contact information is:– Email: Yigal.Ayalon@gmail.com– Phone: +972-52-4670010

Thanks for Listening