您的位置:首页 > Web前端 > JavaScript

JSF 学习之 编写自定义控件(第二部分)

2013-01-14 19:54 281 查看
2007-11-30 20:03

JSF 学习之 编写自定义控件(第二部分)

接上一篇文章

自定义控件(custom tag)的使用

jsp页面代码:看到灰色背景部分代码了吗?

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://hi.baidu.com/widebright" prefix="widebright" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<f:view locale="zh">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="styles.css" rel="stylesheet" type="text/css" />

<title>"widebright的留言板"</title>

</head>

<widebright:userBar id="usrbar" urls=",新浪,1;"/>

<widebright:userBar id="test" urls="#{tableExampleBean.urls}" userlogin = "true" binding ="#{tableExampleBean.userBar1}" userleave="#{tableExampleBean.UserBar_Click}"/>

<body>

<h:form>

   

    <div class="tit">添加留言:</div>

<table width="620" border="0" cellspacing="5" cellpadding="0">

<tr>

<td class="f14">姓 名:</td>

<td>

<h:inputText value="#{tableExampleBean.inputAuthor}" binding="#{tableExampleBean.username}" style="width:220px" maxlength="49" tabindex="1" required="true"> </h:inputText>

</td>

</tr>

<tr>

<td>网址或邮箱:</td>

<td><h:inputText value="#{tableExampleBean.inputURL}" style="width:360px" maxlength="128"   tabindex="2"> </h:inputText>(选填)</td>

</tr>

<tr>

<td valign="top">内 容:</td>

<td><h:inputTextarea   value="#{tableExampleBean.inputContent}"style="width:520px;height:155px" tabindex="3"> </h:inputTextarea>

</td>

</tr>

<tr>

<td valign="top"> </td>

<td valign="top">

<h:commandButton value="添加留言" action = "#{tableExampleBean.Button_onClick}"tabindex="5" id="btn_ok" type="submit"> </h:commandButton>

<h:outputText value= "#{tableExampleBean.outputError}" style="color: #FF0000"></h:outputText> </td>

</tr>

</table>

     

     

      <div style = "width:100%;height:30px;background-color: #ddffdd;"> JSTL循环实现的表格,模仿百度空间留言板</div>        

     

      <div id = "Message">

         <c:forEach var = "varMessage" items = "${tableExampleBean.messages}" varStatus="status">

         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="item">

         <tr>

         <td valign="top" class="index" width="5%"> ${varMessage.number}</td>

         <td align="center" valign="top" width="10%">

         <div class="user" style="overflow:hidden;">

          <a href="http://hi.baidu.com/widebright" target='_blank' title=“http://hi.baidu.com/widebright”>

               <img border="0" src="widebright.jpg"><br/>

                ${varMessage.user} </a>

         </div>

          </td>

           <td class="cnt" style="padding-left:20px;">

              <span class="date">${varMessage.time} </span>

              <div class="desc" style="overflow:hidden;"> ${varMessage.description}</div>

         </td>

         </tr>

        </table>

       

        <div class="line"> </div>

            

       </c:forEach>    

       

      </div>

             

       <div style = "width:100%;height:30px;background-color: #ddffdd;"> JSF中h:dataTable 标签实现的表格</div>  

       <h:dataTable value="#{tableExampleBean.messages}" var="messageRow" border="1" rowClasses="ROW1,ROW2" headerClass="HEADING">

       <h:column>

          <f:facet name="header">

             <f:verbatim>序号</f:verbatim>

          </f:facet>

          <h:outputText value="#{messageRow.number}"/>

       </h:column>

       <h:column>

          <f:facet name="header">

             <f:verbatim>作者</f:verbatim>

          </f:facet>

          <h:outputText value="#{messageRow.user}"/>

       </h:column>

         

      <h:column>

             <f:facet name="header">

                   <f:verbatim>内容</f:verbatim>

              </f:facet>

               <h:outputText value="#{messageRow.time}"/>

              <f:verbatim> <br> </f:verbatim>

              <h:outputText value="#{messageRow.description}"/>

     </h:column>

     </h:dataTable>

           

     </h:form>

  

</body>

</html>

</f:view>

页面后台代码:控件的banding属性很有意思的,注意到了吗?

package widebright;

import java.util.Collection;

import java.util.ArrayList;

import java.sql.*;

public class TableExampleBean {

// private Collection <Message> messages; //所有的留言

private Collection<Message> messages; // 所有的留言

//inputText输入框控件的值

private String inputAuthor;

private String inputURL;

    private String inputContent;

    private String outputError; //错误提示

private ArrayList<URL> urls = null;

   

private UIUserBar userBar1;

    private javax.faces.component.UIInput username;

public TableExampleBean() {

   messages = new ArrayList<Message>();

   messages.add(new Message("0", "widebright", "好好学习,天天向上", "2007-11-5"));

   messages.add(new Message("2", "widebright", "好好学习,天天向上", "2007-11-5"));

   messages.add(new Message("3", "widebright", "好好学习,天天向上", "2007-11-5"));

       

   urls = new ArrayList<URL>();

   urls.add(new URL("http://www.163.com","网易", 1) );

   urls.add(new URL("http://www.sina.com.cn","新浪", 2) );

}

   

public void setInputAuthor(String author){

   this.inputAuthor = author;

  

}

    public String getInputAuthor(){

   return this.inputAuthor ;

  

}

public void setInputURL(String url){

   this.inputURL= url;

  

}

    public String getInputURL(){

    return this.inputURL ;

  

}

public void setInputContent(String content){

   this.inputContent= content;

  

}

    public String getInputContent(){

    return this.inputContent ;

  

4000

}

public void setOutputError(String error){

   this.outputError= error;

}

    public String getOutputError(){

    return this.outputError ;

}

public void setMessages(Collection<Message> messages) {

   this.messages = messages;

}

public Collection<Message> getMessages() {

       

   Connection conn = null;

   // assume that conn is an already created JDBC connection

   Statement stmt = null;

   ResultSet rs = null;

      

   try {

    // The newInstance() call is a work around for some

    // broken Java implementations

    Class.forName("com.mysql.jdbc.Driver").newInstance();

   } catch (Exception ex) {

    // handle the error

     return this.messages;

  

   }

  

   try {

   // The JDBC URL format for MySQL Connector/J is as follows, with items in square brackets ([, ]) being optional:

   //   jdbc:mysql://[host][,failoverhost...][:port]/[database]

   //   [?propertyName1][=propertyValue1][&propertyName2][=propertyValue2]...

   //   If the hostname is not specified, it defaults to 127.0.0.1. If the port is not specified, it defaults to 3306, the default port number for

   //   MySQL servers.

   //   jdbc:mysql://[host:port],[host:port].../[database]

   //   [?propertyName1][=propertyValue1][&propertyName2][=propertyValue2]...

   //   If the database is not specified, the connection will be made with no default database

   //The properties are listed in the following tables.

   // user The user to connect as all versions

   // password The password to use when connecting

   //

  

    conn = DriverManager.getConnection("jdbc:mysql://localhost/widebright?user=root&password=");

    // Do something with the Connection

   

    stmt = conn.createStatement();

    rs = stmt.executeQuery("SELECT message.ID, Author,Time,Description ,URL FROM widebright.message order by Time DESC");

    // or alternatively, if you don't know ahead of time that

    // the query will be a SELECT...

   

    //if (stmt.execute("SELECT foo FROM bar")) {

    // rs = stmt.getResultSet();

    //}

   

    // Now do something with the ResultSet ....

           

    messages.clear();

    messages = new ArrayList<Message>();

      while (rs.next()){

      messages.add(new Message(rs.getString("ID"),

               rs.getString("Author"),

               rs.getString("Description"),

               rs.getString("Time")));

      }

   

   }catch (SQLException ex) {

    // handle any errors

    System.out.println("SQLException: " + ex.getMessage());

    System.out.println("SQLState: " + ex.getSQLState());

    System.out.println("VendorError: " + ex.getErrorCode());

   } finally {

    // it is a good idea to release

    // resources in a finally{} block

    // in reverse-order of their creation

    // if they are no-longer needed

    if (rs != null) {

     try {

      rs.close();

     } catch (SQLException sqlEx) { // ignore }

      rs = null;

     }

         if (stmt != null) {

      try {

       stmt.close();

      } catch (SQLException sqlEx) { // ignore }

       stmt = null;

      }

      }

  

    }

   

      if (conn != null) {

      try {

       conn.close();

      } catch (SQLException sqlEx) {

      // ignore -- as we can't do anything about it here

      }

      conn = null;

      }

   

    }

     return this.messages;

}

//"添加留言" 按钮的action 属性方法

public String Button_onClick(){

   

   if (userBar1.isUserlogin() == false) {

  

    userBar1.setUrls( new ArrayList<URL>());

    }

   

  

   if (this.inputContent.length() < 5){

    this.outputError = "留言字数太少不符合要求";

    return null;

   }

  

   if(! this.inputURL.matches("http://.*")) {

   

    this.outputError = "无效的网址";

    return null;

   }

  

   boolean isAddMessageError = false;

   

   Connection conn = null;

   Statement stmt = null;

      

   try {

   

    Class.forName("com.mysql.jdbc.Driver").newInstance();

   } catch (Exception ex) {

    // handle the error

    

    isAddMessageError = true;

   }

  

   try {

  

  

    conn = DriverManager.getConnection("jdbc:mysql://localhost/widebright?user=root&password=");

  

    stmt = conn.createStatement();

    this.inputContent.replaceAll("'", "");

    this.inputAuthor.replaceAll("'", "");

    this.inputURL.replaceAll("'","" );

    String sqlText = "insert into widebright.message(Time,Description,Author,URL) values (now(),'"

      +this.inputContent+"','" + this.inputAuthor+ "','" + this.inputURL+ "');" ;

   

    System.out.println (sqlText);

    isAddMessageError = stmt.execute( sqlText);

           

   

    //if (stmt.execute("SELECT foo FROM bar")) {

    // rs = stmt.getResultSet();

    //}

    

   

   }catch (SQLException ex) {

    // handle any errors

    System.out.println("SQLException: " + ex.getMessage());

    System.out.println("SQLState: " + ex.getSQLState());

    System.out.println("VendorError: " + ex.getErrorCode());

    isAddMessageError = true;

   } finally {

    

         if (stmt != null) {

      try {

       stmt.close();

      } catch (SQLException sqlEx) { // ignore }

       stmt = null;

      }

      }

  

    }

   

      if (conn != null) {

      try {

       conn.close();

      } catch (SQLException sqlEx) {

      // ignore -- as we can't do anything about it here

      }

      conn = null;

      }

  

   if (isAddMessageError ){

    this.outputError ="提交数据时,数据库发生错误!" ;

    return null;

   }

  

   this.inputAuthor="";

   this.inputContent="";

   this.inputURL="";

   return null;

}

public ArrayList<URL> getUrls() {

   return urls;

}

public void setUrls(ArrayList<URL> urls) {

   this.urls = urls;

}

public UIUserBar getUserBar1() {

   return userBar1;

}

public void setUserBar1(UIUserBar userBar1) {

   this.userBar1 = userBar1;

}

public javax.faces.component.UIInput getUsername() {

   return username;

}

public void setUsername(javax.faces.component.UIInput username) {

   this.username = username;

}

public void UserBar_Click(UserLeaveEvent e){

   username.setValue("你点击了按钮了");

   outputError= "你点击了按钮了";

}

}

