木茂佐平にっき

ZK:グリッドに追加した最後の行を必ず見えるようにする

2011-08-19T11:53:00.011+09:00

Clients.scrollIntoView(component)メソッドを使うことで、親エレメントをスクロールし、指定したエレメントを見えるようにすることができます。元ネタ


--- zul ---

<window title="動的に追加した最後の行を必ず見えるようにする方法" border="normal"

                     apply="ctrl.MyCtrl" width="350px">

    <grid height="50px">

        <rows id="rows" />

    </grid>

    <button label="行を追加" id="addBtn" />

</window>


--- java ---

public class MyCtrl extends GenericForwardComposer {

    private Rows rows;

    private static int count=0;

    @Override

    public void doAfterCompose(Component comp) throws Exception {

        super.doAfterCompose(comp);

    }



    public void onClick$addBtn(){	

        count++;

        Row row =new Row();

        row.appendChild(new Label("new"+count));

        row.setParent(rows);

        Clients.scrollIntoView(row);		

    }

}

Javaコントローラ内でJavaScriptコードをコールする

2011-08-09T13:05:00.004+09:00

元ネタ

JavaのコントローラからJavaScriptのコードを実行させることが必要になるケースがあるかもしれません。例えばサーバ・プッシュを使い下記の様な処理をする場合が考えられます。
サーバ・サイドでイベントを発行する

そのイベントは専用のスレッドで操作される

