了解如何在 IBM® WebSphere® Everyplace® Mobile Portal 应用程序中使用基于 XDIME 的解决方案支持多语言和语言首选项,包括中文和 bidi。通过使用本文中的示例,您可以在 Mobile Portal 应用程序中方便地启用全球化。
引言
由于部署环境的硬件和软件限制,很多 Mobile Portal 应用程序都不提供全球化功能。这意味着这些应用程序通常缺乏在按需环境中提供动态语言支持的灵活性。在本文中,我们将介绍一个 XDIME 解决方案,用于在 Mobile Portal 环境中启用动态全球化。
在 Mobile Portal 中启用多语言支持
在这一部分,您将了解如何在 XDIME 应用程序中启用多语言支持。您将创建支持以下语言的示例 XDIME 应用程序:英语、简体中文、法语和新埃及语(一种 bidi 语言)。可以方便地对此解决方案进行调整,以支持任何其他语言。要启用多语言支持,请完成以下步骤:
- 首先,您需要收集将显示在用户界面页中的所有可翻译字符串,如门户网页、电子邮件等等。这些字符串将添加到本地化包(或 LP)文件中,以便进行翻译。翻译完成后,可能需要将原始 UTF-8 字符串转换为 ASCII 字符串,如
\ufeff\u4e2d\u6587。您将使用 WPS 标记或资源包来将这些字符串获取到 LP 文件中。按照以下所示,将英语字符串收集到 LP 文件中。不要忘记收集那些可能不会在用户界面页显示的字符串,如 Portlet 标题、页面标题、状态和代码系统。
注意:如果字符串过长,请在 LP 文件中将其拆分为多个字符串。
我们建议使用 Microsoft® 记事本查看和更新 LP 文件,因为该工具可提供比其他编辑器(如 UltraEdit)更好的 Unicode 支持。
清单 1. 示例 LP 文件
#welcome.properties
#This file is for OGED WEMP welcome function
# By Luke 2005-8-3
#Portlet titles
PORTLET_WELCOME=Welcome
#Title informations
TITLE_GENERALINFORMATION=General Information
#Table column name
TABLE_TRACKSHIPMENT=Track shipment status
#Button label
BUTTON_TRACK=Track
#Notification information
NOTE_ABOUTSLOGAN=If you can make it here, you can make it everywhere.
#Error messages
EM_GENERAL=The system is temporarily unavailable, please contact the system administrator.
#Other string
|
- 接下来,按照语言设置组织 LP 文件,如下所示:
图 1. LP 文件的组织
- 现在需要编写类来允许 WPS 标记访问 LP 文件。要实现 WPS 标记,将编写一个 LoadTag 类和一个 ValueTag 类,如下面的示例中所示:
清单 2. LPLoadTag.java
public class LPLoadTag extends javax.servlet.jsp.tagext.TagSupport {
private String _file = null;
public int doEndTag() throws javax.servlet.jsp.JspException {
javax.servlet.ServletRequest request = pageContext.getRequest();
String locale = LPUtil.getUserLocale(request);
LPUtil lp = new LPUtil(locale, this._file);
try {
if (null == pageContext.getAttribute(LPConstants.PROPERTIESKEY)) {
pageContext.setAttribute(LPConstants.PROPERTIESKEY, lp
.getProperties());
} else {
((Properties) pageContext
.getAttribute(LPConstants.PROPERTIESKEY)).putAll(lp
.getProperties());
}
} catch (IOException e) {
e.printStackTrace();
}
return EVAL_PAGE;
}
}
|
清单 3. LPValueTag.java
public class LPValueTag extends javax.servlet.jsp.tagext.TagSupport {
private String _key = null;
public int doEndTag() throws javax.servlet.jsp.JspException {
java.util.Properties p = (java.util.Properties) pageContext
.getAttribute(LPConstants.PROPERTIESKEY);
try {
if (null != _key) {
String value = p.getProperty(_key);
if (null != value) {
//Print the value
pageContext.getOut().print(value);
}else{
//Print the default value if the key does not exit.
pageContext.getOut().print("The key " + _key
+ " is not found in lp file.");
}
}
} catch (IOException e) {
e.printStackTrace();
}
return EVAL_PAGE;
}
}
|
- 现在需要编写一个标记库配置文件。我们将在配置文件 lp.tld 中引用上面的类来进行 LP 处理(如清单 4 中所示),并随后将 lp.tld 放置到门户目录 <PortalProject>\WebContent\WEB-INF\tld 中。
清单 4. lp.tld
<taglib>
<tlibversion>5.1</tlibversion>
<jspversion>1.2</jspversion>
<shortname>LP Taglib</shortname>
<tag>
<name>load</name>
<tagclass>com.ibm.sgl.oged.util.LPLoadTag</tagclass>
<attribute>
<name>file</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
<tag>
<name>value</name>
<tagclass>com.ibm.sgl.oged.util.LPValueTag</tagclass>
<attribute>
<name>key</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
</taglib>
|
- 要在 XDIME Portlet 中使用 LP 标记库,请在门户 JSP 页中编写以下代码。请使用在 lp.tld 文件中定义的标记名称,如 lp:load 和 lp:value。
清单 5. 由于使用 LP 标记的示例代码
<!--Import the taglib -->
<%@taglib uri="/WEB-INF/tld/lp.tld" prefix="lp"%>
<!--Or you can init another instance -->
<%@taglib uri="/WEB-INF/tld/lp.tld" prefix="lpnew"%>
<!--Load the property file -->
<lp:load file="user.properties" />
<!--You can load another properties file using the new instance -->
<lp:load file="other.properties" />
<!--Get the translated string from lp -->
<lp:value key="USER_NAME" />
<lpnew:value key="ERR_GENERAL" />
|
选择语言
在此部分,您将了解如何在 Mobile Portal 中选择语言。您将使用 WPS ChangeLanguage 命令和 JavaScript™ Mobile Portal Banner.jsp 主题文件提供此全球化功能。如前面所提到的,我们将使用以下语言:英语、简体中文、法语和新埃及语(bidi 语言)。下面的屏幕截图显示了英语和中文主页的示例。
| 图 2:英语 | 图 3:简体中文 |
 |
 |
找到要编辑的文件
开始前,需要找到要编辑的文件。请使用下表作为参考:
| 文件名称 | 位置 | 描述 |
| Banner.jsp |
<was_root>\installedApps\<nodename>
\wps.ear\wps.war\themes\xdime\<viewname> |
在此主题文件中采用了 WPS URL 命令。 |
| Default.jsp |
同上 |
此文件中引用了以下布局策略文件。 |
| wp_pda_tools_<locale>.mlyt (locale can be replaced by en_US, zh_CN,fr_FR, and ar_EG) |
<portal_root>\mwpinst\policies\aggregator\ |
这些布局文件负责根据不同的语言设置处理 Banner.jsp 的布局和外观。 |
修改 Banner.jsp 的布局策略文件
需要对原始布局文件 (wp_pda_tools_<locale>.mlyt) 进行以下更改:
- 添加一个表单,以便 JavaScript 能通过引用该表单查找相关元素。
- 添加一个窗格,以便能将选择组件放置在右侧的位置。
- 修改窗格的背景色和宽度,以改善用户外观。
注意以下两个布局,以比较修改前后的布局的差异:
图 4. 原始布局
图 5. 修改后的布局
编辑 Banner.jsp 文件
按照以下的步骤编辑 Banner.jsp:
- 添加一个 xfform 定义,这是 JavaScript 所引用的一个组件容器。
- 添加一个 XDIME xfsiselect 组件,以提供四种语言选择项并调用 JavaScript 函数 on-select event。
- 添加一个 JavaScript 函数,以响应 on-select 事件并使用 WPS URL 命令使选择生效。
清单 6 显示了修改后的 Banner.jsp 源代码:
清单 6. Banner.jsp
<script language="JavaScript">
function changeLangUrl(){
// reference the document object and the select item
var language = document.myform.Language.value;
var submitURL;
if(language=="en_US"){
//Use wps url command ChangeLanguage to get the url according to different locale.
// In WEMP, this url is short, different from portal's url
//Note: these urls are parsed before rendered to the client in the server.
submitURL = "<wps:url command="ChangeLanguage">
<wps:urlParam name="locale" value="en_US"/></wps:url>";
}
else if(language=="zh_CN"){
submitURL = "<wps:url command="ChangeLanguage">
<wps:urlParam name="locale" value="zh_CN"/></wps:url>";
}
else if(language=="ar_EG"){
submitURL = "<wps:url command="ChangeLanguage">
<wps:urlParam name="locale" value="ar_EG"/></wps:url>";
}
else if(language=="fr_FR"){
submitURL = "<wps:url command="ChangeLanguage">
<wps:urlParam name="locale" value="fr_FR"/></wps:url>";
}
window.location.href = submitURL;.
}
</script>
<!--XDIME JSP -->
<!--Already get the current locale (elided)-->
<region name="banner">
<!--Reference the layout file according to the current locale-->
<canvas layoutName="<mwp:vpMapper name="wp_pda_tools_<%=locale%>.mlyt"/>" type="portlet" >
<!--xfform definition-->
<xfform name="myform" method="POST" action="">
<%
String localeList[] = {"en_US", "zh_CN", "fr_FR", "ar_EG"};
String myoptionValue[]={" English (United States)",
"\ufeff \u4e2d\u6587 (\u4e2d\u56fd)",
"fran\u00e7ais (France)",
" (\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0645\u0635\u0631");
%>
<!--xfsiselect definition-->
<!--Reference to the select pane in layout file and JavaScript function
and the current locale-->
<xfsiselect name="Language" entryPane="select" onchange="changeLangUrl()"
initial="<%=locale%>" >
<%for (int i =0;i<4;i++)
{
%>
<xfoption value="<%=localeList[i]%>" caption="<%=myoptionValue[i]%>" />
<%
}
%>
</xfsiselect>
<!--Other parts are elided here-->
</xfform>
</canvas>
</region>
|
为了使更改立即生效,还需要更新 Default.jsp。否则,服务将不会重新加载主题的 JSP 文件。


|
回页首 |
|
编辑全球化首选项
用户登录到门户网站后,可能希望设置其全球化首选项。例如,用户可以浏览英语门户网站,但可以将度量衡格式或日期格式设置为简体中文。
可以提供以下全球化首选项:
- 弹出日历
- 下拉日历
- 货币格式
- 长度格式
- 重量格式
- 日期/时间格式
- 敬语
- 姓名格式
- 地址格式
设计全球化首选项表数据库
需要将全球化首选项设置存储在表数据库中。任何全球化功能都必须与一个字段关联,如 Currency、Length、Weight 等等。
以下是数据库中全球化首选项的一个示例:
| USERID | LANGUAGE | CURRENCY | DATETIM | LENGTHWEIGHT |
| lukewang |
en_US |
en_US |
en_US |
METRIC |
编写全球化首选项 Portlet
可以如图 6 中所示,为用户提供一个 Portlet 来设置其全球化首选项并使用这些首选项浏览 XDIME 页面。
图 6. Edit Globalization Preference 页
如果在门户网站中验证结果,可以看到货币、日期和时间均设置为中文格式,而长度和重量均设置为米制格式。
图 7. Globalization Detail 页


|
回页首 |
|
在 Mobile Portal 中支持中文
如果希望在 Mobile Portal 应用程序中支持中文,最初可能会遇到一些问题。通常,中文字体无法在 PDA 上正确显示。在此部分,您将了解如何在 Mobile Portal 中支持中文。
- 在您的 JSP 中执行以下设置,从而将编码类型和字符集设置为“UTF-8”:
<%@ page session="false" contentType="x-application/vnd.xdime+xml; charset=UTF-8" %>
- 配置主题策略,以提供中文支持通常,PDA 仅能够支持一种特定的中文字体,具体取决于其自身的字体库。例如,HP iPAQ 仅能支持中文的
。因此,需要对主题策略进行配置,以将字体指定为 。
为此,请使用主题编辑器打开主题策略,并将文本相关的选择器的字体指定为 ,如图 8 中所示。
图 8. 配置主题策略
- 配置虚拟门户策略。聚合器的主题策略位于 <wp_root> \mwpinst\policies\aggregator。这些策略是一组名为 wp_styles_<locale>.mthm 的主题策略,将基于语言设置呈现不同的样式。对于中文支持,需要配置 wp_styles_zh.mthm 策略。
要配置虚拟门户策略,请执行以下步骤:
- 使用 Rational® Application Developer V6 中的主题编辑器打开 wp_styles_zh.mthm。
- 添加一个称为
chinese 的新选择器,并选择字体 。
图 9. 配置虚拟门户策略
- 保存文件,并将其复制到 <wp_root>\mwpinst\policies\aggregator 目录中替代旧文件。
- 转到路径 <portal_root>/config/ 并运行 ./WPSconfig.sh mwp-import-policies,以将策略导入到 MCS 数据库。
- 现在已经配置了支持中文所需的虚拟门户策略,接下来需要应用该策略。我们将使用 pdaview 中的 Portlet 短标题为例,以演示如何应用主题策略。
- 打开目录 <was_root>\installedApps\ogedwemp\wps.ear\wps.war\themes\xdime\pdaview 中的 PortletNavigation.jsp 文件。
- 在 PortletNavigation.jsp 中添加新样式类,如下所示:
清单 7. 应用样式类
<pane name="<%=NAV_CAPTION_PANE%>.<%=linkCount%>">
<a class="chinese" href="<%=pi.getURL()%>"><%=com.ibm.mwp.util.TitleUtil.getTitle(request, pi)%></a>
</pane>
|
- 更新 Default.jsp(例如,输入一些空格),以使更改立即生效。
- 在 XDIME Portlet 页中查看使用中文时的效果。
图 10. 中文页面

 |