faces-config.xml 文件:

<?xml version="1.0" encoding="UTF-8"?>

<faces-config

    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"

    version="1.2">

<component>

   <description>

   用于在网页头显示用户登录链接的控件。</description>

   <display-name>

   UserBar</display-name>

   <component-type>

   UserBar</component-type>

   <component-class>

   widebright.UIUserBar</component-class>

</component>

<managed-bean>

   <managed-bean-name>

   tableExampleBean</managed-bean-name>

   <managed-bean-class>

   widebright.TableExampleBean</managed-bean-class>

   <managed-bean-scope>

   session</managed-bean-scope>

</managed-bean>

</faces-config>

最后运行效果如图:

上面的两行链接就是自定义控件的来的。





到此JSF学习结束,虽然还有很多东西可以学到 ,比如ajax4jsf控件,myfaces系列控件的使用啦等等。

但自己不是做这个东西,就等到有需要的时候在学吧。学jsf到初衷是比较一下jsf和.net的区别,然后熟悉一下java。 因为我以前是没用过java的。现在目的基本达到了吧,java用起来好像也不复杂很容易学到。jsf感觉还是没有.net用起来简单,微软就是好什么东西都白痴化了^_^ 。不过jsf这种开放源代码的方式很不错,学一学也可以加载自己对网页编程的理解吧。好像国内用jsf的人现在还不多,反正在互联网上能搜的到就很少了,不知道国外怎么样。

。。。widebright     。。。    学然后知不足.........
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