java,j2ee资料:深入Beehive标签库系列教程(1)

该信息为本站MyRSS系统缓存内容,部分图片及附件有可能无法正常使用.easyjf.com与BEA dev2dev无关,不对该信息负责.通过http://kb.csdn.net/keyword/java//../../java/Articles/200606/c3af145a-8721-41ea-afd2-fcaf80550b32.html访问该信息的原始内容.

页面功能【加入收藏】【推荐给朋友】【字体：大中小】【关闭】

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

作者：肖菁　来源：BEA dev2dev 　发布时间：2006-06-22 00:00:00.0

　　浏览中向用户展示的内容主要分为文字、图片、超链接和表单等几大类，我们首先学习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>

相关文章

页面功能【加入收藏】【推荐给朋友】【字体：大中小】【关闭】