XForms, Dynamic Labels in Local language

Motivation

Sometimes you may want to change the label dynamically from one language to another language without loading the form. In the given example, you can choose the language from the select1 control option.

Screen Image

(Image: Rajamani marimuthu, CC BY 3.0)

(Image: Rajamani marimuthu, CC BY 3.0)

(Image: Rajamani marimuthu, CC BY 3.0)

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">;

e-District - Regd Form

type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
BODY
{
font-family: Times New Roman,Times,serif;
font-size: 12pt;
font-style: normal;
font-weight:normal;
font-variant: normal;
text-align: left;
word-spacing: normal;
letter-spacing: normal;
/background-color: transparent;/
background-image: url(Desktop/tour_xforms/NIC_Logo.gif); background-repeat: no-repeat;
background-position: right top;
line-height:20pt;
}

xf|input, xf|secret {
display: table-row;
}

xf|value {
text-align: left;
}

div.content div.tab-box {
position: absolute;
width: 120px;
}

div{line-height:20pt;}
h3 {text-align: center;}
h4 {color:maroon;text-decoration:underline;}

div.formbody
{
margin-left:2in;
margin-right:0.5in;
width:8.5in;
}

xf|input {display: table-row;text-align:left;}
xf|input > xf|label {display: table-cell; width:160pt; font-weight:bold;text-align:left;}
xf|input .xf-value {width: 100pt;font-size:10pt;}

xf|secret { display: table-row;text-align:left;}
xf|secret > xf|label { display: table-cell; width:160pt; font-weight:bold;text-align:left;}
xf|secret .xf-value {width: 100pt;font-size:10pt;}

xf|output { display: table-row;text-align:left;}
xf|output > xf|label { display: table-cell; width:160pt; font-weight:bold;text-align:left;}
xf|output .xf-value {width: 100pt;font-size:11pt;font-weight:bold;color:blue;text-align:left;}

xf|select1 { display: table-row;text-align:left;}
xf|select1 > xf|label { display: table-cell; width:160pt; font-weight:bold;text-align:left;}
xf|select1 .xf-value {max-width: 100pt;font-size:10pt;}

id="model1">

id="Regd_Form" xmlns="">
CAN="" xmlns="">

id="slanguage1" xmlns="">
xmlns="">
English
English
தமிழ்
हिन्दी

id="slanguage" xmlns="">
xmlns="">
name="English" rname="Registration Form" smessage="Registration Completed Successfully"
emessage="Error Occurred .. Pls Check the Entered Details" sbutton="Save" cbutton="Reset" e1msg="Wrong Password!Please Re-enter">
Applicant Name
Date of Birth
Address
Desired Login ID
Mobile No
Phone No
E-mail ID
Password
Re-Enter Password

name="தமிழ்" rname="பதிவு படிவம்" smessage="பதிவு சேமிக்கப்பட்டது"
emessage="தவறு! விபரங்களை சரிப்பார்க்கவும்" sbutton="சேமி" cbutton="மீளமை" e1msg="கடவுச்சொல் தவறு!மீண்டும் உறுதிப்படுத்துக">
விண்ணப்பதாரர் பெயர்
பிறந்த தேதி
முகவரி
விருப்பப்படும் நுழைவு பெயர்
கைத் தொலைபேசி எண்
தொலைபேசி எண்
மின்னஞ்சல் முகவரி
கடவுச்சொல்
கடவுச்சொல் உறுதிப் படுத்து

name="हिन्दी" rname="पंजीकरण फार्म" smessage="पंजीकरण सफलतापूर्वक पूरा"
emessage="त्रुटि हुई .. Pls दर्ज विवरण की जाँच करें" sbutton="Save" cbutton="Reset" e1msg="पासवर्ड गलत! फिर से दर्ज करें">
आवेदक का नाम
जन्म तिथि
पता
वांछित लॉगिन आईडी
मोबाइल नंo
फोन नंo
ई - मेल आईडी
पासवर्ड
पुनः पासवर्ड दर्ज करिए

ev:event="xforms-ready">
ref="DOB" value="substring(now(),1,10)"/>

nodeset="instance('Regd_Form')/DOB" type="xs:date" required="true()"/>

id="submit" method="put" action="result.xml">
ev:event="xforms-submit-done">

level="modal"> ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@smessage"> ...

level="modal" ev:event="xforms-submit-error"> ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@emessage">

bgcolor="#ACBCD8">

id="img">
src="img.png" width="1027" />

id="formbody" style="width:10.7in;">
class="content">

ref="instance('slanguage1')/lang">
Select Language
nodeset="instance('slanguage1')/lang_list">
ref="item"/>
ref="item"/>

style="width: 700px;border:solid 1pt black" >

ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@rname">

ref="instance('Regd_Form')/name">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/name">:

ref="instance('Regd_Form')/DOB">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/DOB">:

ref="instance('Regd_Form')/address">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/address"> :

ref="instance('Regd_Form')/loginId">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/loginId"> :

ref="instance('Regd_Form')/mobile">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/mobile">:

ref="instance('Regd_Form')/phone">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/phone"> :

ref="instance('Regd_Form')/email">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/email"> :

ref="instance('Regd_Form')/password">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/password"> :

ref="instance('Regd_Form')/repeat_pass">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/repeat_pass"> :
ev:event="DOMFocusOut" if="instance('Regd_Form')/repeat_pass != instance('Regd_Form')/password">
ref="instance('Regd_Form')/repeat_pass" value="''"/>
level="modal">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@e1msg">

submission="submit">
ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@sbutton">

ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@cbutton">
ev:event="DOMActivate" target="model1"/>

Credits

This example was originally inspired by Kurt Cagle.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.