Creating Multi-Language Custom Control
page 4 of 8
by Abdulla Hussein AbdelHaq
Feedback
Average Rating: 
Views (Total / Last 10 Days): 38536/ 95

Variables and Properties

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 Property

Now, 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 Property

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


View Entire Article

User Comments

Title: Good Article   
Name: Vagueraz
Date: 2008-07-04 5:03:31 AM
Comment:
Very Good and Strong Article , and it's not only useful for devlopers also for end-users ....
Title: Outstanding Work   
Name: Jean-Pierre Jamous
Date: 2008-07-02 10:01:11 PM
Comment:
Extremely nice. It comes handy for developers. You've done a tremendous job at it. Keep up the great work.
Title: Very good article   
Name: Anas al-qudah
Date: 2008-07-02 4:03:52 AM
Comment:
It's realy Very good article and help me.
Thanks thanks alot.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-09-16 6:43:06 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search