Wikibooks

XForms/Dynamic Labels in Local language

< XForms

Motivation

edit

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

edit

   

Sample Program

edit 
<html 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">
<head>
	<title>e-District - Regd Form</title>
	<!--<link href="edistrict.css" rel="stylesheet"/>-->
	  <style 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;}
	</style>
	<xf:model id="model1">
		
		<xf:instance id="Regd_Form" xmlns="">
			<form CAN="" xmlns="">
				<name></name>
				<DOB></DOB>
				<address></address>
				<loginId></loginId>
				<mobile></mobile>
				<phone></phone>
				<email></email>
				<password></password>
				<repeat_pass></repeat_pass>
				
			</form>
		</xf:instance>
		<xf:instance id="slanguage1" xmlns="">
			<language xmlns="">
				<lang>English</lang>
				<lang_list><item>English</item></lang_list>
				<lang_list><item>தமிழ்</item></lang_list>
				<lang_list><item>हिन्दी</item></lang_list>
			</language>
		</xf:instance>
		<xf:instance id="slanguage" xmlns="">
		<language xmlns="">
			<lang 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">
				<name>Applicant Name</name>
				<DOB>Date of Birth</DOB>
				<address>Address</address>
				<loginId>Desired Login ID</loginId>
				<mobile>Mobile No</mobile>
				<phone>Phone No</phone>
				<email>E-mail ID</email>
				<password>Password</password>
				<repeat_pass>Re-Enter Password</repeat_pass>
			</lang>
			<lang name="தமிழ்" rname="பதிவு படிவம்" smessage="பதிவு சேமிக்கப்பட்டது" 
			emessage="தவறு! விபரங்களை சரிப்பார்க்கவும்" sbutton="சேமி" cbutton="மீளமை" e1msg="கடவுச்சொல் தவறு!மீண்டும் உறுதிப்படுத்துக">
				<name>விண்ணப்பதாரர் பெயர்</name>
				<DOB>பிறந்த தேதி</DOB>
				<address>முகவரி</address>
				<loginId>விருப்பப்படும் நுழைவு பெயர்</loginId>
				<mobile>கைத் தொலைபேசி எண் </mobile>
				<phone>தொலைபேசி எண்</phone>
				<email>மின்னஞ்சல் முகவரி</email>
				<password>கடவுச்சொல்</password>
				<repeat_pass>கடவுச்சொல் உறுதிப் படுத்து</repeat_pass>
			</lang>
			<lang name="हिन्दी" rname="पंजीकरण फार्म" smessage="पंजीकरण सफलतापूर्वक पूरा" 
			emessage="त्रुटि हुई .. Pls दर्ज विवरण की जाँच करें" sbutton="Save" cbutton="Reset" e1msg="पासवर्ड गलत! फिर से दर्ज करें">
				<name>आवेदक का नाम</name>
				<DOB>जन्म तिथि</DOB>
				<address>पता</address>
				<loginId>वांछित लॉगिन आईडी</loginId>
				<mobile>मोबाइल नंo</mobile>
				<phone>फोन नंo</phone>
				<email>ई - मेल आईडी</email>
				<password>पासवर्ड</password>
				<repeat_pass>पुनः पासवर्ड दर्ज करिए</repeat_pass>
			</lang>			
		</language>
		</xf:instance>
		
		<xf:action ev:event="xforms-ready">
 			<xf:setvalue ref="DOB" value="substring(now(),1,10)"/>
		</xf:action>
		<xf:bind nodeset="instance('Regd_Form')/DOB" type="xs:date" required="true()"/>
		

		<xf:submission id="submit" method="put" action="result.xml">
			<xf:action ev:event="xforms-submit-done">
		
			<xf:message level="modal"><xf:output ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@smessage"></xf:output> ...</xf:message>
			</xf:action>
			<xf:message level="modal" ev:event="xforms-submit-error"><xf:output ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@emessage"></xf:output></xf:message>
		</xf:submission>
	</xf:model>
</head>
<body bgcolor="#ACBCD8">

	<div id="img">
		<img src="img.png" width="1027" />
	</div><br/>
	<div id="formbody"  style="width:10.7in;">
 <div class="content">
 
     
      </div> 
	<center>
	<xf:select1 ref="instance('slanguage1')/lang">
		<xf:label>Select Language</xf:label>
		<xf:itemset nodeset="instance('slanguage1')/lang_list">
			<xf:label ref="item"/>
			<xf:value ref="item"/>
		</xf:itemset>
	</xf:select1><br/>
 <fieldset style="width: 700px;border:solid 1pt black" >
         
	<h3><xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@rname"></xf:label></h3><br/>
		<xf:input ref="instance('Regd_Form')/name">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/name">:</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/DOB">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/DOB">:</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/address">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/address"> :</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/loginId">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/loginId"> :</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/mobile">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/mobile">:</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/phone">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/phone"> :</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/email">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/email"> :</xf:label>
		</xf:input>
		<xf:secret ref="instance('Regd_Form')/password">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/password"> :</xf:label>
			<!--<xf:alert level="modal">கடவுச்சொல் 3 முதல் 7 எழுத்து மட்டுமே</xf:alert>-->
		</xf:secret>
		<xf:secret ref="instance('Regd_Form')/repeat_pass">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/repeat_pass"> :</xf:label>
			<xf:action ev:event="DOMFocusOut" if="instance('Regd_Form')/repeat_pass != instance('Regd_Form')/password">
				<xf:setvalue ref="instance('Regd_Form')/repeat_pass" value="''"/>
				<xf:message level="modal">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@e1msg"></xf:label></xf:message>
				
			</xf:action>
		</xf:secret><br/>
		<xf:submit submission="submit">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@sbutton"></xf:label>
			
			
		</xf:submit>
		<xf:trigger>
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@cbutton"></xf:label>
			<xf:reset ev:event="DOMActivate" target="model1"/>
		</xf:trigger>
 </fieldset>
	</center><br/>



</div>
</body>
</html>

Credits

edit

This example was originally inspired by Kurt Cagle.

Retrieved from "https://en.wikibooks.org/w/index.php?title=XForms/Dynamic_Labels_in_Local_language&oldid=3678399"