|
回页首 |
|
在 Mobile Portal 中支持 bidi
阿位伯语、希伯来语、乌尔都语和波斯语均是从右到左书写,而嵌入在这些文本中的数字或拉丁语片段(或采用西里尔字母或希腊字母的文本)则采用从左到右的方式。这种现象称为双向语言(bidirectional,bidi)。
在 HTML,支持 bidi 非常容易。这将由 dir 属性全权处理,您只需要将 dir 属性设置为 RTL 即可。bidi 算法已经在 HTML 规范中实现,因此 Web 开发人员并不需要进行太多的工作就能支持 bidi。不过,在 Mobile Portal 中,开发人员使用 XDIME 标记(而不是 HTML 标记)来定义表示。.XDIME 并不提供 dir 属性,因此 Mobile Portal 中并不直接支持 bidi。
不过,可以使用一些解决办法来提供部分 bidi 语言支持。为了实现与 HTML 中使用 dir 属性反向页面布局相似的功能,可以在 Mobile Portal 中使用布局策略来实现此功能。在本部分,您将了解如何进行此任务。
让我们分析最近创建的项目中的一个示例来了解如何在 Mobile Portal 中处理 bidi。通常,对于每个页面,都需要两个布局策略文件。一个用于普通的从左到右的情况,而另一个用于提供 bidi 支持。
图 11 和 12 显示了非 bidi 布局策略文件和 bidi 布局策略文件:
图 11. 非 bidi 支持布局策略:requestReport.mlyt
图 12. bidi 支持布局策略:requestReport_ar_EG.mlyt
requestReport.mlyt 的方向是从左到右,而 requestReport_ar_EG.mlyt 的方向是从右到左。为此,直接在 requestReport_ar_EG.mlyt 中交换同一行的窗格,页面的布局就反向了,而无需更改 JSP 文件。
还需要考虑水平对齐。要支持 bidi,每行的水平对齐必须设置为 Right ,如图 13 中所示:
图 13. 为 bidi 支持设置水平对齐
以下是 RequestReport.jsp 文件的部分内容。
清单 8. RequestReport.jsp
<%
String locale = com.ibm.sgl.oged.util.LPUtil.
getFullLocale(request.getLocale().toString());
String layoutname = "/requestReport.mlyt";
if("ar_EG".equals(locale)){
//for ar_EG locale, use another layout policy
layoutname = "/requestReport_ar_EG.mlyt";
}
%>
<canvas layoutName="<%=layoutname%>" theme="<%=themename%>" type="portlet">
<pane name="top">
<p class="t5"><lp:value key="PORTLET_REQUESTREPORT"/></p>
</pane>
<xfform name="requestForm" method="POST" action="<portlet:actionURL/>" >
<pane name="city" class="td6">
<p><lp:value key="TABLE_DESTINATIONCITY"/></p>
</pane>
<pane name="cityinput" class="td6">
<xfsiselect name="descity" entryPane="cityinput" initial="<%=descity%>">
<xfoption caption="<lp1:value key="CITY1000"/>" value="CITY1000"/>
<xfoption caption="<lp1:value key="CITY1001"/>" value="CITY1001"/>
<xfoption caption="<lp1:value key="CITY1002"/>" value="CITY1002"/>
</xfsiselect>
</pane>
<xfaction type="submit" name="submit" class="button"
caption="<lp:value key="BUTTON_SUBMIT"/>" captionPane="submit" entryPane="submit" />
<xfaction type="reset" name="reset" class="button"
caption="<lp:value key="BUTTON_RESET"/>" captionPane="reset" entryPane="reset" />
</xfform>
</canvas>
|
可以使用 Mozilla Firefox® User Agent Switcher 扩展来测试示例代码,如下所示。
语言设置为 en_US 和 ar_EG 时的请求报告页
| 图 14:en_US | 图 15:ar_EG |
 |
 |


|
回页首 |
|
结束语
在本文中,您了解了如何在 Mobile Portal 应用程序中支持多语言和语言首选项。您了解了可以如何提供允许用户选择其全球化首选项的 XDIME Portlet。您还了解了如何在 Mobile Portal 应用程序中支持中文和 bidi 语言。通过使用本文的示例,您可以方便地为基于 XDIME 的 Mobile Portal 应用程序提供全球化功能。 |