GWTでString.format("%.2f",value)をしたい
概要
JavaでDoubleの桁数を制限してStringに変換するときは
//double値を小数点2桁でStringに変換
String.format(“%.2f”,value)
とするが、GWTのJRE 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()); } }
注意事項
- HTMLの記述は、先にbootstrap関連を読み込み、次にGWT関連を読み込む
以下のエラーが出るとき
Uncaught TypeError: Cannot read property 'appendChild' of null
Windowsバッチファイルをプログラミングレスで作れるWebアプリを作りました
Windowsバッチファイルをプログラミングレスで作れるWebアプリを作ったので紹介します。
バッチファイルに実装したい機能をクリック選択して、テキストボックスにファイル名などを入力していくことでバッチファイルが作成できます。
普通にバッチファイルを作るときは?
- Googleで記述の仕方を探す
- エディタにコピー&ペーストする
- 必要な箇所を修正する
という手順を踏むと思います。
でも、
- サンプル文を見つけてもどの部分を修正したらよいかわからない
- ブラウザとエディタをいったりきたりが面倒
という経験はありませんか?
本Webアプリは
- 修正箇所があらかじめテキストボックス形式になっているので変更すべき箇所がすぐわかる
- 探した機能をすぐにエディタに追加できる
ので、簡単にすばやくバッチファイルを作成することができます。
拡張性
本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
GWTの正規表現(RegExp)でsオプションを指定したいとき
GWTでは正規表現にはRegExpクラスを使用するが、RegExpクラスはsオプション(シングルラインとして処理)が指定できない。
つまり、「.」は「\n」にマッチしない。
すべての文字と改行をマッチさせたいときは
[\s\S]
を利用するとよい。
参考:How to use JavaScript regex over multiple lines? - Stack Overflow
例
private MatchResult _matchSentenceBlock(String target) { String regex = "([\\s\\S]*?)_\\[([\\s\\S]+?)\\]_([\\s\\S]*)"; RegExp pattern = RegExp.compile(regex, "g"); return pattern.exec(target); }