ひよっこ。

I want to…

dwt-dndを使う(導入編)

Posted by hikaruworld : 2010 11月 15

gwt-dndというgwtでドラッグ&ドロップを簡単に利用可能なライブラリがあります。
ちょっとこのライブラリを使っていくつかはまったので、簡単にメモを残しておきます。

インストール

といいつつ、まずはインストールからです。

ここから、バージョンにあったgwt-dnd.jarをダウンロードします。
gwt1.Xからgwt2.X系まで一通りそろっているので自分の様にgwt1.4系とか使ってる人でも大丈夫です。

# これを機にGwt1.Xの最新までバージョンアップしましたが…

ダウンロードしたjarファイルは、いつも通りgwtからパスを通します。

初期設定

以下は、初期設定です(Eclipseベース)。
gwt-dnd.jarはgwtのモジュール形式として配布されています。
jar内部にgwt-dnd.gwt.xmlことからもこれが伺い知れますね。

ドキュメントに関してはGettingStartedを読むのが一番分かりやすいですが、
自分は英語が苦手なので、備忘録として残しておきます。

設定ファイルに定義を追加

まず利用する場合は、利用しているgwtの定義ファイルhogehoge.gwt.xmlに以下の設定を追記します

<!-- Inherit gwt-dnd support                   -->
<inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'/>

ここを参照

CSSの設定

必要に応じて、CSSの設定をします。
これはRootPanel.get()しかしなかったような場合など、高さが存在しない状態になります。
その場合に、あらかじめ100%確保しておいて、ドラッグするスペースを確保しておきます。

 HTML, BODY {
    height: 100%;
  }

なお、もし上記の設定をしていない状態でドラッグが行われ、移動できない場合は、以下のようなメッセージで警告されます。

gwt-dnd warning: boundary panel (= the BODY element) has zero height; dragging cannot occur inside an AbsolutePanel that has a height of zero pixels; you can often remedy this quite easily by adding the following line of CSS to your application’s stylesheet: BODY, HTML { height: 100%; }

Sample

とりあえず、サンプルに従って動かしてみます。
A Simple Example(Your first drag-n-drop project)そのままで簡単なドラッグ&ドロップのサンプルが確認できます。

package com.example.client;

import com.allen_sauer.gwt.dnd.client.PickupDragController;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class Gwt_dnd_sample01 implements EntryPoint {
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		// Drag管理用のコントローラを宣言
		// 第一引数がDrag領域のパネル?
                // 第二引数がtrueの場合に対象にdrop可能/falseの場合にdrop不可能
		PickupDragController dragController = new PickupDragController(RootPanel.get(), true);

		// ドラッグ可能なWidgetの登録
		Label dragLabel = new Label("ドラッグ対象");
		dragController.makeDraggable(dragLabel);

		// RootPanelに展開		
		RootPanel.get().add(dragLabel);
	}
}

PickupDragControllerはライブラリから提供されているDragControllerの中の一つです。

以上です。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。