语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用

简介: 【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。

JavaServer Faces (JSF) 框架提供了丰富的功能来支持国际化 (Internationalization, I18N) 和本地化 (Localization, L10N),使得开发者能够轻松地为应用程序添加多语言支持。本文将通过一个具体的案例来展示如何在 JSF 应用程序中实现多语言支持,帮助你理解 JSF 中 I18N 的基本概念和实现步骤。

首先,创建一个新的 JSF 项目。在 Eclipse 中,选择 "File" > "New" > "Dynamic Web Project",命名为 "MyI18NJSFApp",并确保选择了支持 JSF 的服务器版本。

接下来,创建语言资源文件。JSF 使用 Messages 资源束来存储应用程序中的消息。每个语言版本都有一个单独的资源文件,文件名格式为 messages_xx.properties,其中 xx 是 ISO 639-1 语言代码。

src/main/resources/META-INF 目录下创建以下资源文件:

messages_en.properties

welcomeMessage=Welcome to our website!
title=Home Page

messages_fr.properties

welcomeMessage=Bienvenue sur notre site!
title=Page d'accueil

这些文件分别定义了英文和法文版本的消息。

接下来,配置 JSF 的国际化支持。在 web.xml 文件中,需要配置 LocaleConfigResourceBundle 的默认值。

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <context-param>
        <param-name>javax.faces.DEFAULT_LOCALE</param-name>
        <param-value>en</param-value>
    </context-param>

    <context-param>
        <param-name>javax.faces.FACELETS_RESOURCE_HANDLER_PREFIX</param-name>
        <param-value>/WEB-INF/view/</param-value>
    </context-param>

    <context-param>
        <param-name>javax.faces.FACELETS_RESOURCE_HANDLER_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>

    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsf</welcome-file>
    </welcome-file-list>

    <locale-encoding-mapping-list>
        <locale-encoding-mapping>
            <locale>en</locale>
            <encoding>UTF-8</encoding>
        </locale-encoding-mapping>
        <locale-encoding-mapping>
            <locale>fr</locale>
            <encoding>UTF-8</encoding>
        </locale-encoding-mapping>
    </locale-encoding-mapping-list>

</web-app>

上述配置设置了默认的 Locale 为英语 (en),并定义了两种语言的编码映射。

接下来,创建一个 Managed Bean 来处理语言选择。

package com.example.bean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import java.util.Locale;

@ManagedBean(name = "languageBean")
@SessionScoped
public class LanguageBean {
   

    private Locale locale;

    public Locale getLocale() {
   
        return locale;
    }

    public void setLocale(Locale locale) {
   
        this.locale = locale;
        FacesContext.getCurrentInstance().getViewRoot().setLocale(locale);
    }

    public void switchToEnglish() {
   
        setLocale(new Locale("en"));
    }

    public void switchToFrench() {
   
        setLocale(new Locale("fr"));
    }
}

在上述代码中,LanguageBean 类包含了一个 Locale 属性,用于存储当前选定的语言。switchToEnglishswitchToFrench 方法用于切换语言,并更新 FacesContext 中的 Locale

现在,创建一个 Facelets 页面 index.xhtml,展示语言选择按钮,并使用 EL 表达式来显示多语言消息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
    <title><h:outputText value="#{bundle.title}" /></title>
</h:head>
<h:body>
    <h:form>
        <h:commandButton value="English" action="#{languageBean.switchToEnglish}" />
        <h:commandButton value="Français" action="#{languageBean.switchToFrench}" />

        <h:outputText value="#{bundle.welcomeMessage}" />
    </h:form>
</h:body>
</html>

index.xhtml 页面中,<h:commandButton> 标签用于创建两个按钮,分别用于切换到英文和法文。<h:outputText> 标签使用 EL 表达式 #{bundle.welcomeMessage} 来显示消息,其中 bundle 是默认的资源束名称。

最后,部署并运行你的应用程序。启动应用服务器,并在浏览器中访问 http://localhost:8080/MyI18NJSFApp/index.jsf。你应该看到一个带有语言选择按钮的页面。点击按钮后,页面上的消息会根据所选语言进行变化。

通过上述步骤,你已经成功地为 JSF 应用程序添加了多语言支持。这个示例不仅介绍了如何配置 JSF 环境以支持国际化,还包括了如何编写和使用语言资源文件,以及如何通过 Managed Bean 和 Facelets 页面来实现动态的语言切换。掌握了这些基础知识后,你可以进一步探索 JSF 的更多高级功能,如日期和数字格式化、货币符号显示等,以满足更复杂的国际化需求。

相关文章
|
8月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
9月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1553 0
|
8月前
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
951 18
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
7月前
|
JavaScript 前端开发 安全
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
每日激励:“如果没有天赋,那就一直重复”。我是蒋星熠Jaxonic,一名执着于代码宇宙的星际旅人。用Vue 3与TypeScript构建高效、可维护的前端系统,分享Composition API、状态管理、性能优化等实战经验,助力技术进阶。
1006 1
Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
982 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
705 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
12月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
623 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
11月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:使用 Gin 快速构建 Web 服务
Gin 是一个高效、轻量级的 Go 语言 Web 框架,支持中间件机制,非常适合开发 RESTful API。本文从安装到进阶技巧全面解析 Gin 的使用:快速入门示例(Hello Gin)、定义 RESTful 用户服务(增删改查接口实现),以及推荐实践如参数校验、中间件和路由分组等。通过对比标准库 `net/http`,Gin 提供更简洁灵活的开发体验。此外,还推荐了 GORM、Viper、Zap 等配合使用的工具库,助力高效开发。
|
12月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
479 22
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
930 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex