2009年4月29日水曜日

ブラウザ時計

昨日、GWTで遊んでみて作ってみた時計もどきをWebにもアップしてみました。

http://www.ac.auone-net.jp/~takes90/StockWatcher/StockWatcher.html

GWTを使えば、こんなアプリケーションなら簡単に作れてしまうということですね。

GWTでTimmerを使ってみる

本日は、下記を読んでいるうちにTimmerクラスを使ってみたくなった。

http://code.google.com/intl/ja/webtoolkit/tutorials/1.6/codeclient.html

これを使ってとりあえず、時計を作ってみる。

本日新たに使ってみたクラスは、

Timer (Google Web Toolkit Javadoc)
これは、定期的に実行するようなことができ、

DateTimeFormat (Google Web Toolkit Javadoc)
これは、日付を文字列に変える事ができ

あと、ついでに

Random

これは、ランダムな数字を生成することができ。

も使ってみる。

とりあえず、自分の作ってみたいイメージどおり物もができた。

ちなみにこんな感じ。
(時計は、もちろんちゃんと動いています。)



こちらのソースコードはこんな感じで書いてみました。

クライアント側の記述の仕方はなんとなくわかってきた感じです。

package com.google.gwt.sample.stockwatcher.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItemSeparator;
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SuggestBox;
import com.google.gwt.user.client.ui.SuggestionEvent;
import com.google.gwt.user.client.ui.SuggestionHandler;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define onModuleLoad().
*/
public class StockWatcher implements EntryPoint {
/**
* The message displayed to the user when the server cannot be reached or
* returns an error.
*/
private static final String SERVER_ERROR = "An error occurred while "
+ "attempting to contact the server. Please check your network "
+ "connection and try again.";

/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);

Label timeLabel = new Label();
Label randomNumberLabel = new Label();
Timer t = new Timer() {
public void run() {
timeLabel.setText("時刻:"+DateTimeFormat.getFormat("yyyy/MM/dd HH:mm:ss").format(new Date()));
randomNumberLabel.setText("ランダム数字:"+Random.nextInt(1000));
}
};
/**
* This is the entry point method.
*/
public void onModuleLoad() {
Button stopbtn = new Button("停止");
Button startbtn = new Button("開始");
stopbtn.addClickListener(new ClickListener(){
public void onClick(Widget sender) {
// Create a new timer that calls Window.alert().
t.cancel();
}
});
startbtn.addClickListener(new ClickListener(){
public void onClick(Widget sender) {
// Create a new timer that calls Window.alert().
t.run();
t.scheduleRepeating(500);
}
});

RootPanel.get().add(startbtn);
RootPanel.get().add(stopbtn);
RootPanel.get().add(timeLabel);
RootPanel.get().add(randomNumberLabel);
t.scheduleRepeating(1000);
}


}

2009年4月22日水曜日

GWTでMunubarを使ってみる

>
本日は、GWTでMenuBarを作って遊んでみた。

参考にしたドキュメントはこちら、


今回は、日本語のメニューの表示も試してみた。
こちらは、javaのソースコードをUTF-8 で保存するように変更したところ、
正しく表示できるようになった。

おそらく、現状のフレームワークでは、MS-932 の文字コードを正しく処理できないのでしょう。

ちなみに今回のソースはこちらで、



public void onModuleLoad() {
Command cmd = new Command() {
public void execute() {
Window.alert("You selected a menu item!");
}
};
//縦型のメニュー
MenuBar fooMenu = new MenuBar(true);
fooMenu.addItem("保存", cmd);
fooMenu.addItem("読み込み", cmd);
//メニューに線を引く
fooMenu.addSeparator();
fooMenu.addItem("終了", cmd);

MenuBar barMenu = new MenuBar(true);
barMenu.addItem("the", cmd);
barMenu.addItem("bar", cmd);
barMenu.addItem("menu", cmd);

MenuBar bazMenu = new MenuBar(true);
bazMenu.addItem("the", cmd);
bazMenu.addItem("baz", cmd);
bazMenu.addItem("menu", cmd);

MenuBar menu = new MenuBar();
menu.addItem("foo", fooMenu);
menu.addItem("bar", barMenu);
menu.addItem("baz", bazMenu);

RootPanel.get().add(menu); }





で実行した感じが下記のような感じ。
日本語も正しく表示されるようになりました。


いままでやってきたものを組み合わせると、通常の画面でやってるようなことも
ブラウザ化するのは理論上は意外に簡単にできそうな気がしてきた。

2009年4月21日火曜日

GWTでVerticalPanelとHorizontalPanel

本日は、2種類のパネルを試してみる。
VerticalPanelとHorizontalPanelを試してみた。

VerticalPanelは部品が縦に並び、HorizontalPanelは部品が
横に並ぶパネルのようです。

本日は、下記のページのサンプルを元に遊んでみました。

http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/TextBox.html


PasswordTextBox ptb = new PasswordTextBox();
TextBox tb = new TextBox();

// 数字しか入力を許容しないTextBox
tb.addKeyPressHandler(new KeyPressHandler() {
public void onKeyPress(KeyPressEvent event) {
if (!Character.isDigit(event.getCharCode())) {
((TextBox) event.getSource()).cancelKey();
}
}
});

// 横60文字 縦 5文字のTextArea
TextArea ta = new TextArea();
ta.setCharacterWidth(60);
ta.setVisibleLines(5);

// パネルの生成
VerticalPanel vpanel = new VerticalPanel();
HorizontalPanel hvpanel = new HorizontalPanel();
hvpanel.add(tb);
hvpanel.add(ptb);
vpanel.add(hvpanel);
vpanel.add(ta);
RootPanel.get().add(vpanel);




そして実行した結果はこんな感じ。

想像したとおりに結果が得られるのはうれしいもんですね。

2009年4月20日月曜日

GWTでSuggestBoxを使ってみる

本日は、SuggestBoxがどんな風に動くのかを試してみる。

昨日としては、テキストエディットにおいて、候補を表示する機能というところでしょうか。

とりあえず、下記のページを参考に簡単なサンプルを動かしてみた。

http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/SuggestBox.html

コードの記述は下記のとおり、Suggestを表示しながら、それを
選択したら、ダイアログに表示するようなサンプルです。


MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
oracle.add("Cat");
oracle.add("Dog");
oracle.add("Horse");
oracle.add("Canary");
oracle.add("apple");
oracle.add("assert");
final SuggestBox box = new SuggestBox(oracle);
box.addEventHandler(new SuggestionHandler(){
public void onSuggestionSelected(SuggestionEvent event) {
Window.alert(box.getText() );
}
});
RootPanel.get().add(box);
}



こちらをブラウザで動かしてみると、こんな感じです。



なかなか面白い。
なんとなくつかめてきました。

2009年4月18日土曜日

GWTでFlexTableを使ってみる

今度は、下記のサンプルを参照しながらFlexTableというクラスを使ってみる。
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/FlexTable.html

普通にテキストをセットしたり、ボタンをセルにセットしたりできるようですね。

setColSpanの意味がわからなかったけど、実際に、下記のようにサンプルを
ちょっと変更して動かした感じでは、こちらはどうやらエクセルで言う
「セルの結合」を意味する関数のようですね。

   public void onModuleLoad() {
// Tables have no explicit size -- they resize automatically on demand.
FlexTable t = new FlexTable();
t.setText(0, 0, "aa");
t.setText(0, 1, "ii");
t.setText(0, 2, "uu");
t.setText(0, 3, "ee");
t.setText(0, 4, "oo");
t.setText(2, 0, "sa");
t.setText(2, 1, "si");
t.setText(2, 2, "su");
t.setText(2, 3, "se");
t.setText(2, 4, "so");

t.setWidget(1, 1, new Button("Wide Button"));
          //セルの(1,0)から3つの列を結合する
t.getFlexCellFormatter().setColSpan(1, 0, 3);

RootPanel.get().add(t);
}



