Weng的筆記: 2008

2008年10月23日星期四

Wicket的TextField元件

網頁常有Text元件讓使用者輸入資料,可透過TextField元件處理.
步驟一.建置一個TextExamples.html


<html>
  <body>
    <form wicket:id="form">
      <div><span wicket:id="pno">帳號</span>
      <input type="text" wicket:id="PNO"></div>
    </form>
  </body>
</html>

步驟二.建置TextExamples.java


package wicket.examples.html.body.form.text;

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.TextField;

public class TextExamples extends WebPage {

  public TextExamples(){
    super();
    final Form cForm = new Form("form");
    
    cForm.add(new Label("pno","帳號"));
    cForm.add(new TextField("PNO"));
    
    this.add(cForm);
  }

}

步驟三.修改Examples.html & Examples.java


...
<tr>
  <td><a wicket:id="Examples6">show TextExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples6",TextExamples.class));
...

2008年10月22日星期三

Wicket的Panel元件

組合畫面也是經常出現在網頁上的功能,Panel元件可以快速完成組合畫面.
步驟一.建置一個表頭功能,HeaderPanelExamples.html & HeaderPanelExamples.java


<html>
  <body>
    <wicket:panel>
      <form wicket:id="form">
        <div wicket:id="hello">這裡顯示header</div>
      </form>
    </wicket:panel>
  </body>
</html>


package wicket.examples.html.body.form.panel;

import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;
import wicket.markup.html.panel.Panel;

public class HeaderPanelExamples extends Panel {

  public HeaderPanelExamples(String id){
    super(id);
    Form cForm = new Form("form");
    cForm.add(new Label("hello","這是Header"));
    this.add(cForm);
  }
}

步驟二.建置一個表身功能,FooterPanelExamples.html & FooterPanelExamples.java


<html>
  <body>
    <wicket:panel>
      <form wicket:id="form">
        <div wicket:id="hello">這裡顯示 Footer</div>
      </form>
    </wicket:panel>
  </body>
</html>


package wicket.examples.html.body.form.panel;

import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;
import wicket.markup.html.panel.Panel;

public class FooterPanelExamples extends Panel {

  public FooterPanelExamples(String id){
    super(id);
    Form cForm = new Form("form");
    cForm.add(new Label("hello","這裡顯示Footer"));
    this.add(cForm);
  }
}

步驟三.建置一主要的組合功能,PanelExamples.html & PanelExamples.java


<html>
  <body>
    <form wicket:id="form">  
      <div id="header" wicket:id="header">id "header" 的內容放在這裡</div>
      <div id="footer" wicket:id="footer">id "footer" 的內容放在這裡</div>
    </form>
  </body>
</html>


package wicket.examples.html.body.form.panel;

import wicket.markup.html.WebPage;
import wicket.markup.html.form.Form;

public class PanelExamples extends WebPage {

  public PanelExamples(){
    super();
    Form cForm = new Form("form");
    cForm.add(new HeaderPanelExamples("header"));
    cForm.add(new FooterPanelExamples("footer"));
    this.add(cForm);
  }
  
}

步驟四.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples11">show PanelExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples11",PanelExamples.class));
...

2008年10月21日星期二

Wicket的PageableListView元件

Table是一般常見的功能,但要如何讓大量資料可以以分頁列出,利用PageableListView元件能夠很容易的實現資料分頁.
步驟一.建置一個PageableListPageExamples.html


<html>
<body>
<form wicket:id="form" action="">
<span wicket:id="navigator">這裏顯示分頁操作</span>
<table width="240" border="1" bordercolor="orange">
  <tr>
    <th>選擇</th>
    <th>序號</th>
    <th>書名</th>
    <th>作者</th>
    <th>操作</th>
  </tr>
  <tr wicket:id="books">
    <td>
      <input type="checkbox" wicket:id="selected"/>
    </td>
    <td wicket:id="id">id</td>
    <td wicket:id="title">title</td>
    <td wicket:id="author">author</td>
    <td>
      <a wicket:id="edit">edit</a>
    </td>
  </tr>
</table>
<input type="submit"/>
</form>
</body>
</html>

步驟二.建置一個Book.java類別


package wicket.examples.html.body.form.list;

import java.io.Serializable;

public class Book implements Serializable {
private int id;
//編號
private String title;
//書名
private String author;
//作者
private boolean selected;
  public String getAuthor() {
    return author;
  }

  public void setAuthor(String author) {
    this.author = author;
  }

  public void setTitle(String title) {
    this.title = title;
  }

  public void setSelected(boolean selected) {
    this.selected = selected;
  }

  public void setId(int id) {
    this.id = id;
  }

  public int getId() {
    return id;
  }

  public boolean isSelected() {
    return selected;
  }

  public boolean getSelected() {
    return selected;
  }


  public String getTitle() {
    return title;
  }

}

步驟三.建置PageableListPageExamples.java


package wicket.examples.html.body.form.list;

