ICEfaces 和 Google Translate -3 步骤 1. 创建 JSF 应用程序

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-8-23 20:34 | 只看该作者

ICEfaces 和 Google Translate -3 步骤 1. 创建 JSF 应用程序

步骤 1. 创建 JSF 应用程序第一步是使用 stock JSF 组件创建一个常规 JavaServer Faces (JSF) 版本的 Google Translate Web 应用程序。所有相关文件都存储在 WebContent 目录中。
首先，Google Translate 应用程序的顶部需要一个 panelGroup 组件，用于提供 panelDivider，它将页面分为两个部分。第一个部分包括：

一个 outputText 组件，作用类似于标签
一个 inputTextArea 组件，用于供用户输入文本
两个 selectOneMenu UI 控件，用于选择原始和目标语言
一个 graphicImage 组件，用于设置一个箭头

第二部分包括：

两个 outputText 组件（一个类似于标签，另一个用于显示经过翻译的文本）
两个 commandButton UI 控件。一个用于重置，另一个用于翻译

清单 1 显示了 main.jspx page 的代码。
清单 1. main.jspx 页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<jsp:directive.page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8" />
<f:view>
<ice

utputDeclaration doctypeRoot="HTML"
doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />
<html>
<head>
<title><ice

utputText value="Translate Tutorial" /></title>
<ice

utputStyle href="./xmlhttp/css/xp/xp.css" />
</head>
<body>
<ice

utputText value="Welcome to Translate Tutorial" />
<ice:form partialSubmit="true">
      <ice:messages />
<ice:panelGroup id="pnlGrp" >
<ice:panelDivider id="pnlDiv" orientation="vertical"
      style="width:100%;">
      <f:facet name="first">
         <ice:panelGrid id="firstPartTrsltPnlGrp" columns="1"
                     style="padding: 10px;width: 100%" >
         <ice

utputText id="outTxtTrnslt" value="Text to translate:"
                     style="line-height:2em;"  />
         <ice:inputTextarea id="inputTextTrnslt" style="width:100%"
                     cols="20" rows="5" partialSubmit="true"
                     value="#{translate.text}" >
         </ice:inputTextarea>
         <ice:panelGroup id="menues" style="width:100%" >
         <ice:selectOneMenu id="slcOnMenuOrigLang"
               value="#{translate.selectedOriginalLanguage}"
                        valueChangeListener="#{translate.originalLangChanged}">
                  <f:selectItems
                                 value="#{translate.ORIGINAL_LANGUAGES}" />
         </ice:selectOneMenu>
         <ice:graphicImage id="imgArrowRight"
                     url="/images/arr_ani_01e.gif">
         </ice:graphicImage>
         <ice:selectOneMenu id="slcOnMenuTrasltLang"
                        value="#{translate.selectedTranslatedLanguage}"
                        valueChangeListener="#{translate.translateLangChanged}">
            <f:selectItems value="#{translate.TRANSLATION_LANGUAGES}"  />
         </ice:selectOneMenu>
         </ice:panelGroup>
         </ice:panelGrid>
      </f:facet>
      <f:facet name="second">
         <ice:panelGroup id="secPartPblGrp" style="padding: 10px;">
            <ice

utputText id="trnsltTxt" value="Translated text"
                              style="line-height:2em" />
            <ice:panelGrid id="scndPartTrnsltTxtPnlGrd" columns="1">
                     <ice

utputText id="outPtTxtScndPrt"
                           value="#{translate.outputText}"
                                       effect="#{translate.textEffect}">
                     </ice

utputText>
            <ice:panelGrid id="pnlGrdButtonsSecondPart" columns="2">
                  <ice:commandButton id="btnResetScndPart"
                                    value="reset"
                           actionListener="#{translate.resetAll}" />
                  <ice:commandButton id="btnTranslitScndPart"
                                    value="translate"
                                 actionListener="#{translate.updateText}" />
            </ice:panelGrid>
            </ice:panelGrid>
         </ice:panelGroup>
      </f:facet>
</ice:panelDivider>
</ice:panelGroup>
</ice:form>
</body>
</html>
</f:view>
</jsp:root>

大多数组件都通过 JSF 表达式语言绑定动态绑定到了 backing JavaBeans，如清单 2 所示。
清单 2. 绑定到 backing JavaBeans 的组件

1
2
3
4
5
6
7
8
9
10
11

value="#{translate.outputText}"
value="#{translate.selectedOriginalLanguage}"
valueChangeListener="#{translate.originalLangChanged}"
value="#{translate.ORIGINAL_LANGUAGES}"
value="#{translate.selectedTranslatedLanguage}"
valueChangeListener="#{translate.translateLangChanged}"
value="#{translate.TRANSLATION_LANGUAGES}"
value="#{translate.outputText}"
effect="#{translate.textEffect}"
actionListener="#{translate.resetAll}"
actionListener="#{translate.updateText}"

收藏分享评分

回复引用

订阅 TOP

返回列表