こちらを実行してみるとこんな感じになりました。



GWTでコンポーネントを作る

本日は、

Step 3: Building the User Interface

を読んでいくと、コンポーネントの説明がある、ここでWidget Gallery
画面のユーザインターフェースの基本的な部品がそろっているので、
基本的な画面は問題なく構築できそうである。

ちなみに下記に、画面の実際の動作サンプルがある。
http://gwt.google.com/samples/Showcase/Showcase.html

Button のページに飛んでみると、サンプルコードとJavadocが書かれている。

このサンプルを参考に、ボタンを貼り付けてみる。

ここで、RootPanelというのが、きっと一番の基本となる画面の部分なんでしょう。
基本的には、new Buttonをして、そいつを

RootPanel.get().add(b);

としてやることで画面に部品ができるようですね。


public void onModuleLoad() {
// Make a new button that does something when you click it.
Button b = new Button("hogehoge", new ClickListener() {
public void onClick(Widget sender) {
Window.confirm("Are you ready?");
}
});

// Add it to the root panel.
RootPanel.get().add(b);
}
}


そして、実際に動かしてみた感じがこんな感じ。


サンプルの時と比べると、EDITの部分が変わった感じになるんですね。

ためしに、ボタンの部分を日本語にしてみたら文字化けした。
日本語には、まだ対応していないのか、単に記述が甘いだけなのか
現時点ではよくわからないが、先に進むことにしよう。

2009年4月17日金曜日

Javaでファイルの更新日付の取得&和暦表示

本日は、Javaでファイルの更新日付を取得してみた。

ついでに、イタリア形式の日付の出力をやり、その後に
和暦で日付を表示してみた。

国を変えてみると各国の日付の出力の仕方がわかってなかなか面白い。

下記がサンプルソースです。


import java.io.File;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

public class FileTimeStampTest {

/**
* @param args
*/
public static void main(String[] args) {
// TODO Auto-generated method stub
File file = new File("D:\\Tools\\CSV2\\profile.ini");
long lastModifytime = file.lastModified();
Date date = new Date(lastModifytime);
System.out.println(date.toString());
DateFormat df = DateFormat.getDateInstance();
System.out.println(df.format(date));
df = DateFormat.getDateTimeInstance();
System.out.println(df.format(date));
df = DateFormat.getDateTimeInstance(DateFormat.LONG,DateFormat.LONG, Locale.ITALY);
System.out.println(df.format(date));
DateFormat format = new SimpleDateFormat("GGGGyy年 MMMM d日 a hh 時 mm 分 ss 秒",new Locale("ja", "JP", "JP"));
System.out.println(format.format(date));

}

}

2009年4月15日水曜日

GWTコンパイル

GWTのコンパイルは、antを利用する場合には、

ant build

とやればコンパイルできたが、Eclipseからコンパイルする場合には、

右クリック→Google→GWT Compile

でやるとコンパイルできるようですね。

http://code.google.com/intl/ja/webtoolkit/tutorials/1.6/create.html

とりあえず、上のリンクの昨日の作業で作られた「StockWatcher.html」ファイルを
直接ローカルファイルとしてブラウザで開いてみると、再コンパイルせよ
というようなメッセージが出てきたので、適当に探していたら、それらしき
メニューがあったのでやってみたらコンパイルされ、開けるようになりました。

2009年4月14日火曜日

GWTで生成されるxmlとは

本日は、下記ページの

http://code.google.com/intl/ja/webtoolkit/tutorials/1.6/create.html
The module XML file

あたりを読んでみている。

このxmlファイルには、大きくは、スタイルシートの情報と、
最小に表示されるアプリケーションのエントリーポイントの情報が
書いてあるのか。

なるほど。ふ~~んという感じですね。

