兩畝三分地

     摘要: 之前項目有個模塊要求用樹形解決，附帶要實現checkbox,增刪修改以及copy/cut/paste等等功能； 因為之前寫的人用了xloadTree，其他功能都實現了，但是客戶要求要有cookie功能，實現不了麻煩啊～ 正巧現在在學習用Ext,發現Ext的tree本身就很強大基本的功能都可以實現。 Code highlighting produced by Actipro Cod...  閱讀全文

Border布局作為Ext中整個框架的布局應該說很普遍，一般North放一個應用的Logo bar,West一般會作為導航欄的放置位置；
而Center(East)往往作為整個應用的核心部分，而South位置也往往放置一些應用的版權等信息。

而導航欄一般會采用的呈現方式一般無非是Treepanel或者根據模塊放置多個Panel，而多數會采用的布局方式，往往是
Accordion的布局。比如像這樣(偷個懶直接用設計器寫的)：
一個基本的框架就產生了，而問題也隨之而來。最主要的問題是IE和FF顯示不一樣。應該說FF顯示很正常，按鍵根據導航欄的大小，改變每一行顯示的數量；
而IE呢，在第一次導航欄寬帶變大的時候，一切正常；而當導航欄寬度縮小的時候，原來每行的按鍵數卻并不變。想想這Ext都3.2了，不會還有這么腦殘的bug吧；
google了下，國內似乎對這個問題也沒有什么討論的；于是直接去官網的論壇問。

最初別人的提議是，更改westPanel的屬性
等于禁止westPanel的子欄目自動變化寬度，試了如果westPanel的子欄目只有一個工作正常，但是如果多個的話，又悲劇了～

因為每次只有1個子欄目的寬度在變化，所以產生這個問題也不足為奇了。

最后某個網友提供了一個自己寫的補丁，問題解決了。
配合補丁，westPanel的屬性也要有相應的變化

     摘要: 發表，瀏覽，回復之后，我們將討論的是刪除和編輯留言。 因為這個只是一個簡單的留言板，沒有用戶認證之類繁瑣的事情，所以對于編輯和刪除留言，必須輸入 正確的id號和password；如果在發表或回復留言的時候沒有輸入密碼的話，就不能對留言進行編輯或者刪除。 這里將寫的EditAction class與之前的有所不同,extends org.apache.struts.actions.Dispat...  閱讀全文

整個項目第二個重點就是回復留言，我的思路是在瀏覽留言的時候，回復鍵傳送主題的ID,一個Action Class處理這個請求，
將與這個ID相關的留言查詢出來，寫入ActionForm。

