読者です 読者をやめる 読者になる 読者になる

SuperDevModeでデバッグしているがページ右下にリロードボタンが表示されないとき

  1. http://localhost:9876/ にアクセス
  2. ページの内容に従い、「Dev Mode On」のブックマークレットをブックマークバーに登録
  3. 該当ページで「Dev Mode On」を実行
    • (「Can't find any GWT Modules on this page.」と表示される)
  4. ページ再読み込み
    • これをしなかったためにうまくいっていないと勘違いした。

参考:http://stackoverflow.com/questions/24235669/gwt-superdev-cant-find-gwt-modules

GWTでString.format("%.2f",value)をしたい

概要

JavaでDoubleの桁数を制限してStringに変換するときは

//double値を小数点2桁でStringに変換
String.format(“%.2f”,value)

とするが、GWTJRE EmurationはString.format()に対応していない
参考:http://www.gwtproject.org/doc/latest/RefJreEmulation.html

そこで、NumberFormatクラスで代替する。
参考:http://stackoverflow.com/questions/7214377/limiting-number-of-decimal-places-in-gwt
NumberFormatの仕様:
http://www.gwtproject.org/javadoc/latest/com/google/gwt/i18n/client/NumberFormat.html


サンプル

*.java

    public static String getFormatted(double value) {
        NumberFormat decimalFormat = NumberFormat.getFormat(".##");
        return decimalFormat.format(value);
    }

GWTアプリでキーボードショートカットを設定

概要

キーボードショートカットを実装するには、画面のどの要素がアクティブな時でもキーイベントをハンドルする必要がある。
widget.addKeyDownHandler(...)では実装できない。

EventクラスにNativePreviewHandlerを追加することで実現する。

参考:https://groups.google.com/forum/#!topic/google-web-toolkit/Pmq8OF77RTM

Main.java

    public void onModuleLoad() {
        Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
            public void onPreviewNativeEvent(NativePreviewEvent event) {
                NativeEvent ne = event.getNativeEvent();
                if (KeyUpEvent.getType().getName() != ne.getType())
                    return;
                switch (ne.getKeyCode()) {
                case KeyCodes.KEY_A:
                    fireCommand1();
                    break;
                case KeyCodes.KEY_ENTER:
                    fireCommand2();
                    break;
                }
            }
        });
}

GWTとBootstrapの併用でレスポンシブWebデザイン

概要

GWTとBootstrap3でレスポンシブWebデザインをするときのサンプルと注意事項

GWTBootstrapなるオープンソースもあるけど日本語資料が少ないので今回は使用しない。
GWT-Bootstrap

メリット

javaコードに画面のレイアウト情報が入ってこないので、ビジネスロジックがすっきりする。
(画面レイアウトのためにFlexTableなどを使用する必要がない。)
レイアウト情報はhtmlファイルに集中するので再編集しやすい。
日本語資料の多いBootstrapで画面レイアウトを行うことができる。

サンプル

GWTとBootstrap3を通常通り使用する。
HTMLは普通にBootstrapを使用するときと同じ。
GWTモジュールではidに対応するdiv要素を探して、クリックハンドラを追加。

Main.html


<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>

<!-- gwtアプリ読み込み -->
<script type="text/javascript" language="javascript"
	src="main/Main.nocache.js"></script>

<!-- 中略 -->

<div class="container">
  <div class="col-md-1 btn btn-default">
    <div id="btnPanel1">
    <img src="/img/1.png">
    <div>ボタン1</div>
    </div>
  </div>
  <div class="col-md-1 btn btn-default">
    <div id="btnPanel2">
    <img src="/img/2.png">
    <div>ボタン2</div>
    </div>
  </div>
</div>

Main.java

public void onModuleLoad() {

        {
            RootPanel.get("btnPanel1").addDomHandler(
                new ClickHandler() {
                    public void onClick(ClickEvent event) {
                        fireBtn1Event();
                    }
                },
                ClickEvent.getType());
        }
}

注意事項

  1. HTMLの記述は、先にbootstrap関連を読み込み、次にGWT関連を読み込む

以下のエラーが出るとき

Uncaught TypeError: Cannot read property 'appendChild' of null

