Building Multilingual Applications - The Hebrew Challenge

Presented by Yigal Ayalon Go4Application

The impossible we do at once, miracles take a little longer

What will be covered

• • • • • • 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

About the project

Life Cycle in the house

• • • • • 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 3 rd he can stay for the 3 rd year year and if he is eligible At the end of the period he leaves the building

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?

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

French German Dutch Hebrew Submit

Soumettre Eingabe Verzenden ןוכדע עצב

Cancel

Annuler Abbruch Annuleren לוטיב

Sort

Sorte Sortieren Sorteren ןוימ

Record

Régistre Aufnehmen Opnemen המושר

What need to be done?

• 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

and the session variable

session.__protected__activeLanguage

set for the customer preferred language.

that should be • You need to add the

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.

Text Dictionary

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

Why Hebrew is different?

• • • • 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.

•

Setting Hebrew on UX

• 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.

Drop Down Lists

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

Setting dynamic values to text label • 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:

Use of Templates

• • 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.

Demo

• Show_Receipt_Detail.a5w in html editor • Show the application

Q & A

• Its time for your questions

Thanks for Listening

• If you like to get contact with me, my contact information is: – Email: [email protected]

– Phone: +972-52-4670010