1. 打開display.jsp文件，找到下面這幾行，后面添加一個form，用來提交查詢請求。
   
    1 <table>
    2     <tr>
    3         <td>
    4             <bean:write name="topic" property="post.subject"/> 留言者：<bean:write name="topic" property="post.name" /> 留言日：<bean:write name="topic" property="post.date" format="yyyy/MM/dd(E) HH:mm" />  No.<bean:write name="topic" property="post.id" />
    5         </td>
    6         <td>
    7             <html:form action="read">
    8                 <input type="hidden" name="id" value="<bean:write name='topic' property='post.id'/>"/>
    9               <html:submit value="回復" />
   10             </html:form>
   11       </td>
   12    </tr>
   13   </table>
   6-11行，就是新加入的對id的一個請求，這里我用了普通的html標志來提交請求，當然我們也可以用<html:hidden name="topic" property="post.id"/>，但是在處理請求的時候，相對的request.getParameter("id")，就要換成
   request.getParameter("post.id"）了；或者我們可以在那個Topic類里，添加一個id字段，那么在瀏覽留言的時候(ListAction的execute方法，list.add(new Topic(post,replies)); 改成list.add(new Topic(post,replies，post.getId()));)<html:hidden name="topic" property="id"/>也可以這樣用了。
   
   
2. 添加一個ActionForm bean ThreadForm.java,除了記錄一段留言外，還包括了行將用以回復的留言的預處理；
   
    1 public class ThreadForm extends org.apache.struts.action.ActionForm {
    2     
    3     private int id;
    4     private String name;
    5     private String subject;
    6     private String content;
    7     private String url;
    8     private String email;
    9     private int iconId;
   10     private String icon;
   11     private String password;
   12     private int replyId;
   13     private String font;
   14 
   15     private List icons;
   16 
   17     private Topic topic;
   18 
   19     // accessor methods..
   20     
   21 
   22     public ThreadForm() {
   23         super();
   24         // TODO Auto-generated constructor stub
   25         setUrl("http://");
   26         setFont("#800000");
   27         String sql = "select id,name,src from icon order by id";
   28         QueryRunner qr = DbHelper.getQueryRunner();
   29         List list = null;
   30         try {
   31             list = (List) qr.query(sql, new BeanListHandler(Icon.class));
   32             // TODO Auto-generated constructor stub
   33         } catch (SQLException ex) {
   34             Logger.getLogger(ThreadForm.class.getName()).log(Level.SEVERE, null, ex);
   35         }
   36         setIcons(list);
   37     }
   38     
   39   
   40 }
   41
   3-15行是負責對回復的預處理，ThreadForm（）方法中主要也是處理圖標。
   
   
3. 這個回復過程其實是2部，1.預處理：包括列出與ID相關的留言,預設回復的默認標題以及對應的回復id (replyId)；2.回復留言，添加記錄。
   a.  PreReplyAction.java
   
   public class PreReplyAction extends org.apache.struts.action.Action {
       
       /* forward name="success" path="" */
       private static final String SUCCESS = "bbs.read";
       
       /**
        * This is the action called from the Struts framework.
        * @param mapping The ActionMapping used to select this instance.
        * @param form The optional ActionForm bean for this request.
        * @param request The HTTP Request we are processing.
        * @param response The HTTP Response we are processing.
        * @throws java.lang.Exception
        * @return
        */
       @Override
       public ActionForward execute(ActionMapping mapping, ActionForm form,
               HttpServletRequest request, HttpServletResponse response)
              {
           ThreadForm f = (ThreadForm) form;
           String id = (String) request.getParameter("id");
           String sql;
           QueryRunner qr = DbHelper.getQueryRunner();
           
           List list = null;
           sql = "select * from guestbook where id = " + id;
           try {
               list = (List) qr.query(sql, new BeanListHandler(Post.class));
           } catch (SQLException ex) {
               Logger.getLogger(PreReplyAction.class.getName()).log(Level.SEVERE, null, ex);
           }
           Post post = null;
           post = (Post)list.get(0);
           List replies = null;
           sql = "select * from guestbook where replyId =" + id + " order by id";
           try {
               replies = (List) qr.query(sql, new BeanListHandler(Post.class));
           } catch (SQLException ex) {
               Logger.getLogger(PreReplyAction.class.getName()).log(Level.SEVERE, null, ex);
           }
           
           Topic topic = new Topic(post,replies);
           f.setTopic(topic);
           f.setSubject("Re :" + post.getSubject());
           f.setReplyId(post.getId());
   
           return mapping.findForward(SUCCESS);
       }
   }
   
   
   b. ReplyAction.java
   
    1 public class ReplyAction extends org.apache.struts.action.Action {
    2     
    3     /* forward name="success" path="" */
    4     private static final String SUCCESS = "bbs.reply";
    5     
    6     /**
    7      * This is the action called from the Struts framework.
    8      * @param mapping The ActionMapping used to select this instance.
    9      * @param form The optional ActionForm bean for this request.
   10      * @param request The HTTP Request we are processing.
   11      * @param response The HTTP Response we are processing.
   12      * @throws java.lang.Exception
   13      * @return
   14      */
   15     @Override
   16     public ActionForward execute(ActionMapping mapping, ActionForm form,
   17             HttpServletRequest request, HttpServletResponse response)
   18             throws Exception {
   19         ThreadForm f = (ThreadForm)form;
   20         String sql = "insert into guestbook (name,subject,email,url,content,iconId,password,font,replyId,date,lastReplyTime) " +
   21                 "values(?,?,?,?,?,?,?,?,?,now(),now())";
   22         String content = f.getContent();
   23         content = content.replaceAll(" ", "&nbsp;");
   24         content = content.replaceAll("\n","<br>");
   25         String params[] = {f.getName(),f.getSubject(),f.getEmail(),f.getUrl(),content,new Integer(f.getIconId()).toString(),f.getPassword(),f.getFont(),new Integer(f.getReplyId()).toString()};
   26 
   27         QueryRunner qr = DbHelper.getQueryRunner();
   28         try {
   29             qr.update(sql, params);
   30         } catch (SQLException ex) {
   31             Logger.getLogger(ReplyAction.class.getName()).log(Level.SEVERE, null, ex);
   32         }
   33        sql = "update guestbook set lastReplyTime= now() where id = " + f.getReplyId();
   34         try {
   35             qr.update(sql);
   36         } catch (SQLException ex) {
   37             Logger.getLogger(ReplyAction.class.getName()).log(Level.SEVERE, null, ex);
   38         }
   39         return mapping.findForward(SUCCESS);
   40     }
   41 }
   這個基本和添加留言的一直，只是在insert回復記錄以后，更新主題留言的最近的回復時間，可以保證瀏覽留言的時候，該主題能在最前端。
   
   
4. reply.jsp 基本和之前寫的jsp頁面區別不大，省略了。
   
   
5. 添加相應的forwarding信息。
   
   <global-forwards>
           <forward name="bbs.post" path="/result.jsp"/>
           <forward name="bbs.list" path="/display.jsp"/>
           <forward name="bbs.read" path="/reply.jsp" />
           <forward name="bbs.reply" path="/list.do" />
           <forward name="welcome"  path="/Welcome.do"/>
   </global-forwards>
   根據forward的指向，我們可以看到在reply.jsp按下回復鍵以后，直接轉向list.do動作。
   至于action-mapping 沒有什么要注意的。
   
   
6. 整個回復過程就此完成。
   

     摘要: 既然我們已經成功完成了第一個ActionForm Bean和與之相關的Action Class；后面的專題中將不再詳細的去寫與他們相關的開發步驟了。 現在我們開始寫留言板的主體部分，即對整個留言就行瀏覽。因為每個post都有一個replyId字段，用來對應其所回復的留言id；如果這個 replyId等于-1的話，即該留言沒有對應的回復。好了還是先從這個JSP頁面寫起。 displ...  閱讀全文

PostAction主要是處理留言添加工作。

1. 和創建NewForm bean一樣，點擊Source Packages > com.bbs.struts，右鍵New > Java Package... 創建一個com.bbs.struts.action的package用于存放所有action類；
   
   
2. 右鍵com.bbs.struts.action, New > Struts Action...如果New菜單里沒有的話，選擇other...,categories里選擇
   Struts，File types一欄里選擇Struts Action ...；
   
   
3. 在New Struts Action面板里面，Class Name填PostAction；Action Path 填/post；按Next
   
   
   
4. 按照下面的設置，完成對Action的設置
   
   
   
5. 在struts-config.xml的文檔中，IDE自動添加了對PostForm的聲明。
   
   <action-mappings>
           <action input="/post.jsp" name="NewForm" path="/post" scope="request" type="com.bbs.struts.action.PostAction"/>
           <action path="/Welcome" forward="/welcomeStruts.jsp"/>
   </action-mappings>
   
   
6. 右邊的Source Editor中，新建的PostAction.java已經打開了；接下來我們要把記錄在NewForm bean里的數據保存進數據庫，為了測試的需要，在添加數據以后，將添加成功與否的結果顯示在result.jsp上面。
   
    1     public ActionForward execute(ActionMapping mapping, ActionForm form,
    2             HttpServletRequest request, HttpServletResponse response) {
    3         NewForm f = (NewForm) form;
    4         String sql = "insert into guestbook (name,subject,email,url,content,iconId,password,font,replyId,date,lastReplyTime) " +
    5                 " values(?,?,?,?,?,?,?,?,-1,now(),now())";
    6 
    7         String content = f.getContent();
    8         content = content.replaceAll(" ", "&nbsp;");
    9         content = content.replaceAll("\n", "<br>");
   10 
   11         String params[] = {f.getName(), f.getSubject(), f.getEmail(), f.getUrl(), content, new Integer(f.getIconId()).toString(), f.getPassword(), f.getFont()};
   12 
   13         QueryRunner qr = DbHelper.getQueryRunner();
   14 
   15         String result = null;
   16         try {
   17             if (qr.update(sql, params) == 1){
   18                 result = "更新成功";
   19             }else{
   20                 result = "更新失敗";
   21             }
   22         } catch (SQLException ex) {
   23             Logger.getLogger(PostAction.class.getName()).log(Level.SEVERE, null, ex);
   24         }
   25         f.setResult(result);
   26         return mapping.findForward(SUCCESS);
   27     }
   7，8，9行主要是將content里的空格和回車符號轉成html中所對應的空格和回車。
   
   
7. 在PostAction.java，IDE自動給我們設置了一個 private static final String SUCCESS = "success"; 這是為action forward所設置的forward標志，success的名稱我們可以自己取，比如我們可以把它改成bbs.post。關鍵是在結束對這個action class的編程以后，我們需要在struts-config.xml中添加forward聲明。在source editor中打開struts-config.xml，右鍵菜單Struts > Add Forward，在Add Forward的面板里如下設置，按Add完成添加。
   
   

按F6 運行項目，瀏覽器輸入：http://localhost:8080/BBS/post.jsp對程序進行測試。如果添加成功的話，下一頁將有更新成功的字樣。

ActionForm Bean在Struts里用來保存網頁request傳遞之間的數據。比如我們現在寫的NewForm Bean用來收集表格內的信息，
類似于servlet的request.getParamenter()的作用；當用戶提交以后，數據將保存在bean內，然后再做處理。

1. 點擊Source Packages > com.bbs.struts，右鍵New > Java Package... 創建一個com.bbs.struts.form的package用于存放
   所有form；
   
   
2. 右鍵com.bbs.struts.form, New > Struts ActionForm Bean...如果New菜單里沒有的話，選擇other...,categories里選擇
   Struts，File types一欄里選擇Struts ActionForm Bean...；
   
   
3. 為這個ActionForm取名叫NewForm，然后按Finish完成。
   IDE將創建一個NewForm bean，并在右邊的Source Editor里面打開它。默認的話，IDE將創造2個一個String型的name和int型的number,2個屬性；并且定義了它們的accessor方法。另外IDE將在struts-config.xml里面，添加對這個bean的聲明；
   
   <form-beans>
           <form-bean name="NewForm" type="com.bbs.struts.form.NewForm"/>
   </form-beans>
   
   
4. 在Source Editor里面，將原來的name,number字段刪除，并刪除與之相關的accessor方法。然后為NewForm添加以下字段，這些字段與之前的post.jsp所用到的字段一一對應。
   
       private String name;
       private String subject;
       private String content;
       private String url;
       private String email;
       private int iconId;
       private String password;
       private String font;
   
       private List icons;
       private String result;
   利用insert code...功能，添加相應的accessor方法。
   
   
5. 考慮到因為圖標的列其實在生成這個網頁的時候就自動添加的，所以在這個ActionForm bean的Constructor的方法里面，就要處理icon了，還有就是對字色，網絡鏈接做一下預處理：
   
       public NewForm() {
           super();
           // TODO Auto-generated constructor stub
           setUrl("http://");
           setFont("#800000");
           String sql = "select id,name,src from icon order by id";
           QueryRunner qr = DbHelper.getQueryRunner();
           List list = null;
           try {
               list = (List) qr.query(sql, new BeanListHandler(Icon.class));
               // TODO Auto-generated constructor stub
           } catch (SQLException ex) {
               Logger.getLogger(NewForm.class.getName()).log(Level.SEVERE, null, ex);
           }
           setIcons(list);
       }
   
   
6. 同樣在validate方法里，添加對subject驗證，如果subject為空的話，改名“無題”。
   
      public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) {
           ActionErrors errors = new ActionErrors();
   
           if (getSubject() == null || getSubject().length() < 1) {
               setSubject("無題");
           }
           return errors;
       }
   
   
