As I mentioned, Multi-Lang custom control contains a lot of
properties that allows page developer to set and customize the control as you
want.
In listing 5, we declared for each language three Textboxes,
three labels and three images. These images will appear at the bottom of the
control as you can see in Figure 2. The _imagExpand image control is the Expand
image that will be responsible for (Show All) languages; it will arrange the
three textboxes under each other using the JavaScript functions that we have
talked about.
Listing 5
Private _txtEnglish As TextBox
Private _txtArabic As TextBox
Private _txtFrench As TextBox
Private _lblEnglish As Label
Private _lblArabic As Label
Private _lblFrench As Label
Private _imgEnglish As Image
Private _imgArabic As Image
Private _imgFrench As Image
Private _imgExpand As Image
Public Enum ControlToDisplay
TextBox
TextArea
End Enum
Public Enum ControlLanguages
English
Arabic
French
End Enum
Public Enum LabelLanguages
Yes
No
End Enum
Figure 2
Also, we have three Enumerations:
·
ControlToDisplay: Used to specify the type of the control that
will be displayed, the Textbox or the TextArea.
·
ControlLanguages: Used to specify the default language for the
control. It contains three members (English,Arabic,French). If we select the
French member, the French Textbox will be the first control that appears when
the page is loaded.
·
LabelLanguages: Used to specify whether to show labels above each
Textbox or to hide them.
If you have a look at the CustomMultiLang.vb
file, you will find a lot of properties with an XML Doc
comments to understand the purpose from that property. You can set a
CssClass for each label, and you can set/get the text of the labels as you can
see in Listing 6.
Note the Localizable(true)
attribute, it allows the property to be localizable, so our custom control will
support localization.
Page developer can set/get the Tool tip for the images, and
it sets to be localizable too. The code sample in Listing 6 will be repeated
for the left languages. There are more properties that you can find in CustomMultiLang.vb class.
Listing 6
<Category("English Tab"), _
Description("English CssClass.") _
> _
Public Property EnglishLabelCssClass() As String
Get
EnsureChildControls()
Return _lblEnglish.CssClass
End Get
Set(ByVal value As String)
EnsureChildControls()
_lblEnglish.CssClass = value
End Set
End Property
< Category("English Tab"), _
Localizable(True), _
Description("English Label.") _
> _
Public Property EnglishLabel() As String
Get
EnsureChildControls()
Return _lblEnglish.Text
End Get
Set(ByVal value As String)
EnsureChildControls()
_lblEnglish.Text = value
End Set
End Property
< _
Category("English Tab"), _
Localizable(True), _
Description("English Image ToolTip."), _
DefaultValue("") _
> _
Public Property EnglishImageToolTip() As String
Get
EnsureChildControls()
Return _imgEnglish.ToolTip
End Get
Set(ByVal value As String)
EnsureChildControls()
_imgEnglish.ToolTip = value
End Set
End Property
< _
Category("English Tab"), _
DefaultValue(""), _
Description("English Image On."), _
Browsable(True), _
Editor(GetType(System.Web.UI.Design.UrlEditor), _
GetType(System.Drawing.Design.UITypeEditor)) _
> _
Public Property EnglishImageOn() As String
Get
_CheckObj = ViewState("EnglishImageOn")
If _CheckObj Is Nothing Then
Return String.Empty
Else
Return DirectCast(ViewState("EnglishImageOn"), String)
End If
End Get
Set(ByVal value As String)
ViewState("EnglishImageOn") = ResolveUrl(value)
End Set
End Property
< _
Category("English Tab"), _
DefaultValue(""), _
Description("English Image Off."), _
Browsable(True), _
Editor(GetType(System.Web.UI.Design.UrlEditor), _
GetType(System.Drawing.Design.UITypeEditor)) _
> _
Public Property EnglishImageOff() As String
Get
_CheckObj = ViewState("EnglishImageOff")
If _CheckObj Is Nothing Then
Return String.Empty
Else
Return DirectCast(ViewState("EnglishImageOff"), String)
End If
End Get
Set(ByVal value As String)
ViewState("EnglishImageOff") = ResolveUrl(value)
End Set
End PropertyNow, each image-language will have two statuses- active and
inactive. The image-language will be activated when the user clicks on it. When
this happens the source of the image will be set into ImageOn. When the user
clicks out on another image, the status of the image will be inactive and the
source of the image will be ImageOff.
As you saw in listing 6, we have EnglishImageOn/EnlgishImageOff properties. This allows the page developer
to customize the active image and the inactive image for each language.
If the developer set these properties to empty value,
embedded images will be assigned for these properties by default. Look at
Figure3; you can see the embedded images that will be assigned for each
language.
Figure 3
You would want to display some text above each textbox, and
you can do that by simply setting the ShowLabels()
property into True. Then you can enter the text you want for each label by its
own property, as you see in Figure 4. “In French” appears
above the French Textbox.
Figure 4
As in listing 6, the EnglishLabel
property allows you to enter the Text you wish to display above the English
Textbox. If you download the source code, you will find a sample website that
shows you how to use ShowLabels property.
I suggest downloading the source code; it contains the
source code for the custom control and also a sample website.
Listing 7
< _
Category("Language Tab"), _
DefaultValue(""), _
Description("Default Language that will display on runtime.") _
> _
Public Property DefaultLanguage() As ControlLanguages
Get
_CheckObj = ViewState("DefaultLanguage")
If _CheckObj Is Nothing Then
If ShowEnglish = True Then
Return ControlLanguages.English
ElseIf ShowArabic = True Then
Return ControlLanguages.Arabic
ElseIf ShowFrench = True Then
Return ControlLanguages.French
Else
Return ControlLanguages.English
End If
Else
Return DirectCast(ViewState("DefaultLanguage"), ControlLanguages)
End If
End Get
Set(ByVal Value As ControlLanguages)
ViewState("DefaultLanguage") = Value
End Set
End PropertyIn the code above, the DefaultLangauge
property allows page developer to set the default language for the control. If
he selects Arabic language, the Arabic Textbox will appear first after the page
is loaded.
The return value from that property is the ControlLanguages Enumeration, which will be a dropdownlist
at design time as you see in Figure 5.
Figure 5
Also, there are three properties (ShowEnglish,
ShowArabic and ShowFrench) that enable page developer to disappear the
language he wants from the control. For example, if he sets ShowArabic
property into False, the Arabic part will not appear in the control.
