Let's see an example of how we can internationalize a standard web application. To do so, we will create a simple web application in Dart Editor, designed the registration form, and embedded it inside the body of an index.html file. The code is as follows:
<h1>Registration Form</h1>
<form>
<table>
<tr>
<td><label for="firstName">First Name:</label></td>
<td><input type="text" id="firstName" name="firstName"></td>
</tr>
<tr>
<td><label for="lastName">Last Name:</label></td>
<td><input type="text" id="lastName" name="lastName"></td>
</tr>
<tr>
<td><label>Gender:</label></td>
<td>
<input type="radio" name="sex" value="male">
<span>Male</span>
<input type="radio" name="sex" value="female">
<span>Female</span>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Register"></td>
</tr>
<tr>
<td colspan="2">
<span dir="RTL">Copyright 2014 ףותישו דיתע</span>
</td>
</tr>
</table>
</form>The following screenshot shows the result of the preceding code in a web browser:
First of all, we add the intl package in the dependency section of our pubspec.yaml file. Then, we decide to try out a combination of naming conventions and internationalization methods to offer the utmost flexibility in setting up the display names, because meaningful display names are very important here. To create a display name of a component, we will perform the following actions:
- Make all the levels of the header tag end with the
Headsuffix - End all the labels with the
Lblsuffix - End the input elements to be submitted with the
Btnsuffix
Each referencing element must use the identifier name of the references element in combination with the previously mentioned suffix. So, now we are ready to internationalize the registration form.
All elements in the form that contains the string messages must have unique identifiers. We will remove all the text messages from the registration form, using the following code:
<h1 id="formHead"></h1>
<form>
<table>
<tr>
<td><label for="firstName" id="firstNameLbl"></label></td>
<td><input type="text" id="firstName" name="firstName"></td>
</tr>
<tr>
<td><label for="lastName" id="lastNameLbl"></label></td>
<td><input type="text" id="lastName" name="lastName"></td>
</tr>
<tr>
<td><label id="genderLbl"></label></td>
<td>
<input type="radio" name="sex" value="male">
<span id="maleLbl"></span>
<input type="radio" name="sex" value="female">
<span id="femaleLbl"></span>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="registerBtn"></td>
</tr>
<tr>
<td colspan="2"><span id="copyrightLbl"></span></td>
</tr>
</table>
</form>We need to create one function per message that is getting translated in the Dart code. In such cases, you must choose the naming convention for the following code:
formHead() => "Registration Form";
firstNameLbl() => "First name:";
lastNameLbl() => "Last name:";
genderLbl() => "Gender:";
maleLbl() => "Male";
femaleLbl() => "Female";
registerBtn() => "Register";
copyrightLbl() => "Copyright 2014 ףותישו דיתע";We will use the querySelector function to find all the elements that are translated by the unique identifier and assign the translated messages to their appropriate property, as shown in the following code:
querySelector("#formHead").text = formHead();
querySelector("#firstNameLbl").text = firstNameLbl();
querySelector("#lastNameLbl").text = lastNameLbl();
querySelector("#genderLbl").text = genderLbl();
querySelector("#maleLbl").text = maleLbl();
querySelector("#femaleLbl").text = femaleLbl();
(querySelector("#registerBtn") as InputElement)
.value = registerBtn();
BidiFormatter bidiFormatter = new BidiFormatter.UNKNOWN();
querySelector("#copyrightLbl").text =
bidiFormatter.wrapWithUnicode(copyrightLbl());Now, apply the Intl.message method to every function that's created, as shown in the following code:
formHead() => Intl.message("Registration Form",
name:"formHead",
desc: "Registration Form title");
firstNameLbl() => Intl.message("First name:",
name: "firstNameLbl",
desc: "First Name label");
lastNameLbl() => Intl.message("Last name:",
name: "lastNameLbl",
desc: "Last Name label");
genderLbl() => Intl.message("Gender:",
name: "genderLbl",
desc: "Gender label");
maleLbl() => Intl.message("Male",
name: "maleLbl",
desc: "Male label");
femaleLbl() => Intl.message("Female",
name: "femaleLbl",
desc: "Female label");
registerBtn() => Intl.message("Register",
name: "registerBtn",
desc: "Registration Button name");
copyrightLbl() => Intl.message("Copyright 2014 ףותישו דיתע",
name: "copyrightLbl",
desc: "Copyright label");If you open your page in a web browser, it will now look like the original one. Now that you know how messages can be translated with the Intl class, it's time to discuss localization.