とりあえず、今週中くらいにはGetting Startedあたりの内容は一通り読んで、
理解しておきたいなと思っている。

Javaで拡張子の変更

拡張子の変更を行いたいなと思ってちょこっと書いてみた
サンプルプルプログラム

実際これだと、.の入ったファイル名の場合には、誤動作しそうですが、
書いてみるとこんな感じになるのだろうか。

Delphiだと、ChangeFileExtというダイレクトな関数があるのだけど、
Javaだとこんな感じが限界なんだろうか。



import java.io.File;


public class RenameFileTest {
public static void main(String[] args) {
File file = new File(args[0]);
String fileNm= file.getName();
fileNm=file.getParent()+File.separator+fileNm.replaceFirst("\\..*",".csv");
if(file.renameTo(new File(fileNm))){
System.out.println("リネーム成功");
}else{
System.out.println("リネーム失敗");
}
}

}

2009年4月12日日曜日

Google Plugin for Eclipsedでproject作成してみる

Using the Google Plugin for Eclipse - Google App Engine - Google Code
をやっている件の続き

続いてプロジェクトの作成をしてみる。

Eclipseのメニューから

file→new→Web Application Project



を実行すると上記のようなダイアログが出てくるので、入力してFinishボタンを
押すと、先日webAppCreator をコマンドで作ったものと同じものができた。

その後、何もしないで、とりあえず、

Run メニュー → Web Application

とすると実行される。

続いて、下記のページ内の 「Uploading to Google App Engine」を
http://code.google.com/intl/ja/appengine/docs/java/tools/eclipse.html

やってみようと試みたが、Uploadに失敗してしまう。きっと1万人の制限が
あるからかなと思い、この部分はあきらめる。

ちなみにeclipseのコンソールに出てくるログとエラーの内容はこんな感じ


======================================================
Compiling module com.blogspot.ttimez.guestbook.Guestbook
Compiling 5 permutations
Permutation compile succeeded
Linking into war
Link succeeded
Compilation succeeded -- 44.281s
Creating staging directory
Scanning for jsp files.
Scanning files on local disk.
Initiating update.
Unable to upload:
java.io.IOException: Error posting to URL: http://appengine.google.com/api/appversion/create?app_id=takes90&version=1&
400 Bad Request
Invalid runtime specified.

at com.google.appengine.tools.admin.ServerConnection.send(ServerConnection.java:114)
at com.google.appengine.tools.admin.ServerConnection.post(ServerConnection.java:66)
at com.google.appengine.tools.admin.AppVersionUpload.send(AppVersionUpload.java:345)
at com.google.appengine.tools.admin.AppVersionUpload.beginTransaction(AppVersionUpload.java:159)
at com.google.appengine.tools.admin.AppVersionUpload.doUpload(AppVersionUpload.java:68)
at com.google.appengine.tools.admin.AppAdminImpl.update(AppAdminImpl.java:41)
at com.google.appengine.eclipse.core.proxy.AppEngineBridgeImpl.deploy(AppEngineBridgeImpl.java:203)
at com.google.appengine.eclipse.core.deploy.DeployProjectJob.runInWorkspace(DeployProjectJob.java:97)
at org.eclipse.core.internal.resources.InternalWorkspaceJob.run(InternalWorkspaceJob.java:38)
at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)
java.io.IOException: Error posting to URL: http://appengine.google.com/api/appversion/create?app_id=takes90&version=1&
400 Bad Request
Invalid runtime specified.
======================================================

とりあえず、でもこんな感じで自分のつくったアプリケーションが公開されるのか
というようなイメージはつかめた。

Google Plugin for Eclipseを入れて見る

本日は、下記をやってみようと思う。

Creating an Application from Scratch (with Eclipse)
http://code.google.com/intl/ja/webtoolkit/gettingstarted.html

まず、下記をよんでみると、EclipseプラグインはGoogleAPPとGWTは統合されているようです。
とりあえず、こちらのページを参考にしながらインストールしてみる。
http://code.google.com/intl/ja/appengine/docs/java/tools/eclipse.html

