技术文章-深入Beehive标签库系列教程(1)

新手上路

产品中心

BEA AquaLogic
AquaLogic BPM Suite
AquaLogic Service Bus
WebLogic Platform
WebLogic Server
BEA Workshop
WebLogic Portal
WebLogic Integration
BEA JRockit
WebLogic Event Server
BEA WLCP
更多产品中心

技术中心

SOA
Web Services
Open Source
XML
EJB
JDBC
JMS
Persistence

开发人员社区

在线技术论坛

User Group
dev2dev学堂
dev2dev Live!

dev2dev show
在线学堂
技术文章

论坛集粹

资源

CodeShare
代码库
Security Advisories
Utilities & Tools

关注dev2dev

dev2dev动态
市场活动

培训
电子刊物
书籍

dev2dev@works
Rss Feeds

dev2dev 首页 > 资源中心 > 技术文章

深入Beehive标签库系列教程(1) - 基本NETUI标签

时间：2006-06-22
作者：肖菁
浏览次数：
本文关键字：Beehive, NetUI, Taglib, 标签, 表单, 教程

文章工具

推荐给朋友

打印文章

　　浏览中向用户展示的内容主要分为文字、图片、超链接和表单等几大类，我们首先学习NETUI标签中用于显示文字、图片和超链接的标签，用于显示标单的标签将在后面的文章中一一介绍。

netui:span、netui:label、netui:content

　　netui:span、netui:label、netui:content这三个标签都可以用于显示页面上的一段文字，也都支持使用value属性可以设置被显示文字的内容。

　　netui:content标签仅仅支持defaultValue和value两个属性，其中的defaultValue属性用于指定该标签的默认内容。

　　netui:span、netui:label提供的属性比netui:content多出很多。比如netui:span、netui:label支持设置css风格的style、styleClass属性，也支持适用于声明捕获鼠标事件的onClick、onMouseOver等属性。

　　使用这三种标签显示“Hello World!”字符串的简单代码如下：

<netui:span value=“Hello World!”/>
<netui:label value=“Hello World!”/>
<netui:content value=“Hello World!”/>

　　我们可以为netui:span、netui:label设置更多的属性，比如使用netui:span标签显示“Hello World!”字符串、字符串颜色为红色、大小为18px的代码如下：

<netui:label value=“Hello World!” style=“color:red;font-size:18px” />
<netui:span value=“Hello World!” style=“color:red;font-size:18px” />

　　netui:span和netui:content处理方式比较类似，只是在处理浏览器敏感的内容是有些差异，因为netui:span会将浏览器敏感的内容更新为符合要求的内容。

　　比如”&”对于浏览器而言是敏感内容，浏览器遇到”&”时直接显示”&”。假设我们需要最终浏览器中最终显示的内容为”&”，我们来看看使用这两个标签存在着什么不同之处。如果我们使用netui:span标签并且将他的value属性内容设置为”&”，NETUI会自动输出”&amp;”到浏览器，而浏览器会显示”&”，这是我们想要的结果。如果我们使用netui:content标签并且同样将他的value属性内容设置为”&”，NETUI会输出”&”到浏览器，这种情况下浏览器只会显示”&”，这种情况下，我们需要将netui:content标签的value属性设置为”&amp;”才能得到我们想要的结果。

　　清单1中显示了netui:span、netui:label、netui:content标签更多的用法。

　　清单1 web\textExamples.jsp


 <%@ page language="java"
      contentType="text/html;charset=gb2312"%>
 <%@ taglib
      uri="http://beehive.apache.org/netui/tags-databinding-1.0"
      prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
      prefix="netui"%>
 <%@ taglib
      uri="http://beehive.apache.org/netui/tags-template-1.0"
      prefix="netui-template"%>
 <netui:html>
   <head>
      <title>Text Examples</title>
      <netui:base/>
   </head>
   <netui:body>
      <center>使用标签输出文字的例子</center><BR>
            使用netui:span输出文字：<br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:span value="Hello World!"/><BR>
            使用netui:span输出&amp;amp;：<br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:span value="&amp;"/><BR>
            使用netui:span + css输出文字:<BR>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:span value="Hello World!"
        style="color:red;font-size:18px" /><BR>
            <BR>
            <BR>
            使用netui:label输出文字:<BR>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:label value="Hello World!"/><BR>
            使用netui:label输出&amp;amp;：<br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:label value="&amp;"/><BR>
            使用netui:label + css输出文字:<BR>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:label value="Hello World!"
        style="color:red;font-size:18px" /><BR>
            <BR>
            <BR>
            使用netui:content输出文字:<BR>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:content value="Hello World!"/><BR>
            使用netui:content输出&amp;amp;：<br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <netui:content value="&amp;amp;"/><BR>
   </netui:body>
 </netui:html>