そのスレッドの中からなにがしかのJava Script関数をコールしたい
こんな時はこんな風に!! Clients.evalJavaScript("alert('Hello World!')); 簡単でしょ?


--- zul --

<window title="JavaコントローラからJavaScript関数をコールする" 

       apply="zkexamples.ViewController2"  border="normal" width="350px">

      <button id="btn" label="click"  />                  

</window>


--- java ---

public class ViewController2 extends GenericForwardComposer {

    public void onClick$btn(Event event){

        Clients.evalJavaScript("alert('Hello world!');");	

   }

   public void doAfterCompose(Component comp) throws Exception {

        super.doAfterCompose(comp);

    }	

}

ZK: JavaScriptからJavaコントローラのメソッドをコールする

2011-08-01T17:27:00.005+09:00

JavaScriptからコントローラ内のJavaメソッドをコールするときは、JavaScript内で親コンポーネントに対しイベントを送り、親コンポーネントのイベントハンドラでコールしたいJavaメソッドを呼び出すようにします。

サーバにイベントを送るJavaScript関数


   function callJavaMethod(){
       zAu.send(new zk.Event(zk.Widget.$(this), 'onLinkClicked', 'Parameter'));
   }

    zk.Widget.$(this)    => 親コンポーネント(この場合は "rootwindow"を指す)
    'onLinkClicked'      => 送出するイベントを処理するコントローラのイベントハンドラメソッド名
    'Parameter'          => イベントハンドラへ渡すパラメータ。(オプション)
                             ※イベントハンドラ内で Event event を ForwardEventにキャストし
                               getOrigin().getData()でパラメータの値を取得できる。

JavaScriptから送出されたイベントのイベントハンドラメソッド


    public void onLinkClicked$rootwindow(Event event){
        someJavaMethod();
   }


--- zul ---
<window id="rootwindow" 
    title="JavaScriptからJavaコントローラのメソッドをコールする" border="normal" 
                          apply="zkexamples.calljavafromjavascript.ViewController">
   <html><![CDATA[
    <script type="text/javascript">
      function callJavaMethod(){
       zAu.send(new zk.Event(zk.Widget.$(this), 'onLinkClicked', 'Parameter'));
    }
    </script>
    <a href="#" onClick="callJavaMethod();">Click me</a>
    ]]></html>
</window>


--- java ---
public class ViewController extends GenericForwardComposer {

    // JavaScriptからイベントハンドラを経由してコールされるコントローラのメソッド
    private void callMe() {
        alert("Hello JavaScript, this is Java!");
    } 
   
    // コントローラのイベントハンドラ名の最後に親コンポーネント名をつけること忘れないこと!!
    public void onLinkClicked$rootwindow(Event event){
        ForwardEvent fevent = (ForwardEvent)event;
        System.out.println(fevent.getOrigin().getData()); 
        callMe();
    }
}

ZK: Fileアップロードサンプル

2011-07-22T14:51:00.017+09:00

ZKForum のこのスレッドで紹介されていたヘルパークラスを使い、アップロードされたファイルをサーバに格納するサンプルです。


簡単な使い方:
--- zul ---
<button id="uploadBtn" label="Upload file" upload="true,maxsize=300"/>

--- java ---
public void onUpload$uploadBtn(UploadEvent event) throws InterruptedException {
    org.zkoss.util.media.Media media = event.getMedia();  
    Medias.saveToFile(media, "/path/to/save");;
}

ソース


ヘルパークラス
--- Medias.java ---
import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.Reader;
import java.io.StringReader;

import org.apache.commons.io.IOUtils;
import org.zkoss.util.media.Media;


public class Medias {
 
 public static File saveToFile(Media media, String path) {
    try {
       File file = new File(path + File.separator + media.getName());
       OutputStream output = new FileOutputStream(file);
       if (media.isBinary()) {
           InputStream input = Medias.asStream(media);
           IOUtils.copy(input, output);
           input.close();
       } else {
           Reader input = Medias.asReader(media);
           IOUtils.copy(input, output);
           input.close();
       }
       output.close();
       return file;
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
}

public static String asString(Media media) {
    try {
        String result = null;
        if (media.isBinary()) {
        InputStream input = Medias.asStream(media);
        result = IOUtils.toString(input);
        input.close();
    } else {
        Reader reader = Medias.asReader(media);
        result = IOUtils.toString(reader);
        reader.close();
    }
        return result;
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
}

private static InputStream asStream(Media media) {
    return new BufferedInputStream(
        media.inMemory() ?  
            new ByteArrayInputStream(media.getByteData()): media.getStreamData());
    }

private static Reader asReader(Media media) {      
    return new BufferedReader(media.inMemory() ? 
           new StringReader(media.getStringData()) : media.getReaderData());
    }
}


ビュー
--- fileupload.zul ----
<?page title="ファイルアップロード" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="ファイルアップロード" border="normal" apply="sample.ctrl.UploadCtrl ">
  <button id="uploadBtn" label="Upload file" upload="true,maxsize=300" />
  <separator />
  <image id="img" />
  <separator />
  <label id="msgLbl" />

</window>
</zk>


コントローラ
--- FileUploadCtrl.java ---
public class FileUploadCtrl extends GenericForwardComposer {
private Label msgLbl;
    private Image img;

    public void onUpload$uploadBtn(UploadEvent event) throws InterruptedException  {    
        msgLbl.setValue("");
        org.zkoss.util.media.Media media = event.getMedia();  

        if(media == null){
            msgLbl.setValue("ファイルを選択してください。");
            return;
         }

         if (media instanceof org.zkoss.image.Image) {
              org.zkoss.zul.Image image = new org.zkoss.zul.Image();
              image.setContent((org.zkoss.image.Image)media);
              image.setParent(img);
         }

         Medias.saveToFile(media, "/path/to/save");;
    }
}

ZK: コミュニティ・エディションで Captchaを使う

2011-07-16T10:39:00.013+09:00

ZK コミュニティ・エディション(CE)では残念ながらCaptchaコンポーネントを利用することができません。
しかし SimpleCaptcha を用いることで、CEでも Captchaを簡単に利用することができる方法が ZKforum で紹介されていたのでまとめてみました。

元ネタ

SimpleCaptcha サイトからsimplecaptcha.jarをダウンロードし WEB-INF/libへ配備する。

CaptchaUtils クラスを作成する。


import nl.captcha.Captcha;
import nl.captcha.backgrounds.GradiatedBackgroundProducer;
import nl.captcha.text.renderer.ColoredEdgesWordRenderer;

/**
 * CAPTCHAを作成するユーティリティクラス <br>
 * Captchaは直接 org.zkoss.zul.Imageにロード可能 <br>
 * 
 * <pre>
 * Image img = new org.zkoss.zul.Image();
 * img.setContent(CaptchaUtils.getCaptcha());
 * 
 * String verifyStr = captcha.getAnswer();
 * </pre>
 * 
 * @author Stephan Gerth
 */
public class CaptchaUtils 
    public CaptchaUtils(){
    }

    /**
    * 5桁のキャプチャを作成する
    */
    public static Captcha getCaptcha() {

        Captcha captcha = new Captcha.Builder(140, 50)
                       .addText(new ColoredEdgesWordRenderer()).addNoise()
                       .addBackground(new GradiatedBackgroundProducer())
                       .addBorder()
                       .build();

        return captcha;
    }
}

コントローラクラスを作成する。


public class CaptchaCtrl extends GenericForwardComposer {
    private static final long serialVersionUID = -804655396850565215L;
    private Image img_captcha;
    private Textbox txt_captcha;
    private Captcha captcha;
 

    public void onCreate$win(Event event){
        doReCaptcha();
    }
 
    public void onClick$btn1(Event event){
        if (txt_captcha.getValue().equals(captcha.getAnswer())){
            alert("正しいキャプチャです。"); 
        } else { 
            alert("間違っています!!"); 
       } 
    }

    public void onClick$btn2(Event event){
        doReCaptcha();
    }

    /**
    * キャプチャを再表示する<br>
    * 
    */
    private void doReCaptcha() {
        captcha = CaptchaUtils.getCaptcha();
        img_captcha.setContent(captcha.getImage());
    } 
}

ZULを作成する。


<window id="win"  border="normal" width="350px" 
          title="コミュニティ・エディションでもキャプチャが使えます"  apply="ctrl.CaptchaCtrl" >
    <vlayout id="input" width="100%" >
        <hbox>
            <image id="img_captcha" /> 
            <button label="再表示" id="btn2"/>  
        </hbox>
    キャプチャを入力してください。 
        <textbox id="txt_captcha" hflex="1" width="250px"/>
        <button label="確認" id="btn1"/> 
   </vlayout> 
</window>

ubuntu10.04でeee-controlを動作させる

2010-05-10T18:04:00.004+09:00

連休も終わりUbuntu10.04のダウンロード数も一段落したことと思い、我が愛機Eeepc1005にUbuntu10.04をインストールしてみた。
インストールは相変わらず簡単、黒を基調にしたデスクトップも渋くて気に入った。
eee-controlのインストールがすんなりとはいかなかったのでメモメモ。

・リポジトリを追加
メニューより


 システム>システム管理> ソフトウェア・ソースを選択
      ソフトウェア・ソース画面の[他のソフトウェア]タブを選択
       [追加]をクリック
      APTライン: ppa:eee-control/eee-controlを入力
      [ソースを追加]をクリック

・パッケージをインストール


  $ sudo apt-get install eee-control

・アプリケーション>システムツール>よりEeeControlを起動するが動作しない。

[対処法]
・/etc/default/grub のGRUB_CMDLINE_LINUX_DEFAULTの行の最後に acpi_osi=Linuxを追加する。


 $ sudo vi /etc/default/grub
 #GRUB_CMDLINE_LINUX_DEFAULT="quiet splash"
 GRUB_CMDLINE_LINUX_DEFAULT="quiet splash acpi_osi=Linux"

・GRUBの設定を書き換え、OSを再起動


 $ sudo update-grub
 $ sudo shutdown -r now

動作確認 OK。
キモサベ！！

ruby-oci8からOracleへ接続 CGI文字化け

2009-12-05T11:14:00.002+09:00

http://ruby-oci8.rubyforge.org/ja/InstallForInstantClient.html
を参考にセットアップ

環境
Ubuntu 8.04
Ruby1.8.6
Apache 2.2.8
Oracle Instantclient 11.2
ruby-oci8

環境変数設定
$ export LD_LIBRARY_PATH=/opt/oracle/instantclient_11_2
$ export NLS_LANG=Japanese_Japan.UTF8

でコンソールでは文字化けせずに日本語の入った列もselectできた。
ところが同じスクリプトをCGIから実行すると日本語が文字化けする。


[Fri Dec 04 08:44:47 2009] [error] [client 127.0.0.1] Premature end of script headers: hogehoge.cgi
env.c:257:in oci8lib.so: Error while trying to retrieve text for error ORA-12705 (OCIError)
        from /usr/local/lib/site_ruby/1.8/oci8.rb:229:in `initialize'
        from /usr/local/lib/site_ruby/1.8/hoge/hogehoge.rb:309:in `new'
        from /usr/local/lib/site_ruby/1.8/hoge/hogehoge.rb:309:in `initialize'
        from /var/www/hogehoge.cgi:4:in `new'
        from /var/www/hogehoge.cgi:4

Apacheの起動スクリプトに環境変数を設定してもだめ、検索した結果Apacheの環境変数は
SetEvnディレクティブでセットすることが分かりapache2.confを編集後再起動し無事に日
本語が表示できた。


...
SetEnv LD_LIBRARY_PATH /opt/oracle/instantclient_11_2
SetEnv NLS_LANG Japanese_JAPAN.UTF8
...

/etc/apache2/apache2.conf

Trac:ワークフローをカスタマイズする

2009-07-06T14:58:00.012+09:00

Tracのデフォルトのワークフローは僕にとってあまり直感的ではないのでカスタマイズしてみる。

着手するまでは課題を修正できる。

着手したら解決するだけ。

解決した課題は終了するか、差し戻しにする。

だけのワークフローにしよう。
Tracプロジェクトディレクトリ/conf/trac.iniを編集する。


[ticket-workflow]
revise = new,revised -> revised
revise.name = 課題を修正する
revise.permissions = TICKET_MODIFY

accept = new,revised,reopened -> accepted
accept.name = 着手する
accept.operations = set_owner_to_self
accept.permissions = TICKET_MODIFY

reopen = resolved,closed -> reopened
reopen.operation = del_resolution
reopen.permissions = TICKET_CREATE
reopen.name = 差し戻す

resolve = accepted -> resolved
resolve.name = 解決にする
resolve.operations = set_resolution
resolve.permissions = TICKET_MODIFY

close = resolved -> closed
close.name = 終了にする
close.permissions = TICKET_MODIFY

カスタマイズしたワークフローを画像で確認する。

trac.iniファイルをworkflow_parser.pyで処理して.dotファイルを作成してからGraphvizのdotコマンドでdotファイルを処理し画像ファイルに変換することで視覚化出きるそうだ。

workflow_parser.pyでtrac.iniファイルを処理し.dotファイルを作成する。


Trac-0.11.2.1.ja1/contrib/workflow/workflow_parser.py trac.ini
...
UnicodeEncodeError: 'ascii' codec can't encode ...

どうやらUTF-8でエンコードした日本語をasciiとして扱っているみたい。
http://trac.edgewall.org/ticket/6930 によるとworkflow_parser.py を修正すれば良いようだ。

import locale, codecs を追加し
sys.stdout.write(''.join(digraph_lines))
を
sys.stdout = codecs.getwriter(locale.getpreferredencoding())(sys.stdout);
sys.stdout.write(''.join(digraph_lines))
に修正してから動作確認。


$ workfloe_parser.py trac.ini > trac.dot

今度は無事dotファイルが作成できたようだ。
Graphvizのdotコマンドでdotファイルを処理し画像ファイルに変換する。


$ dot -T png < trac.dot > trac.png

いいじゃないですか！！

ZK: MVC ラベルの日付を和暦で表示する

2008-12-24T14:26:00.000+09:00

DateUserを参考に日付を和暦(元号)で表示する。(Java6)


public class DateUserWAREKI implements TypeConverter {

    @Override
    public Object coerceToBean(Object arg0, Component arg1) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public Object coerceToUi(Object arg0, Component arg1) {
        if (arg0 == null) {
            return null;
        }
        Locale locale = Locale("ja","JP","JP");
        SimpleDateFormat sdf = new SimpleDateFormat("GGGGyy年M月d日", locale);
        Date date = (Date) arg0;
        return sdf.format(date);
    }
}


<listcell label="@{employee.hireDate, converter='org.zkforge.converters.DateUserWAREKI'}"/>

ZK: MVC ラベルの日付をyyyy/MM/dd形式で表示する

2008-12-24T14:23:00.002+09:00

http://www.pichelhofer.at/ZKDemoで紹介されているTypeConverterを利用し日付をロケールに合わせて表示する。

http://www.pichelhofer.at/ZKDemo/src/DateUser.java.html


<listcell label="@{employee.hireDate, converter='org.zkforge.converters.DateUser'}"/>

ZK: MVC 変数selectedにアクセスする

2008-12-24T14:18:00.002+09:00

ビューの変数selectedにコントローラからアクセスする。


public void onClick$selectedBtn(Event e) throws Exception{
   Employee selected =(Employee)win.getVariable("selected", true);
   if (selected != null){
       alert(selected.firstName);
   }
}

ZK: MVC リストボックスをクリアする

2008-12-24T14:16:00.001+09:00

データバインドされているリストボックスをクリアするにはbeanにnullを代入し、
データバインダを使用してデータロードする。


public void onClick$clearBtn(Event e) throws Exception{
    empData = null;
    empListbox.unsetVariable("selected", true);
    binder = (AnnotateDataBinder)page.getVariable("binder");
    binder.loadAll();
}

ZK: MVC 選択を解除する

2008-12-24T14:15:00.003+09:00

unsetVariableメソッドを使いlistboxからselected変数を取り除いた後、
データバインダを使用してデータをロードし直すことでリストボックスの選択を解除し、
明細をクリアできる。

   
 public void onClick$clearSelBtn(Event e) throws Exception{
        empListbox.unsetVariable("selected", true);
        binder = (AnnotateDataBinder)page.getVariable("binder");
        binder.loadAll();
    }

2008-12-24T14:15:00.001+09:00

ZK: MVC

2008-12-10T17:28:00.004+09:00

GenericFowardComposerを拡張したコントローラ・クラスを作成しwindowのapply属性の値に設定すると、イベント・リスナーが自動的に登録されると同時にzulコンポーネントとコントローラのフィールドが自動的に紐つけられる。このためコントローラのコードが非常にすっきり記述できるようになった。

ボタンをクリックすると2個のintboxの値を足し算しlabelへ表示するサンプル
ビュー


<window id="win" title="MVCサンプル" border="normal" width="300px" apply="Controler1">
  <hbox>
    <intbox id="arg1"/> + <intbox id="arg2"/> <button label=" = " id="addBtn" /> <label id = "ans"/>
  </hbox>   
</window>

コントローラ


public class Controler1 extends GenericForwardComposer {
    private Intbox arg1;    //ビューの<intbox id="arg1"/>コンポーネントと自動的に紐付けされる
    private Intbox arg2;    //ビューの<intbox id="arg2"/>コンポーネントと自動的に紐付けされる
    private Label ans;      //ビューの<label id="and"/>コンポーネントと自動的に紐付けされる
   
   // addBtnボタンの onClickイベント・リスナー
    public void onClick$addBtn(Event e) throws Exception{
        ans.setValue(String.valueOf(arg1.getValue() + arg2.getValue()));
    }
}

コントローラでビューのzulコンポーネントと同じ型でidと同じ名称のフィールドを宣言するとzulコンポーネントと自動的に紐つけされる。
onイベント名$コンポーネント名の形でイベント・リスナーを書いておけば自動的に登録され対応するビューのコンポーネントのイベントが処理できる

データバインド
S2JDBCを使いFirebirdに付属のemployeeテーブルをリストと明細で表示するサンプル。

データバインダを利用するにはビューを<?init class="org.zkoss.zkplus.AnnotateDataBinderInit" ?>で初期化する。
バリアブル・リゾルバにorg.zkoss.zkplus.seasar.DelegatingVariableResolverを使用しSeasar変数jdbcManagerを利用できるようにする。

ビュー


<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<window id="win" title="Employee" border="normal" width="300px" apply="MyControler">
      <listbox id="empListbox" width="200px" rows="10" multiple="true"  height="100%"
        checkmark="true" model="@{controler.empData}" selectedItem="@{selected}">
        <!--
          controlerはMyControlerのdoAfterComposeメソッドでWindow変数に追加されている。
               aWindow.setVariable("controler", this, true); //aWindowはdoAfterComposeの引数
          empDataはcontrolerで定義されているList<Employee>型のプロパティ
         -->
        <listhead>
            <listheader label="姓" />
            <listheader label="名" />
       </listhead>
        <listitem self="@{each=employee}">
            <listcell label="@{employee.lastName}"/>
            <listcell label="@{employee.firstName}"/>
        </listitem>
    </listbox>
  <vbox>
    <hbox>姓: <label value="@{selected.lastName}"/></hbox>
    <hbox>名:<label value="@{selected.firstName}"/></hbox>
    <hbox>内線番号: <label value="@{selected.phoneExt}"/></hbox>
    <hbox>入社日:<label value="@{selected.hireDate}"/></hbox>   
  </vbox>
</window>

コントローラ


public class MyControler extends GenericForwardComposer {
    private List<Employee> empData;
    private JdbcManager jdbcManager; //super.doAfterComposeのコール後Seasar変数と自動で紐付けされる
 
    @Override
    public void doAfterCompose(Component aWindow) throws Exception {
        super.doAfterCompose(aWindow);

        // 自分自身をwindowの変数に追加するとビューからアクセス可能なオブジェクトになる。
        aWindow.setVariable("controler", this, true);
        empData = jdbcManager.from(Employee.class).getResultList();
    }

    //zulのListboxのmodelプロパティには controler.empData を設定する
     public List<Employee> getEmpData() {
         return empData;
    }
}

ZK: forEach属性のeach変数の値へコンポーネント生成後にアクセス

2008-12-05T12:43:00.000+09:00

コンポーネントのeach属性はforEach属性で配列を使用してコンポーネントを表示するときに使われる一時変数なので、あとからonXXXイベント等でこの値にアクセスしたい場合はコンポーネントを表示すると同時にcustom-attributesを使用しeachの値を保存して置く。


<window  width="100%">  
  <zscript>
    // コンポーネントのforEach属性を利用して生成するボタンの国名ラベルの配列
   String[] countries = {"China", "France", "Germany", "United Kindom", "United States", "Japan"};
  </zscript>
  <hbox>
    <button label="${each}" forEach="${countries}">
      <!-- eachの値をcustom-attributesのcountryに保存する -->
     <custom-attributes country="${each}"/>
     <attribute name="onClick">
       {
       //countryにアクセスする。
       alert(componentScope.get("country"));
       }              
     </attribute>
    </button>
  </hbox>
</window>

ZK: Listitemのフォントサイズを変更する

2008-12-04T12:45:00.002+09:00


<style> 
  div.cell-inner{ 
  font-size:xx-small;
  //font-size:xx-large;
} 
</style>

ZK: 小文字の入力時に自動で大文字に変換するtextbox

2008-12-04T12:37:00.003+09:00

小文字の入力が入力と同時に大文字に変換される。


<textbox style="text-transform:uppercase" id="idx" />

ZK: Textboxのテキストを選択状態にする

2008-12-03T12:42:00.000+09:00


<window title="Button window" border="normal">
  <vbox>  
  <button label="Left" width="125px">  
    <attribute name="onClick">  
      Messagebox.show("Textboxのテキストを選択状態にします"); 
       txt.focus(); 
       txt.setSelectionRange(0, txt.getText().length());  
    </attribute>  
  </button>  
  <textbox id="txt" value="123456"/>  
  </vbox>  
</window>

ZK: Window幅のリサイズに自動で追随するリストボックス

2008-12-03T12:38:00.002+09:00

listboxのfixedLayoutプロパティをtrueにするとwindowのリサイズに合わせ列幅を自動調整する。


<window  title="Window幅のリサイズに自動で追随するリストボックス" 
          width="300px"  height="100px" id="win" sizable="true" mode="modal">
<button label="FILL" onClick="fillList()"/>
<zscript>
public void fillList(){
  Listitem item = new Listitem();
  new Listcell("Cell Data 1").setParent(item);
  new Listcell("Cell Data 2").setParent(item);
  new Listcell("Cell Data 3").setParent(item);

  item.setParent(lbx);
}
</zscript>
<listbox width="100%" id="lbx" fixedLayout="true">
<listhead sizable="true">
<listheader label="Column 1" />
<listheader label="Column 2" />
<listheader label="Column 3" />
</listhead>
</listbox>
</window>

ZK: タイムアウト時間を設定する

2008-12-02T12:21:00.003+09:00

WEB-INF/zk.xmlでタイムアウト時間を設定することができる。


<zk>
 <desktop-config>
   <desktop-timeout>3600</desktop-timeout> <!--秒単位、マイナスはタイムアウト無し。 -->
 </desktop-config>
</zk>

ZK: no empty制約付きのテキストボックスをクリアする

2008-12-02T12:17:00.004+09:00

no empty制約付きのテキストボックスをクリアするときは
textbox.setRawValue("")を使用すると制約を回避しテキストボックスをクリアできる。


<window title="no empty制約付きのテキストボックスをクリアする"
              width="300px" height="200px" border="normal">
<zscript><![CDATA[
 public void save(){
   alert("テキストボックスの値 "+tb1.value+" を保存しました。");
   tb1.setValue("");      //no empty制約にひっかかりクリアできない
   //tb1.setRawValue(""); //制約を回避しクリアできる。
 }
]]></zscript>
 <vbox>
    <textbox id="tb1" constraint="no empty" ></textbox>
    <button label="保存" onClick="save()" />
 </vbox>
</window>

ZK: Windowをスクリーントップを越えて移動させない

2008-12-01T13:00:00.001+09:00


<window id="win" border="normal" title="隠れません！！"
  mode="overlapped" width="350px" onMove="resetTop()">
 <zscript><![CDATA[
   void resetTop(){
     String top = win.getTop();
     if (top != null){
       float winTop = Float.parseFloat((top.substring(0,top.lastIndexOf("px"))));
       if (winTop < 0.0){
         win.setTop(0 + "px");
       }
     }
  }
 ]]></zscript>

  <label value="ウィンドウはスクリーントップを越えて上には移動しません！！"/>
</window>

ZK: 親ウィンドウの中だけ移動するパネル

2008-12-01T12:48:00.005+09:00

パネルを親ウィンドウの中だけしか移動できないようにするには親ウィンドウでcontentStyle="position:relative;"を指定する。


<window width="500px" height="200px" title="親ウィンドウ
contentStyle="position:relative;"" border="normal"
                                      contentStyle="position:relative;" >
 <panel id="panel" height="100px" width="300px" title="親ウィンドウの中だけ移動するパネル" 
      maximizable="true" border="normal"  collapsible="true" floatable="true" movable="true">
   <panelchildren>
      最大化しても親ウィンドウの中に収まります。

   </panelchildren>
 </panel>
</window>

ZK: リストボックスの行の背景色をカスタマイズする

2008-12-01T12:45:00.001+09:00


<style>
/* 偶数行の背景色 */
tr.z-list-item, tr.z-row td.z-row-inner, tr.z-row td.z-group-inner,
tr.z-row td.z-group-foot-inner, tr.z-row {
background: #EEEEEE none repeat scroll 0 0;
}

/* 奇数行の背景色 */
tr.odd td.gc, tr.odd, tr.z-listbox-odd, tr.z-grid-odd td.z-row-inner,
tr.z-grid-odd {
background: #FFFFFF none repeat scroll 0 0;
}
/* 選択されていない行の上をマウスが通過する時の背景色 */
tr.overd, td.overd, tr.z-list-item-over {
background: #D3DBFC none repeat scroll 0 0;
}
/* 選択された行の背景色 */
tr.seld, td.seld, tr.z-list-item-seld {
background: #B8BFDC none repeat scroll 0 0;
}
/* 選択された行の上をマウスが通過する時の背景色 */
tr.overseld, td.overseld, tr.z-list-item-over-seld {
background: #D3DBFC none repeat scroll 0 0;
}
</style>

ZK: リクエスト・パラメータを取得する

2008-12-01T12:40:00.004+09:00


<window  title="リクエスト・パラメータの取得" 
         width="250px" height="200px" border="normal">
  <label value="${param.q}"/>
</window>

ZK: Borderlayout 折り畳みアイコン表示

2008-12-01T12:29:00.009+09:00

Boderlayoutの子コンポーネントはcollapsible="true"で折り畳めるようになるが、折り畳みアイコンを表示させるにはtitleを設定しタイトルバーを表示する必要がある。


<borderlayout height="500px">
<north title="「折り畳みアイコン」を表示するには何かタイトルが必要  →" 
  size="20%" splittable="true" collapsible="true"/>
  <east size="20%" splittable="true" collapsible="true"/>
  <center border="normal"/>
  <west title="→" size="20%" splittable="true" collapsible="true"/>
  <south size="30%" border="normal" splittable="true" collapsible="true"/>
</borderlayout>

ZK: Pagingコンポーネントでライブデータ表示

2008-06-21T10:18:00.015+09:00

Smalltaksの記事Use Load-On-Demand to Handle Huge Dataを試してみました。
リストボックスに一度に大量なデータを表示するとWEBアプリにもサーバにも大きな負担がかかります。
Pagingコンポーネントを明示的に使いオンデマンドでページ単位にクエリーを実行し、取得したライブデータでリストボックスの表示を効果的に処理する方法が紹介されていました。


<window
  title="Listbox with Paging Performance using ZK version: ${desktop.webApp.version}"
  border="normal" use="sample.ui.EmployeeUI"
  xmlns:zk="http://www.zkoss.org/2005/zul"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
  <zk:toolbarbutton href="/" label="Back" />
  <zk:listbox id="listEmployee" width="350px" checkmark="true">
    <zk:listhead sizable="true">
      <zk:listheader label="ID" sort="auto" />
      <zk:listheader label="Full Name" sort="auto" />
      <zk:listheader label="User Name" sort="auto" />
    </zk:listhead>
   </zk:listbox>
   <!-- 明示的にpagingコンポーネントを使用する。  -->
   <zk:paging id="pageEmployee" pageSize="30" />
</window>

Windowを継承したクラスでインターフェースAfterComposeを実装します。
afterComposeメソッドでは

データのトータル行数をセット

最初のページにデータを表示

pagingコンポーネントに onPaging イベントリスナを登録
を行います。


public class EmployeeUI extends SimpleWindow implements AfterCompose {
  private final String LISTBOX_ID= "listEmployee";  //zulファイルの listbox コンポーネントの id
  private final String PAGING_ID = "pageEmployee";  //zulファイルの paging コンポーネントのid
  private JdbcManager jdbcManager;   //Seasar変数

  public EmployeeUI(){
      DelegatingVariableResolver variableResolver = new DelegatingVariableResolver();
      jdbcManager = (JdbcManager)variableResolver.resolveVariable("jdbcManager");
  }
 
  /**
   *  AfterComposeインターフェースのafterComposeメソッドはコンポーネント作成段階で処理される。
   *  コンポーネントを作成した直後に初期化できパフォーマンスの改善に役立つ。
   *
   */
  public void afterCompose() {
    Paging page = getPaging(PAGING_ID);

    //データのトータル行数を取得  
    page.setTotalSize((int)jdbcManager.from(Employee.class).getCount());

    final int PAGE_SIZE = page.getPageSize();

    // Listboxに最初のページを表示 オフセット--0  行数---PAGE_SIZE
    redraw(0, PAGE_SIZE);

    // onPagingイベントリスナの登録 決まり文句 
    page.addEventListener("onPaging", new EventListener() {
      public void onEvent(Event event) {
        PagingEvent pageEvent = (PagingEvent) event;
        int pageNo = pageEvent.getActivePage();
        int offset = pageNo * PAGE_SIZE;

        // クリックされたページ番号でライブデータを取得し再表示
        redraw(offset, PAGE_SIZE);
      }
    });

  }


  /**
   * afterCompose及びonPagingイベントリスナから呼び出されListboxを描画する。
   * コールされる度にクエリを実行しデータベースからライブデータを取得する。
   *  
   * @param firstResult オフセット
   * @param maxResults  行数
   */
  private void redraw(int firstResult, int maxResults) {
    Listbox listBox = getListbox(LISTBOX_ID);
    listBox.getItems().clear();
  
    // データ取得
    List<Employee> emps = jdbcManager.from(Employee.class)
                            .orderBy("id")  // 問い合わせ結果をページングするにはorder by が必要
                            .offset(firstResult)
                            .limit(maxResults)
                            .getResultList();
    // 表示  
    for (Employee employee : emps) {
      Listitem li = new Listitem();
      li.setValue(employee);  
      li.appendChild(new Listcell("" + employee.id));
      li.appendChild(new Listcell(employee.fullname));
      li.appendChild(new Listcell(employee.username));
      listBox.appendChild(li);
    }
  }
}

大量なデータでも paging コンポーネントを用いライブデータで処理を行うとアプリの動作は非常に軽快ですね。

ZK: Spreadsheet

2008-06-01T13:04:00.018+09:00

以前から気になっていたZK Spreadsheetをいじってみました。ZK SpreadsheetではあらかじめExcelで作成しておいた表のテンプレートを読み込むことでZKのコンポーネントとして操作可能になるようです。つまり使い慣れたエクセルファイルがそのままZKのコンポーネントになるんですね。
Integrate ZK Spreadsheet with Springを元ネタにしてZK SpreadsheetとSeasarの統合を試して見ました。
まずはZssSpring.warをダウンロードし動作確認。

次にデモと同じ表示をさせるようにテーブルを作成。


create table FinancialData (
  fyear integer,
  fquarter integer,
  item char(10),

  liquidAssets decimal(10, 0),
  fundInvestment decimal(10, 0),
  fixedAssets decimal(10, 0),
  intangibleAsset decimal(10, 0),
  otherAssets decimal(10, 0),

  currentLiabilities decimal(10, 0),
  longTermLiabilities decimal(10, 0),
  otherLiabilities decimal(10, 0),

  capitalStock decimal(10, 0),
  capitalSurplus decimal(10, 0),
  retainedEarnings decimal(10, 0),
  otherEquity decimal(10, 0),
  treasuryStock decimal(10, 0)

);


insert into FinancialData(
  fyear,
  fquarter,
  item,

  liquidAssets,
  fundInvestment,
  fixedAssets,
  intangibleAsset,
  otherAssets,

  currentLiabilities,
  longTermLiabilities,
  otherLiabilities,

  capitalStock,
  capitalSurplus,
  retainedEarnings,
  otherEquity,
  treasuryStock
)values(
2007,
1,
'Quarter',
146504221,
23181709,
7168392,
221426,
2270018,

102515784,
3000,
456175,

33630080,
7127901,
34420905,
1826731,
-634810
);
...

Bean作成
キャメルケースでテーブルを作るとBeanの作成時にテーブル名と列名を一々指定しなければ
ならなかった(^^;;


package churazk.entity;
import java.math.BigDecimal;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;

@Entity
@Table(name="FINANCIALDATA")
public class FinancialData {
 @Column(name="fYear")
 public Integer fYear;
 
 @Column(name="fQuarter") 
 public Integer fQuarter;

 @Column(name="item")
 public String item;

 @Column(name="liquidAssets")
 public BigDecimal liquidAssets;

 @Column(name="fundInvestment")
 public BigDecimal fundInvestment;
 
 @Column(name="fixedAssets")
 public BigDecimal fixedAssets;

 @Column(name="intangibleAsset")  
 public BigDecimal intangibleAsset;
   
 @Column(name="otherAssets")
 public BigDecimal otherAssets;

 @Column(name="currentLiabilities")  
 public BigDecimal currentLiabilities;
   
 @Column(name="longTermLiabilities")
 public BigDecimal longTermLiabilities;
   
 @Column(name="otherLiabilities")
 public BigDecimal otherLiabilities;

 @Column(name="capitalStock")  
 public BigDecimal capitalStock;
   
 @Column(name="capitalSurplus")
 public BigDecimal capitalSurplus;
   
 @Column(name="retainedEarnings")
 public BigDecimal retainedEarnings;
   
 @Column(name="otherEquity")
 public BigDecimal otherEquity;
   
 @Column(name="treasuryStock")
 public BigDecimal treasuryStock; 
}

つづいてzulファイルを編集。


<?xml version="1.0" encoding="UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<window>
Quarter:
  <listbox id="quarter" mold="select" rows="1" onSelect="refreshQuarter()">
   <listitem value="0" label="Select"/>
   <listitem value="1" label="Quarter 1"/>
   <listitem value="2" label="Quarter 2"/>
   <listitem value="3" label="Quarter 3"/>
   <listitem value="4" label="Quarter 4"/>
  </listbox>
Style:
  <listbox id="style" mold="select" rows="1" onSelect="changeStyle()">
   <listitem label="Style 1" value="/BalanceSheet.xls"/>
   <listitem label="Style 2" value="/NewSheet.xls"/>
  </listbox>
<zscript>
 import churazk.entity.FinancialData;
 import org.seasar.extension.jdbc.where.SimpleWhere;
 
  FinancialData reloadQuarter(int quarter){
     FinancialData bean = jdbcManager.from(FinancialData.class)
                        .where(new SimpleWhere()
                                .eq("fYear", 2007)
                                .eq("fQuarter", quarter)
                         )
                        .getSingleResult();
 
     return bean;
  }
 
  void refreshQuarter() {
     Listitem listitem = quarter.getSelectedItem();
     int quarter = Integer.parseInt(listitem.value);
     //Call the method to reload data
     dataBean = reloadQuarter(quarter);
     //Call the method to refresh values of cells
     balance.book.notifyChange(new String[]{"dataBean"});
 }
 
 void changeStyle() {  //Change the URL of spreadsheet
    balance.url = style.getSelectedItem().value;
 }
 
 dataBean = reloadQuarter(0);
</zscript>
 <spreadsheet id="balance" url="/BalanceSheet.xls" maxrow="40" maxcolumn="20" height="600px" width="1300px"/> 
</window>

スプレッドシートデモのWEB-INF/libより次のファイルをプロジェクトWEB-INF/libへインポート


commons-math-1.2.jar
jxl.jar
zss.jar
zssex.jar
zssjxl.jar

プロジェクトのWEBルートにBalanceSheet.xlsとNewSheet.xlsを配置して実行

ZKコンポーネントとは言えExcelシートにビーンの値が表示され不思議な感じです、でもとても使い勝手がよさそうなコンポーネントです。

動作環境

OS: Ubuntu 8.04

JDK: 1.6.0_04

Tomcat: apache-tomcat-6.0.16

Eclipse: Europa wtp-all-in-one-sdk

ZK: zk-3.0.5

Seasar: DoltengプラグインよりChuraプロジェクト(Teeda+S2Dao)として

S2JDBC関連: sa-struts-tutorial-1.0.2-rc4.zipより


       geronimo-jpa_3.0_spec-1.0.jar
       geronimo-ejb_3.0_spec-1.0.jar
       s2jdbc.dicon

web.xml追加


<!-- ZK -->
  <listener>
    <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
  </listener>
  <servlet>
     <servlet-name>zkLoader</servlet-name>
     <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
     <init-param>
        <param-name>update-uri</param-name>
        <param-value>/zkau</param-value>
     </init-param>
     <load-on-startup>1</load-on-startup><!-- Must -->
  </servlet>
  <servlet-mapping>
     <servlet-name>zkLoader</servlet-name>
     <url-pattern>*.zul</url-pattern>
  </servlet-mapping>

  <servlet>
     <servlet-name>auEngine</servlet-name>
     <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
  </servlet>
  <servlet-mapping>
     <servlet-name>auEngine</servlet-name>
     <url-pattern>/zkau/*</url-pattern>
  </servlet-mapping>

  <!-- Miscellaneous -->
  <session-config>
     <session-timeout>120</session-timeout>
  </session-config>
<!-- ZK -->

ZK: jdbcManager Seasar変数(3)

2008-03-11T13:30:00.017+09:00

jdbcManagerを使いながらデザインとロジックを分離したいときは
こんな感じでいけそうです。

listboxのモデルにEmpWindowのプロパティemps、selectedItemにselectedをセットします。


...
<window id="win" title="Emplyee list" use="zkseasar.view.EmpWindow">
<listbox id="lb" model="@{win.emps}" selectedItem="@{win.selected}">

EmpWindow.java


public class EmpWindow extends Window {
  private JdbcManager jdbcManager;
  private List<Emp> emps;
  private Emp selected;

  public EmpWindow(){
      DelegatingVariableResolver variableResolver = new DelegatingVariableResolver();
      jdbcManager = (JdbcManager)variableResolver.resolveVariable("jdbcManager");

      emps = jdbcManager.from(Emp.class)
                        .where("sal between ? and ?", 2000, 3000)
                        .orderBy("sal").getResultList();
  }

  public List<Emp> getEmps(){
     return emps;
  }

  public void setSelected(Emp emp){
      selected = emp;
  }

  public Emp getSelected(){
      return selected;
  }


 /*
 * listboxにempを追加する
 * http://sourceforge.net/forum/message.php?msg_id=4752395
 */
  public void addEmp(Emp emp){
     Listbox lb = ((Listbox) getFellow("lb"));
      ((ListModelList) lb.getModel()).add(emp);
 }
}

ZKをSeasarと組み合わせるとデータベースアクセスはjdbcManagerの使いかただけ知っていればいいみたいですね。

ZK: jdbcManager Seasar変数(2)

2008-03-11T13:21:00.004+09:00

可変長引数を持つメソッドはzscriptでは使用できないようです。


<zscript>
  import zkseasar.entity.Emp;
  emps = jdbcManager.from(Emp.class)
                     .where("sal >= ?", 2000)
                     .orderBy("sal")
                     .getResultList();
</zscript>

上記のスクリプトを実行すると次のエラーメッセージを吐いてしまいます。

致命的: サーブレット zkLoader のServlet.service()が例外を投げました
org.zkoss.zk.ui.UiException: Sourced file: inline evaluation of: ``import zkseasar.entity.Emp;
emps = jdbcManager.from(Emp.class) . . . '' :
Error in method invocation: Method where( java.lang.String, int ) not found in class'org.seasar.extension.jdbc.query.AutoSelectImpl' :

検索条件を指定するときはSQL文字列ではなくSimpleWhereが使えます。


<zscript >
  import zkseasar.entity.Emp;
  import org.seasar.extension.jdbc.where.SimpleWhere;
  emps = jdbcManager.from(Emp.class)
                        .where(new SimpleWhere()
                                .ge("sal", 2000)
                         )
                        .orderBy("sal")
                        .getResultList();
</zscript>

Rubyからは可変長引数を持つJavaメソッドでも呼び出せるか試してみました。


<zscript language="ruby">
   import 'zkseasar.entity.Emp'
    emps = $jdbcManager.from(Java::ZkseasarEntity::Emp:Class).
                     where("sal >= ?", 2000).
                     orderBy("sal").
                     getResultList()
    
   emps.each{|emp| print emp.deptId, "\t", emp.empName, "\t", emp.sal, "\n"}
</zscript>

やはりダメですね。

致命的: サーブレット zkLoader のServlet.service()が例外を投げました
:1: no where with arguments matching [class java.lang.String, class java.lang.Long]
on object JavaUtilities (NameError)
...internal jruby stack elided...

ZK: jdbcManager Seasar変数

2008-03-11T13:06:00.008+09:00

DelegatingVariableResolverでZKから直接jdbcManagerが使えるんですね。

emp.zul



<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd ">
<zscript >
 import zkseasar.entity.Emp;
 emps = jdbcManager.from(Emp.class)
                   .orderBy("sal")
                   .getResultList();
</zscript>
<window title="Emplyee list" >
 <listbox model="@{emps}">
     <listhead>       
       <listheader label="id"/>
       <listheader label="Emp no"/>
       <listheader label="Emp name"/>
       <listheader label="Hiredate"/>
       <listheader label="Sal"/>
       <listheader label="Dept id"/>
       <listheader label="Version no"/>
   </listhead>   
   <listitem self="@{each=emp}">
     <listcell label="@{emp.id}"/>
     <listcell label="@{emp.empNo}"/>     
     <listcell label="@{emp.empName}"/>
     <listcell label="@{emp.hiredate}"/>
     <listcell label="@{emp.sal}"/>
     <listcell label="@{emp.deptId}"/>
     <listcell label="@{emp.versionNo}"/>                 
   </listitem>
 </listbox>
</window>
</zk>

これは楽ちん！！

java.util.Date および java.util.Calendar 型のプロパティには時制を指定する必要があるそうです。
EmpクラスのhiredateプロパティはDate型なので@Temporalを使い時制にTemporalType.DATEを指定します。

Emp.java


public class Emp {
..
 @Temporal(TemporalType.DATE)
 @Column(name = "HIREDATE")
 public Date hiredate;
..

ZK: データバインディング

2007-12-24T10:42:00.000+09:00

selectRainfallAvgメソッドを実行し作成したListをZKのListboxコンポーネントにデータバインドします。
まず<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>でデータバインダーを初期化します。
Seasarコンポーネントを生成後selectRainfallAvgメソッドを実行しrainfallAvgを作成します。
model="@{rainfallAvg}"でZKのListboxとJavaのListを関連付けるとロード時にデータバインダーによってJavaのListからZKのListModelに変換されます。
selectedItem="@{selected}"は選択された行に対応したビーンに関連付けられた変数selectedを準備します。選択された行を明細表示するのに変数selectedのプロパティが利用出来ます。
self="@{each=rainfall}"はListの各行に対応したビーンをrainfallと言う名前で関連付けます。


<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://www.zkoss.org/2005/zul/zul.xsd ">
<window title="東京 年間降雨量デモ" width="500px" border="normal">
<zscript>
  import org.seasar.framework.container.SingletonS2Container;
  rainStatsService = SingletonS2Container.getComponent("rainStatsService");
  rainfallAvg = rainStatsService.selectRainfallAvg();
</zscript>
  <listbox model="@{rainfallAvg}" id="rainfallListbox" rows="5" selectedItem="@{selected}">
     <listhead>    
      <listheader label="年度"/>        
      <listheader label="平均降雨量(mm)"/>
    </listhead>    
    <listitem self="@{each=rainfall}">
      <listcell label="@{rainfall.year}"/>
      <listcell label="@{rainfall.average}"/>
    </listitem>
  </listbox>
  <vbox>
    <hbox>年度: <label value="@{selected.year}"/></hbox>
    <hbox>平均降雨量:<label value="@{selected.average}"/></hbox>
  </vbox>
</window>
</zk>

次のメソッドを実行するとデータベースからリロードすることができます。


void refreshRainfallListbox(){
  List list = rainfallListbox.getModel();
  list.clear();
   list.addAll(rainStatsService.selectRainfallAvg());
}

Seasar: S2JDBC 外出しSQL

2007-12-23T11:50:00.000+09:00

ZK + Seasar:JFreeChartで使った降雨量の年間平均をS2JDBCの外出しSQLで求めてみました。

年と平均降雨量を格納するDTOを作成します。


package zkseasar.dto;

public class RainfallAvgDto {
    public Integer year;
    public Double average;
}

RainStatsServiceに年間平均降雨量を取り出すメソッドを追加します。
DTOのプロパティ名とSQLのカラム名を統一するだけでSQLを実行した結果がDTOへ自動的にマッピングされるようです。


...
public List selectRainfallAvg(){
    return jdbcManager.selectBySql(RainfallAvgDto.class, 
             " select year, avg(rainfall) as average" +
             " from rain_stats " +
             " group by year " +
             " order by year ")
           .getResultList();
}
...

S2TestCaseを継承したクラスを作り動作確認します。
EclipseのメニューからRun>Debug As>JUnit Testで実行できます。


public class RainStatsServiceTest extends S2TestCase {
    private JdbcManager jdbcManager;

    protected void setUp() throws Exception {
        include("app.dicon");
    }

    public void testSelectRainfallAvg() throws Exception {
     RainStatsService  rainStatsService =  
         SingletonS2Container.getComponent("rainStatsService");
   
     List results = 
       rainStatsService.selectRainfallAvg();   
     for (RainfallAvgDto dto : results) {
         System.out.println(dto.year + ":"+ dto.average);
     }
    }
}

ZK: ウィンドウをブラウザの中央に表示

2007-12-19T10:06:00.000+09:00

windowをブラウザの中央に表示したい時はvboxの中にwindowを配置する。


<zk> 
<vbox height="100%" width="100%" pack="center" align="center"> 
<window title="Login" border="normal" 
        style="text-align: center;left-margin: 30%;right-margin: 30%; width:30%;">
Login Window
</window>
</vbox> 
</zk>

ZK: iText

2007-12-02T12:33:00.001+09:00

Report with ZK : Using JasperReports As an Exampleを参考に動的にPDFファイルを作成するサンプルを作ってみました。
PDF作成にはiTextライブラリを使います。まずこちらのサイトからjarファイルをダウンロードします。日本語を使うためにこちらのサイトからiTextAsian.jarをダウンロードします。
次にダウンロードしたjarファイルをWEB-INF/libへインポートして準備完了です。


<?xml version="1.0" encoding="UTF-8"?>
<?page style="height:100%" ?>   
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd ">
<window width="100%" height="100%">
<borderlayout height="100%">
    <north maxsize="24" size="24" border="0">
       <hbox>
          名前:<textbox id="name"/>
        <button label="PDF出力" onClick="doReport()"/>
       </hbox> 
    </north>
    <center border="none" flex="true">
        <iframe id="report" />
    </center>
</borderlayout>
<zscript><![CDATA[
  import java.io.*;
  import com.lowagie.text.*;
  import com.lowagie.text.pdf.*;
  import org.zkoss.util.media.AMedia;
  import java.awt.Color;
 
  void doReport() {
       try {
         //iTextでは出力するPDF全体はDocumentクラスで表現される
         Document doc = new Document();
         //ゴシック体の日本語ベースフォント作成
         BaseFont bf_goth = BaseFont.createFont(
                             "HeiseiKakuGo-W5", //ゴシック体
                             "UniJIS-UCS2-H",   //横書日本語Unicodeエンコーディング
                             BaseFont.NOT_EMBEDDED);
         //明朝体の日本語ベースフォント作成                             
         BaseFont bf_min =  BaseFont.createFont(
                             "HeiseiMin-W3",    //明朝体
                             "UniJIS-UCS2-H",   //横書日本語Unicodeエンコーディング
                             BaseFont.NOT_EMBEDDED);  
                            
        //日本語フォント作成
        Font font_goth = new Font(bf_goth);
        Font font_min15 = new Font(bf_min, 15);     //明朝体 15pt
        Font font_goth8red = new Font(bf_goth, 8);  //ゴシック体8pt
        font_goth8red.setColor(new Color(255,0,0)); //文字色を赤に設定                      
                            
        //出力用のStreamをインスタンス化し
        ByteArrayOutputStream byteout = new ByteArrayOutputStream();
        //PDFの出力先へ割り当てる。
        PdfWriter.getInstance(doc, byteout);

        doc.open();
        //本文を追加                            
        doc.add(new Paragraph(name.value + "さん、 " + "こんにちは!!" , font_goth));
        doc.add(new Paragraph(name.value + "さん、 " + "こんにちは!!" , font_min15));
        doc.add(new Paragraph(name.value + "さん、 " + "こんにちは!!" , font_goth8red));     
        doc.close();
     
        //PDF出力から入力ストリームを作成し
       final InputStream mediais = new ByteArrayInputStream(byteout.toByteArray());
       //入力ストリームをiframeのコンテンツへ媒介するAMediaオブジェクトを生成   
       final AMedia amedia =
                new AMedia("FirstReport.pdf", "pdf", "application/pdf", mediais);
               
       //iframeにコンテンツをセット
      report.setContent(amedia);
       }catch (IOException e) {
         e.printStackTrace();
       }catch (DocumentException e) {
         e.printStackTrace();
      }
   }
]]></zscript>
</window>
</zk>

ZK + Seasar: JFreeChart(2)

2007-11-19T17:21:00.000+09:00

チャートモデルにSimpleCategoryModelを使用するグラフを表示します。次のグラフのモデルにSimpleCatagoryModelが使えます。

棒グラフ
折れ線グラフ
エリアグラフ
積み上げ棒グラフ
積み上げエリアグラフ
ウォータフォールグラフ

データは降雨量ですので意味不明なグラフもありますがご愛嬌ということで(^^


<?xml version="1.0" encoding="UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd ">
<window title="東京 年間降雨量デモ" width="500px" border="normal">
<vbox>
<chart id="myChart" title="月別降雨量 (mm)" width="500" height="250" type="bar" threeD="false" fgAlpha="128"/>
<radiogroup>
  <radio label="棒グラフ" id="bar" onCheck="myChart.type=self.id" checked="true"/>
  <radio label="折れ線グラフ" id="line" onCheck="myChart.type=self.id" />
  <radio label="エリアグラフ" id="area" onCheck="myChart.type=self.id" />
  <radio label="積み上げ棒グラフ" id="stacked_bar" onCheck="myChart.type=self.id" />
  <radio label="積み上げエリアグラフ" id="stacked_area" onCheck="myChart.type=self.id" />
  <radio label="ウォータフォール" id="waterfall" onCheck="myChart.type=self.id" />
</radiogroup>
<checkbox label="3D チャート" checked="false" onCheck="myChart.setThreeD(self.isChecked())"/>
</vbox>
<zscript>
  model = new SimpleCategoryModel();
  model.clear();
  // 年を指定して降雨量をセット
  void processYear(String year) {
    rainStats = rainStatsService.selectAll(year);
    for(data: rainStats){
       model.setValue(year, data.month, data.rainfall); 
     }
   }
  processYear("2003");
  processYear("2004");
  processYear("2005");    
  myChart.setModel(model);         
</zscript>
</window>
</zk>

ZK + Seasar + Ruby: JFreeChart

2007-11-12T12:50:00.000+09:00

JFreeChartアプリをRubyで書き直してみました。
rainStatsServiceコンポーネントはSingletonS2Container.getComponent(Object componentKey)を用い取得することにしました。Seasarの機能リファレンスによるとcomponentKeyにはコンポーネントのクラスまたはコンポーネント名を指定できるそうです。
コンポーネント名を自動登録するようにapp.diconへ追加設定します。


...
<component  
 class="org.seasar.framework.container.autoregister.FileSystemComponentAutoRegister">
    <property name="autoNaming">
        <component class="org.seasar.framework.container.autoregister.DefaultAutoNaming">
            <initMethod name="setCustomizedName">
                <arg>"zkseasar.service.EmpService"</arg>
                <arg>"empService"</arg>
            </initMethod>
        </component>
    </property>
    <initMethod name="addClassPattern">
        <arg>"zkseasar.service"</arg>
        <arg>".*Service"</arg>
    </initMethod>
</component>
...

上記の設定でzkseaser/service/EmpServiceがempServiceというコンポーネント名で登録されるように、zkseaser/service/下の正規表現.*Serviceで表されるファイル名の先頭が大文字から小文字に変換された形で自動的にコンポーネント登録されます。
コンポーネントが自動登録されたか確認してみます。web.xmlでs2servletのdebugパラメータをtrueにしてTomcatを再起動します。


...
<servlet>
    <servlet-name>s2servlet</servlet-name>
    <servlet-class>org.seasar.framework.container.servlet.S2ContainerServlet</servlet-class>
    <init-param>
        <param-name>configPath</param-name>
        <param-value>app.dicon</param-value>
    </init-param>
    <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
...

WEBブラウザで下記のアドレスにアクセスし確認します。


http://localhost:8080/zkseasar/s2servlet?command=list

empServiceとrainStatsServiceがコンポーネント登録されていました。

スクリプトをRubyで書き直します。


...
<window title="東京 年間降雨量デモ (Ruby)" width="500px" border="normal">
年度: 
<listbox id="yr" rows="1" mold="select" onSelect="ruby:process_year">
  <listitem label="2005" selected="true"/>
  <listitem label="2004"/>
  <listitem label="2003"/>
</listbox>
<vbox>
<chart id="myChart" title="月別降雨量 (mm)" width="500" height="250" type="pie" threeD="false" fgAlpha="128"/>
<checkbox label="3D チャート" checked="false" onCheck="myChart.setThreeD(self.isChecked())"/>
</vbox>
<zscript language="ruby">
  import 'zkseasar.service.RainStatsService'
  import 'org.zkoss.zul.SimplePieModel'
  import 'org.seasar.framework.container.SingletonS2Container'

  $model = SimplePieModel.new

  #自動登録されたコンポーネント名でコンポーネントを取り出す。
  $rainStatsService = SingletonS2Container.getComponent('rainStatsService')

  def process_year
    year = $yr.selectedItem.label
    $model.clear
    rain_stats = $rainStatsService.selectAll(year)
    rain_stats.each{|data| $model.setValue(data.month, data.rainfall)}

    $myChart.model = $model
  end
  process_year
</zscript>
</window>
...

RubyでS2ContainerのコンポーネントにもJFreeChartにもアクセスすることができました。

ZK + Seasar: JFreeChart

2007-11-07T12:40:00.000+09:00

今は見当たりませんが、以前ZKサイトのSmalltalksにあったパイチャートデモを参考に東京の月別降雨量をパイチャートで表示するアプリを作ってみました。データベースにはs2jdbcでアクセスします。

テーブル作成
データベースが起動していないときはDatabaseViewでzkseasarプロジェクトをクリックしデータベースを起動します。次にブラウザでlocalhost:8082へアクセスしH2 Consoleを開きデータベースに接続します。SQLステートメントに下記のSQLをコピーし実行するとテーブルが作成されサンプルデータが登録されます。


create table rain_stats(
  year integer,
  month char(3),
  rainfall decimal(4, 1)
);

insert into rain_stats values(2003, '1月', 101.0);
insert into rain_stats values(2003, '2月', 53.5);
insert into rain_stats values(2003, '3月', 159.5);
insert into rain_stats values(2003, '4月', 121.0);
insert into rain_stats values(2003, '5月', 172.5);
insert into rain_stats values(2003, '6月', 85.0);
insert into rain_stats values(2003, '7月', 187.5);
insert into rain_stats values(2003, '8月', 370.0);
insert into rain_stats values(2003, '9月', 150.0);
insert into rain_stats values(2003, '10月', 171.5);
insert into rain_stats values(2003, '11月', 229.5);
insert into rain_stats values(2003, '12月', 53.0);
insert into rain_stats values(2004, '1月', 3.5);
insert into rain_stats values(2004, '2月', 20.0);
insert into rain_stats values(2004, '3月', 129.5);
insert into rain_stats values(2004, '4月', 69.5);
insert into rain_stats values(2004, '5月', 149.0);
insert into rain_stats values(2004, '6月', 112.5);
insert into rain_stats values(2004, '7月', 23.5);
insert into rain_stats values(2004, '8月', 79.5);
insert into rain_stats values(2004, '9月', 195.0);
insert into rain_stats values(2004, '10月', 780.0);
insert into rain_stats values(2004, '11月', 108.5);
insert into rain_stats values(2004, '12月', 79.5);
insert into rain_stats values(2005, '1月', 77.0);
insert into rain_stats values(2005, '2月', 48.0);
insert into rain_stats values(2005, '3月', 71.0);
insert into rain_stats values(2005, '4月', 81.0);
insert into rain_stats values(2005, '5月', 180.5);
insert into rain_stats values(2005, '6月', 170.5);
insert into rain_stats values(2005, '7月', 247.5);
insert into rain_stats values(2005, '8月', 189.5);
insert into rain_stats values(2005, '9月', 177.5);
insert into rain_stats values(2005, '10月', 201.5);
insert into rain_stats values(2005, '11月', 34.5);
insert into rain_stats values(2005, '12月', 3.5);

エンティティRainStatsを作成する。


package zkseasar.entity;

import java.math.BigDecimal;
import javax.persistence.Entity;
import javax.persistence.Table;

@Entity
@Table(name = "RAIN_STATS")
public class RainStats {
  public Integer year;
 
  public String month;
 
  public BigDecimal rainfall;
}

サービスRainStatsServiceを作成する。


package zkseasar.service;
import java.util.List;
import org.seasar.extension.jdbc.JdbcManager;
import zkseasar.entity.RainStats;

public class RainStatsService {
   public JdbcManager jdbcManager;

   public List<RainStats> selectAll(String year) {
     return jdbcManager.from(RainStats.class)
                       .where("year = ?", year)
                       .getResultList();
    }

}

rainfall.zulを作成する。


<?xml version="1.0" encoding="UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd ">
<window title="東京 年間降雨量デモ" width="500px" border="normal">
年度: 
<listbox id="yr" rows="1" mold="select" onSelect="processYear(self.selectedItem.label)">
  <listitem label="2005" selected="true"/>
  <listitem label="2004"/>
  <listitem label="2003"/>
</listbox>
<vbox>
<chart id="mychart" title="月別降雨量 (mm)" width="500" height="250" type="pie" threeD="false" fgAlpha="128"/>
<checkbox label="3D チャート" checked="false" onCheck="mychart.setThreeD(self.isChecked())"/>
</vbox>
<zscript>
  model = new SimplePieModel();

  // 年を指定してパイチャートを表示
  void processYear(String year) {
    model.clear();
    rainStats = rainStatsService.selectAll(year);
    for(data: rainStats){
      model.setValue(data.month, data.rainfall);
     }
    mychart.setModel(model);
   }
  // デフォルトは最新の年
  processYear("2005");       
</zscript>
</window>
</zk>

localhost:8080/zkseasar/view/rainfall.zulへアクセスする。

当初パイチャートの日本語が文字化けしていました。OSはFedora Core6です
http://blog.goo.ne.jp/koregaiya/e/ac4c0c130df9fa8ef0cf7e31be71671aを参考にして文字化けを解消することが出来ました。コマンドだけ書いておきます。
# cd $JAVA_HOME/jre/lib/fonts
# mkdir fallback
# cd fallback
# ln -s /usr/share/fonts/japanese/TrueType/ipagp.ttf kochi-gothic-subst.ttf
# ln -s /usr/share/fonts/japanese/TrueType/ipamp.ttf kochi-mincho-subst.ttf

ZK: Seasar2

2007-11-05T16:54:00.000+09:00

ZKからSeasar2のS2JDBCを利用してデータベースにアクセスするアプリケーションをとりあえず動作させた手順のメモです。

Seasarサイトの「セットアップ>Doltengを使う場合」を参考にしてEclipseにSeasarをセットアップする。

EclipseでChuraプロジェクトを作成する。
File>New>Other>Chura>Chura Project
Nextボタンを押してCreate a Chura Projectダイアログを表示する

Project name; [zkseasar]
Root Package Name: [zkseasar]
Project Type: Super Agile(Teeda + S2Dao)

Finishボタンを押すとプロジェクトが作成される。
zkseasarプロジェクトを右クリックしメニューを表示する。
「Tomcat プロジェクト>コンテキスト定義を更新」をクリックする。

ZKライブラリをPROJECTHOME/src/webapp/WEB-INF/libへコピーする。
プロジェクトツリーでzkseasarをクリック
src>main>webapp>WEB-INF>libを選択し右クリックしてメニューを表示する。
ImportをクリックしImport Selectダイアログを表示する。
General>File Systemを選択しNextボタンをクリックしFile systemダイアログを表示する。
From directory: の右にある BrowseボタンをクリックしZKを展開してできたディレクトリのdist/libのjarファイルを選択しコピーする。

今の作業を繰り返しdist/lib/extのjarファイルもコピーする。

同様にs2-tiger/libにあるgeronimo-jpa_3.0_spec-1.0.jarとgeronimo-ejb_3.0_spec-1.0.jarをWEB-INF/libへコピーする。

同様にs2-tiger/src/test/resourcesにあるs2jdbc.diconをsrc/main/resourcesへコピーする。

s2jdbc.diconを編集しdialectをh2dialectに変更しChuraプロジェクトのサンプル
データベースにあわせる。


<components>
...
  <property name="dialect">h2Dialect</property>
...

geronimo-jpa_3.0_spec-1.0.jarをBuild Pathに追加する。
プロジェクトツリーでzkseasarをクリック
Referenced Librariesを右クリックしメニューを表示する。
Build Path>Configure Build Path...をクリックしJava Build Pathダイアログを表示する。

LibrariesタグをクリックしAdd External JARS..ボタンをクリックして出てきたダイアログでgeronimo-jpa_3.0_spec-1.0.jarを選択しOKボタンをクリックする。

app.diconを編集しs2jdbc.diconを追加する。


  .....
   <include path="s2jdbc.dicon"/>
</components>

convention.diconを編集しorg.seasar.framework.convention.impl.PersistenceConventionImplを登録する。


 ....
   <component class="org.seasar.framework.convention.impl.PersistenceConventionImpl"/>
</components>

WEB-INF/web.xmlへzkdemoのweb.xmlから必要そうな部分をコピーする。


....
<!-- ZK -->
  <listener>
    <listener-class>org.zkoss.zk.ui.http.HttpSessionListener</listener-class>
  </listener>
  <servlet>
     <servlet-name>zkLoader</servlet-name>
     <servlet-class>org.zkoss.zk.ui.http.DHtmlLayoutServlet</servlet-class>
     <init-param>
        <param-name>update-uri</param-name>
        <param-value>/zkau</param-value>
     </init-param>
     <load-on-startup>1</load-on-startup><!-- Must -->
  </servlet>
  <servlet-mapping>
     <servlet-name>zkLoader</servlet-name>
     <url-pattern>*.zul</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
     <servlet-name>zkLoader</servlet-name>
     <url-pattern>*.zhtml</url-pattern>
  </servlet-mapping>

<!-- Optional. Uncomment it if you want to use richlets.
-->
  <servlet-mapping>
     <servlet-name>zkLoader</servlet-name>
     <url-pattern>/zk/*</url-pattern>
  </servlet-mapping>

  <servlet>
     <servlet-name>auEngine</servlet-name>
     <servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
  </servlet>
  <servlet-mapping>
     <servlet-name>auEngine</servlet-name>
     <url-pattern>/zkau/*</url-pattern>
  </servlet-mapping>

  <!-- Miscellaneous -->
  <session-config>
     <session-timeout>120</session-timeout>
  </session-config>
....

アプリケーション作成

エンティティEmp.javaを作成。


package zkseasar.entity;
import java.math.BigDecimal;
import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;

@Entity
@Table(name = "EMP")
public class Emp {
  @Column(name = "ID")
  public Integer id;
 
  @Column(name = "EMP_NO") 
  public Integer empNo;
 
  @Column(name = "EMP_NAME") 
  public String empName;
 
  @Column(name = "MGR_ID")
  public Integer mgrId;
 
  @Column(name = "HIREDATE")
  public Date hiredate;
 
  @Column(name = "SAL")
  public BigDecimal sal;
 
  @Column(name = "DEPT_ID")
  public Integer deptId;

  @Column(name = "VERSION_NO")
  public Integer versionNo;

}

サービスEmpService.java作成。


package zkseasar.service;
import java.util.List;

import org.seasar.extension.jdbc.JdbcManager;
import zkseasar.entity.Emp;

public class EmpService {
  public JdbcManager jdbcManager;

  public List<Emp> selectAll() {
    return jdbcManager.from(Emp.class).getResultList();
   }
}

src/main/webapp/viewにemp.zulを作成。


<?xml version="1.0" encoding="UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd ">
<zscript >
  import zkseasar.entity.Emp;
  
  public class MyRowRenderer implements RowRenderer {
    public void render(Row row, Object data) {
      new Intbox(((Emp)data).id).setParent(row);
      new Intbox(((Emp)data).empNo).setParent(row);
      new Textbox(((Emp)data).empName).setParent(row);
 //     new Intbox(((Emp)data).mgrId).setParent(row);
      new Datebox(((Emp)data).hiredate).setParent(row);
      new Decimalbox(((Emp)data).sal).setParent(row);
      new Intbox(((Emp)data).deptId).setParent(row);
      new Intbox(((Emp)data).versionNo).setParent(row);
      }
    }
   emps = empService.selectAll();
   model = new SimpleListModel(emps.toArray());
   rowRenderer = new MyRowRenderer();
</zscript>
<window title="Emplyee list" >
  <grid model="${model}" rowRenderer="${rowRenderer}">
     <columns>
        <column label="id"/>
        <column label="Emp no"/>
        <column label="Emp name"/>
        <column label="Hiredate"/>
        <column label="Sal"/> 
        <column label="Dept id"/> 
        <column label="Version no"/>
    </columns>
  </grid>
</window>
</zk>

完成
まだDBを起動していないときはDoltengと一緒にインストールしたDatabaseViewから起動する。
Window>Show View>Other>Dolteng>DatabaseViewをクリックしビューを表示。
ビューの中のzkseasarをクリックして表示されるjdbc.diconをクリックするとDBが起動する。
Ellipse>Tomcat>Tomcat起動をクリックしTomcatを起動する。
Webブラウザでhttp://localhost:8080/zkseasar/view/emp.zulを表示する。

Seasarコンポーネントの変数もapp.diconからs2jdbc.dicon経由で自動的に設定されるようです、いいですね！

ZK: zulスキーマを使いzulファイルを生成する

2007-10-26T06:38:00.000+09:00

Eclipe環境がセットアップできたのでzulファイルを作ってみました。

Project ExplorerでプロジェクトのWebContentディレクトリを選択しメニューを表示する

メニューからNew/Otherを選択しSelect a wizardダイアログを表示しXML/XMLを選択しNextボタンを押す

XML Fileダイアログを開きFile nameにhelloworld.zulを入力しNextボタンを押す

XML file作成方法選択ダイアログが開くのでCreate XML file form an XML schema file を選択しNextボタンを押す

スキーマファイル選択ダイアログの中からhttp//www.zkoss.org/2005/zul/zul.xsdを選択しNextボタンを押す

私の場合、ルートエレメントはwindowにしたい

p:プレフィックスが鬱陶しいのでEditボタンを押しprefixを消す

helloworld.zulが生成され、コンポーネント名やアトリビュート名の入力補完が可能になりました

ZK: Eclipseセットアップ

2007-10-25T16:30:00.003+09:00

ZK How-Tosを参考にEclipse3.3.1へZK開発環境をセットアップした時のメモです。

[OS] Fedora Core 6
[Java] jdk1.5.0_09
[Eclipse] wtp-all-in-one-sdk-linux-gtk

zulファイルをXMLファイルとして扱う

EclipseのWindowメニューをクリック

Preferencesを選択しPreferencesダイアログを開く

ダイアログの左サイドのツリーメニューでGeneral/Content Typesをクリック

Content TypesペインでText/XMLを選択しAddボタンを押しNew File Typeダイアログを開く

File Typeに*.zulを入力しOKボタンを押す。

zul.xsdスキーマのセットアップ

zul.xsdをセットアップすることでコンポーネント名やアトリビュートの入力補完が可能になります。

Window/PreferencesメニューをクリックしPreferencesダイアログを開く

ダイアログの左サイドのツリーメニューでWeb and XML/XML Catalogをクリックする

XML Catalog Entriesの中でUser Specified EntriesをクリックしAddボタンを押す

Add XML Catalog Entryダイアログを表示し下図の様に入力しOKボタンを押す

User Specified Entriesにhttp://www.zkoss.org/2005/zul/zul.xsdが表示されれば完了

ZK: Ruby on ZK を試す

2007-10-12T12:20:00.000+09:00

ZK Forumで紹介されていたRuby on ZKを試してみました。
とりあえずダウンロードしたrozk_r0.2.warを展開してみるとmySql.sqlなるファイルがあり、中身を確認するとテーブル作成ddlだったのでmysqlで実行してtestデータベースにテーブルを作成してみました。


 $ cd ~/tmp
 $ unzip rozk_r.0.2.war
 $ mysql -u myadmin -p test
 Enter password:
 mysql> \. mySql.sql
 ...
 mysql> exit
 Bye

アプリケーションに必要なテーブルが作成できたと思い、rozk_r0.2.warをTOMCAT_DIR/webappsに配備後tomcatを再起動しました。
tomcatにより展開されてできたアプリケーションディレクトリのcustomer.zulとinvoice.zulにmysqlユーザとパスワードの記述があるので実状に合わせ変更します。
WEB-INF/libの中が空っぽなのでZKライブラリをコピーします。
またWEB-INF/web.xmlが不完全なので動作しているZKアプリのweb.xmlをコピーしました。


 $ diff customer.zul customer.zul~
 8c8
 < dbc=Dbc.new('test','MySql','myadmin','XXXXXX') 
 ---
 > dbc=Dbc.new('test','MySql','root','david') 

 $ diff invoice.zul invoice.zul~
 9c9
 < dbc=Dbc.new('test','MySql','myadmin','XXXXXX') 
 ---
 > dbc=Dbc.new('test','MySql','root','david') 

 # cp  zk-bin-3.0.0-RC/dist/lib/*jar TOMCAT_DIR/webapps/rozk_r0.2/WEB-INF/lib

 # cp zk-bin-3.0.0-RC/dist/lib/ext/*jar TOMCAT_DIR/webapps/rozk_r0.2/WEB-INF/lib

 # cd TOMCAT_DIR/webapps
 # cp ZKAPP_DIR/WEB-INF/web.xml rozk_r0.2/WEB-INF

Firefoxでアクセスして見たところエラーです。

ワークディレクトリの設定がうまくいっていないようなのでrozk_r0.2/rozk/bl_init.rbを編集しアプリケーションのフルパスを記入してアクセスしてみたところ動作させることができました。


 # vi bl_init.rb
...
 else  # change the working directory to the webapps, if tomcat
 #  Dir.chdir('webapps'+work_path) # 'webapps/rozk_sample'
   Dir.chdir('/usr/tomcat/webapps'+work_path) # 'webapps/rozk_sample'
 end
...

どうやら


customer.zul
...
  # 他になんの設定もなしで
  dbc=Dbc.new('test','MySql','myadmin','XXXXXX') 
  #データベースに接続し
 
  # 他になんの設定もなしで
  dao_cus = Dao.new(dbc,'cus','cus as Customer, name as Name, email as eMail','cus')
  # DAOが出来上がり

  # 生成されたDAOから自動的に
  AutoGrid.dao_2_grid(dao_cus,$cus_form)
  # DAO操作用のグリッドが作成されるようです!!

ということはambitionを試すで作ったpetsテーブルの操作はこれだけでOK?


pet.zul
  <?page zscript-language="Ruby"?>
  <window >
    <div id='pet_form'/> 
    <zscript src='rozk/bl_init.rb'/>
    <zscript>
      dbc=Dbc.new('sampledb','MySql','myadmin','XXXXXX')    
      pets = Dao.new(dbc,'pets','id as ID, name as Name, age as Age','pets')
      AutoGrid.dao_2_grid(pets,$pet_form)
  </zscript>
  </window>

でした、面白いですね。

こちらも気に掛かりますひがやすをさんのブログの

...
来週出す予定のSeasar2の次のバージョン(2.4.18)で、S2Daoが統合されます。
...
目玉は、ManyToOne、OneToMany、OneToOneの完全サポートでしょうか。
...
 List employees =    
jdbcManager.from(Employee.class).join("department").getResultList();

わくわくしますね。

ZK: ブラウザを判別

2007-10-08T15:58:00.001+09:00

WEBサイトにアクセスしてきたブラウザの種類は
Executions.getCurrent().[isGecko(),isExplore(),isExplore7(),isSafari()]
を使用して判別し、HTTPリクエストのユーザエージェント情報がそのまま欲しいときは
HttpServletRequest)Executions.getCurrent().getNativeRequest()).getHeader("User-Agent")
を使用して取得する。


<window title="Client User Agent" border="normal" width="360px">
  <zscript>
    import javax.servlet.http.HttpServletRequest;
    void dispClientAgent(){
       String agentInfo = ((HttpServletRequest)Executions.getCurrent().
                            getNativeRequest()).getHeader("User-Agent"); 
       userAgent.value = agentInfo;
    }
  </zscript>
  <vbox>
  <label value="Hello ZK!!"  id="userAgent"/>
  <button label="ユーザエージェント情報を表示"  onClick="dispClientAgent()"/>
  </vbox>
  <zscript>
    if (Executions.getCurrent().isGecko()){
      userAgent.value = "Firefoxでアクセス";
    }else if (Executions.getCurrent().isExplorer()){
      userAgent.value = "Explorerでアクセス";   
    }else if (Executions.getCurrent().isExplorer7()){
      userAgent.value = "Explorer 7でアクセス";   
    }else if (Executions.getCurrent().isSafari()){
      userAgent.value = "Safariでアクセス";  
    }else {
       userAgent.value = ".....";
     }     
  </zscript>
</window>

Ruby: ambition(2)テーブル結合

2007-09-30T22:05:00.000+09:00

Rubyのコレクション系のメソッドがそのまま意味的に等価なSQLを生成し、データベースにアクセスするAmbitionって面白いですね。テーブル結合はどうなるのだろうと思いビートルズのディスコグラフィーを作って試してみました。
まずはアルバムのデータ作成


create table albums(
  id integer not null auto_increment,
  name varchar(50),
  year smallint,
  primary key(id)
);


insert into albums(name, year)values('Please Please Me', 1963);
insert into albums(name, year)values('With the Beatles', 1963);
insert into albums(name, year)values('A Hard Day\'s Night', 1964);
insert into albums(name, year)values('Beatles for Sale', 1964);
insert into albums(name, year)values('Help!', 1965);
insert into albums(name, year)values('Rubber Soul', 1965);
insert into albums(name, year)values('Revolver', 1966);
insert into albums(name, year)values('Sgt. Pepper\'s Lonly Hears Club Band', 1967);
insert into albums(name, year)values('The Beatles', 1968);
insert into albums(name, year)values('Yellow Submarine', 1969);
insert into albums(name, year)values('Abbey Road', 1969);
insert into albums(name, year)values('Let it Be', 1970);

次は曲のデータ、「ビートルズがやってきた」までです。ぁ〜なつかしいな！！


create table songs(
  id integer not null auto_increment,
  name varchar(50),
  album_id integer not null,
  primary key(id),
  foreign key(album_id) references albums(id)
);

insert into songs(name, album_id)values('I Saw Her Standing There', 1);
insert into songs(name, album_id)values('Anna (Go to Him)', 1);
insert into songs(name, album_id)values('Misery', 1);
insert into songs(name, album_id)values('Boys', 1);
insert into songs(name, album_id)values('Ask Me Why', 1);
insert into songs(name, album_id)values('Please Please Me', 1);
insert into songs(name, album_id)values('Love Me Do', 1);
insert into songs(name, album_id)values('P.S. I Love Yoe', 1);
insert into songs(name, album_id)values('Baby It\'s You', 1);
insert into songs(name, album_id)values('Do You Want to Know a Secret', 1);
insert into songs(name, album_id)values('A Taste of Honey', 1);
insert into songs(name, album_id)values('There\'s a Place', 1);
insert into songs(name, album_id)values('Twist and Shout', 1);

insert into songs(name, album_id)values('It Won\'t Be Long', 2);
insert into songs(name, album_id)values('All I\'ve Got To Do', 2);
insert into songs(name, album_id)values('All My Loving', 2);
insert into songs(name, album_id)values('Don\'t Bother Me', 2);
insert into songs(name, album_id)values('Little Child', 2);
insert into songs(name, album_id)values('Till There Was You', 2);
insert into songs(name, album_id)values('Please Mister Postman', 2);
insert into songs(name, album_id)values('Roll Over Beethoven', 2);
insert into songs(name, album_id)values('Hold Me Tight', 2);
insert into songs(name, album_id)values('You Really Got A Hold On Me', 2);
insert into songs(name, album_id)values('I Wanna Be Your Man', 2);
insert into songs(name, album_id)values('Devil I Her Heart', 2);
insert into songs(name, album_id)values('Not A Second Time', 2);
insert into songs(name, album_id)values('Money', 2);

insert into songs(name, album_id)values('A Hard Day\'s Night', 3);
insert into songs(name, album_id)values('I Should Have Known Better', 3);
insert into songs(name, album_id)values('If I Fell', 3);
insert into songs(name, album_id)values('I\'m Happy Just to Dance With You', 3);
insert into songs(name, album_id)values('And I Love Her', 3);
insert into songs(name, album_id)values('Tell Me Why', 3);
insert into songs(name, album_id)values('Can\'t Buy Me Love', 3);
insert into songs(name, album_id)values('Any Time At All', 3);
insert into songs(name, album_id)values('I\'ll Cry Instead', 3);
insert into songs(name, album_id)values('Things We Said Today', 3);
insert into songs(name, album_id)values('When I Get Home', 3);
insert into songs(name, album_id)values('You Can\'t Do That', 3);
insert into songs(name, album_id)values('I\'ll Be Back', 3);

スクリプトを作成し実行してみます。


require 'rubygems'
require 'active_record'
require 'ambition'

ActiveRecord::Base.establish_connection(
  :adapter => 'mysql',
  :database => 'sampledb',
  :host => 'localhost',
  :username => 'myadmin',
  :password => 'xxxxxx'
)



# テーブルが複数形なのに対してクラスは単数形
class Album < ActiveRecord::Base
end

class Song < ActiveRecord::Base
  belongs_to :album
  def to_s
    return sprintf("%-30s [%s]", name, album.name)
  end
end


puts Song.select{|s| s.album.name =~ 'Please%'}
  #SELECT * FROM songs JOIN album WHERE albums.name LIKE 'Please%'
  # SQL変ですね!!

Song.select{|s| s.album.name =~ 'Please%'}.each{|s| print s, s.album.year, "\n"}
  #I Saw Her Standing There       [Please Please Me]1963
  #Anna (Go to Him)               [Please Please Me]1963
  #Misery                         [Please Please Me]1963
  #Boys                           [Please Please Me]1963
  #Ask Me Why                     [Please Please Me]1963
  #Please Please Me               [Please Please Me]1963
  #Love Me Do                     [Please Please Me]1963
...

to_sで出力されたSQLは変ですが、 DBへはきちんとアクセスしているみたいです???

Ruby: ambitionを試す

2007-09-30T11:46:00.000+09:00

Rubyのブロックで条件指定するとSQLを作成するAmbitionなるものを試してみました。
とりあえずActiveRecordだけあればよさげですが、今回はRails一式をインストールしてから試してみました。
使用するデータベースはMySQLです。

まずはAmbitionのインストール


 $ sudo gem install ambition -y

次にMySQLにお試しテーブルを作成します。


$ mysql -u myadmin -p sampledb
mysql> \. pet.sql
...
mysql>exit;
Bye

$ cat pet.sql
create table pets(
  id integer not null auto_increment,
  name varchar(20),
  age smallint,
  primary key(id)
);

insert into pets(name, age)values('Hanako', 13);
insert into pets(name, age)values('Wan-taro', 15);
insert into pets(name, age)values('Pochi', 3);
insert into pets(name, age)values('Shiro', 8);
insert into pets(name, age)values('Tama', 4);
insert into pets(name, age)values('Tora', 2);

さっそくAmbitionを試しましょう


require 'rubygems'
require 'active_record'
require 'ambition'

ActiveRecord::Base.establish_connection(
  :adapter => 'mysql',
  :database => 'sampledb',
  :host => 'localhost',
  :username => 'myadmin',
  :password => 'xxxxxxx'
)



# petテーブルに対応するクラス　テーブルが複数形なのに対してクラスは単数形
class Pet < ActiveRecord::Base
  def to_s
      return "name:#{name} age:#{age} "
  end
end

# Rubyの条件でSQLが作成されます
puts Pet.select{|p| p.name == 'Hanako'}
  #SELECT * FROM pets WHERE pets.`name` = 'Hanako'

puts Pet.select{|p| p.name =~ '%ako%'}
  #SELECT * FROM pets WHERE pets.`name` LIKE '%ako%'

# MySQLは正規表現も使えるんですね
puts Pet.select{|p| p.name =~ /ako/}
  #SELECT * FROM pets WHERE pets.`name` REGEXP 'ako'

puts Pet.sort_by{|p| [p.age, p.name]}
  #SELECT * FROM pets ORDER BY pets.age, pets.name

# テーブルにアクセスし年齢でソートして画面に出力
Pet.sort_by{|p| p.age}.each{|p| puts p}
  #name:Mie age:2 
  #name:Pochi age:3 
  #name:Tama age:4 
  #name:Shiro age:8 
  #name:Hanako age:13 
  #name:Wan-taro age:15 

# データベースに接続されていなくても構わないようです
pets = [Pet.new(:name => 'Foo', :age => 2), 
　　　　Pet.new(:name =>'Bar', :age => 11)],
        Pet.new(:name => 'Baz', :age => 7))]

Pet.ambition_source = pets
# 年齢を降順にソート
Pet.sort_by{|p| -p.age}.each{|p| puts p}
  #name:Bar age:11 
  #name:Baz age:7 
  #name:Foo age:2 


# ambition_source を nilに戻すと再びデータベースへアクセスします
Pet.ambition_source = nil
Pet.sort_by{|p| p.age}.each{|p| puts p}
  #name:Mie age:2 
  #name:Pochi age:3 
  #name:Tama age:4 
  #name:Shiro age:8 
  #name:Hanako age:13 
  #name:Wan-taro age:15

なんかいい感じですね！！JRubyで動作しないのが残念です。

ZK: XMLエディタをデフォルトエディタに設定

2007-09-29T14:55:00.000+09:00

Eclipseでzulファイルの編集にXMLエディタをデフォルトエディタとして使用するように設定するには、Eclipseメニューの「ウィンドウ」->「設定」で設定画面を表示する。
ファイルの関連付け画面を表示し、ファイルタイプの中から*.zulをクリックする。
関連づけられたエディターの中からXMLエディターを選択し「デフォルト」ボタンをクリックするとXMLエディタがzulファイルのデフォルトエディタに設定される。

ZK: ボタンのテキストアライン設定

2007-09-29T14:35:00.000+09:00

CSSを使用してボタンのテキストアラインの設定が可能です。


<window title="ボタンのテキストアライン設定" border="normal" width="500px">
<vbox>
  <button label="hello" style="width:200px;text-align:left"/>            
  <button label="hello" style="width:200px;text-align:right"/>              
  <button label="hello" style="width:200px;text-align:center"/>        
</vbox>
</window>

ZK: アプリでボタンのサイズを統一

2007-09-28T18:18:00.000+09:00

CSS使用してアプリケーションの全てのボタンのサイズ同じに設定可能です。


<window title="アプリのボタンサイズを統一する" border="normal" width="500px">
<style> 
   .fixwidth{
     width:200px; 
   } 
</style> 
<vbox>  
  <button label="ADD" sclass="fixwidth"/> 
  <button label="DELETE" sclass="fixwidth"/>  
</vbox> 
</window>

ZK: JNDI接続

2007-09-19T16:46:00.000+09:00

WEBアプリケーションはJDBC接続を通じてリモートのRDBMSにアクセスする。この際クライアントアプリケーションとRDBMSサーバの間にはTCP/IPを介し物理的にJDBC接続が確立されるがデータベースと物理的に接続を確立するには大きなCPUパワーが必要で時間もかかる。このためHTTPリクエストの度にアプリケーションとRDBMSの間で物理的に接続、切断を行うことはパフォーマンスに大きな影響がでる。そこでアプリケーションサーバはシステム起動時にデータベースとの物理的な接続をプールし、データベースとの接続を必要とするアプリケーションはールマネージャを介しデータベースに論理的に接続するようにする。そしてデータベース使い終えたアプリケーションは論理的に接続を切断し、プールマネージャは次のデータベース接続要求を待つことになる。
--だそうです

JNDIとはJava Naming and Directory Interfaceの頭文字を取ったもので、Javaから
* ネーミング・サービス
* ディレクトリー・サービス
扱うためのインターフェイスを規定した仕様です。

*詳しくは「今さら人に聞けないJNDI」

Fedor Core 6 でハマッタ
/etc/hostsに 127.0.0.1 localhost エントリが無い!!
$ cat /etc/hosts
 # Do not remove the following line, or various programs
 # that require network functionality will fail.
 ::1     localhost.localdomain   localhost
JNDI接続ではlocalhostが127.0.0.1に解決できないとデータベース接続できないようだ。
ブラウザからはlocalhost:8080でアドレス解決できるし、SpringやSeasarでもホスト名にはlocalhostを使用していて問題なかったので気づくのに時間がかかった。

OS Fedora Core 6

Java jdk1.5.0_09

MySQL 5.20.27

Tomcat apache-tomcat-5.5.20

Eclipse 3.2(wtp-all-in-one)

ZK 2.4

/usr/tomcat/common/libへ配置したjarファイル

Tomcat用JNDIリソース mysql/hellodb を設定する

 ($TOMCAT_DIR/conf/context.xml)
<Context  reloadable="true"> 
  <Resource 
    name="mysql/hellodb" 
    username="myadmin"
    password="*********"
    url="jdbc:mysql://localhost:3306/hellodb"
    auth="Container" 
    defaultAutocommit="false"
    driverClassName="com.mysql.jdbc.Driver"
    type="javax.sql.DataSource"
    maxActive="20"
    maxIdle="30000"
    maxWait="100"
  />

</Context>

(Eclipseプロジェクトではcontext.xmlは$PROJECT_HOME/WebContent/META-INF/に配置する)

アプリケーションで使用するJNDIリソースmysql/hellodbを定義する

 (WEB-INF/web.xml)

 <resource-ref>
   <res-ref-name>mysql/hellodb</res-ref-name>
   <res-type>javax.sql.Datasource</red-type>
   <res-auth>Container</res-auth>
 </resource-ref>

Bean作成

 (my.Emp.java)

 public class Emp {
   private int  empno;
   private String ename;
   private String job;
   
  public Emp(int empno, String ename, String job){
    this.empno = empno;
    this.ename = ename;
    this.job = job;
  }

  public int getEmpno() {
    return empno;
  }
  public void setEmpno(int empno) {
    this.empno = empno;
  }
  ... 残りのフィールドのgettter、setter メソッド省略 
 }

アプリケーションからデータソースを参照するクラスを作成

 (my.EmpManager.java)
   
 public class EmpManager {
   public List findAll() throws Exception {
     DataSource ds = (DataSource)new InitialContext()
        .lookup("java:comp/env/mysql/hellodb");

     Connection conn = null;
     Statement stmt = null;
     ResultSet rs = null;

     List results = new LinkedList();
     try {
       conn = ds.getConnection();
       stmt = conn.createStatement();
       rs = stmt.executeQuery("select EMPNO, ENAME, JOB from EMP");
       while (rs.next()) {
         int empno = rs.getInt("EMPNO");
         String ename = rs.getString("ENAME");
         String job = rs.getString("JOB");
         results.add(new Emp(empno, ename, job));
       }
       return results;
     } finally {
        if (rs != null) try{ rs.close(); } catch (SQLException ex){}
        if (stmt != null) try{stmt.close();} catch (SQLException ex){}
        if (conn != null) try(conn.close();} catch (SQLException ex){}
     }
   }
 }

ビュー作成

 (conn-pool1.zul)

 <window title="Connection Pooling Demo 1" border="normal">
   <zscript>

      import my.EmpManager;
      emps = new EmpManager().findAll();
   </zscript>
   <listbox id="empList" width="800px">
     <listhead>
        <listheader label="Empno" />
        <listheader label="Name" />
        <listheader label="Job"/>

     </listhead>
     <listitem value="${each.empno}" forEach="${emps}">
       <listcell label="${each.empno}" />
       <listcell label="${each.ename}" />
       <listcell label="${each.job}" />  
    </listitem>

  </listbox>
</window>

インターフェース Initiatorの実装

org.zkoss.ak.ui.util.Initiatorを実装しinitディレクティブを使用することでzulファイルにJavaコードを記述せずにデータロードが可能になる。


Eclipseメニュー 
 +-ファイル
     +-新規
        +-その他
            +-クラス

パッケージ: my
名前: AllEmpFinder

インターフェース 
[追加] 

インターフェースを選択してください: org.zkoss.ak.ui.util.Initiator
[OK]

作成されたテンプレートを編集


public void doInit(Page arg0, Object[] arg1) throws Exception {
  try {
     arg0.setVariable((String)arg1[0], new EmpManager().findAll());
   } catch (Exception ex){
     throw UiException.Aide.wrap(ex);
   }
 }

ビュー作成

(conn-pool2.zul)

<window title="Connection Pooling Demo 2" border="normal">
<?init class="my.AllEmpFinder" arg0="emps"?>
... 以降はconn-pool1.zulに同じ

ZKアプリから最も簡単にJDBC接続するには

2007-09-11T17:31:00.000+09:00

ZKアプリから最も簡単にJDBC接続するにはJDBCの入門書にあるようにjava.sql.DriverManagerを使用する方法がある。データベースへの接続といったコストのかかる処理は効率的に行われるべきなので、この方法は簡単ではあるが勧められるものではない。
--そうです。

MySQLデータベースhellodbにあるnameとemailの二つのカラムを持つテーブルusersへデータ登録するアプリケーションを作成する。

jdbc-demo.zul


<window title="JDBC demo" border="normal">
  <zscript>
  import java.sql.*;
  void submit() {
     //ドライバをロードしデータベースに接続する。
     Class.forName("com.mysql.jdbc.Driver");
     Connection conn = DriverManager.getConnection("jdbc:mysql://localhost/hellodb?user=myadmin&amp;password=********");
     PreparedStatement stmt = null;
     try {
        stmt = conn.prepareStatement("INSERT INTO users values(?, ?)");
        //ユーザ入力をステートメントにセットする
        stmt.setString(1, name.value);
        stmt.setString(2, email.value);
        //ステートメントを実行
        stmt.executeUpdate();
     } finally { //クリーンアップ作業
        if (stmt != null) {
           try {
               stmt.close();
           } catch (SQLException ex) {
            //   log.error(ex); //log and ignore
           }
         }
         if (conn != null) {
            try {
               conn.close();
            } catch (SQLException ex) {
             //  log.error(ex); //log and ignore
            }
         }
     }
  }
  </zscript>
  <vbox>

     <hbox>Name : <textbox id="name"/></hbox>
     <hbox>Email: <textbox id="email"/></hbox>
     <button label="submit" onClick="submit()"/>
  </vbox>

</window>

お終い

ZK: Fileupload サイズ制限の変更

2007-08-29T11:09:00.000+09:00

ZKではアップロードできるファイルサイズはデフォルトで5120kbに制限されている。WEB-INF/zk.xml(オプション)を作成しsystem-configエレメント内のmax-upload-sizeエレメントでキロバイト単位でアップロード可能なファイルサイズを変更できる。max-upload-sizeが負の場合アップロードするファイルサイズに制限がなくなる。(ZK The Developer's Reference)


<system-config>
  <max-upload-size>10240</max-upload-size>
</system-config>

ZK: CSSでグリッドヘッダの色を変更

2007-08-28T15:33:00.000+09:00


<window title="Grid Header" border="normal">
<style> 
div.grid-head th{ 
background-color: red; 
} 
</style> 
<grid >
  <columns>
    <column width="150px" label="Author"/>
   <column width="300px" label="Title"/>
   <column width="150px" label="Manufacturer"/>
   <column width="100px" label="ProductGroup"/>
  </columns>
  <rows>
   <row>
     <label value="Sidney Sheldon"/>
     <label value="Master of the Game"/>
     <label value="Warner Books"/>
     <label value="Book"/>
   </row>
...
</rows>
</grid>
</window>

ZK: Fileuploadデモ

2007-08-28T13:31:00.000+09:00

http://commons.apache.orgよりcommons-fileupload-1.2-bin.tar.gz及びcommons-io-1.3.2-bin.tar.gzをダウンロード。ダウンロードしたファイルを展開しcommons-fileupload-1.2.jarとcommons-io-1.3.2.jarをアプリケーション/WEB-INF/libへ配置する。

EclipseではWEB-INF/libを選択し右クリックしメニューを表示
Importメニューよりjarファイルをプロジェクトにインポートする。


<window title="fileupload demo" border="normal">
  <button label="Upload">
    <attribute name="onClick">{
      Object media = Fileupload.get();
      if (media instanceof org.zkoss.image.Image) {
        Image image = new Image();
        image.setContent(media);
        image.setParent(pics);
      } else if (media != null)
        Messagebox.show("Not an image: "+media, "Error", 
                         Messagebox.OK, Messagebox.ERROR);
    }
    </attribute>
  </button>
  <vbox id="pics"/>
</window>

ZK: マウスオーバーでpopup表示

2007-08-23T11:26:00.000+09:00

「ボタン上にマウスカーソルが来るとバルーンヘルプのように時刻をポップアップ表示させる。」
マウスオーバーでポップアップ表示させたいpopupコンポーネントのIDをボタンのtooltip属性に設定する。popupコンポーネントのonOpenイベントハンドラはRubyで実装した。


<window title="ツールチップ表示" border="normal" width="360px">
  <zscript language="ruby">
     def popup_open
       $lbltime.value = Time.now.strftime("%H:%M:%S")
     end
  </zscript>
  <button label="マウスオーバーで時刻をポップアップ表示" 
           tooltip="any"/>
     <popup id="any"  onOpen="ruby: popup_open">  
        <label id="lbltime"/>
     </popup >
</window>

ZK:onMouseOver,onMouseOutイベント

2007-08-23T09:59:00.000+09:00

マウスカーソルがボタンの上に来たらボタンの文字を赤くし、カーソルがボタンから外れたらボタンの文字を黒くする。


<window title="Customizable Tooltips" border="normal" width="360px">
<script type="text/JavaScript" >
   function red(el){ 
     el.style.color = "red";  
   }
   function black(el){ 
     el.style.color = "black";
  }  
</script>
<button label="Info" 
     action="onMouseOver:red(this);onMouseOut:black(this)">
</button> 
</window>

ZK: SVGを使う

2007-08-01T14:54:00.000+09:00

ZKでSVGを使用するにはhtmlコンポーネントの中でembedタグ、またはobjectタグを使用する方法またはiframeタグを使う方法がある。

Scalable Vector Graphics（SVG、スケーラブルベクターグラフィックスは、XMLによって記述されたベクターグラフィック言語のこと、或いは、SVGで記述された画像フォーマットのこと。W3Cでオープン標準として勧告されている。...だそうです。

use-svg.zul


<window title="Test SVG" border="normal" width="500px"> 
<html>
<attribute name="content"> 
<![CDATA[
 <embed  src="rectangle.svg" width="300" height="100"
     type="image/svg+xml" 
   pluginspage="http://www.adobe.com/svg/viewer/install/"> </embed>
 ]]>
</attribute>
</html>
<iframe src="circle1.svg"/>
</window>

rectangle.svg


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

Tuigwaaコメントプラグインのカスタマイズ

2007-07-31T15:56:00.000+09:00

Tuigwaaのコメントプラグインのタグはinput/textのためコメントの入力欄は1行しかないがtextareaタグを使用し複数行入力可能にする方法を発見した。

classes/org/seasar/tuigwaa/plugin/database/CommentView.vm
を編集しコメント入力用のタグをinputからtextareaに変更すればよい。


...
<input type="text" name="postingUser" size="15" maxsize="15"/>
<!--
<input type="text" name="comment" size="70" maxsize="70"/>
-->
<br/>
<textarea name="comment" cols=50 rows=3></textarea>
...

ZK: Rubyでの制約

2007-07-23T13:29:00.000+09:00

ROZK - Ruby on ZK very simple tools for build

ZKフレームワークでRubyを使用する場合データバインディングなどで制約がある。
例えばUsing Timebox ComponentのソースのスクリプトでDateオブジェクトを生成しアノテーションでtimeboxの値にセットしているが、RubyスクリプトでTimeオブジェクトを生成したときはアノテーションはnullになってしまう。関数コールのようにruby:プレフィックスをつけネームスペースを変えてみたがエラーとなった。現状ではRubyオブジェクトはアノテーションで使えない事を頭に入れておこう。


<zscript>
  import java.text.SimpleDateFormat;
  import java.util.Date;

  SimpleDateFormat format = new SimpleDateFormat("HH:mm");
  Date date = format.parse("23:59");
</zscript>
<!--  <zscript  language="ruby">
  date = Time.mktime(1970, 1, 1, 23, 59)
  # RubyオブジェクトはZUMLアノテーション${date}で参照できない
</zscript> -->
<window title="Time Value(Date)" width="300px" border="normal">
  <timebox id="tb0" value="${date}" />

ZK: イベントハンドラにruby関数

2007-07-21T10:51:00.001+09:00

ZKフレームワークではスクリプト言語にrubyを使うことができる。ruby関数をZKコンポーネントのイベントハンドラとして呼び出すときはruby関数の名前の前にruby:をつけること。


<window title="sample" border="normal">
<zscript  language='ruby'>
def button1_clicked
  $t.value = $self.label
end
</zscript>
<button onClick="ruby: button1_clicked" label="button1"/> 
<label id="t" value="label"/>
</window>

ZK: vflexモールド付きのdivコンポーネント

2007-07-20T14:07:00.000+09:00

Div with vflex
mold="vflex"を追加しブラウザ画面の空いている高さにあわせていっぱいになるよう高さを自動調整するDivコンポーネント。

真ん中のウィンドウはブラウザの空いている部分を埋めるように高さを調整して表示される。


<?page id="mainPage" title="Hello" ?>  
<zk> 
<window border="normal" title="window">
This is my header window 
</window>
<window border="normal" title="window"> 
<div mold="vflex">
This is my my content window 
</div> 
</window> 
<window border="normal" title="window"> 
This is my footer window 
</window> 
</zk>

Yui-Ext Grid (Ext JS)をZKフレームワークで利用する。

2007-07-20T14:03:00.001+09:00

Integrating Yui-Ext into ZK Framework

Yui-Ext Grid (Y-Grid)の特徴

*マウスが行の上に来ると色が変化
*複数行選択が可能
*列でソート機能
*列の表示、非表示が選択可能
*列のリサイズ、移動が可能
*列の固定

利用法:
Y-Gridコンポーネントを利用するときはネームスペースで標準の
コンポーネントと区別すること。


<window ... y="http://www.zkoss.org/2007/yui">

後はコンポーネントにプレフィックスy:付けるだけでY-Gridコンポーネントとして使用可能になる

tuigwaaアプリ引越

2007-07-13T09:47:00.000+09:00

新しくセットアップしたホストに既存のtuigwaaサイトを再配備する。

WebUDA Tuigwaaとは

tuigwaa (とぅいがー) とは、HTML タグを知らない人が、
専門知識や特別な環境なしにブラウザだけでデータベースと連動する
Webアプリケーションを作るツールです。新しいジャンルのミドルウェアとして、
WebUDA(ユーザ主導型Webアプリケーション作成ツール)と名づけました。
--だそうです

ホスト環境

OS: Redhat EL 4
Java: JDK1.5.0.12
Tomcat: 5.5.23
Tuigwaa: 1.0.4

◎ JavaサイトよりJDK5.0 Update12をダウンロードしインストール
ダウンロードしたファイルに実行属性を付け実行すると使用許諾
が表示される、最後までスクロールしyesで同意すると
/usr/java/jdk1.5.0_12にJDK5.0がインストールされる。
インストールディレクトリにシンボリックリンクjdkを作成しておく。
環境変数JAVA_HOMEとCLASSPATHを設定しPATHに
$JAVA_HOME/binを追加する。

$ chmod +x jdk-1_5_0_12-linux-i586-rmp.bin
$ su
# ./jdk-1_5_0_12-linux-i586-rmp.bin
# cd /usr/java
# ln -s jdk1.5.0_12 jdk
$ vi .bash_profile
JAVA_HOME=/usr/java/jdk
PATH=$JAVA_HOME/bin:$PATH
CLASSPATH=.:$JAVA_HOME/jre/lib:/$JAVA_HOME/lib:\
/$JAVA_HOME/lib/tools.jar
export JAVA_HOME CLASSPATH PATH
$ . .bash_profile

◎TomcatダウンロードページよりTomcat5.5.23をダウンロードしインストール
ダウンロードしたファイルを/usrディレクトリへ展開しシンボリックリンクを作成後Tomcatを起動してみる。

# cd /usr
# tar xfvz /tmp/apache-tomcat-5.5.23.tar.gz
# ln -s apache-tomcat-5.5.23 tomcat
# tomcat/bin/startup.sh

◎Tuigwaaのインストール
tuigwaa-1.0.4.zipをダウンロードし作業ディレクトリで展開する。
インストール方法はここに詳しく説明されているので参照のこと、コマンド操作のみを記述する。

$ unzip tuigwaa-1.0.4.zip
# cp jaas.conf /usr/tomcat/conf
# cp tuigwaa.xml /usr/tomcat/conf/Catalina/localhost
# cp tuigwaa.war /usr/tomcat/webapps

/usr/tomcat/bin/startup.shを編集しCATALINA_OPTSを追加する
export CATALINA_OPTS=
"-Djava.security.auth.login.config=/usr/tomcat/conf/jaas.conf"

Tomcatを再起動しブラウザでhttp://localhost:8080/tuigwaaにアクセスできればインストール成功。

◎既存のtuigwaaサイトを新しいホストに配備する

旧ホストのTuigwaa Managerにアクセスしサイト管理・サイト一覧より再配備するサイトを選び一括ダウンロードする。
新ホストのTuigwaa Managerにアクセスしユーザー管理で旧ホストのサイトで作成していたユーザとロールを登録する。
Tuigwaa Managerのサイト管理・サイト一覧ページのサイトのアップロードでダウンロードしたtgwarファイルを指定してアップロードする。
アップロードするサイトのファイルサイズが2Mを超えている場合はusr/tomcat/webapps/tuigwaa/WEB-INF/struts-config-tgw-manager.xmlを編集し制限を緩和する。具体的にはstruts-config-tgw-manager.xmlの277行目のmaxFileSize="2M"を適切な値に設定すればよい。