import java.util.ArrayList;
import java.util.List;

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.CheckBox;
import wicket.markup.html.form.Form;
import wicket.markup.html.link.Link;
import wicket.markup.html.list.ListItem;
import wicket.markup.html.list.PageableListView;
import wicket.markup.html.navigation.paging.PagingNavigator;
import wicket.model.PropertyModel;

public class PageableListPageExamples extends WebPage {

  private static List books = new ArrayList();
    static {
      for (int i = 1; i < 100; i++) {
        Book book = new Book();
        book.setId(i);
        book.setAuthor("author" + i);
        book.setTitle("title" + i);
        books.add(book);
      }
    }

    public PageableListPageExamples() {
      super();
      Form cForm = new Form("form");

      final PageableListView listView = new PageableListView("books", books, 10) {
        protected void populateItem(ListItem item) {
          final Book book = (Book) item.getModelObject();
          item.add(new CheckBox("selected", new PropertyModel(book, "selected")));
          item.add(new Label("id", Integer.toString(book.getId())));
          item.add(new Label("title", book.getTitle()));
          item.add(new Label("author", book.getAuthor()));
          item.add(new Link("edit") {
            public void onClick() {
                //轉向編輯頁面
            }
          });
        }
      };
      cForm.add(listView);
      cForm.add(new PagingNavigator("navigator", listView));
      this.add(cForm);
    }
}

步驟四..修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples19">show PageableListPageExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples19",PageableListPageExamples.class));
...

Wicket的Include元件

一個網站多少都需要連結到一般靜態的網頁,透過Include元件可以很方便的連結到靜態網頁.
步驟一.建置一個IncludeExamples.html


<html>
  <body>
    <form wicket:id="form">
      <span wicket:id ="include">在這裏放置通用的Html代碼</span>
    </form>
  </body>
</html>

步驟二.建置IncludeExamples.java


package wicket.examples.html.body.form.include;

import wicket.examples.html.body.base.hello.HelloWicket;
import wicket.markup.html.WebPage;
import wicket.markup.html.form.Form;
import wicket.markup.html.include.Include;

public class IncludeExamples extends WebPage {

  public IncludeExamples(){
    super();
    Form cForm = new Form("form");
    cForm.add(new Include("include","index.html"));
    this.add(cForm);
  }
}

步驟三.建置一靜態網頁index.html


<html>
  <body>
    <h3>這是一個靜態網頁</h3>
  </body>
</html>

步驟四.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples9">show IncludeExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples9",IncludeExamples.class));
...

2008年10月20日星期一

Wicket的RadioChoice元件

步驟一.建置一個RadioChoiceExamples.html


<html>
  <body>
    <form wicket:id="form">
      <h3>這是RadioChoiceExamples</h3>
      <span wicket:id="sites"></span>
    </form>
  </body>
</html>

步驟二.建置RadioChoiceExamples.java


package wicket.examples.html.body.form.choice;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import wicket.markup.html.WebPage;
import wicket.markup.html.form.ChoiceRenderer;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.IChoiceRenderer;
import wicket.markup.html.form.RadioChoice;

public class RadioChoiceExamples extends WebPage {

  private static List SITES = new ArrayList();
  private static Map NAMES = new HashMap();
  
  static{
    SITES.add("http://java.sun.com");
    SITES.add("http://wicket.apache.org/");
    SITES.add("http://www.hibernate.org/hib_docs/reference/en/html/index.html");
    
    NAMES.put("http://java.sun.com", "SUN");
    NAMES.put("http://wicket.apache.org/", "Wicket");
    NAMES.put("http://www.hibernate.org/hib_docs/reference/en/html/index.html", "hibernate");
  }
  public RadioChoiceExamples(){
    super();
    Form cForm = new Form("form");
    
    IChoiceRenderer cSitesRend = new ChoiceRenderer(){
      public Object getDisplayValue(Object object){
        return NAMES.get(object);
      }
    };
    
    RadioChoice cSites = new RadioChoice("sites",SITES,cSitesRend);
    cForm.add(cSites);
    this.add(cForm);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples15">show RadioChoiceExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples15",RadioChoiceExamples.class));
...

Wicket的ListChoice元件

步驟一.建置一個ListChoiceExamples.html


<html>
  <body>
    <form wicket:id="form">
      <h3>這是ListChoiceExamples</h3>
      <select multiple ="multiple" wicket:id="site"></select>
    </form>
  </body>
</html>

步驟二.建置一個ListChoiceExamples.java


package wicket.examples.html.body.form.choice;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import wicket.markup.html.WebPage;
import wicket.markup.html.form.ChoiceRenderer;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.IChoiceRenderer;
import wicket.markup.html.form.ListChoice;

public class ListChoiceExamples extends WebPage {

  private static List SITES = new ArrayList();
  private static Map NAMES = new HashMap();
  