Eclipseを起動する。

1.Help メニュー > Software Updates を選択
2.Available Software を選択
3. [Add site]ボタンを押し、Location欄に「http://dl.google.com/eclipse/plugin/3.4
と入力しOKボタンを押す。(eclipse 3.4の場合)
4.新しく出てきなGoogleのプラグインにチェックを要れInstallボタンを押す。
5.そのまま画面の指示に従い、続行(ライセンスの確認しfinishを押す)
6.eclipseの再起動を促すメッセージが出てくるのでそのままOkを押す。

これでインストールが終わり。

再起動されたeclipseを見ると、file→new→Web Application Project が選択できるように
なっているのでこれでインストールは完了。

2009年4月11日土曜日

Google Web Toolkit

Google Web Toolkitというのは、現在、何かと耳にすることが多いAjAX

アプリケーションを簡単に作成できるというもの。

本日はじめて動かして遊んでみた。


まずは、ここら辺からはじめてみる。




#本ドキュメントは上記ページに沿って行ってみた結果を書いている。


まずは、上記のページにも書いてあるようにインストールから。

家のPCには、antもJdkもまだ入っていなかったのでそこらへんからはじめる。






準備としては、上記のソフトを入れておく必要があるようです。


回答して、早速サンプルプログラムを動かしてみる。


D:\gwt-windows-1.6.4\gwt-windows-1.6.4\samples\Mail>ant hosted


すると、ファイアウォール解除のダイアログが出てくるがそのまま解除すると、

無難に動作する(ここでブロックしてしまうと、使えなくなってしまう)


このページにあるように、ちょっとソースを変更してみる。

このちょっとというのは、Mailの部分を「MyMail」に変更するサンプルのようです。


samples/Mail/src/com/google/gwt/sample/mail/client/Shortcuts.java


の中をドキュメントどおりに変更してみるとて再度antを実行してみると、確かに

再コンパイルされて、この変更も反映されていた。


確かに、javaソースからhtml&JavaScriptが生成されるようです。


次に


Creating an Application from Scratch (without Eclipse)


の部分をやってみる。

これは、最初からGWTアプリケーションを作る際に、ある程度必要なファイルを

自動生成する機能があるらしい。


webAppCreatorというコマンドを用いるようです。


サンプルどおりに入力してみる。


============================================================

D:\gwt-windows-1.6.4\gwt-windows-1.6.4>webAppCreator -out MyApplication com.mycompany.MyApplicationCreated directory MyApplication\srcCreated directory MyApplication\warCreated directory MyApplication\war\WEB-INFCreated directory MyApplication\war\WEB-INF\libCreated directory MyApplication\src\com\mycompanyCreated directory MyApplication\src\com\mycompany\clientCreated directory MyApplication\src\com\mycompany\serverCreated file MyApplication\src\com\mycompany\MyApplication.gwt.xmlCreated file MyApplication\war\MyApplication.htmlCreated file MyApplication\war\MyApplication.cssCreated file MyApplication\war\WEB-INF\web.xmlCreated file MyApplication\src\com\mycompany\client\MyApplication.javaCreated file MyApplication\src\com\mycompany\client\GreetingService.javaCreated file MyApplication\src\com\mycompany\client\GreetingServiceAsync.javaCreated file MyApplication\src\com\mycompany\server\GreetingServiceImpl.javaCreated file MyApplication\build.xmlCreated file MyApplication\README.txtCreated file MyApplication\.projectCreated file MyApplication\.classpathCreated file MyApplication\MyApplication.launchCreated file MyApplication\war\WEB-INF\lib\gwt-servlet.jar

=========================================================


その後、同様に起動してみる。


D:\gwt-windows-1.6.4\gwt-windows-1.6.4\MyApplication>ant hosted


そして、名前を入力してボタンを押すとこんな感じの画面が....



ソースは、あたりに転がっている
MyApplication/src/com/mycompany/client/