7. 第一個ActionForm Bean就完成了。
   
   

之前的準備工作完成，現在算是正式進入struts項目的環節了，首先我們寫一個發表留言的jsp頁面。

1. 右鍵點擊BBS項目, 選擇 New > JSP, 命名新文件為post. 點擊Finish. post.jsp將在右邊的編輯器里打開了。
   
   
2. 首先在編輯器中，將<title></title>中間的文字改成發表留言。
   
   
3. 在文件頂部，添加以下2個taglib:
   
   <%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
   <%@taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
   bean tag為用戶提供了若干tag，主要針對表單中form bean；html tag用來代替普通的html標簽，達到簡化操作的目的。
   
   
4. 在<body>里面添加：
   
   <html:form action="post">
   
   </html:form>


5. 從IDE的Palette面板的HTML的分類里將Table拉入<html:form action="post">之間，設置rows 8, columns 2。


6. 在<td>之間添加數值

   <html:form action="post">
               <table border="1">
                   <tbody>
                       <tr>
                           <td>名字</td>
                           <td><html:text property="name" /></d>
                       </tr>
                       <tr>
                           <td>郵件</td>
                           <td><html:text property="email" /></td>
                       </tr>
                       <tr>
                           <td>題目</td>
                           <td><html:text property="subject" /> <html:submit value="發送"/><html:cancel value="重置"/></td>
                       </tr>
                       <tr>
                           <td colspan="2">正文<br>
                               <html:textarea cols="60" rows="8" property="content" />
                           </td>
                       </tr>
                       <tr>
                           <td>網站</td>
                           <td><html:text property="url"/></td>
                       </tr>
                       <tr>
                           <td>圖標</td>
                           <td>
                               <html:select property="iconId">
                                   <logic:iterate id="icon" name="NewForm" property="icons">
                                     <option value="<bean:write name='icon' property='id'/>"><bean:write name="icon" property="name"/></option>
                                   </logic:iterate>
                               </html:select>
                           </td>
                       </tr>
                       <tr>
                           <td>密碼</td>
                           <td><html:password property="password"/>（英數8文字內）</td>
                       </tr>
                       <tr>
                           <td>字色</td>
                           <td>
                               <html:radio property="font" value="#800000"><font color="#800000">■</font></html:radio>
                               <html:radio property="font" value="#DF0000"><font color="#DF0000">■</font></html:radio>
                               <html:radio property="font" value="#008040"><font color="#008040">■</font></html:radio>
                               <html:radio property="font" value="#0000FF"><font color="#0000FF">■</font></html:radio>
                               <html:radio property="font" value="#C100C1"><font color="#C100C1">■</font></html:radio>
                               <html:radio property="font" value="#FF80C0"><font color="#FF80C0">■</font></html:radio>
                               <html:radio property="font" value="#FF8040"><font color="#FF8040">■</font></html:radio>
                               <html:radio property="font" value="#000080"><font color="#000080">■</font></html:radio>
                           </td>
                       </tr>
                   </tbody>
               </table>
           </html:form>
       </body>
   
   第一個JSP頁面就完成了。