netui:iamge、netui:imageAnchor、netui:imageButton

　　页面上的图片通常有三种用途：一种用于简单的显示图片，一种是作为超链接的图片，还有一种是用于Form中的提交按钮的图片按钮。netui标签库中用netui:iamge、netui:imageAnchor、netui:imageButton标签来对应显示不同功能的图片。

　　netui:image标签用于在页面上显示一张图片，src属性用于设置被显示图片的路径。下面的代码可用于在页面上显示名为examples.gif的gif图片。

　　<netui:image src=“images/examples.gif”/>

　　netui:imageAnchor用于显示带有超链接的图片，它继承了netui:anchor的全部属性，只是超链接的载体由文件变成了图片，和netui:anchor一样，我们需要根据链接目标的不同选择action、href、linkName来设置目标地址，我们可以使用下面的代码来完成显示超链接到www.bea.com网站的examples.gif图片，其他形式下的属性设置方式请参考netui:anchor标签中的说明。

　　<netui:imageAnchor src=“images/bea.gif” href=“www.bea.com.cn” border=“0” />

　　netui:imageButton标签用于在页面上显示Form中用于提交的图片按钮，我们可以用下面的代码来显示一个可用于提交的图片按钮，用于显示的图片是examples.gif。


 <netui:form action=“begin”>
      请输入用户名:<BR>
      <netui:inputText dataSource=”userName” />
      <BR>
      <netui:imageButton src=”images/submit.gif” />
 </netui:form>

　　图片标签例子的全部内容请参考清单2。

　　清单2 web\imageExamples.jsp


 <%@ page language="java"
      contentType="text/html;charset=gb2312"%>
 <%@ taglib
      uri="http://beehive.apache.org/netui/tags-databinding-1.0"
      prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
      prefix="netui"%>
 <%@ taglib
      uri="http://beehive.apache.org/netui/tags-template-1.0"
      prefix="netui-template"%>
 <netui:html>
   <head>
      <title>Image Examples</title>
      <netui:base/>
   </head>
   <netui:body>
      <center>使用标签显示图片的例子</center><BR><BR>
      使用netui:image显示图片:<BR>
      <netui:image src="images/examples.gif"/><BR>
      <BR>
      <BR>
      使用netui:imageAnchor显示带超链接的图片<BR>
      使用netui:imageAnchor显示带超链接的图片，
      链接到aciton:<BR>
      <netui:imageAnchor src="images/bea.gif"
        action="begin" border="0" /><BR>
      <BR>
      使用netui:imageAnchor 的 href 属性，
      链接到本地JSP内容:<BR>
      <netui:imageAnchor src="images/bea.gif"
        href="/index.jsp" border="0" /><BR>
      <BR>
      使用netui:imageAnchor 的 href 属性，
      链接到远程JSP内容:<BR>
      <netui:imageAnchor src="images/bea.gif"
        href="http://www.bea.com.cn" border="0" /><BR>
      <BR>
      使用netui:imageAnchor 的 linkName 属性，
      链接到命名锚点:<BR>
      <netui:imageAnchor src="images/bea.gif"
        linkName="linka" border="0" /><BR>
      <BR>
      使用netui:imageAnchor 显示超链接，同时绑定参数<BR>
      <netui:imageAnchor src="images/bea.gif"
        href="http://www.bea.com.cn" border="0">
        <netui:parameter name="username" value="user"/>
        <netui:parameter name="password" value="pass"/>
      </netui:imageAnchor><BR>
      <BR>
      <BR>
      使用netui:imageButton 显示用于提交的图片式按钮
      <BR><BR>
      <netui:form action="begin">
        请输入用户名:<br>
        <netui:textBox dataSource=" userName" />
        <BR>
        <netui:imageButton src="images/submit.gif" />
      </netui:form>
  
      <a name="linka"/>
      此处是命名锚点
   </netui:body>
 </netui:html>

netui:anchor

　　netui:anchor标签用于在页面中显示超链接内容，超链接可以是一个简单的超级链接，也可以用于完成表单(Form)提交和调用JavaScript的函数完成其他工作。netui:anchor标签支持的主要属性如下：

value

　　超链接的显示文字。

action

　　如果超链接的目标是页面流的一个Action，必须使用这个属性来设置netui:anchor链接的目标地址。比如我们要链接到页面流中的begin这个Action，应该使用下面的代码来设置netui:anchor标签。

　　<netui:anchor action=“begin” value=“link to begin action”/>

href

