GWT用の<input type="range"/>クラスを作りました #JavaScript

<input type="range"/>とは?

<input type="range"/>は下画像のような値を調整するスライダーみたいなものです。

作成するウェブアプリ次第かも知れませんが、
ゲームや動画のボリューム調整とかに頻繁に使うUIではないでしょうか。

残念なことにGWTには標準でinputのrangeに対するクラスは提供されていません。
GWTはオープンソースプロジェクトなので

分からなかったらソースコードを見ろ！
存在しない機能は自分で実装しろ！

ということなのでしょう。

こういうところに不便を感じる方も多いのでしょうが、
私はJavaをHTML5+JavaScriptへ変換してくれるだけで十分満足しています。

今回は自作のRangeクラスの紹介と
input type=rangeのイベントハンドリングについて少々解説したいと思います。

onchangeイベント

onchangeイベントは値の変更後(マウスボタンリリース時)に発行されます。

JavaScriptで書くとこんな感じでしょうか。

onchange.js

var range = document.createElement("input");
range.setAttribute("type", "range");

range.onchange = function() {
    document.write(range.value);
};

自作したRangeクラスを使ってJavaで書くと以下のようになります。
onchangeイベントはGWT標準のChangeEvent, ChangeHandlerでハンドリングできます。

ChangeEvent

import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import net.npe.gwt.user.client.ui.Range;

final Range range = new Range();

range.addChangeHandler(new ChangeHandler() {
    @Override
    public void onChange(ChangeEvent event) {
        System.out.println("onChange:"+range.getValue());
    }
});

oninputイベント

oninputイベントは値変更中に発行されるイベントです。
ボリューム調整などはこちらのイベントを利用するべきでしょう。

oninputイベントをJavaScriptで書くとこのようになります。

oninput.js

var range = document.createElement("input");
range.setAttribute("type", "range");

range.oninput = function() {
    document.write(range.value);
};

残念なことにGWTではoninputに対するクラスやインターフェースが提供されていません。
自作したInputEvent, InputHandlerでoninputイベントをハンドリングします。

InputEvent

import net.npe.gwt.event.dom.client.InputEvent;
import net.npe.gwt.event.dom.client.InputHandler;
import net.npe.gwt.user.client.ui.Range;

final Range range = new Range();

range.addInputHandler(new InputHandler() {
    @Override
    public void onInput(InputEvent event) {
        System.out.println("onInput:"+range.getValue());
    }
});

使い方

をダウンロードしてプロジェクトへ追加し、.gwt.xmlに下の行を追加してください。

<inherits name='net.npe.gwt'/>

詳細な解説が必要な方はこちらをご覧ください。
http://3dtech.jp/wiki/index.php?NPESDK_GWT

GitHubでソースコードを公開しています。
https://github.com/npedotnet/NPESDK_GWT

オンラインデモページも作りました。
onchangeとoninputの違いも分かると思います。
http://npe-net.appspot.com/npesdk/gwt/demo/index.html

それでは楽しいGWTライフを！