考慮到后面的測試，再創建一個result.jsp頁面；當post成功/失敗的話，通過result.jsp來查看結果

正如之前所說的，開發一個struts應用和一般的web應用并沒有什么兩樣。

1. 創建數據庫

a. guestbook表：用于記錄留言的所有信息

字段	說明
id	留言編號
name	留言人姓名
email	email地址
url	url地址
subject	留言標題
content	留言內容
iconId	留言使用的表情圖標編號
font	內容字體顏色
date	留言時間
replyId	回復留言ID,默認為-1表示不是回復
lastReplyTime	最近回復時間
password	留言所用的密碼(用于編輯)

b. ICON表：用于記錄所有的圖標記錄

字段	說明
id	圖標編號
name	圖標名稱
src	圖標的位置
alt	圖標的說明

2. JDBC Resource與鏈接池

• 給剛剛建的database建立一個連接，Services標簽，點擊Databases的MySql Server at localhost:3306；
• 選擇剛剛建的guestbook，按右鍵點擊connect；我們可以看到在databases的列表里多了jdbc:mysql://localhost:3306/guestbook的鏈接；
• 回到projects標簽，點擊項目名稱BBS,按右鍵選擇New > Other... 在Categories里面選擇GlassFish；File types項目下面，選擇JDBC Connection Pool，按Next；
• 在New JDBC Connection Pool面板里，JDBC Connection Pool Name里輸入GuestBookPool（隨意）,Extract from Existiong Connection的下拉菜單里選擇剛剛建立的database連接jdbc:mysql://localhost:3306/guestbook，
  其他設置使用默認值即可，按finish結束連接池的創建。
  
