Sometimes, when you are browsing on a global website that
has multi-languages, multi-interfaces and a lot of fields for each culture that
change direction and language of the page depending on some culture, you have
to enter some text in multi-language. For example, you want to create an
account in a registration form and they recommend you enter your name in
English, French and Arabic. In that case we will have three Textboxes under each
other - Textbox for each language.
For now, three textboxes seem fine to the layout of the page
and to the end-user, but suppose that there are more fields in the page that
need to be entered in three languages! What if there are four more fields? In
that case we will have 15 textboxes in the page, so the layout will not be
developed in a professional way and also will not be user-friendly.
In this article, I am going to illustrate how to create a
custom multi-language control that collapses the three textboxes into one control
that will display one textbox every time, and this will result in using four
Textboxes instead of 15 Textboxes. Also, this control will include an image for
each language that enables the end-user to select the language he wants, with a
great sliding JavaScript animation, and to show all languages with JavaScript
sliding animation too.
Throughout this article we are going to customize three
languages: English, Arabic and French.
How flexible is it?
Generally, custom controls should be flexible to be more
reusable, and it should allow the page developer to customize the control
depending on some cases. Because of that, this custom control will contain a
lot of properties that allow the page developer to change and hide such images and
texts, determine the type of control to be displayed (textbox or textarea) and
control which language to be displayed.
Also, page developer can set a CssClass for the labels and
textboxes.
I will talk more about these properties later in this
article.
Note: I supposed that you have a
background about creating custom controls, so I will not go into detail about
creating custom controls.
