2007年8月29日水曜日

ZK: Fileupload サイズ制限の変更

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>

2007年8月28日火曜日

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





<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デモ

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>

2007年8月23日木曜日

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

「ボタン上にマウスカーソルが来るとバルーンヘルプのように時刻をポップアップ表示させる。」
マウスオーバーでポップアップ表示させたい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イベント

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


<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>

2007年8月1日水曜日

ZK: SVGを使う


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>