  static{
    SITES.add("http://java.sun.com");
    SITES.add("http://wicket.apache.org/");
    SITES.add("http://www.hibernate.org/hib_docs/reference/en/html/index.html");
    
    NAMES.put("http://java.sun.com", "SUN");
    NAMES.put("http://wicket.apache.org/", "Wicket");
    NAMES.put("http://www.hibernate.org/hib_docs/reference/en/html/index.html", "hibernate");
  }
  
  public ListChoiceExamples(){
    super();
    Form cForm = new Form("form");
    
    IChoiceRenderer cSiteRend = new ChoiceRenderer(){
      public Object getDisplayValue(Object object){
        return NAMES.get(object);
      }
    };
    
    ListChoice cSiteChoice = new ListChoice("site",SITES,cSiteRend);
    
    cForm.add(cSiteChoice);
    this.add(cForm);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples14">show ListChoiceExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples14",ListChoiceExamples.class));
...

2008年10月17日星期五

Wicket的DropDownChoice元件

網頁中常見下拉式清單元件,wicket也提供相關做法.

步驟一.建置DropDownChoiceExamples.html


<html>
  <body>
    <form wicket:id="form">
      <h3>這是DropDownChoiceExamples</h3>
      <select wicket:id="site"></select>
    </form>
  </body>
</html>

步驟二.建置DropDownChoiceExamples.java


package wicket.examples.html.body.form.choice;

import java.util.ArrayList;
import java.util.List;

import wicket.markup.html.WebPage;
import wicket.markup.html.form.DropDownChoice;
import wicket.markup.html.form.Form;

public class DropDownChoiceExamples extends WebPage {

  private static List SITES = new ArrayList();
  
  static{
    SITES.add("http://java.sun.com");
    SITES.add("http://wicket.apache.org/");
    SITES.add("http://www.hibernate.org/hib_docs/reference/en/html/index.html");
  }
  public DropDownChoiceExamples(){
    super();
    Form cForm = new Form("form");
    DropDownChoice cSitesChoice = new DropDownChoice("site",SITES);
    cSitesChoice.setRequired(true);
    cSitesChoice.setNullValid(true);
    cForm.add(cSitesChoice);
    this.add(cForm);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples18">show FileUploadPageExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples18",FileUploadPageExamples.class));
...

2008年10月16日星期四

Wicket的FileUploadField元件

Wicket提供一個簡便的檔案上傳元件FileUploadField.

步驟一.建置一個FileUploadPageExamples.html


<html>
<body>
  <form wicket:id="form">
     <input type="file"  wicket:id="files"/><br/>
     <input type="submit"/>
  </form>
</body>
</html>

步驟二.建置一個FileUploadPageExamples.java


package wicket.examples.html.body.form.file;

import java.io.IOException;

import wicket.markup.html.WebPage;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.upload.FileUpload;
import wicket.markup.html.form.upload.FileUploadField;
import wicket.util.file.File;
import wicket.util.lang.Bytes;

public class FileUploadPageExamples extends WebPage {

  public FileUploadPageExamples(){
    super();
    final FileUploadField cFileUpload = new FileUploadField("files");
    
    Form cForm = new Form("form"){
      protected void onSubmit(){
        final FileUpload cUpload = cFileUpload.getFileUpload();
        if (cUpload != null){
          try{
            cUpload.writeTo(new File("D:\\workspace\\WicketExamples\\files\\1.txt"));
          }catch(IOException ie){
            ie.printStackTrace();
          }
        }
        super.onSubmit();
      }
    };
    
    cForm.add(cFileUpload);
    cForm.setMultiPart(true);
    cForm.setMaxSize(Bytes.kilobytes(1000));
    this.add(cForm);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples18">show FileUploadPageExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples18",FileUploadPageExamples.class));
...

Wicket的CheckBoxMultipleChoice元件

網頁中多少都有讓使用勾選的項目,透過CheckBoxMultipleChoice元件可快速產生多個CheckBox,不需在html中一個個的寫<input type="checkbox">,可讓html程式碼更簡潔易懂.

步驟一.建置CheckBoxExamples.html


<html>
<body>
  <form wicket:id="form">
    <h3>這是Check Box</h3>
    <span wicket:id="site"></span>
    <h3>2</h3>
    <span wicket:id="sites"></span>
  </form>
</body>
</html>

步驟二.建置CheckBoxExamples.java


package wicket.examples.html.body.form.checkbox;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import wicket.markup.html.WebPage;
import wicket.markup.html.form.CheckBoxMultipleChoice;
import wicket.markup.html.form.ChoiceRenderer;
import wicket.markup.html.form.Form;
import wicket.markup.html.form.IChoiceRenderer;

public class CheckBoxExamples extends WebPage {

  private static List SITES = new ArrayList();
  private static Map NAMES = new HashMap();
  
