JSF 学习之 编写自定义控件（第一部分）

最新推荐文章于 2015-08-08 15:53:49 发布
最新推荐文章于 2015-08-08 15:53:49 发布
阅读量647 收藏 1
点赞数
分类专栏： JavaWeb-JSF

JSF 学习之 编写自定义控件（第一部分）

JSF 学习之 编写自定义控件

参考资料：
1.Sun的 Java EE 5 turorial的第十三章Creating Custom UI Components
        http://java.sun.com/javaee/5/docs/tutorial/doc/bnavg.html

2. http://www.coreservlets.com/JSF-Tutorial/ 上的section 14
3. 《core JavaServer™ Faces》Chapter 9. Custom Components
       Prentice.Hall.PTR.Core.JavaServer.Faces.Jun.2004.eBook-DDU.chm
4. 《Java.Server.Faces编程(中文).pdf》 第十二，十三章
5. Apache 的子项目myfaces 的源代码。
http://myfaces.apache.org/  
myfaces是一个开源的JSF实现项目。Tomahawk 是myfaces的一个子项目，里面包含像日历选择，popup弹出框，javascript菜单，tree树形控件，html在线编辑器等常用控件。对 jsf基本控件是一个很好的扩展。两者的代码都可以在    http://apache.mirror.phpchina.com/myfaces/source/ 找到。高手说源码之前了无秘密，想自己写自定义控件的，可以下载下来看看，看别人高手是怎么做的吧。
6． Java Enterprise Edition 5 API Documentation
    可以在这里下载到http://www.allimant.org/javadoc/index.php


我摸索了好一段时间终于实现了一个用户登录状态条控件。一个简单的jsf自定义控件，主要是想看看是怎么实现自定义控件的属性，事件等功能的。
         在JSF中编写一个自定义控件（自定义tag ？）大概要实现一个 component类、一个tag 类、还有定义控件属性的 *.tld文件。 如果你要把控件显示处理部分独立出来的话，可能还要实现一个Rendererr类。

以下是详细代码，所有代码基于JSF1.2 ：

1. component类 ,在文件 UIUserBar.java 中实现。
package widebright;

import javax.faces.component.*;
import javax.faces.context.*;
import java.io.*;
import java.util.*;
import javax.faces.context.FacesContext;
import javax.el.ValueExpression ;
import javax.el.MethodExpression;
import javax.faces.event.*;
import javax.el.ELException;;

//继承 UIComponentBase 这个face控件基本类，如果想支持action 这个常用jsf控件属性，那么要实现ActionSource2 这个接口才行。
public class UIUserBar extends UIComponentBase // implements ActionSource2
{
        //不是实现 id 等基本的属性了，因为jsf里面默认已经实现了id 等基本的属性的支持了
        private ArrayList<URL> urls = null;
        private Boolean userlogin = false;
        MethodExpression _userLeaveListener =null;

   @Override
   public String getFamily() {
     //Specifying the Component Family
     //If your custom component class delegates rendering,
     //it needs to override the getFamily method of UIComponent
     //to return the identifier of a component family, which is used to
     //refer to a component or set of components that can be rendered by a
     //renderer or set of renderers. The component family is used along
     //with the renderer type to look up renderers that can render the component.
    
    
     //如果没有另外单独实现renderer，返回null就行了。 如果要自己提供renderer ，
     //必须返回一个在配置文件中component-family 节注册的renderer
          return(null);  
   }

    
     //decode 中处理从用户那里传过来的 值
   @Override
   public void decode(FacesContext context) {
     super.decode(context);
       //这里可以获取用户输入数据了， 因为这个控件没有输入内容的，就不实现了
     String clientId = this.getClientId(context);
     Map paramMap = context.getExternalContext().getRequestParameterMap();
    // if (paramMap.containsKey(clientId) ){
    
      this.queueEvent(new UserLeaveEvent(this));
     
   // }
    
   }