　　超链接的目标地址。如果是链接到本域中的jsp页面或者其他静态页面，可以直接使用相对地址设置href属性；如果目标地址是其他域中的内容，那么href的地址必须使用“http:// ”字符串开头。

　　比如我们可以使用下面的代码链接到相对目录为jsp/test.jsp文件：

　　<netui:anchor href=“jsp/test.jsp” value=“link to jsp/test.jsp”/>

　　如果我们的目标地址是BEA的中国区网站www.bea.com.cn，因为它和我们的应用不再同一个域中，所以我们只能使用下面的代码来显示这个超链接：

　　<netui:anchor href=“http://www.bea.com” value=“BEA中文网站”/>

linkName

　　如果超链接的目标是本文件中的一个命名锚点（在html中我们可以使用<a name=“dest” />这样的标记来加入一个命名锚点），我们必须使用linkName属性设置anchor标签。比如我们的超链接指向一个名为dest的命名锚记，我们的netui:anchor标签应该使用下面的代码来实现：

　　<netui:anchor linkName=“dest” value=“link to anchor dest”/>

formSubmit

　　如果我们希望使用一个超级链接来完成表单的提交，我们只需要将anchor标签放置在netui:form标签中，然后设置它的formSubmit属性设置为”true”就可以了，我们可以用下面的代码来实现通过点击提交链接来完成表单的提交：


 <netui:form action=“begin”>
 用户名:
      <netui:textBox dataSource=“username”/>
 密码:
      <netui:textBox password=“true”
           dataSource=“actionForm.password”/>
      <netui:anchor formSubmit=“true”>提交</netui:anchor>
 </netui:form>

　　除了简单的显示超链接外，我们通常还需要为超链接提供一些参数，比如我们需要显示的一个超链接的目标地址是http://www.bea.com.cn?username=user&password=pass，这种情况下我们需要用另外一个netui标签netui: parameter来协助netui:anchor完成工作，netui: parameter标签的name属性提供参数名称，value属性提供参数的内容。上面的这个链接我们可以使用下面的代码来完成。


 <netui:anchor href=“http://www.bea.com.cn”
      value=“BEA中文网站”>
      <netui:parameter name=“username” value=“user”/>
      <netui:parameter name=“password” value=“pass”/>
 </netui:anchor>

　　netui:anchor标签的例子全部内容请参考清单3。

　　清单3 web\anchorExamples.jsp


 <%@ page language="java"
      contentType="text/html;charset=gb2312"%>
 <%@ taglib
      uri="http://beehive.apache.org/netui/tags-databinding-1.0"
      prefix="netui-data"%>
 <%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"
      prefix="netui"%>
 <%@ taglib
      uri="http://beehive.apache.org/netui/tags-template-1.0"
      prefix="netui-template"%>
 <netui:html>
   <head>
      <title>Anchor Examples</title>
      <netui:base/>
   </head>
   <netui:body>
      <center>使用标签输出文字的例子</center><BR>
      使用netui:anchor 的 href 属性，链接到aciton:<BR>
      <netui:anchor action="begin" value="-> 开始页" /><BR>
      <BR>
      使用netui:anchor 的 href 属性，链接到本地JSP:<BR>
      <netui:anchor href="/index.jsp" value="-> 开始页" /><BR>
      <BR>
      使用netui:anchor 的href属性,链接到外部Web内容:<BR>
      <netui:anchor href=http://www.bea.com.cn
        value="-> BEA中文网站" /><BR>
      <BR>
      使用netui:anchor 的 linkName 属性，链接到命名锚点:
      <BR>
      <netui:anchor linkName="linka" value="-> 命名锚点" />
      <BR>
      使用netui:anchor 显示提交按钮:<BR>
      <netui:form action="begin">
      用户名:
           <netui:textBox dataSource="username" />
      <BR>
      密码:
           <netui:textBox password="true"
                dataSource="password" /><BR>
           <netui:anchor formSubmit="true">提交</netui:anchor>
      </netui:form>
  
      使用netui:anchor显示超链接，同时绑定参数<BR>
      <netui:anchor href=http://www.bea.com.cn
           value="-> BEA中文网站">
           <netui:parameter name="username" value="user"/>
           <netui:parameter name="password" value="pass"/>
      </netui:anchor><BR>
      <BR>
      <BR>
  
      <a name="linka"/>
      此处是命名锚点
 </netui:body>
 </netui:html>

作者简介
肖菁	肖菁是唯J族(www.vivianj.org)创始人，BEA 杭州User Group负责人，自由撰稿人，开源项目BuildFileDesigner(buildfiledesign.sourceforge.net)和V-Security(v-security.sourceforge.net)创始人。

作者其它文章