arcanum_jp’s blog

おっさんの日記

タグ

Wicket


　あーこれ便利なのか微妙。

　はじめに画面HTMLを作ってイメージを確定するような場合に一覧部分なんかはこんな感じでできてしまうと思う。

<table>
    <tr>
        <th width="100">№</th>
        <th width="400">住所</th>
        <th width="100">−−</th>
    </tr>
				
    <tr>
        <td><span>１</span></td>
        <td><span>住所１</span></td>
        <td><a href="#" >更新</a></td>
    </tr>			
    <tr>
        <td><span>２</span></td>
        <td><span>住所２</span></td>
        <td><a href="#" >更新</a></td>
    </tr>			
    <tr>
        <td><span>３</span></td>
        <td><span>住所３</span></td>
        <td><a href="#" >更新</a></td>
    </tr>			
</table>


　ここに実際の実装がなされるときにこのHTMLに対しIDをつけたりとかデザイナさんにとって見れば汚染が始まるんだろうけど、そんときに使わなくなるHTMLコードをWicketのレスポンスから見えなくなるようにする場合にこのタグを使うのかな。

　上記のHTMLでいうと、実装には住所２、住所３の行は不要になるので、実装に使うHTML上からは実際に消すか、コメントアウトする必要がある。だけどその場合、単なるHTMLとして見たい場合に消された、またはコメントアウトされた部分が見えなくなるのでは非常に困る。


　そこでとこんな感じにを入れる

<table>
    <tr>
        <th width="100">№</th>
        <th width="400">住所</th>
        <th width="100">−−</th>
    </tr>
				
    <tr wicket:id="list">
        <td><span wicket:id="no"  >１</span></td>
        <td><span wicket:id="addr">住所１</span></td>
        <td><a    wicket:id="upd" href="#" >更新</a></td>
    </tr>			
    <wicket:remove>
    <tr>
        <td><span>２</span></td>
        <td><span>住所２</span></td>
        <td><a href="#" >更新</a></td>
    </tr>			
    <tr>
        <td><span>３</span></td>
        <td><span>住所３</span></td>
        <td><a href="#" >更新</a></td>
    </tr>			
    </wicket:remove>
</table>

　こうすればWicketのレスポンス上では住所１の行は繰り返しになり、住所２、住所３の行は消える。また単なるHTMLとしてブラウザで確認する場合はは無視されるので、普通に住所２、住所３の部分が表示される。

　そう考えるとWicketはデザインと実装からみて合理的になってる感じはするけど自分の場合、確認用と実装用を分けて管理するスタイルしかやったことないのでこのタグは便利なのかなぁと考えてしまう。これはアレか・・・はじめに確認用に作ったHTMLを本番としても使用して何か変更がある場合なんかもこのHTMLに変更を加えてお客様に見せて確認する・・・といったHTMLを１つで管理する開発スタイルには非常に有用なのではないかな。


　その場合の注意点としては、画面を確定する時点でなどで解決される部分をすべて考慮して作っておくってところかな。実際のHTML上ではとなる部分にiframeを使っておくとか。部分だけ確認できる術を作っていたってしょうがない気がする。


parent.html

<html>

    ・・・テンプレートとなる親画面のHTML
　　　　　ヘッダなどの定義

    <wicket:child>
        <iframe  ... alt="ここに子画面が展開される" />
    </wicket:child>

    ・・・テンプレートとなる親画面のHTML
　　　　　フッダなどの定義

</html>


child.html

<html>
    ・・・省略
    <wicket:extend>
        ここに子画面のHTML
    </wicket:extend>
</html>