该支柱Web应用程序框架，可以很容易地建立使用模型 - 视图 - 控制器架构的Java Web应用程序。上次我们介绍Struts标签，这让你控制页面输出，交互数据，信息呈现给用户，并从他们那里得到信息反馈。在这篇文章中，我们专注于通用标签;这个时候，我们看一下用户界面的标签，这使得它能够轻松地创建与Java代码无缝集成的形式和用户体验。
UI标签让开发者显示在一个网页，并钩用户输入到后端数据。一些Struts的UI标签创建HTML标记，并允许您将其挂接到轻松你的代码。其他标签给你更多的有用的选项，如显示错误消息，我们将看到一个时刻的能力。Struts的UI标签有是JSP，Velocity和FreeMarker也特别好支持，但应与几乎任何共同语言兼容。下面的示例使用JSP。
请记住关于Struts UI标签三个重要的，但相关的概念：
- 标签是一小片JSP，FreeMarker的，或速度显示用代码中的代码运行的。
- 模板是一段代码，通过一定的HTML标记生成。模板控制的HTML标签输出。所有默认的模板是FreeMarker的，并且是大多数用途的罚款。如果你需要，你可以提取的struts-core.jar添加和编辑它们的默认模板。
- 主题是打包在一起的模板的集合。主题可以延长，因为我们拭目以待。
在本教程中，我们重点关注的标签，为默认模板和主题是适合大多数的目的。欲了解更多关于主题和模板，请参阅Struts的文档入住或退房手续延长自己的主题基本选项。
主要有三种类型的UI标签：表单标签，非表单标签和AJAX的标签。如果你想使用其中的任何视图页面上，你需要有一个标签库指令。我们已经看到了这一点，在通用标签部分显示网页：
<％@标签库前缀= “S” URI = “http://www.openlogic.com/struts-tags” ％>这两个点在描述Struts标签的文件，并指定所有的Struts标签带有前缀“S”。如果你有兴趣在读取标签TLD文件，它在Struts 2的核心JAR的META-INF文件夹中。
表单标签
这里的form.jsp，即使用Struts UI表单标签基本输入形式：
<％@标签库URI = “http://www.openlogic.com/struts-tags” 前缀= “S” ％> 鸡蛋和火腿表格</ TITLE> </ HEAD> <BODY> <b>鸡蛋和火腿表格</ b> <HR> <S：形式行动=” resultAction”> <S：无线电标签=“你喜欢绿鸡蛋和火腿？”名称= “yourEggsAndHam” 列表= “YESNO” 值= “defaultEggsAndHamValue”/> <S：提交/> <S：复位/> </ s的：形式> </ BODY> </ HTML></code></pre>
<p>这里的第一个重要的线是<code>S：形式</code>标签，该标签指定表单动作;我们将用一流的，当我们在struts.xml编辑此挂钩起来。第二个是<code>S：收音机</code>线。这指定了一个人类可读的标签旁边的单选按钮被示出;然后一个名称，列表和值，所有这些均从相关联的类检索如下：</p>
<aside class="nativo-promo nativo-promo-1 tablet desktop" id=""></aside>
<ul>
<li><code>yourEggsAndHam</code>-<code>getYourEggsAndHam（）</code></li>
<li><code>YESNO</code>-<code>getYesno（）</code></li>
<li><code>defaultEggsAndHamValue</code>-<code>getDefaultEggsAndHamValue（）</code></li>
</ul>
<p>我们还需要一个结果页面，radioresult.jsp：</p>
<pre class="prettyprint"><code><％@标签库前缀= “S” URI = “http://www.openlogic.com/struts-tags” ％> <HTML> <BODY> <H1>的Struts 2的单选按钮示例</ H1> <H4>待办事项你喜欢绿色鸡蛋和火腿？：<S：属性值= “yourEggsAndHam”/> </ H4> </ BODY> </ HTML></code></pre>
<p>该<code>S：财产</code>标签调用<code>getYourEggsAndHam（）</code>摆脱形式返回的结果。（看到<a href="http://www.openlogic.com/wazi/bid/249980/Tags-take-Struts-beyond-the-basics" rel="nofollow">在以前的文章在这个系列</a>欲了解更多的属性标记。）</p>
<p>接下来，RadioButton.java文件提供后端代码：</p>
<pre class="prettyprint"><code>打包例子;进口的java.util.ArrayList;进口的java.util.List;进口com.opensymphony.xwork2.ActionSupport;公共类单选按钮扩展了ActionSupport {私有列表YESNO;私人字符串yourEggsAndHam;私有静态最后弦乐YES =“是”;私有静态最后弦乐NO =“无”;私有静态最后弦乐UNKNOWN =“未知”;公共单选按钮（）{YESNO =新的ArrayList（）; yesno.add(YES); yesno.add(NO); yesno.add(UNKNOWN); } public String execute() { return SUCCESS; } public String display() { return NONE; } public String getDefaultEggsAndHamValue(){ return UNKNOWN; } // getters and setters public List getYesno() { return yesno; } public void setYesno(List yesno) { this.yesno = yesno; } public String getYourEggsAndHam() { return yourEggsAndHam; } public void setYourEggsAndHam(String yourEggsAndHam) { this.yourEggsAndHam = yourEggsAndHam; } }</code></pre>
<p>在这里，我们已经创造了所有的get和set方法建立的单选按钮的选项都列表，以及存储和访问用户输入的实际值。最后，在struts.xml中这些线连接在一起的Java和JSP文件：</p>
<aside class="nativo-promo nativo-promo-2 tablet desktop smartphone" id=""></aside>
<pre class="prettyprint"><code><？XML版本= “1.0” 编码= “UTF-8”？> <！DOCTYPE支柱PUBLIC！ “ - // Apache软件基金会// DTD struts配置2.0 // EN”“http://struts.apache.org/的DTD /支杆-2.0.dtd “> <支柱> <包名称=” 默认”的延伸= “支柱默认”> <动作名称= “radioButtonAction” 类= “example.RadioButton” 方法= “显示”> <结果名称= “无”> / form.jsp </导致> </动作> <动作名称= “resultAction” 类= “example.RadioButton”> <结果名称= “成功”> / radioresult.jsp </导致> </动作> </打包> </支柱></code></pre>
<p>编译RadioButton.java，重新启动Tomcat，并检查了HTTP：//本地主机：8080 / mystruts / radioButtonAction.action。请注意，如果您尝试form.jsp直接加载，你会得到一个错误，因为RadioButton类必须首先调用创建<code>YESNO</code>通过单选按钮使用的列表。</p>
<figure>
<img alt="单选大小600" data-original="http://www.openlogic.com/Portals/172122/images/radiobutton-resized-600.png" class="lazy" loading="lazy">
</figure>
<p>所有其他形式的标签可以用类似方法创建。例如，添加一个“名称”文本字段中，第一这个行添加到form.jsp：</p>
<pre class="prettyprint"><code><S：文本字段标签= “名称” 名称= “YOURNAME”/></code></pre>
<p>现在添加这个变量和getter / setter方法RadioButton.java：</p>
<pre class="prettyprint"><code>私人字符串YOURNAME;公共字符串getYourName（）{返回YOURNAME;}公共无效setYourName（字符串YOURNAME）{this.yourName = YOURNAME;}</code></pre>
<p>并且这条线向radioresult.jsp，显示的名称输入：</p>
<pre class="prettyprint"><code>喜<S：属性值= “YOURNAME”/>！</code></pre>
<p>重新编译，重新启动Tomcat，你的表格现在将与名称输入一个文本框加载。</p>
<p>欲了解更多有关的所有UI标签，包括其它形式的，看<a href="http://struts.apache.org/2.3.7/docs/ui-tag-reference.html" rel="nofollow">Struts的UI标签文档</a>。</p>
<h2>非表单标签</h2>
<p>Struts还提供非表单标签，这给你其他的UI选项屈指可数。让我们快速浏览一下<code>ActionMessage的</code>和<code>actionerror</code>。在form.jsp（以上），添加此<code><风格></code>在报头部分中：</p>
<pre class="prettyprint"><code><风格类型= “文本/ CSS”> .errors {背景色：＃FF9933;边界：1px的固体＃663300;宽度：400像素;边距：8像素;} .errors李{列表样式：无;} </样式></code></pre>
<p>还有这个<code>如果</code>只是形式节开始前标签：</p>
<pre class="prettyprint"><code><S：如果测试= “hasActionErrors（）”> <DIV类= “错误”> <S：actionerror /> </ DIV> </ S：如果></code></pre>
<p>这就建立了一个CSS样式使用“错误”部分，则呈现<code>actionerror</code>如果标签<code>hasActionErrors（）</code>返回true。你还需要改变表单动作<code>的ValidateUser</code>。</p>
<p>现在来处理成功的消息。编辑radioresult.jsp看起来像这样：</p>
<pre class="prettyprint"><code><％@标签库前缀= “S” URI = “http://www.openlogic.com/struts-tags” ％> <HTML> <HEAD> <风格类型= “文本/ CSS”>。欢迎{背景色：＃9933ff;边界：1px的固体＃330099;宽度：200像素;}。欢迎李{列表样式：无;} </样式> </ HEAD> <BODY> <H1>鸡蛋和火腿结果</ H1> <S：如果测试= “hasActionMessages（）”> <DIV类= “欢迎”> <S：ActionMessage的/> </ DIV> </ S：如果> <H4>你喜欢绿鸡蛋和火腿？：<S：属性值= “yourEggsAndHam”/> </ H4> </ BODY> </ HTML></code></pre>
<p>同样，我们已经设置了行动消息的CSS样式，如果有一个动作消息显示，我们显示它。</p>
<p>现在，我们需要一个方法添加到RadioButton.java：</p>
<pre class="prettyprint"><code>公共无效的validate（）{如果（ “SamIAm” .equals（getYourName（）））{addActionMessage（ “你好萨姆！”）;}其他{addActionError（ “你不是山姆！”）;}}</code></pre>
<p><code>验证（）</code>被加载的形式时被自动调用。最后，链接这一切，加上另一个动作部分的struts.xml：</p>
<pre class="prettyprint"><code><动作名称= “的ValidateUser” 类= “example.RadioButton”> <结果名称= “成功”> / radioresult.jsp </结果> <结果名称= “输入”> / form.jsp </导致> </动作></code></pre>
<p>现在重新编译和访问http：//本地主机：8080 / mystruts / validateUser.action。如果你把任何东西，但SamIAm到用户名框，你会得到一个错误信息。否则，你会得到一个紫色的“你好萨姆！”框在搜索结果页面的顶部。</p>
<figure>
<img alt="ActionMessage的" data-original="http://www.openlogic.com/Portals/172122/images/actionmessage.png" class="lazy" loading="lazy">
</figure>
<p>一个问题需要注意的是，这是设置方式，<code>验证（）</code>被称为每次窗体加载，所以你总是得到“你不是山姆”的错误消息。为了解决这个问题，就需要rejig设置要经过一个JSP页面，而不是通过validateUser.action。目前，如果你直接去form.jsp，如上所述，你会得到一个错误消息，因为YESNO列表不会被填充。</p>
<p>其他非表单标签可用内容<code>零件</code>，它允许你建立一个自定义UI组件;<code>fielderror</code>，测试对于有效字段输入;和<code>DIV</code>，这使得一个HTML div标签。支柱还支持使用Dojo插件使用AJAX选择标签。有关所有UI标签参考，请参阅<a href="http://struts.apache.org/2.3.7/docs/ui-tag-reference.html" rel="nofollow">Struts的文档</a>。</p>
<figure>
<img data-original="http://track.hubspot.com/__ptq.gif?a=172122&k=14&bu=http://www.openlogic.com/wazi/&r=http://www.openlogic.com/wazi/bid/249981/UI-tags-make-Struts-look-good&bvt=rss" class="lazy" loading="lazy">
</figure>
<figure>
<img data-original="http://feeds.feedburner.com/~r/openlogic/wazi/~4/A6-fwFJX8Es" class="lazy" loading="lazy">
</figure>
<div class="end-note">
<!-- blx4 #2005 blox4.html -->
<div id="" class="blx blxParticleendnote blxM2005 blox4_html blxC23909">
加入对网络世界的社有个足球雷竞技app区<a href="https://www.facebook.com/NetworkWorld/" target="_blank">Facebook的</a>和<a href="https://www.linkedin.com/company/network-world" target="_blank">LinkedIn</a>对那些顶级心态的话题发表评论。</div>
</div>
</div>
<div class="apart-alt tags">
<span class="related">有关：</span>
<ul>
<li><a class="edition-link-url primary-cat-url2" href="//m.amiribrahem.com/category/opensource-subnet"><span class="primary-cat-name2">开源（重复）</span></a></li>
<li><a class="edition-link-url primary-cat-url2" href="//m.amiribrahem.com/category/open-source-tools"><span class="primary-cat-name2">开源</span></a></li>
</ul>
</div>
<p class="content-copy">版权所有©2012<span class="ccbu">Raybet2</span></p>
<!-- blx4 #1524 blox4.article.toaster -->
<div class="article-intercept">
<a href="https://www.idginsiderpro.com/article/3526496/it-salary-survey-2020-the-results-are-in.html"><i class="ss-icon ss-navigateright"></i><em>IT薪资调查：</em>结果是</a>
</div>
<style>
@media only screen and (min-width: 60.625em) {
article .apart.ad.not-lazy {
margin-left: 0;
float: right;
}
}
/* this spaces the ads in the right rail */
@media only screen and ( min-width: 48em ) {
article #drr-top-ad.epo.cat-narrow #imu2 {
margin-top: 390px; /*originally 354px*/
}
.topDeals.topper {
margin-top: 390px;
}
}
@media only screen and ( min-width: 48em ) and ( max-width: 58.063em ) {
article #drr-top-ad.epo.cat-narrow #imu2 {
margin-top: 0;
}
}
@media only screen and ( min-width: 60.625em ) {
article #drr-top-ad.epo.cat-narrow #imu2 {
margin-top: 390px; /*originally 354px*/
}
.topDeals.topper {
margin-top: 390px;
}
}
@media only screen and ( min-width: 48em ) {
article #drr-top-ad.epo.cat-narrow div[id^=imu] {
margin-top: 390px;
}
}
@media only screen and ( min-width: 48em ) and ( max-width: 58.063em ) {
article #drr-top-ad.epo.cat-narrow div[id^=imu] {
margin-top: 0;
}
}
@media only screen and ( min-width: 60.625em ) {
article #drr-top-ad.epo.cat-narrow div[id^=imu] {
margin-top: 390px;
}
}
</style>
</section>
<!-- /.bodee -->
<div id="content-recommender">
<div class="OUTBRAIN" data-widget-id="AR_1" data-ob-template="NetworkWorld"></div>
</div>
<div class="lazyload_ad">
<code type="text/javascript">
<!--
var slotName = 'bottomleaderboard';
var slotSize = [];
if ($thm.deviceClass == 'mobile') {
slotSize = [[300,50],[320,50],[300,250]];
}
else if ($thm.deviceClass == 'tablet') {
slotSize = [[728,90],[468,60]];
}
else {
slotSize = [[728,90],[970,90],[970,250]];
}
IDG.GPT.addDisplayedAd(slotName, "true");
document.write('<div id="' + slotName + '" class="ad-container">');
IDG.GPT.defineGoogleTagSlot(slotName, slotSize, false, true);
document.write('</div>');
$('#' + slotName).responsiveAd({screenSize:'971 1115', scriptTags: []}, true);
//--></code>
</div>
<link rel="stylesheet" href="//m.amiribrahem.com/www.idgcsmb/css/tso-links.css?v=20200902114037">
<div id="tso-wrapper">
<div id="tso" style="display:none"></div>
</div>
</article>
</section>
<!-- /role=main -->
</div>
<!-- /#page-wrapper -->
<link rel="stylesheet" href="//m.amiribrahem.com/www.idge/css/foot.css?v=20200902114037">
<link rel="stylesheet" href="//m.amiribrahem.com/www.idge.nww/css/foot.css?v=20200902114037">
<footer>
<section class="brand" itemscope itemtype="http://schema.org/Organization">
<a href="//m.amiribrahem.com/"><span class="logo">有个足球雷竞技app</span></a>
<span class="tagline"></span>
<span class="follow"><label>跟着我们</label>
<ul>
<li class="lnkdn"><a class="social-media-li-foot" href="http://www.linkedin.com/company/network-world" itemprop="sameAs" rel="nofollow" target="_blank" onclick="brandFollowTrack('LinkedIn')"><i class="ss-icon ss-social-circle brand ss-linkedin"></i></a></li>
<li><a class="social-media-tw-foot" href="https://twitter.com/networkworld" itemprop="sameAs" rel="nofollow" target="_blank" onclick="brandFollowTrack('Twitter')"><i class="ss-icon ss-social-circle ss-twitter"></i></a></li>
<li><a class="social-media-fb-foot" href="https://www.facebook.com/NetworkWorld/" itemprop="sameAs" rel="nofollow" target="_blank" onclick="brandFollowTrack('Facebook')"><i class="ss-icon ss-social-circle brand ss-facebook"></i></a></li>
</ul></span>
</section>
<section class="topics"></section>
<section class="about">
<div class="wrapper">
<nav class="tertiary" id="ft3">
<ul>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/about.html">关于我们</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/contactus.html">联系</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/privacy.html">隐私政策</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/cookie-policy.html">rayapp
</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/member-preferences.html">dota2雷竞技
</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/contactus.html">广告</a></li>
<li><a class="edition-link-url" href="https://www.idg.com/work-here/" target="_blank" rel="nofollow">IDG招聘</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/adchoices.html">lol滚球 雷竞技
</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/affiliates.html">电子商务链接</a></li>
<li><a class="edition-link-url" href="//m.amiribrahem.com/about/ccpa.html">加利福尼亚州：不卖我的个人信息</a></li>
</ul>
</nav>
</div>
</section>
<section class="copyright">
<div class="wrapper">
<img src="https://alt.idgesg.net/images/logos/logo-footer-black.png" alt="IDG通信">
<p><a href="//m.amiribrahem.com/about/copyright.html">版权</a>©2020<span class="bu">Raybet2</span></p>
<div class="network">
<div id="network-selector">
<div class="label">
探索IDG网络<i class="ss-icon tick">降序</i>
</div>
<ul>
<li><a href="https://www.cio.com" target="_blank" rel="nofollow">CIO</a></li>
<li><a href="https://www.computerworld.com" target="_blank" rel="nofollow">计算机世界</a></li>
<li><a href="https://www.csoonline.com" target="_blank" rel="nofollow">CSO在线</a></li>
<li><a href="https://www.infoworld.com" target="_blank" rel="nofollow">InfoWorld的</a></li>
<li><a href="//m.amiribrahem.com" target="_blank" rel="nofollow">有个足球雷竞技app</a></li>
</ul>
</div>
<!-- /#network-selector -->
</div>
<!-- /.network -->
</div>
<!-- /.wrapper -->
</section>
</footer>
<div id="mobilewelcomead" class=" ad-container test"></div>
<div id="catfish" class=" ad-container test"></div>
<!-- Begin gpt-skin -->
<div id="gpt-skin" class=" ad-container"></div>
<!-- End gpt-skin -->
<!-- Include here when empty article and when not empty and article is slideshow as this script is included with DRR code in body-base.jsp. -->
<!-- Also do not include on search page with new right rail. OC-1778 -->
<!-- Begin comScore Tag -->
<noscript>
<img src="https://sb.scorecardresearch.com/p?c1=2&c2=6035308&cv=2.0&cj=1">
</noscript>
<!-- End comScore Tag -->
<div id="loginModal"></div>
<div id="logoffModal"></div>
</body>
</html>