Rào cản ngôn ngữ chính là yếu tố chính sẽ hạn chế việc bạn muốn thương mại hóa website đến với đông đảo mọi người trên toàn thế giới. Vậy nên việc xây dựng đa ngôn ngữ trong Spring MVC là điều cần thiết nếu như bạn muốn được nhiều người sử dụng hơn.
Trong phần này chúng ta sẽ thảo luận về quốc tế hóa (I18N) và bản địa hóa (L10N) trong Spring MVC. Hãy cùng xem phần hướng dẫn sau đây của Team Việt Dev sẽ hướng dẫn thực hiện đa ngôn ngữ trong Spring MVC.
Bước 1: Trong ứng dụng Spring MVC bạn mở tập tin dispatcher-servlet.xml và cấu hình thêm đoạn mã sau
<bean id="localeResolver" class="org.springframework.web.servlet.i18n.SessionLocaleResolver"/>
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basename" value="/WEB-INF/resources/messages"/>
<property name="defaultEncoding" value="UTF-8"/>
</bean>
<mvc:interceptors>
<bean id="localeChangeInterceptor" class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor">
<property name="paramName" value="lang"/>
</bean>
</mvc:interceptors>
Trong cấu hình trên chúng ta đã định nghĩa thuộc tính messageSource trong đường dẫn /WEB-INF/resources/messages. Vậy nên Spring MVC sẽ xác định rằng tài nguyên trong thu mục /WEB-INF/resources/ bắt đầu bằng định dạng message_
Bây giờ chúng ta sẽ tạo với mỗi ngôn ngữ sử dụng tương ứng với một tập tin định dạng .properties. Như trong ví dụ thì mình sẽ tạo 3 tập tin messages_en_US.properies, messages_es_ES.properies và messages_vi_VN.properties trong thư mục resources tương ứng với 3 ngôn ngữ lần lượt tiếng Anh, tiếng Việt và tiếng Tây Ban Nha.
Tập tin messages_en_US.properties
label.gallery=Gallery label.all=ALL label.application=Application label.hardware=Hardware label.software=Software label.download=Download label.more=More
Tập tin messages_es_ES.properties
label.gallery=Coleccion label.all=Todo label.application=Solicitud label.hardware=Hardware label.software=Software label.download=Descargar label.more=Ver tambien
Tập tin messages_vi_VN.properties
label.gallery=Bộ sưu tập label.all=Tất cả label.application=Ứng dụng label.hardware=Phần cứng label.software=Phần mềm label.download=Tải xuống label.more=Xem thêm
Bước 2: Trong tập tin JSP để hiển thị đa ngôn ngữ trong Spring MVC bạn sử dụng thẻ <spring:message code=”codename”/> ví dụ như
<spring:message code="label.gallery" text="Gallery"/>
Trang hiển thị dữ liệu mẫu bạn tham khảo:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Multi Language Spring MVC</title>
<style>
.gallery-title
{
font-size: 36px;
color: #42B32F;
text-align: center;
font-weight: 500;
margin-bottom: 70px;
}
.gallery-title:after {
content: "";
position: absolute;
width: 7.5%;
left: 46.5%;
height: 45px;
border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #42B32F;
margin-bottom: 30px;
}
.filter-button:hover
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #42B32F;
}
.btn-default:active .filter-button:active
{
background-color: #42B32F;
color: white;
}
.port-image
{
width: 100%;
}
.gallery_product
{
margin-bottom: 30px;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
Language: <a href="?lang=en_US">English</a> - <a href="?lang=vi_VN">Vietnamese</a> - <a href="?lang=es_ES">Spain</a>
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title"><spring:message code="label.gallery" text="Gallery"/></h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all"><spring:message code="label.all" text="All"/></button>
<button class="btn btn-default filter-button" data-filter="application"><spring:message code="label.application" text="Application"/></button>
<button class="btn btn-default filter-button" data-filter="hardware"><spring:message code="label.hardware" text="Hardware"/></button>
<button class="btn btn-default filter-button" data-filter="software"><spring:message code="label.software" text="Software"/></button>
<button class="btn btn-default filter-button" data-filter="download"><spring:message code="label.download" text="Download"/></button>
<button class="btn btn-default filter-button" data-filter="more"><spring:message code="label.more" text="More"/></button>
</div><br />
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="https://fakeimg.pl/350x200/" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
Liên kết ở trên đặt tham số yêu cầu ?lang= khi người dùng nhấp vào liên kết để chuyển đổi ngôn ngữ muốn hiển thị.
Bước 3: Bây giờ hãy chạy thử ví dụ để xem kết quả như thế nào.
Trang hiển thị ngôn ngữ tiếng Anh:
Trang hiển thị ngôn ngữ tiếng Việt:
Trang hiển thị ngôn ngữ tiếng Tây Ban Nha:
Tải mã nguồn tại đây:
Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về hướng dẫn Spring MVC miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.
(Tác giả: Team Việt Dev)
