[Merged] ZK Custom CSS Messagebox

** この記事の内容は、本家にマージ済みです **

---

こんなかっこわるいポップアップ出てきたらどうしますか。。

環境その1: ZK

シチュエーションと問題点

• ZK 7.0.0 以前の話
• 任意のポップアップだけスタイルを変えたい場合に変えられない
• ボタンの幅を変えられない

ゴール

ポップアップする Window の zul に、任意の sclass を付加できるようにする
(ボタンの幅等はそのクラスを使ってCSSで対応)

実際の手順

入れ替え対象 zul 作成

Githubで検索。
zul/src/archive/web/zul/html/messagebox.zul を元に作ることにする。

my_messagebox.zul

<window title="${arg.title}" sclass="z-messagebox-window ${arg.sclass}"
  border="normal" width="260pt" closable="true"
  use="org.zkoss.zul.impl.MessageboxDlg" xmlns:w="client">
    <hbox>
        <div sclass="${arg.icon}"/>
        <separator spacing="13px" />
        <div sclass="z-messagebox">
            <label value="${arg.message}" multiline="true" w:onBind="zul.wnd.Messagebox.onBind(this, '${empty arg.width ? 350: arg.width}')"/>
        </div>
    </hbox>
    <separator spacing="15px"/>
    <hbox id="buttons" style="margin-left:auto; margin-right:auto">
        <custom-attributes button.sclass="z-messagebox-btn"/><!-- CSS class for buttons -->
    </hbox>
</window>

${arg.sclass}を足しただけ。

入れ替えトリガとなる Listener の作成

jp.fio.zk.MessageboxSetTemplateListener.java

package jp.fio.zk;

import org.zkoss.zk.ui.util.WebAppInit;
import org.zkoss.zk.ui;
import org.zkoss.zul.Messagebox;

public class MessageboxSetTemplateListener implements WebAppInit {

    @Override
    void init(WebApp wapp) {
        Messagebox.setTemplate('/my_messagebox.zul');
    }

}

Listener 登録

zk.xml に以下を追加

zk.xml

(snip)
<listener>
    <listener-class>jp.fio.zk.MessageboxSetTemplateListener</listener-class>
</listener>
(snip)

show

groovy のコードで失礼。

Messagebox.show(
    '変更箇所がありますが戻りますか？',
    '確認',
    [Messagebox.Button.OK, Messagebox.Button.ABORT, Messagebox.Button.CANCEL] as Messagebox.Button[],
    ['保存して戻る', '破棄して戻る', 'キャンセル'] as String[],
    null,
    null,
    null,
    [sclass: 'myMessagebox']
);

環境その2: ZKGrails

症状

動かない。。(画面ロード時にエラー)
エラー内容は控えるの忘れました。ごめんなさい。

対策

いやあ、ハマった。。
↑の ZK 対策で使った messagebox.zul ソース内の「$」を、全て「#」にするだけ。

こんなめんどくさいことしなくてもいいように

Forkした。
Pull Request してみることにする。

後日談

Mergeされました。