Here is the control kitchen, render time. At render time we
will add the attributes, render the controls and register startup scripts.
Listing 8
'//English Tab
If ShowEnglish Then
'<div> English
writer.AddAttribute("id", Me.ClientID & "_dvEn")
writer.RenderBeginTag(HtmlTextWriterTag.Div)
Select Case ShowLabels
Case LabelLanguages.Yes
_lblEnglish.RenderControl(writer)
writer.WriteBreak()
_lblStatus = "yes"
Case LabelLanguages.No
_lblStatus = "no"
End Select
Select Case TypeOfControl
Case ControlToDisplay.TextBox
_txtEnglish.RenderControl(writer)
Case ControlToDisplay.TextArea
_txtEnglish.TextMode = TextBoxMode.MultiLine
_txtEnglish.RenderControl(writer)
End Select
' writer.Write("</div")
writer.RenderEndTag() ' </div>
End IfAt first, we are checking if the page developer wants to
show the English language in the control. If it assigned to True, then as I
mentioned, we have to put the English textbox inside HTML div.
Listing 9
'//English Img
If ShowEnglish Then
writer.AddStyleAttribute("align", "absmiddle")
writer.AddStyleAttribute("cursor", "pointer")
If DefaultLanguage = ControlLanguages.English Then
If EnglishImageOn = String.Empty Then
_imgEnglish.ImageUrl = ViewState("Default_En_On")
Else
_imgEnglish.ImageUrl = EnglishImageOn.Trim
End If
Else
If EnglishImageOff = String.Empty Then
_imgEnglish.ImageUrl = ViewState("Default_En_Off")
Else
_imgEnglish.ImageUrl = EnglishImageOff.Trim
End If
End If
_imgEnglish.ImageAlign = ImageAlign.AbsMiddle
writer.AddAttribute("onclick", "ObjJs_" & Me.ID & ".HideShowLang(this.id)")
_imgEnglish.RenderControl(writer)
writer.Write(" ")
'//Ajax Enabled
ScriptManager.RegisterStartupScript(Page, Me.GetType, Me.ID & "_EnBlock", _
"var " & Me.ClientID & "_collapseEn = new animatedcollapse('" & _
Me.ClientID & "_dvEn', 400, false" & IIf(DefaultLanguage = _
ControlLanguages.English, ",'block'", "") & ");", True)
End IfAfter rendering the English Textbox, we need to render the
English image too, which will be the key for sliding up/sliding down the
English Div. As you see in Listing 9, we are registering startup script for the
English tab. If the English language is set to be the default language, the ( ‘block’ ) parameter will be passed to the animatedcollapse
function to expand the English tab after the page is loaded, otherwise the
English div will be collapsed. As you see in Listing 9, we have added an
onclick attribute for the English image that will call the JavaScript function
“HideShowLang().” Note the name of the JavaScript
variable “objJS_”; this is the object instance from JavaScript file “MultiLangJS.js” that will be registered as startup script
at render time as seen in Figure 1.
Listing 8 and Listing 9 will be repeated for the left
languages.