• 同樣在Categories里面選擇GlassFish；File types項目下面，選擇JDBC Resource，按Next；
• 在New JDBC Resource面板里，Using Existing JDBC Connection Pool里選擇GuestBookPool（與之前創建的連接池對應）；
  JNDI Name輸入jdbc/bbs(隨意)，按finish，完成JDBC Resource配置。

3.中文亂碼處理 
  記得在做上一個Servlet的項目的時候，在每個servlet處理request的時候(processRequest()方法)，都做過一個request.setCharacterEncoding("UTF-8")的操作；將request的內容轉成UTF-8的內碼，以解決中文亂碼問題。
  在Struts的項目里面，我們仍然會遇到中文亂碼問題。而我們通過一個創建的CharacterEncodingFilter的輔助類來解決問題。

•   CharacterEncodingFilter.java
  package com.bbs.struts.util;
  
  import java.io.IOException;
  import javax.servlet.Filter;
  import javax.servlet.FilterChain;
  import javax.servlet.FilterConfig;
  import javax.servlet.ServletException;
  import javax.servlet.ServletRequest;
  import javax.servlet.ServletResponse;
  
  /**
   *
   * @author Chucky
   */
  public class CharacterEncodingFilter implements Filter {
  
      public void init(FilterConfig filterConfig) throws ServletException {
      }
  
      public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
          request.setCharacterEncoding("UTF-8");
          chain.doFilter(request, response);
      }
  
      public void destroy() {
  
      }
  
  }
   
  