  static{
    SITES.add("http://java.sun.com");
    SITES.add("http://wicket.apache.org/");
    SITES.add("http://www.hibernate.org/hib_docs/reference/en/html/index.html");
    
    NAMES.put("http://java.sun.com", "SUN");
    NAMES.put("http://wicket.apache.org/", "Wicket");
    NAMES.put("http://www.hibernate.org/hib_docs/reference/en/html/index.html", "hibernate");
  }
  public CheckBoxExamples(){
    super();
    Form cForm = new Form("form");
    
    IChoiceRenderer cRend = new ChoiceRenderer(){
      public Object getDisplayValue(Object object){
        return NAMES.get(object);
      }
    };
    
    CheckBoxMultipleChoice cSitesChoice = new CheckBoxMultipleChoice("sites",SITES,cRend);
    cForm.add(cSitesChoice);
    
    CheckBoxMultipleChoice cSiteChoice = new CheckBoxMultipleChoice("site",SITES);
    cForm.add(cSiteChoice);
    this.add(cForm);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples12">show CheckBoxExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples12",CheckBoxExamples.class));
...

2008年10月15日星期三

Wicket的DatePicker元件

網頁中常需要輸入日期,一般使用者並無法正確判斷日期格式是那一種,透過DatePicker元件的幫助,可以讓使用者方便的輸入日期.

步驟一.先建立DatePickerExamples.html


<html>
  <body>
    <div><span wicket:id="birthday">生日</span>
      <input type="text" wicket:id="dateField"/>
         <span wicket:id ="datePicker"/>
    </div>
  </body>
</html>

步驟二.建立DatePickerExamples.java


package wicket.examples.html.body.base.date;

import java.util.Date;

import wicket.extensions.markup.html.datepicker.DatePicker;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.TextField;

public class DatePickerExamples extends WebPage {

