wicket+ajax - ab3104 @ ウィキ

wicketでAJAX - * Wicket を利用した　AJAXページの作成

   * Wicket を利用した　AJAXページの作成
         o 利用可能なコンポーネント
         o Dojo＋Panelで簡単にコンポーネントを作成する
               + fisheye の例
         o 自作コンポーネントの作成

Wicket を利用した　AJAXページの作成
利用可能なコンポーネント
Dojo＋Panelで簡単にコンポーネントを作成する

Panelを利用すれば ajax ライブラリのDOJOウィジェットを簡単に取り込むことが可能。ここではサンプル的にfisheyeウィジェットをパネルにしてみた。

これらのほかに inlineEditBoxなどのような値があるウィジェットもパネルにすることができる。

wicket-exに付属のものよりも便利かもｗ（ただしコンポーネントにしない以上　javascriptを用いて力業で押す必要があるが）

fisheye の例
FishEye?.java

package wicket.dojo;

import java.util.List;

import wicket.AttributeModifier;
import wicket.markup.html.link.Link;
import wicket.markup.html.list.ListItem;
import wicket.markup.html.list.ListView;
import wicket.markup.html.panel.Panel;
import wicket.model.Model;

@SuppressWarnings("serial")
/**

* 呼び出しタグ
* 	<script type="text/javascript" src="dojo.js"></script>
dojo.require("dojo.widget.FisheyeList");

* <div wicket:id="fisheye" dojoType="FisheyeList" itemWidth="40" itemHeight="40" 
itemMaxWidth="150" itemMaxHeight="150" orientation="horizontal"
effectUnits="2" itemPadding="10" attachEdge="center"
labelEdge="bottom"></div>
*/

public class Fisheye extends Panel{

private List fishEyeList;


public Fisheye(String id, List fishEyeList) {
	
	super(id);
	this.fishEyeList = fishEyeList;
	ListView listView = new ListView("FisheyeList", fishEyeList){
		@Override
		protected void populateItem(ListItem item) {
			final FisheyeData fisheyeItem = (FisheyeData)item.getModelObject();
			Link link = new Link("FisheyeListItem"){
				@Override
				public void onClick() {
					// TODO Auto-generated method stub
					setResponsePage(fisheyeItem.getLinkPage());
				}
			};
			link.add(new AttributeModifier("caption",new Model(fisheyeItem.getCaption())));
			link.add(new AttributeModifier("iconsrc",new Model(fisheyeItem.getImageUrl())));
			item.add(link);
		}
	};
	add(listView);
}

}

Fisheye.html

<wicket:panel>

<!--  for loop -->
<div wicket:id="FisheyeList">
<div wicket:id="FisheyeListItem" dojoType="FisheyeListItem"
	onclick="alert('click on' + this.caption + '(from widget id ' + this.widgetId + ')!');"
	caption="Item 1"
	iconsrc="images/fisheye_1.png">
</div>

</div>

</wicket:panel>

FisheyeData?.java

package wicket.dojo;

import java.io.Serializable;

public class FisheyeData implements Serializable{

private Class linkPage;
private String caption;
private String imageUrl;

public String getCaption() {
	return caption;
}
public void setCaption(String caption) {
	this.caption = caption;
}
public String getImageUrl() {
	return imageUrl;
}
public void setImageUrl(String imageUrl) {
	this.imageUrl = imageUrl;
}
public Class getLinkPage() {
	return linkPage;
}
public void setLinkPage(Class linkPage) {
	this.linkPage = linkPage;
}

}

自作コンポーネントの作成