Language translation in springboot web application
Question
I am new to springboot and I am trying to create a web application which would translate the language of the page that's being rendered.
I know one of the ways to do this which is by creating beans of LocaleResolver and LocaleChangeInterceptor and adding this interceptor to the implemented method of the WebMvcConfigurer . This process is a lot tedious and hectic because it requires each and every translations for every words that's being displayed on the page. Here's an example of it:
Web page I am trying to translate;
<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Teacher page</title>
<link rel="stylesheet" th:href="@{~/css/landing.css}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div th:replace="fragments/frag :: header"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2 th:text="#{form}"></h2>
<form th:action="@{/teacher/save}" method="post" th:object="${teacher}">
<input th:field="*{id}" hidden>
<div class="form-group">
<label for="name" th:text="#{name}"></label>
<input type="text" class="form-control" id="name" th:field="*{name}">
<span class="class_css" th:text="${teacherError.nameError}"></span>
</div>
<div class="form-group">
<label for="mobileNumber" th:text="#{mobile}"></label>
<input type="text" class="form-control" id="mobileNumber" th:field="*{mobileNumber}">
<span class="class_css" th:text="${teacherError.mobileNumberError}"></span>
</div>
<div class="form-group">
<label for="exampleInputEmail1" th:text="#{email}"></label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" th:field="*{email}">
<span class="class_css" th:text="${teacherError.emailError}"></span>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-dark" th:text="#{submit}"></button>
</form>
<span th:text="${message}"></span>
</div>
<div class="col-md-8">
<h3 th:text="#{display}"></h3>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col" th:text="#{serial}"></th>
<th scope="col" th:text="#{name}"></th>
<th scope="col" th:text="#{mobile}"></th>
<th scope="col" th:text="#{email}"></th>
<th scope="col" th:text="#{status}"></th>
<th scope="col" th:text="#{action}"></th>
</tr>
</thead>
<tbody>
<tr th:each="teacher, istat: ${teacherList}">
<td th:text="${istat.index + 1}"></td>
<td th:text="${teacher.name}"></td>
<td th:text="${teacher.mobileNumber}"></td>
<td th:text="${teacher.email}"></td>
<td>ACTIVE</td>
<td><a th:href="@{/teacher/edit}+${teacher.id}"><button class="btn btn-warning">Edit</button></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
For this page alone, I have created messages.properties, messages_np.propertoies(to convert it into Nepali) and messages_fr.properties to convert it into french.
institute=Institute
info=Info
teacher=Teacher
departments=Departments
form=Form
display=Display Data
name=Name
mobile=Mobile Number
email=Email Address
address=Address
status=Status
action=Action
submit=Submit
serial=S No.
messages.properties
institute=संस्थान
info=जानकारी
teacher=शिक्षक
departments=विभागहरु
form=फारम
display=प्रदर्शन
name=नाम
mobile=मोबाइल
email=ईमेल
address=ठेगाना
status=स्थिति
action=कार्य
submit=बुझाउनुहोस्
serial=सिरियल
messages_np.properties
institute=Institut
info=Info
teacher=Prof
departments=Départements
form=Forme
display=Afficher
name=Nom
mobile=Mobile
email=Email
address=Adresse
status=Statut
action=Action
submit=Soumettre
serial=En série
messages_fr.properties
Now, what I want to do is, instead of writing all these translations myself, I want to pass these English data/words to some existing translators say Google translator for an instance, get those data back and re-render on the same page.
Is there a way I could do this?
Or any better way to do this where I don't have to translate all these words on a webpage myself?
1 answers
solution1
0 2020-06-13 17:30:12
With the translator lot of errors will come and in long run it's a bad idea.
I have faced that in my career.
You have to maintain all languages text in different properties file and this is valid too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.