D:\gwt-windows-1.6.4\gwt-windows-1.6.4\MyApplication>ant build

と入力するとjavaScriptも再生されるのか下記のようにブラウザでファイルを
開いても閲覧できるようになる。

file:///D:/gwt-windows-1.6.4/gwt-windows-1.6.4/MyApplication/war/MyApplication.html

ただ、この場合には、サーバ側が動作していないので、RPC呼び出しに失敗しているようだが。

こうやって使ってみるとなかなかすごい仕組みだなぁと思う。

Javaの方が普段慣れているので、こちらを本格的に見て行こうかなとも思った。

2009年4月2日木曜日

HelloWorld

Google App Engineにて下記のサイトを参考にしながら
HelloWorldを動かしてみた。

Pythonという言語も初心者なんだけど、地道に身につけていこうかな。

参考にしたページは、こちら。
http://code.google.com/intl/ja/appengine/docs/python/gettingstarted/helloworld.html

ポイントは、helloworld.pyというファイルを作り、app.yaml というファイルにて、この
helloworld.pyというプログラムと、URLを結びつけるというところだろうか。

実際に動作させるには、コマンドライン上から

(GoogleAppのインストール先にあるdev_appserver.py) (今回作成したフォルダ)
google_appengine/dev_appserver.py helloworld/ 


と打つとローカルにサーバが立ち上がるので、

ブラウザから

http://localhost:8080/

へアクセスすると自分の書いたプログラムが動くという感じだった。

サンプルでは、すべての文字列に対して、helloworld.pyが結びつかれているので
実際に動かしてみるとどのようなURLもマッチするようである。

これが、今回のHelloWorldのポイントなのかな。

起動時のDOSイメージ

==============================================
D:\googleapp>"C:\Program Files\Google\google_appengine\dev_appserver.py" hellowo
rld/
C:\Program Files\Google\google_appengine\google\appengine\tools\appcfg.py:40: De
precationWarning: the sha module is deprecated; use the hashlib module instead
import sha
INFO 2009-04-02 13:55:20,250 appcfg.py] Server: appengine.google.com
INFO 2009-04-02 13:55:20,265 appcfg.py] Checking for updates to the SDK.
WARNING 2009-04-02 13:55:21,000 datastore_file_stub.py] Could not read datastor
e data from c:\docume~1\yamana7\locals~1\temp\dev_appserver.datastore
WARNING 2009-04-02 13:55:21,000 datastore_file_stub.py] Could not read datastor
e data from c:\docume~1\yamana7\locals~1\temp\dev_appserver.datastore.history
WARNING 2009-04-02 13:55:21,265 dev_appserver.py] Could not initialize images A
PI; you are likely missing the Python "PIL" module. ImportError: No module named
PIL
INFO 2009-04-02 13:55:21,515 dev_appserver_main.py] Running application hell
oworld on port 8080: http://localhost:8080
====================================================================

ブラウザのイメージ

JAVAで正規表現

最近、正規表現を使って検索するということをやってみた。
Javaだと正規表現の検索が簡単にできるので、



●Stringクラスに対して正規表現で検索する場合
String str;
if (str.matches(".*.xml")){
いわゆる*検索はこんな感じでいけて

●()で囲まれた文字列を検索し、それを表示するプログラムのサンプル
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.StreamTokenizer;
import java.util.StringTokenizer;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
class Test{
public static void main(String args[]){
Pattern pattern = Pattern.compile("\\([^\\(\\)]*\\)");
Matcher matcher = pattern.matcher("(aiueo) (aiueo)(aiueo) (kakikukeko)");
while (matcher.find()){
System.out.println(matcher.group());
};
}
}



正規表現の検索がこんな手軽にできるのはやはり便利ですね。

テキストファイルの中からURLだけを抜き出すというのなんかも
正規表現を使ってあげれば一発ですね。

正規表現サンプル集なんかでいろいろな検索ができます。