SSH2 AJAX LoginDemo 项目添加 国际化信息

01/12/2011

在前一篇文章 SSH2项目 LoginDemo 添加 AJAX ,我们为 LOGINDEMO 添加了 AJAX 方面的支持,今天我们为它添加国际化方面的支持!

Struts2 对于国际化的支持非常容易配置

添加国际化属性配置文件到 SRC 目录
struts.properties

struts.custom.i18n.resources=globalMessages

globalMessages_en_US.properties

index.title=Login Demo
form.ajax.title=Login Demo By AJAX
text.label.username=User Name:
text.label.userpass=User Pass:
button.label.loginbyajax=Login By AJAX
button.label.loginbypost=Login By POST
form.post.title=Login Demo By POST
message.success="Welcome! User:"+{0}+" Login Successful!"
message.fail="Sorry! Login Fail! Please try argin."

globalMessages_zh_CN.properties

index.title=登录演示
form.ajax.title=AJAX方式登录演示
text.label.username=用户名称:
text.label.userpass=用户密码:
button.label.loginbyajax=AJAX方式登录
button.label.loginbypost=POST方式登录
form.post.title=POST方式登录演示
message.success="欢迎!用户:"+{0}+" 登录成功!"
message.fail="对不起!登录失败!请再试一次!"

上面两个属性配置文件中,国际化信息以 键值对 方式对应。需要输出的地方我们引用相应的键即可

标签方式引用键

<s:text name="index.title" />

带参数标签方式引用键

<s:text name='message.success'><s:param>item</s:param></s:text>

getText方式引用键

<s:textfield name="user.userName" label="%{getText('text.label.username')}" />

修改页面 index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!-- 添加 jquery tag 库 -->
<%@taglib prefix="sj" uri="/struts-jquery-tags" %>
<!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">
        <!-- 添加 JQUERY 库的 JS 库文件包含 -->
        <sj:head locale="zh_CN" jqueryui="true" />
        <!-- AJAX 方式登录 callback 函数响应,可以写至专门的 JS 文件 -->
        <script type="text/javascript">
                //当登录成功时的 callback
                $.subscribe("success", function(event) {
                    /**
                     * event.orginalEvent.data 中保存了 Action 返回的 JSON 值
                     * 本例中是 {"user":{"id":1,"userName":"test","userPass":"test"}}
                     * $.each 语句 遍历 json 值中 user 对象
                     * 当 idx=="userName" 时 输出 用户 登录成功信息至 目标元素
                     */
                    $.each(event.originalEvent.data.user , function(idx,item) {
                        if (idx=="userName") {
                            // s 标签方式引用键,带参数型
                            $("#result").html(<s:text name='message.success'><s:param>item</s:param></s:text>);
                        }
                    });
                });
                //当登录失败时的 callback ,输出登录失败信息至 目标元素
                $.subscribe("error", function() {
                $("#result").html(<s:text name='message.fail' />);
                });
        </script>
               <!-- s 标签方式引用 键-->
        <title><s:text name="index.title" /></title>
    </head>
    <body style="text-align:center;">
        <!--普通登录方式 同原来的例子没有区别,只是加入了点CSS-->
        <s:div cssStyle="border:#000000 solid 1px;width:400px;margin:0 auto;">
            <span style="display:block;text-align:center;"><s:text name="form.post.title" /></span>
            <s:form action="loginAction" method="post" namespace="/login-demo" cssStyle="margin:0 auto;text-align:center;">
                                                          <!-- getText 方式引用键 -->
                <s:textfield name="user.userName" label="%{getText('text.label.username')}" />
                <s:password name="user.userPass" label="%{getText('text.label.userpass')}" />
                <s:submit value="%{getText('button.label.loginbypost')}" />
            </s:form>
        </s:div>
        <br />
        <!-- AJAX 方式登录 -->
        <s:div cssStyle="border:#000000 solid 1px;width:400px;margin:0 auto;">
            <span style="display:block;text-align:center;"><s:text name="form.ajax.title" /></span>
            <s:form action="loginAjax" method="post" namespace="/login-ajax" cssStyle="margin:0 auto;text-align:center;">
                <s:textfield name="user.userName" label="%{getText('text.label.username')}" />
                <s:password name="user.userPass" label="%{getText('text.label.userpass')}" />
                <!--
                    使用了 jquery 标签库的 submit 标签
                    targets - 登录后信息回显目标
                    onSuccessTopics - 登录成功 调用的 callback 句柄
                    onErrorTopics - 登录失败 调用的 callback 句柄
                    dataType - 定义 ACTION 返回值类型为 json
                -->
                <sj:submit value="%{getText('button.label.loginbyajax')}" targets="result" onSuccessTopics="success" onErrorTopics="error" dataType="json" />
            </s:form>
            <!-- AJAX方式登录,信息回显目标元素 -->
            <span id="result" style="background-color:yellow;"></span>
        </s:div>
    </body>
</html>

浏览器默认中文显示

struts2-logindemo-ajax-i18n-cnstruts2-logindemo-ajax-i18n-cn-successstruts2-logindemo-ajax-i18n-cn-fail

浏览器默认英文显示

struts2-logindemo-ajax-i18n-usstruts2-logindemo-ajax-i18n-us-successstruts2-logindemo-ajax-i18n-us-fail