• 打開web.xml，在Filters的面板中添加以下內容
  

中文亂碼的問題解決了！

4. DbUtils
在處理數據連接的問題上，還是使用DbUtils這個類，詳細請看Blog系統開發 5. JDBC的基本操作與DbUtils的使用 內容。
這里還是寫一個DbHelper的輔助類，來簡化連接的操作。
DbHelper.java
注意context.lookup()中的數據源，要與之前的數據源匹配。

因為這個bbs的網頁設計是按照日月星辰的留言板的頁面制作的，所以類似icon之類的數據，直接添加到數據庫（假設所有的icon都在
img 目錄下,icon素材可以直接到星辰去抓的，sql的腳本)

根據之前所建立的guestbook表和icon表；現在我們建立Icon類和Post類；
1. Icon類 Icon.java
在Icon.java的Source Editor上按右鍵，點擊Insert Code... 選擇Getter and Setter...；
在Generate Getter and Setter面板內，選擇所有的屬性；IDE將自動生成setter/getter方法。

同樣建立一個Post類，除了原來guestbook里的字段以外，為了編程的方便再添加一個Icon的屬性，相當于Icon類里的src值。
添加相應的getter/setter方法。

除了以上2個類，再建一個Topic類，這個類是一個post和它所有回復的一個集合。
添加相應的getter/setter方法。