  public DatePickerExamples(){
    super();
    this.add(new Label("birthday","出生日期"));
    TextField dateField = new TextField("dateField", Date.class);
    this.add(new DatePicker("datePicker", dateField));
    this.add(dateField);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
<td><a wicket:id="Examples20">show ImagePageExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples20",DatePickerExamples.class));
...

2008年10月14日星期二

Wicket的Image元件

每一網頁都需要有美美的圖檔來讓網頁更多元及更好看,所以Image元件是不可以少的.
步驟一.建立一ImagePageExamples.html


<html>
  <body>
    <img wicket:id = "statics"/><BR/><P/>
    <img wicket:id = "dynamics"/><BR/>
  </body>
</html>

步驟二.建立ImagePageExamples.java


package wicket.examples.html.body.base.image;

import java.awt.Graphics2D;

import wicket.markup.html.WebPage;
import wicket.markup.html.image.Image;
import wicket.markup.html.image.resource.RenderedDynamicImageResource;

public class ImagePageExamples extends WebPage {

  public ImagePageExamples(){
    super();
    this.add(new Image("statics","image.gif"));
    
    add(new Image("dynamics",new RenderedDynamicImageResource(200,200){
      protected boolean render(Graphics2D graphics){
        graphics.drawString("測試", 10, 10);
        return true;
      }
    }));
    
  }
}

步驟三.將要顯示的圖檔放置在同一目錄下(image.gif)
步驟四.修改Examples.html & Examples.java


...
<tr>
  <td><a wicket:id="Examples17">show ImagePageExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples17",ImagePageExamples.class));
...

2008年10月13日星期一

每個系統都需要利用connection pool來增加系統效能，目前市面上已有許多可提供connection pool的資源，Proxool則為一設定簡單好用之工具，並且它也提供log的使用，相關功能也都還不錯。

步驟一.請先到Proxool網站下載Library proxool-0.9.0RC2.zip,及下載要用的JDBC Driver
.先將proxool-0.9.0RC2.zip解壓縮放至專案目錄下的lib底下
.再將JDBC Driver放到專案Lib目錄底下

步驟二.將proxool-0.9.0RC2.jar放至專案下的lib目錄底下
設定XML檔案
在專案下的web-inf\web.xml增加以下設定


<servlet>
  <servlet-name>ServletConfigurator</servlet-name>
  <servlet-class>
    org.logicalcobwebs.proxool.configuration.ServletConfigurator
  </servlet-class>
  <init-param>
    <param-name>xmlFile</param-name>
    <param-value>WEB-INF/proxool.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup> 
</servlet>

步驟三.在專案下web-inf\新增一proxool.xml


  <proxool>
    <alias>DB</alias> <!-- 別名 -->
    <driver-url>jdbc:oracle:thin:@127.0.0.1:ZENWEB</driver-url> <!-- 資料庫URL -->
    <driver-class>oracle.jdbc.driver.OracleDriver</driver-class> <!-- JDBC Driver -->
    <driver-properties>
      <property name="user" value="user"/> <!-- 帳號 -->
      <property name="password" value="pass"/> <!-- 密碼 -->
    </driver-properties>
    <maximum-connection-count>10</maximum-connection-count>
    <house-keeping-test-sql>select CURRENT_DATE</house-keeping-test-sql>
  </proxool>

步驟四.寫一個ProxoolDB.java,使用Proxool 傳回一個connection物件


package com.db;
 
import java.sql.*;
public class ProxoolDB {
  private Connection con = null;
  public Connection getDBConnection(){
    try {
      con = DriverManager.getConnection("proxool.DB");
    }catch (Exception e) {
    } finally {
      return con;
    }
  }
}

Wicket的PopupSettings元件

網頁常有一些需要彈出新視窗的功能,Wicket在此也提供了方便的元件PopupSettings來提供程式設計人員使用.

步驟一.先建置一個PopupLinkExamples.html


<html>
  <body>
    <a wicket:id ="popupLink">彈出窗口</a>
  </body>
</html>

步驟二.建置PopupLinkExamples.java


package wicket.examples.html.body.base.popuplink;

import wicket.examples.html.body.base.hello.HelloWicket;
import wicket.markup.html.WebPage;
import wicket.markup.html.link.BookmarkablePageLink;
import wicket.markup.html.link.PopupSettings;

public class PopupLinkExamples extends WebPage {

  public PopupLinkExamples(){
    super();
    BookmarkablePageLink cPopupLink = new BookmarkablePageLink("popupLink",HelloWicket.class);
    PopupSettings cPopupSettings = new PopupSettings();
    cPopupSettings.setHeight(350);
    cPopupSettings.setWidth(350);
    cPopupLink.setPopupSettings(cPopupSettings);
    this.add(cPopupLink);
  }
}

步驟三.修改Examples.html & Examples.java


...
  <tr>
    <td><a wicket:id="Examples10">show PopupLinkExamplesPage</a></td>
  </tr>
...


...
  add(new PageLink("Examples10",PopupLinkExamples.class));
...

2008年10月9日星期四

Wicket的FeedbackPanel元件

表單處理時通常會有資訊驗證,若資訊有誤或不足時提供使用者相關資訊,Wicket提供了一個方便的元件FeedbackPanel.
步驟一.建立一個FeedBackExamples.html


<html>
  <body>
    <span wicket:id="feesBack">這裡顯示輸出資訊</span>
    <a href="#" wicket:id="pageLink">內部連結的網頁Examples</a>
  </body>
</html>

步驟二.


package wicket.examples.html.body.base.feedback;

import wicket.markup.html.WebPage;
import wicket.markup.html.link.Link;
import wicket.markup.html.panel.FeedbackPanel;

public class FeedBackExamples extends WebPage {

  public FeedBackExamples(){
    super();
    this.add(new FeedbackPanel("feesBack"));
    
    Link link = new Link("pageLink"){
      public void onClick(){
        info("這是FeedBack的資料");
      }
    };
    add(link);
  }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
  <td><a wicket:id="Examples4">show FeedBackExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples4",FeedBackExamples.class));
...

2008年10月8日星期三

Wicket的Link元件

每個動態網頁都是從第一頁面換到第二頁面,並將第一頁面的相關資料一並帶到第二頁,以提供頁面使用,由第一頁面換頁需由使用者按下Button或者是Link讓頁面更換,用Link來做換頁動作.

步驟一.建立一個LinkExamples.html


<html>
  <body>
    <a href="#" wicket:id="links">這連結被點了<span wicket:id="counts"></span>次</a>
    <br><br>
    <h3>外部連結</h3>
    <a href="#" wicket:id="externalLink" target="_new">連結URL的名稱</a>
    <br><br>
    <h3>內部連結</h3>
    <a href="#" wicket:id="pageLink">內部連結的網頁Examples</a>
  </body>
</html>

步驟二.建立一個LinkExamples.java


package wicket.examples.html.body.base.link;

import wicket.Component;
import wicket.examples.Examples;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.link.ExternalLink;
import wicket.markup.html.link.Link;
import wicket.markup.html.link.PageLink;
import wicket.model.Model;

public class LinkExamples extends WebPage {

 private int oCount_ = 0;

 public LinkExamples(){
  super();
  Link link = new Link("links"){
   public void onClick(){
    oCount_++;
   }
  };
  link.add(new Label("counts",new Model(){
   @Override
   public Object getObject(Component component){
    return Integer.toString(oCount_);
   }
  }));
  
  add(link);
  
  add(new ExternalLink("externalLink","http://www.google.com.tw","Google."));
  
  add(new PageLink("pageLink",Examples.class));
 }
 
}

步驟三.修改Examples.html & Examples.java


...
<tr>
 <td><a wicket:id="Examples2">show LinkExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples2",LinkExamples.class));
...

2008年10月7日星期二

Wicket的Button元件

每個動態網頁都是從第一頁面換到第二頁面,並將第一頁面的相關資料一並帶到第二頁,以提供頁面使用,由第一頁面換頁需由使用者按下Button或者是Link讓頁面更換,先試者用Button來做換頁動作.

步驟一.先寫一個ButtonExamples.html


<html>
<body>
  <span wicket:id="feesBack">這裡顯示輸出資訊</span>
  <form wicket:id="form">
    <div><input type="submit" value="第一個按鈕" wicket:id="btn01"></div>
    <div><input type="submit" value="第二個按鈕" wicket:id="btn02"></div>
    <div><input type="submit" value="第三個按鈕" wicket:id="btn03"></div>
  </form>
</body>
</html>

步驟二.寫一個ButtonExamples.java類別


package wicket.examples.html.body.form.button;

import wicket.examples.Examples;
import wicket.markup.html.WebPage;
import wicket.markup.html.form.Button;
import wicket.markup.html.form.Form;
import wicket.markup.html.panel.FeedbackPanel;

public class ButtonExamples extends WebPage {

  public ButtonExamples(){
    super();
    add(new FeedbackPanel("feesBack"));
    Form cForm = new Form("form");
    Button btn01 = new Button("btn01"){
      protected void onSubmit(){
        info("這是第一個Button用Submit所產生的資料.");
      }
    };
    cForm.add(btn01);
    
    Button btn02 = new Button("btn02"){
      protected void onSubmit(){
        info("這是第二個Button用Submit所產生的資料.");
      }
    };
    cForm.add(btn02);
    
    Button btn03 = new Button("btn03"){
      protected void onSubmit(){
        setResponsePage(new Examples());
      }
    };
    cForm.add(btn03);
    
    this.add(cForm);
  }
}

步驟三.修改Examples


...
<tr>
  <td><a wicket:id="Examples5">show ButtonExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples5",ButtonExamples.class));
...

2008年10月6日星期一

Wicket 的 Form元件

第一支Wicket Examples中己經使用過Wicket的Label元件,在寫網頁時最常使用的元件中一定有Form的元件,在Wicket中Form這個元件是對應HTML的Form,使用的方法如下:
步驟一.首先建立一個FormExamples.html


<html>
<body>
  <form wicket:id="form">
    <div wicket:id="pno">這是第一個Form測試</div>
  </form>
</body>
</html>

步驟二.建立FormExamples.java


package wicket.examples.html.body.form;

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;

public class FormExamples extends WebPage {

 public FormExamples(){
  super();
  Form form = new Form("form");
  form.add(new Label("pno","這是新的內容"));
  this.add(form);
 }
}

步驟三.修改Examples.html & Examples.java


...
<tr>
 <td><a wicket:id="Examples3">show FormExamplesPage</a></td>
</tr>
...


...
add(new PageLink("Examples3",FormExamples.class));
...

2008年10月3日星期五

Wicket建置登入首頁

建置一個登入的首頁.(未來每個範例都會透過這個案例來執行,所以每加入一個範例就會來修改這個範例的內容)

步驟一.修改web.xml


    <web-app>
    .............
    <servlet>
      <servlet-name>webApplication</SERVLET-NAME>
      <servlet-class>
        wicket.protocol.http.WicketServlet
      </SERVLET-CLASS>
      <init-param>
        <param-name>applicationClassName</PARAM-NAME>
        <param-value>
          wicket.examples.WicketApplication
        </PARAM-VALUE>
      </INIT-PARAM>
      <load-on-startup>1</LOAD-ON-STARTUP>
    </servlet>
    <servlet-mapping>
      <servlet-name>webApplication</SERVLET-NAME>
      <url-pattern>/main/*</URL-PATTERN>
    </SERVLET-MAPPING>
    .............
    </web-app>

步驟二.建立首頁畫面(Examples.html)


<html xmlns:wicket="http://www.wicketframework.org">
<body>
<h3>Wicket 基本元件範例</h3>
<table>
 <tr>
  <td><a wicket:id="Examples1">show HelloWicketPage</a></td>
 </tr>
</table>
</body>
</html>

步驟三.建立首頁的JAVA元件(Examples.java)


package wicket.examples;

import wicket.examples.html.body.base.hello.HelloWicket;
import wicket.markup.html.WebPage;
import wicket.markup.html.link.PageLink;

public class Examples extends WebPage {

 public Examples(){
  super();
  // 這是將第一個例子HelloWicket做連結.
  add(new PageLink("Examples1",HelloWicket.class));
 }
}

步驟四.修改WicketApplication.java


package wicket.examples;

import wicket.Page;
import wicket.protocol.http.WebApplication;

public class WicketApplication extends WebApplication {

 @Override
 public Class getHomePage() {
  // 將頁面指向Examples
  return Examples.class;
 }

}

步驟五.啟動server,打開IE執行以下網址,可看見show HelloWicketPage超連結字樣
http://localhost:8083/WicketExamples/main

步驟六.點選show HelloWicketPage超連結就可看見Hello Wicket字樣

2008年10月1日星期三

常用的Function

Oracle內建許多的Function但常用的確不多,所以就將我常用的整理出來給有需要的人參考囉.



1.select LAST_DAY(SYSDATE ) from dual
產生結果:2001/9/30 PM 06:06:56

2.select TO_CHAR(sysdate) from dual ***sysdate可換成'20010909'***
產生結果:24-SEP-01

3.select CHR(97) from dual ***可求出數字代表的字碼***
產生結果:a

4.select SUBSTR('char',1,3 ) from dual ***可求出'char'從第1碼到第3碼***
產生結果:cha

5.SELECT ASCII('A') FROM DUAL ***可求出'A'的ASCII碼***
產生結果:65 

6.SELECT CONCAT('CHAR','CHAR1') FROM DUAL ***可求出'CHAR'和'CHAR1'***
產生結果:CHARCHAR1

7.SELECT LENGTH('char123') FROM DUAL ***可求出'char123'的長度***
產生結果:7

8.SELECT LENGTHB('char123') FROM DUAL ***可求出'char123'的長度***
產生結果:7

9.SELECT LPAD('char1',10,'2char2') FROM DUAL ***可求出'char1',10,'2char2'的字碼***
產生結果:2charchar1

10.SELECT RPAD('char1', 10 ,'2char2') FROM DUAL ***可求出'char1',10,'2char2'的字碼***
產生結果:char12char

11.SELECT INITCAP('cASE_kIND') FROM DUAL ***可將'cASE_kIND'的第一碼改成大寫,其它改成小寫***
產生結果:Case_Kind

12.SELECT INSTR('XC11','C') FROM DUAL ***尋找'XC11','C'的'C'的碼位***
產生結果:2

13.SELECT LTRIM(CASE_YEAR||CASE_KIND||CASE_NO) AS A FROM PLNTF ORDER BY A ***LTRIM左邊去空白 ***
產生結果:089交訴00001

SELECT RTRIM(CASE_YEAR||CASE_KIND||CASE_NO) AS A FROM PLNTF ORDER BY A ***RTRIM右邊去空白 ***

14.SELECT UPPER('case_year') FROM DUAL ***將'case_year'改成大寫***
產生結果:CASE_YEAR

15.select ABS(5) from dual ***將資料改成數字形態***
產生結果:5

16.select AVG(DISTINCT 1) from dual ***將資料計算其平均值***
產生結果:1

17.select SYSDATE from dual ***產生系統日期時間***
產生結果:2001/10/31 PM 03:53:37

18.select TO_CHAR(sysdate) from dual ***產生系統日期***
產生結果:31-OCT-01

19.select ADD_MONTHS(sysdate,1) from dual ***產生系統日期時間+一個月,若1改成2則+兩個月***
產生結果:2001/11/30 PM 04:00:58

20.select LAST_DAY(sysdate) from dual ***產生系統當月最後一天日期時間***
產生結果:2001/10/31 PM 04:01:49

21.select TO_CHAR(sysdate ,'YYYY') from dual ***產生系統年度,若YYYY改成兩碼YY,就只帶後兩碼***
產生結果:2001

22.select TO_CHAR(sysdate, 'MM/DD/YY') from dual ***產生結果是依'MM/DD/YY'的排序***
產生結果:10/31/01 (90年10月31日製作)

23.select TRUNC(SYSDATE ,'YY') from dual ***產生結果是依'YY'的變數為改變,若改成'MM'及'DD'的結果會不同***
產生結果:('YY') 2001/1/1 ,('MM') 2001/10/1 ,('DD') 2001/10/31

24.select (TO_CHAR(sysdate,'YYYY')-1911)||TO_CHAR(sysdate, 'MMDD') from dual ***產生結果為民國年月日***
產生結果:920401

25.select LENGTH('char') from dual ***產生字串長度***
產生結果:4

26.select nvl(null,0) from dual ***若欄位為''或null,則為0
產生結果:0

27.select TO_CHAR(ADD_MONTHS(TRUNC(sysdate),0)-31,'YYYYMMDD') from dual ***日期的加減***
產生結果:20030428 (2003/05/29執行)

28.select TRUNC(sysdate,'MM') from dual ***將日期取月份的第一天***
產生結果:2003/6/1 (2003/06/12執行)

29.select TRUNC(sysdate,'YY') from dual ***將日期取年度的第一天***
產生結果:2003/1/1 (2003/06/12執行)

30.select ceil(1.001) from dual ***無條件進位(好像是如此,需要再驗證)***
產生結果:2

31.select round(1.58,1) from dual ***四拾五入進位法***
產生結果:1.6

32.select TO_DATE('20030702' ,'YYMMDD') from dual ***字串變成日期格式***
產生結果:2003/7/2

33.select to_char(to_date('20041231','YYYYMMDD'),'day') from dual ***求星期幾***
產生結果:friday

34.select to_char(sysdate,'WW') from dual ***求週別***
產生結果: 37 (2005/09/13執行)

35.select to_char(to_date('20050915','YYYYMMDD'),'d') from dual ***求一週的第幾天***
產生結果: 5 (星期日為一週的第一天,20050915為星期四,是一週的第五天)

36.select LOWER('Test') from dual ***將字型轉成小寫***
產生結果: test

37.select replace('123-456-789','-','') from dual  ***將-置換成null***
產生結果: 123456789
 
38.select TO_CHAR(sysdate, 'HH24MISS') from dual  ***將系統時間顯示出來***
產生結果: 135505

39.select TO_CHAR(sysdate,'YYYYMMDDHH24MISS') from dual  ***將系統日期時間顯示出來***
產生結果: 20080429173550  (執行日期時間 2008/04/29 173550 )

40.select TO_DATE('20080526163301','YYYYMMDDHH24MISS') from dual ***將日期時間轉換成日期格式***
產生結果: 2008/5/26 下午 04:33:01
 
41.select * from v$version 查看oracle的版本

如何寫一個回傳TABLE的Function

步驟一.首先建置一個TYPE OBJECT


  CREATE OR REPLACE TYPE ZENHR.DATE_TEMP AS OBJECT ( 
    USER_NO VARCHAR2(6), 
    SDATE VARCHAR2(8) 
  );

步驟二.宣告一個TYPE


  CREATE TYPE ZEN_DATE_TEMP AS TABLE OF DATE_TEMP;

步驟三.撰寫一個Function


  CREATE OR REPLACE FUNCTION get_dates (UserNO in VARCHAR2 , SDATE in VARCHAR2 ) 
  RETURN ZEN_DATE_TEMP pipelined AS 
  -- Weng 2007/6/28 
  -- 回傳Table 
  v_tab ZEN_DATE_TEMP := ZEN_DATE_TEMP(); 
  BEGIN 
    FOR cur IN (SELECT USER_NO, USER_SDATE FROM Y17_USER WHERE 1=1 ORDER BY USER_NO) 
    LOOP 
      PIPE ROW(DATE_TEMP(cur.USER_NO, cur.USER_SDATE)); 
    END LOOP; 
    RETURN; 
  END; 
  /

步驟四.取得Function內容


  select * from TABLE(get_dates('','')) a;

注意事項一.刪除注意事項
a.刪除時需注意順序(反向刪除)
b.刪除順序如下:


  DROP FUNCTION get_dates;  -- 1 
  DROP TYPE ZEN_DATE_TEMP;  -- 2 
  DROP TYPE ZENHR.DATE_TEMP;  -- 3

.參考資料


  http://www.oracle-base.com/articles/9i/PipelinedTableFunctions9i.php
  http://download-west.oracle.com/docs/cd/B10501_01/appdev.920/a96624/08_subs.htm#19700

2008年9月30日星期二

HelloWicket

開始接觸wicket的我,先寫些老掉牙程式囉,寫支HelloWicket吧.
參考網站Wicket Examples

首先開始我們需要的元件有以下幾項
1.Windows XP 或以上版本
2.JDK 1.5 (下載 Java)
3.Tomcat 5.5 (下載 Tomcat)
4.Wicket 1.2.6 或以上版本 (下載 Wicket)
5.Eclipse 3.3 或以上版本 (下載 Eclipse)

安裝好以上版本,就可以開始寫第一支Wicket程式.

步驟一.先在Eclipse建好一個測試專案(WicketExamples)
步驟二.修改web.xml


    <web-app>
    .............
    <servlet>
      <servlet-name>webApplication</SERVLET-NAME>
      <servlet-class>
        wicket.protocol.http.WicketServlet
      </SERVLET-CLASS>
      <init-param>
        <param-name>applicationClassName</PARAM-NAME>
        <param-value>
          wicket.examples.WicketApplication
        </PARAM-VALUE>
      </INIT-PARAM>
      <load-on-startup>1</LOAD-ON-STARTUP>
    </servlet>
    <servlet-mapping>
      <servlet-name>webApplication</SERVLET-NAME>
      <url-pattern>/main/*</URL-PATTERN>
    </SERVLET-MAPPING>
    .............
    </web-app>

步驟三.將wicket.jar檔放在lib目錄夾中
步驟四.新增HelloWicket.html


      <html>
        <body>
          <div wicket:id="hello" >這裡顯示Hello Wicket </div>
        </body>
      </html>

步驟五.新增HelloWicket.java


package wicket.examples.hellowicket;

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;

public class HelloWicket extends WebPage {

  public HelloWicket(){
    super();
    add(new Label("hello","Hello Wicket"));
  }
}

步驟六.新增WicketApplication.java


package wicket.examples;

import wicket.examples.hellowicket.HelloWicket;
import wicket.protocol.http.WebApplication;

public class WicketApplication extends WebApplication {

  @Override
  public Class getHomePage() {
    return HelloWicket.class;
  }

}

步驟七.建立Tomcat service並開啟Service
步驟八.打開IE執行以下網址,可看見Hello Wicket字樣
http://localhost:8083/WicketExamples/main