   //需要在encodeBegin 或者encodeEnd 中输出 html标签
   //不过好像说是带 输入 的就要在encodeEnd中实现实现，
   @Override
   public void encodeBegin(FacesContext context) throws IOException {
  
      if (context == null)
      {
          throw new NullPointerException();
      }
     
     ExternalContext externalContext= context.getExternalContext();
     Map sessionMap = externalContext.getSessionMap();
    
     ResponseWriter writer = context.getResponseWriter();
    
        writer.startElement("div", this );
        writer.writeAttribute("id", this.getId(), null);
      
        writer.startElement("nobr", this );
       
      
        //输出链接
        if (urls != null){
         for (URL tmp : urls ){
       writer.startElement("a", this );
       writer.writeAttribute("href", tmp.url,null);
       writer.writeAttribute("target", "_blank",null);
        writer.write(tmp.text);
       writer.endElement("a");
      
       writer.write(" | ");
         }
    
        }else {
         ValueExpression expression = getValueExpression("urls");
         if (expression != null)
         {
         ArrayList<URL> tmpUrls = (ArrayList<URL>)expression.getValue(getFacesContext().getELContext());
          for (URL tmp : tmpUrls ){
        writer.startElement("a", this );
        writer.writeAttribute("href", tmp.url,null);
        writer.writeAttribute("target", "_blank",null);
         writer.write(tmp.text);
        writer.endElement("a");
      
        writer.write(" | ");
          }
         }
          
        
        }
    
       
       
     writer.startElement("a", this );
     writer.writeAttribute("href", ");
     writer.writeAttribute("target", "_blank",null);
    writer.write("widebright的百度空间");
     writer.endElement("a");
    
     writer.write(" | ");
    
     if (sessionMap.containsKey("username")) // 用户已经登录
     {
      writer.startElement("a", this );
      writer.writeAttribute("href", ");
      writer.writeAttribute("target", "_blank",null);
       writer.write("退出登录");
      writer.endElement("a");
      
     }
     else //用户没有登录   
     {
      writer.startElement("a", this );
      writer.writeAttribute("href", ");
      writer.writeAttribute("target", "_blank",null);
       writer.write("登录");
      writer.endElement("a");
     
     }   
      
     writer.endElement("nobr");
    
     writer.endElement("div");
     
   }

    //需要在encodeBegin 或者encodeEnd 中输出 html标签
    //不过好像说是带 输入 的就要在这里实现，不然在encodeBegin 实现也是可以的。
   @Override
   public void encodeEnd(FacesContext context) throws IOException {
      //都在 encodeBegin 里面 实现了，这里就不写了， 也可以留一部分到这里再做也可以得
    
   }
  
   //saveState 和 restoreState 是为了保持持久状态，一般不用做这个都可以的了。如果你不需要这种功能的话
     @Override
     public Object saveState(FacesContext facesContext)
     {
      Object[] values = new Object[30];
      values[0] = super.saveState(facesContext);
      values[1] = urls;
      values[2] = _userLeaveListener;
      values[3] = userlogin ;
      return values;
     }
     @Override
     public void restoreState(FacesContext facesContext, Object state)
     {
       Object[] values = (Object[])state;
       super.restoreState(facesContext,values[0]);
       urls = (ArrayList<URL>)values[1];
       _userLeaveListener = (MethodExpression ) values[2] ;
       userlogin= (Boolean)values[3];
     }
       
     public MethodExpression getUserLeaveListener()
     {
         return _userLeaveListener ;
     }

     public void setUserLeaveListener(MethodExpression userLeaveListener )
     {
          _userLeaveListener = userLeaveListener;
     }

     public void broadcast(FacesEvent event) throws AbortProcessingException
     {
          super.broadcast(event);

         MethodExpression userLeaveListenerExpression = getUserLeaveListener();
       
         if (userLeaveListenerExpression != null && event instanceof UserLeaveEvent )
         {
             try
             {
             userLeaveListenerExpression.invoke(getFacesContext().getELContext(), new Object[]{event});
             }
             catch (ELException e)
             {
                 Throwable cause = e.getCause();
                 if (cause != null && cause instanceof AbortProcessingException)
                 {
                     throw (AbortProcessingException)cause;
                 }
                 else
                 {
                     throw e;
                 }
             }
         }
     }
    
    
    
    
     public ArrayList<URL> getUrls(){
      if (urls!= null){
         return urls;
          }
          ValueExpression expression = getValueExpression("urls");
          if (expression != null)
          {
             return (ArrayList<URL>)expression.getValue(getFacesContext().getELContext());
          }
          return null;
     
    }

   public void setUrls(ArrayList<URL> urls) {
    this.urls =   urls;
   }
   public boolean isUserlogin() {
         if (userlogin != null) return userlogin.booleanValue();
         ValueExpression expression = getValueExpression("userlogin");
        
         Boolean v = expression != null ? (Boolean) expression.getValue(getFacesContext().getELContext()) : null;
         return v != null ? v.booleanValue() : false;
   
   }

   public void setUserlogin(boolean userlogin) {
    this.userlogin = Boolean.valueOf(userlogin);
   }
  
  

}

getFamily 函数定义类型。
decode 函数处理用户输入，典型的可以在整理判断用户返回里面有没有自己控件id，然后使用queueEvent 函数触发事件。
encodeBegin，encodeEnd 生成html编码，如果没有打算自己边学Renderer类的，就是在这里生成自己控件的呈现html代码了。这两个函数选择一个就可以完成功能了，不过有特殊情况一定要使用encodeEnd才行。
saveState 和restoreState 是保持控件状态。
broadcast 应该是事件处理的，不了解到自己看一下jsf的生命周期图。我自己是通过MethodExpression 的 invoke方法来调用事件的方法了。

剩下的都是为了支持 控件 属性/方法 的代码了。为了自己的属性支持JSF表达式可以使用ValueExpression 和MethodExpression 类型的变量了。具体看我前面列出来的参考资料。

2. Tag 类。

Tag类负责把jsp页面上的属性映射到 前面的componet 类对应的属性。 就是做componet 类 和jsp文件的中介了。主要是为了实现空间属性而写的getter和setter方法。可以看到大量使用ValueExpression和MethodExpression ，都是为了支持JSF表达式属性的的。SetProperties 方法就是把 属性映射到componet 类 的了。注意： id 等基本属性，默认在jsf中已经实现支持了，所以就不用写额外的get/set代码了，只要在 *.tld中文件中定义就行了。
UserBarTag.java文件内容：
package widebright;


import java.util.ArrayList;

import javax.faces.webapp.*;
import javax.faces.application.Application;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.el.ValueExpression ;
import javax.el.MethodExpression;


//因为UIComponentELTag 也实现了jsp的支持，所以要引用 jsp-api.jar el-api.jar 等包才行，在Tomcat6.0的lib目录下找的到，
//所以要在buildpath里面添加tomcat的lib目录， 然后就可以编译成功了

//另外jsf文档建议 JSF1.2 里面使用UIComponentELTag 而不是以前的UIComponentTag 类了 （UIComponentTag 是for jsf 1.1的）

//Tag 类负责创建 omponent 类（组件类） 并且把 页面书写的标签对应的属性值传给 omponent 类对应的属性。
public class UserBarTag extends UIComponentELTag {

//attributes id, rendered and binding are handled by UIComponentTag
//UIComponentTag 中默认已经提供了对 id ，binding等基本属性的支持了。所以自己写的UserBarTag 子类
//里面就不用再多做一遍了。
   
     private ValueExpression urls =null;
     private ValueExpression userlogin =null;
     private MethodExpression userleave;
   
    
    // public boolean getIsUserLogin(){
    //        return this.isUserLogin;
    // }
     
   public MethodExpression getUserleave() {
    return userleave;
   }
   public void setUserleave(MethodExpression userleave) {
    this.userleave = userleave;
   }
   public ValueExpression getUrls() {
    return urls;
   }
   public void setUrls(ValueExpression urls) {
    this.urls = urls;
   }

  
     public String getComponentType() {
       // Associates tag with component in faces-config.xml
        return("UserBar");
   }
   public String getRendererType() {
       // Component renders itself in encodeBegin,
       // so return null.
       return(null);
   }
   
   public void release() {

      // always call the superclass method

      super.release();

     // divId = null;
      urls = null;
  
   }

   public void setProperties(UIComponent component) {
     // always call the superclass method
     super.setProperties(component);
     
    // component.getAttributes().put("isUserLogin", isUserLogin);
    
// 在jsp页面上的id属性，默认已经有实现了，所以在自己的UserBarTag，UIUserBar类里面就不用 写 id属性的实现了。
//   String a =   this.getId();
//   String b = component.getId();
  
     if (urls !=null)
     {
      if(urls.isLiteralText()) { //看有没有包含表达式
             String text =urls.getExpressionString();

             ArrayList<URL> arrayUrls = new ArrayList<URL>();
             String [] rows = text.split(";");
             for (int i =0 ;i< rows.length ; i++){
              String [] url =    rows[i].split(",");      
              arrayUrls.add(new URL(url[0],url[1], url[2]) );
             }
             component.getAttributes().put("urls", arrayUrls);
      } else {
      
       //可以直接在这里就获取ValueExpression的值，然后就可以不用在UIuserBar中用getValueExpression("urls")来获取值了
       //自己选择用什么方法把
//        ArrayList<URL> arrayUrls = new ArrayList<URL>();
//        arrayUrls = ( ArrayList<URL>) urls.getValue(getFacesContext().getELContext());
//        component.getAttributes().put("urls", arrayUrls);
       
        //可以直接用setValueExpression 传过去，但这样要在UIuserBar中用getValueExpression("urls"); 来处理
           component.setValueExpression("urls", urls);
     
      }  
      
     }  
    
     if ( userlogin !=null)
     {  
              if (userlogin .isLiteralText())
              {
                  component.getAttributes().put("userlogin", Boolean.valueOf(userlogin.getExpressionString()));
              }
              else
              {
                  component.setValueExpression("userlogin", userlogin);
              }
          
     }
     if ( userleave !=null)
     {  
              if (userleave .isLiteralText())
              {
                 
              }
              else
              {
                  ((UIUserBar)component ).setUserLeaveListener(userleave);
              }
          
     }
  
    }
  
   public ValueExpression getUserlogin() {
    return userlogin;
   }
   public void setUserlogin(ValueExpression userlogin) {
    this.userlogin = userlogin;
   }


  
  
}

3. UserBar.tld 文件，声明控件属性，主要是给jsp编辑器等提供自动化帮助等作用的吧。注意以下属性，方法是怎么定义的， <uri> 那个也很有意思，使用的时候就知道了，呵呵。可以参考http://java.sun.com/javaee/5/docs/tutorial/doc/bnamu.html 来获取tld文件的说明。Tld文件最后应该放在 web-inf目录下的吧。


<?xml version="1.0" encoding="UTF-8" ?>
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>2.1</jsp-version>
<short-name>userbar</short-name>
<uri>http://hi.baidu.com/widebright</uri>

<tag>
   <description>用于在网页开头输出用户登录等链接</description>
   <name>userBar</name>
   <tag-class>widebright.UserBarTag</tag-class>
   <body-content>empty</body-content>
   <attribute>
    <name>id</name>
   </attribute>
     <attribute>
         <description>
                The ValueExpression linking this component to a property in a backing bean
            </description>
            <name>
                binding
            </name>
            <required>
                false
            </required>
            <deferred-value>
                <type>
                    widebright.UIUserBar
                </type>
            </deferred-value>
  
   </attribute>
   <attribute>
    <name>urls</name>
    <description>Additional links to display</description>
    <required>false</required>
    <deferred-value>
     <type>java.util.ArrayList</type>
    </deferred-value>
   </attribute>
   <attribute>
    <name>userlogin</name>
    <description>If the user has logined .</description>
    <required>false</required>
    <deferred-value>
     <type>java.lang.String</type>
    </deferred-value>
   </attribute>

   <attribute>
    <name>userleave</name>
    <required>false</required>
    <description>User leave event handler</description>
    <deferred-method>
     <method-signature>
      void userLeaveListener(widebright.UserLeaveEvent)
     </method-signature>
    </deferred-method>

   </attribute>
</tag>
</taglib>

4. 其他的还有一个自己写的辅助类url.java
package widebright;

import javax.faces.component.UIComponent;
import javax.faces.event.FacesEvent;
import javax.faces.event.FacesListener;
import javax.faces.event.PhaseId;

public class UserLeaveEvent
             extends FacesEvent
{
    private static final long serialVersionUID = -2514646300612129099L;
   
    public UserLeaveEvent (UIComponent component)
    {
        super(component);
        setPhaseId(PhaseId.APPLY_REQUEST_VALUES);
    }
    public boolean isAppropriateListener(FacesListener listener)
    {
        return listener instanceof UserLeaveListener;
    }

    public void processListener(FacesListener listener)
    {
        ((UserLeaveListener)listener).processUserLeave(this);
    }

}

为了提供事件而写的Event 和listener类
UserLeaveEvent.java

package widebright;

import javax.faces.component.UIComponent;
import javax.faces.event.FacesEvent;
import javax.faces.event.FacesListener;
import javax.faces.event.PhaseId;

public class UserLeaveEvent
             extends FacesEvent
{
    private static final long serialVersionUID = -2514646300612129099L;
   
    public UserLeaveEvent (UIComponent component)
    {
        super(component);
        setPhaseId(PhaseId.APPLY_REQUEST_VALUES);
    }
    public boolean isAppropriateListener(FacesListener listener)
    {
        return listener instanceof UserLeaveListener;
    }

    public void processListener(FacesListener listener)
    {
        ((UserLeaveListener)listener).processUserLeave(this);
    }

}

UserLeaveListener.jave:
package widebright;

import javax.faces.event.AbortProcessingException;
import javax.faces.event.FacesListener;

public interface UserLeaveListener {
    public abstract void processUserLeave(UserLeaveEvent tabChangeEvent)
    throws AbortProcessingException;
}

如何使用这个自定义控件，参考第二篇文章

sev7en
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSF日历控件
04-06
JSF日历控件
JSF控件详细参考手册
06-26
本文档将针对BIMP平台使用到的常见JSF Facelets标签集合进行阐述，供开发者日常开发工作期间参考。BIMP主要采用JSF（Facelets）前端组件技术实施Web 2.0，以提升用户体验，并达到快速、高质量实施产品或项目研发目的。
JSF 学习之 编写自定义控件（第二部分）
nonumber1989的专栏
01-14 491
2007-11-30 20:03 JSF 学习之 编写自定义控件（第二部分） 接上一篇文章 自定义控件（custom tag）的使用 jsp页面代码：看到灰色背景部分代码了吗？     pageEncoding="UTF-8"%> http://java.sun.com/jsf/html" prefix="h" %> http://java.sun.com/js
JSF系列教程(二) 动手编写第一个JSF DEMO程序
nuoyan666的专栏
12-30 1243
先看看应用程式开发人员要作些什麽事，我们撰写一个简单的JavaBean：UserBean.javapackage onlyfun.caterpillar;public class UserBean {    private String name;    public void setName(String name) {        this.name = name;} p
JSF 入门教程
just_tigris的博客
08-08 979
JSF（JavaServer Faces）介绍 JSF是JAVA EE规范的一部分。它是：Java Web应用的用户界面框架。   l        JSF提供一套API以及标签库，用来创建页面表单以及复杂的界面元素 l        JSF使得编写表单提交的代码更加简单，这些代码可以响应那些不同的按钮提交，改变某些值或某些用户的选择等等 l        Managed beans：使
JSF入门教程--jsf相关知识介绍
08-03
1. **组件模型**：JSF 提供了一个组件树的概念，每个组件都有自己的属性、事件和行为。这些组件可以是简单的 HTML 元素，如按钮和文本框，也可以是更复杂的 UI 控件，如表格和数据网格。开发者可以通过拖放方式在 ...
多个日历控件
02-29
在Web开发中，日历控件是不可或缺的一部分，它们用于用户友好的日期选择，常见于事件安排、会议预订、表单填写等场景。本资源包含7个不同的日历控件，适用于J2EE、Java、JSP环境，为Web应用程序提供多样化的日期选择...
Eclipse从入门到精通（第二版）----源码
12-07
1. **第五篇 Web开发篇（第34-37章）**：这部分内容主要涉及如何使用Eclipse进行Web应用程序的开发。Eclipse支持多种Web框架，如JavaServer Pages（JSP）和Servlet。通过学习这部分源码，你可以了解如何配置Eclipse...
JBoss Seam 工作原理、seam和hibernate的范例、RESTFul的seam、seam-gen起步、seam组件、配置组件、jsf,jboss、标签、PDF、注解等等
03-09
1.2. 第一个例子：注册示例.............................................................................................................................................. 15 1.2.1. 了解代码.................
java开源包1
06-28
ftp4j是一个FTP客户端Java类库，实现了FTP客户端应具有的大部分功能文件（包括上传和下 载），浏览远程FTP服务器上的目录和文件，创建、删除、重命，移动远程目录和文件。ftp4j提供多种方式连接到远程FTP服务器包括...
jsf 控件速查手册
03-12
jsf 控件速查手册,html格式。jsf标签使用培训教程。新手速查教程！
编写JSF用户自定义UI组件（之五）
03-01
NULL 博文链接：https://madihe-126-com.iteye.com/blog/266276
jsf常用控件的使用
10-15
本例子演示了。jsf常用控件的例子。很好的。包括jsf大部分控件
JSF中UI控件binding属性的用法
求是鹰的专栏
11-05 2070
以下内容为我在CSDN上转载的，版权归属原作者！    在.Net中，binding是个十分容易理解的东西，但最近学习JSF，总理解不了binding属性的用法，查了一些资料，都是简单的说明，对这个属性没有什么例子。今天星期天，没事来到公司，突然对这个属性领悟了，觉得特别高兴。等我理解后，觉得这个属性是十分简单的，没理解之前，隔层窗户纸，总那么朦朦胧胧的。现在把这个小例子写出来，以做备忘。
JSF相关表单控件收集
yuzhi2217的专栏
01-14 122
import javax.enterprise.context.RequestScoped;import javax.enterprise.context.SessionScoped;import javax.inject.Named;import org.primefaces.model.UploadedFile;import org.slf4j.Logger;import org.slf4j...
JSF2.0实战 - 4、自定义组件
xixixi8899的专栏
05-01 4062
项目环境： 1、JSF2.1+ 2、JDK1.6+ 3、Tomcat6.0+ 4、Eclipse3.6+ 我用的Indigo
JSF标签大全详解
weixin_33768481的博客
08-03 742
1. JSF入门 藉由以下的几个主题，可以大致了解JSF的轮廓与特性，我们来看看网页设计人员与应用程序设计人员各负责什么。 1.1简介JSF Web应用程序的开发与传统的单机程序开发在本质上存在着太多的差异，Web应用程序开发人员至今不可避免的必须处理 HTTP的细节，而HTTP无状态的 （stateless）本质，与传统应用程序必须维持程序运行过程中的信息有明显的违背，再则Web应用程序面...
JSF简介
热门推荐
Java之道
10-19 5万+
JSF简介一、 什么是 JSF：JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架。它提供了一种以组件为中心来开发 Java Web 用户界面的方法，从而简化了开发。JavaServer Faces于2004年三月1.0版正式提出，清楚的将Web应用程序的开发者划分了三个角色：网页设计人员、应用程序设计人员以及UI组件开发人员。 从使

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值