javascript - How do I solve this "Cannot read property 'appendChild' of null" error? - Stack Overflow

Windowsバッチファイルをプログラミングレスで作れるWebアプリを作りました

Windowsバッチファイルをプログラミングレスで作れるWebアプリを作ったので紹介します。
バッチファイルに実装したい機能をクリック選択して、テキストボックスにファイル名などを入力していくことでバッチファイルが作成できます。

知らなくても作れるWindowsバッチファイルジェネレータ

普通にバッチファイルを作るときは?

  1. Googleで記述の仕方を探す
  2. エディタにコピー&ペーストする
  3. 必要な箇所を修正する

という手順を踏むと思います。

でも、

  • サンプル文を見つけてもどの部分を修正したらよいかわからない
  • ブラウザとエディタをいったりきたりが面倒

という経験はありませんか?
本Webアプリは

  • 修正箇所があらかじめテキストボックス形式になっているので変更すべき箇所がすぐわかる
  • 探した機能をすぐにエディタに追加できる

ので、簡単にすばやくバッチファイルを作成することができます。

f:id:black-skin:20150429231839p:plain

拡張性

本Webアプリはまだ情報量が未熟で、ほしい機能が見つからないということもあるでしょう。
そんなときは自分でほしい機能・構文を追加してください。
あなたが作成した構文はサーバに送信され、他のユーザにも共有されます。
あなたが本Webアプリを使い込むことで、多くの方々にも使いやすいものになっていくでしょう。

さいごに

本Webアプリは

を使用して作成しました。
あと「プログラミングレスで作れる」と謳ってますが、多少のバッチファイルに関する知識は必要です。「レス」というのは「ない」ではなくて「少ない」という意味ですから。

最前面のPanelのイベントのみを処理する

FocusPanelを複数重ねたとき、最前面のFocusPanelをクリックすると重なったFocusPanelすべてにClickEventが発生する。最前面のFocusPanelのみ処理をしたいときはFocusEventを処理すること。


public class MyContainer extends FocusPanel {
	public MyContainer (){
		super();

		this.addFocusHandler(new FocusHandler() {
			@Override
			public void onFocus(FocusEvent event) {
                            (最前面のPanelでのみ実行される処理)
			}
		});
                
//		this.addClickHandler(new ClickHandler() {
//			@Override
//			public void onClick(ClickEvent event) {
//			    (重なったPanelすべてで実行される処理)	
//			}
//		});
        }
}

JavaCCを利用して、「 -{ 」と「 }- 」で囲んだ文字列を取得する

JavaCCを利用して、「 -{ 」と「 }- 」で囲んだ文字列を取得する時の方法。
「 /* 」と「 */ 」に置き換えれば、C言語複数行コメントの中身を取得するときに利用できる。


SPECIAL_TOKENに、「 -{ 」と「 }- 」で囲まれる文字列を指定するのが肝要。SPECIAL_TOKENで指定したパターンにヒットした文字列は、その後にヒットしたTokenで
(Token名).specialToken.image
を呼び出すことで取得できる。


jjtファイル

options {
//(略)
    UNICODE_INPUT=true;      //日本語が扱えるようにUnicodeの入力にする
//(略)
}
//               (前略)
TOKEN: {
  <NATIVE_CODE_START: "-{" (" ")? >: NATIVE_CODE      // -{ にマッチ
}
<NATIVE_CODE> TOKEN : {
  <NATIVE_CODE_END: (" ")? "}-" >: DEFAULT            // }- にマッチ
}
<NATIVE_CODE> SPECIAL_TOKEN: {
  <NATIVE_CODE_BLOCK: (~["}"] | "}" ~["-"])+ >        // }- 以外にマッチ
}

//              (中略)

//ノード生成部
void NativeCodeBlock(): { Token t; } {
  // native code block is a SPECIAL_TOKEN, so we need to get it from NATIVE_CODE_END
  <NATIVE_CODE_START> t=<NATIVE_CODE_END> 
    { jjtThis.jjtSetValue(t.specialToken.image); } Type()
}

参考:
hlang/HLisp.jjt at 630a4a439f507729cc8c4833cd37e91e1b8e96f2 · hrehfeld/hlang · GitHub