3D技術研究所Wiki > NPESDK > NPESDK_GWT

NPESDKのGWT用ライブラリについてまとめています。

目次


NPESDK_GWTライブラリについて

GWT用のユーティリティーライブラリーです。
オンラインデモページをご覧ください。
http://npe-net.appspot.com/npesdk/gwt/demo/index.html NPESDK_GWT_DEMO.png

ライセンス

NPESDK_GWTライブラリはMITライセンスです
https://github.com/npedotnet/NPESDK_GWT/blob/master/LICENSE

使い方

http://npedotnet.github.io/archives/npesdk-gwt-1.0.jar
から npesdk-gwt-1.0.jar をダウンロードします。

npesdk-gwt-1.0.jar をGWTプロジェクトへ追加して yourproject.gwt.xml に以下を追加します。

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

クライアントUI

Range

RangeクラスはHTML5の <input type="range" /> に対するGWT用のクライアントUIです。
GWT標準ライブラリにないので作りました。

イメージ
NPESDK_GWT_Range.png

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
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(50.0, 0.0, 100.0, 1.0);

// onchangeイベントハンドリング
range.addChangeHandler(new ChangeHandler() {
    @Override
    public void onChange(ChangeEvent event) {
        // 値が変更された後(マウスボタンリリース時)に呼ばれます
        System.out.println("onChange:"+range.getValue());
    }
});

// oninputイベントハンドリング
range.addInputHandler(new InputHandler() {
    @Override
    public void onInput(InputEvent event) {
        // 値を変更している時に呼ばれます
        System.out.println("onInput:"+range.getValue());
    }
});

SliderEditBox

GWT用の編集可能なスライダーGUIです。
左右にスライドすることで値の増減ができ、ダブルクリックで直接編集できるようになります。
GUIはLabelとTextBoxで構成されています。
スタイルシートに.Labelと.TextBoxを定義することでデザインを変更することができます。
詳細はサンプルとソースコードをご覧ください。

イメージ
通常時: NPESDK_GWT_SliderEditBox.png
編集時: NPESDK_GWT_SliderEditBox_edit.png

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import net.npe.gwt.user.client.ui.SliderEditBox;

// コンストラクタの引数は 初期値, 最小値, 最大値, 増減値です
SliderEditBox slider = new SliderEditBox(50.0, 0.0, 100.0, 1.0);

// スタイル名を設定します
slider.setStyleName("SliderEditBox");

// 必要ならNumberFormatを設定します
slider.setFormat("##0.0");

// 必要ならプリフィックス, ポストフィックスを設定します
slider.setPrefix("約 ");
slider.setPostfix(" %");

// 値変更時のイベントハンドラを追加します
slider.addValueChangeHandler(new ValueChangeHandler<Double>() {
    @Override
    public void onValueChange(ValueChangeEvent<Double> event) {
        // 値が変更されたときに呼ばれます
        System.out.println("onValueChange:"+event.getValue());
    }
});

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.SliderEditBox {
    width: 120px;
    height: 18px;
}

.SliderEditBox .Label {
    width: 120px;
    height: 18px;
    background: #333333;
    color: orange;
    cursor: col-resize;
    border-bottom: 1px dotted orange;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.SliderEditBox .TextBox {
    width: 118px;
    height: 16px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    outline: none;
}

Knob

KnobはGWT用のクライアントUIです。
ポインターをドラッグすることで値を変更できます。
中央の丸ボタンで値を初期値にリセットできます。

イメージ
NPESDK_GWT_Knob.png

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import net.npe.gwt.user.client.ui.Knob;

// コンストラクタの引数は 初期値, 最小値, 最大値, 半径です
Knob knob = new Knob(50.0, 0.0, 100.0, 32.0);

// スタイル名を設定します
knob.setStyleName("Knob");

// 値変更時のイベントハンドラを追加します
knob.addValueChangeHandler(new ValueChangeHandler<Double>() {
    @Override
    public void onValueChange(ValueChangeEvent<Double> event) {
        // 値が変更されたときに呼ばれます
        System.out.println("onValueChange:"+event.getValue());
    }
});

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
.Knob {
    width: 64px;
    height: 64px;
    background-color: #151515;
    border: 2px outset silver;
    border-radius: 64px;
    -moz-border-radius: 64px;
    outline: none;
    cursor: crosshair;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.Knob .Panel {
    width: inherit;
    height: inherit;
    background-color: inherit;
    border-radius: inherit;
    position: absolute;
}

.Knob .Panel .Pointer {
    width: 2px;
    height: 30px;
    background-color: darkorange;
    border: 1px solid orange;
    border-radius: 4px;
    -moz-border-radius: 4px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    position: absolute;
    left: 30px;
    transform-origin: 50% 100%;
}

.Knob .Panel .LowLine {
    width: 1px;
    height: 40px;
    background: silver;
    position: absolute;
    left: 32px;
    top: -8px;
    transform-origin: 50% 100%;
}

.Knob .Panel .HighLine {
    width: 1px;
    height: 40px;
    background: silver;
    position: absolute;
    left: 32px;
    top: -8px;
    transform-origin: 50% 100%;
}

.Knob .Panel .Label {
    width: 64px;
    height: 16px;
    position: absolute;
    top: 48px;
    color: orange;
    font-size: 8px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.Knob .Panel .Button {
    position: absolute;
    left: 22px;
    top: 22px;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    font-size:small;
    color: silver;
    background-color: #353535;
    border: 2px outset silver;
    border-radius: 18px;
    -moz-border-radius: 18px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    outline: none;
}
.Knob .Panel .Button:active {
    border: 2px inset silver;
    color: darkorange;
}
.Knob .Panel .Button:hover {
    color: orange;
    background-color: #353535;
    border-color: orange;
}


関連ページ


スポンサードリンク


添付ファイル: fileNPESDK_GWT_DEMO.png 5202件 [詳細] fileNPESDK_GWT_Knob.png 402件 [詳細] fileNPESDK_GWT_SliderEditBox_edit.png 386件 [詳細] fileNPESDK_GWT_SliderEditBox.png 392件 [詳細] fileNPESDK_GWT_Range.png 5039件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS