Building Multilingual Applications ()

Report
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 3rd year and if he is eligible
he can stay for the 3rd year
• 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.
Submit
Cancel
Sort
Record
Soumettre
Annuler
Sorte
Régistre
German Eingabe
Abbruch
Sortieren
Aufnehmen
Dutch
Annuleren
Sorteren
Opnemen
French
Hebrew
Verzenden
‫בצע עדכון‬
‫ביטול‬
‫מיון‬
‫רשומה‬
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
<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.
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

similar documents