年末頃にwickeXtを試してみた 今さらまとめ（２）

Wicket WickeXt

ひとまずWickeXtのQuickStart(Modal)が無事に動いたので、今度はAccordionを試してみました。
確か紅白のPerfumeを見ながら、多分Modalと同じなんだろうなーと思いつつ、安易に下記の様な感じでコードを書きました。

Step003.html

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:wicket="http://wicket.apache.org/" lang="ja" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<h3>アコーディオンに挑戦してみる（１）</h3>

	<ul class="accordion" wicket:id="accordion">
		<li>
			<a class="head">title1</a>
			<div>message1</div>
		</li>
		<li>
			<a class="head">title2</a>
			<div>message2</div>
		</li>
		<li>
			<a class="head">title3</a>
			<div><a wicket:id="backHome">戻る</a></div>
		</li>
	</ul>
</body>
</html>

Step003.java

package wickext.testing.view;

import org.objetdirect.wickext.ui.accordion.Accordion;

public class Step003 extends WebPage {
	
	public Step003() {
		Accordion accordion = new Accordion("accordion");
//		デフォルトのヘッダタグは a だが、すべての a が反応してしまうので、class属性を敢えて指定する
		accordion.setHeader("a.head");
		accordion.add(homePageLink("backHome"));
		this.add(accordion);
	}
	
}

WebApplicationクラスは割愛します。
これで無事Accordionリストがブラウザに表示されました。なまら簡単。JQueryってJavaScriptわかんないとキツいんじゃね？とか喰わず嫌いしてた自分がアホみたいです。

ハマったポイントとしては、Accordionの中に違うページへのリンク等を作りたい時。
コメントアウトにも書いていますが、たとえばHTMLを

<li>
		<a>title3</a>
		<div><a wicket:id="backHome">戻る</a></div>
</li>

としてclass属性を外して、またソースコード上でAccordion#setHeader()でヘッダの指定（"タグ.class属性"）を行わないと、LinkComponentをAccordionComponentへaddしても、全てAccordion制御用のリンクになってしまって画面遷移しません。

……多分JQuery的には常識なんでしょうけれども。orz