「wicket+ajax」の編集履歴（バックアップ）一覧はこちら

「wicket+ajax」(2007/09/15 (土) 23:23:28) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

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

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