Posts filed under ‘未分類’
NetBeans 5.0 Official Release
NetBeans 5.0がリリースされました。
http://www.netbeans.org
この製品中には弊社の最新のアプリケーションサーバである、
Sun Java System Application Server 8.2がバンドルされたことをはじめとして
Weblogic 9やJBoss4もサポートされています。
また、開発において重要なファクタであるエディタも拡張されており
キーマップの変更もNetBeans4.1に比べると容易にできるようになりました。
変更点の詳細については下記のURLを御参照ください。
http://www.netbeans.org/community/releases/50/index.html
NetBeans5.0の起動画面は下記となります。
またデスクトップに生成されるアイコンも少し変更されました。
下記はJSFのコードを入力する際のナビゲーションの例です。
最後に少し触ってみた感想を書きます。
NetBeans5.0でJSFのアプリケーションを作成するプロジェクトを
作成してみました。
Fileメニューより [New Project] → [Web] → [Web Application]にて
プロジェクトを作成していきます。必要項目に入力に[Next]ボタンを押下すると、
下記の画面のようにフレームワークを選択する画面が生成されます。
下記の画面で[JSF]を選択し[Finish]を押下するとJSF用のプロジェクトが
生成されます。
ここで、プロジェクト中のファイルを確認するとJSFアプリケーションの作成に必要な
web.xml等が自動的に生成されていました。faces-config.xmlについては中身
(の定義のみ記述)が空のファイルが生成されていました。
NetBeansでJSFアプリケーションを構築したい場合、基本的には全て自分で
作成・設定をする必要があります。つまりどちらかというと玄人向の製品に
仕上がっています。
Creatorと比較すると、Creatorでは新規JSPのページを作成する場合、対応する
バッキングビーンとなるJavaクラスが自動的に生成され、faces-config.xmlにも
設定されます。
この辺りは、素人の方に対しては開発の敷居を非常に低くしてくれます。
しかし、逆にCreator2の仕様に縛られるため余分なファイルやコードが生成されます。
一方、NetBeansでJSPファイルを新規生成してもバッキングビーンの自動生成や
faces-config.xmlに対する自動追加設定は行われません。
しかし、余分なファイルやコードを取り除くことができます。
どちらが優れているかというのを申し上げることは困難なのですが、
ケースバイケースで製品を使い分けていただければと思います。
おそらく、デモのWebアプリを作成する場合、Creatorで雛形を生成すると
一からの手書きやNetBeansでの作成の場合に比べて格段に早くアプリを生成する事が
できるようになると思います。
仮に余分なコードやクラスを削除したいという御要望がある場合は、
NetBeans5.0でCreatorのプロジェクトをインポートし余分なコードを削除することで
全体のコードがすっきりとするかと思います。
NetBeans5.0には面白い新機能がたくさん含まれていますので、
是非、御使いいただければと思います。
Creator2 正式リリース
さて、久しぶりのアップデートになりますが、
本日、Sun Java Studio Creator 2 が正式リリース致しました。
もちろん、FREEで御使用いただけます。
Creator2 EA版を御使用いただいた方には既にご存知のことと思いますが、
MyFaces等に含まれていた、ファイルアップロードやカレンダー等の
コンポーネントも標準で含んでいるため、より容易にJSFアプリケーションの
開発ができるようになっています。
＃Creator2の使い方は本ブログにもアップしていますので、
＃どうぞ御参考にしていただければと思います。
また、日本語にも対応しておりますので、今までEA版を御使用されていた方は
是非、最新のCreator2の御入手を御検討ください。
最後に、NetBeans5.0ももう直ぐで正式リリースされる予定です、
このNetBeans5.0ではApplication Server9.0 PE版
(コードネーム：glassfish)がバンドルされる予定です。
これも非常に楽しみなIDEで正式リリースが非常に楽しみです。
Available Free!
Sun Java Studio Creator 2 makes visual web application and portlet development easy.
Creator2でJSF Fileuploadアプリケーション
さて本日は、Creator2 EAを使用したファイルアップロードWebアプリケーションを
作成します。
まず、今までと同様新規プロジェクトを作成し下記の画面を作成してください。
ここで”アップロード”ボタンを押下します。
すると、”button1_action()”メソッドを実装する画面が表示されますので
下記のコードを記述します。
下記はファイルサイズを取得し１M未満のファイルであれば、
Applicationサーバが動作するマシンの”c:\tmp”ディレクトリにファイルを出力する
コードです。
（ただし、下記はファイルアップデートサンプルを記述するために、
かなり手抜きに書いています。例：日本語ファイル名のファイルをアップロードした
場合、下記はサーバ側でファイル名が文字化けします。）
下記で重要な点は、fileUpload1というインスタンス変数を使用し
アップロードされたファイルの操作を行うということです。
public String button1_action() {
UploadedFile upFile = fileUpload1.getUploadedFile();
//ファイルサイズの取得（バイト）
long fileSize = upFile.getSize();
if(fileSize <= 1048576){ //1M以下ならOK
//オリジナルファイル名の取得
String origFileName = upFile.getOriginalName();
//バイト配列の取得
byte[] data = upFile.getBytes();
try{
//オリジナルファイル名で書き込み
FileOutputStream fout = new FileOutputStream("c:\\tmp\\" + origFileName);
fout.write(data);
fout.flush();
fout.close();
}catch(IOException ioe){
return "error"; //エラーページへ
}
}else{
return "sizeerror"; //エラーページへ
}
return null;
}
上記の他、UploadedFileクラスのインスタンスメソッドには
下記のようなメソッドがあります。例えばコンテントタイプを取得し型に応じた処理を
行う場合にはgetContentType()メソッドを使用します。
また、取得するデータはgetBytes()メソッドの他、InputStreamを利用して
取得することも可能です。
//コンテントタイプの取得
String contentType = upFile.getContentType();
if(contentType.equals(“text/plain”)){
String stringData = upFile.getAsString();
//文字列処理を記述
}
try{
//InputStreamの取得
InputStream inStream = upFile.getInputStream();
}catch(IOException ioe){
return “error”; //エラーページへ
}
如何でしょう？
ファイルアップロードのWebアプリケーションも非常に簡単に作成できることが
御理解いただけたかと思います。
Creator2でValidatorの実装
今日は、JSFのバリデータを取り上げます。
まず、「ValidatorTest」という新規プロジェクトを作成して下さい。
そして、今までと同様、ドラッグ＆ドロップにてコンポーネントを貼り付けます。
今回は、「Label」コンポーネントを２つ貼り付けて、プロパティを変更します。
ここでは「名前（漢字）」、「名前（カナ）」とします。
次に、「TextField」を２つ貼り付けてください。
そして「Message」コンポーネントを２つ貼り付けてください。
最後にボタンを２つ貼り付けます。
画面作成イメージ
次に、「TextField」コンポーネントと「Message」コンポーネントとの関連付けを
行います。
「Message」コンポーネント上で「Ctrl＋Shiftキーを押した状態で
マウスでドラッグ」してください。そして「TextField」上でドロップしてください。
コンポーネントをドラッグした状態でマウスを移動すると「Message」
コンポーネントが青枠で囲まれて、波線が表示されます。
そして「TextField」上でドロップすると「Message summary for textField**」という
文字列が「Message」コンポーネント上に表示されます。
これで、「TextField」コンポーネントと「Message」コンポーネントの関連付けが完了です。
Validatorの設定（標準Validatorの利用）
それでは、実際にValidatorを使用していきます。
まず始めはJSF標準のValidatorを利用します。
今回は、入力された文字列の長さを検証する「LengthValidator」を使用します。
そして5文字以上10文字以内でなければエラーを出力するようにします。
それでは「TextField」コンポーネントのプロパティより「validator」のコンボボックスを
開き「(new LengthValidator)」を選択して下さい。
すると、プロパティの値は「lengthValidator1」に変更されます。
「maxLength」はValidatorの最大値の設定項目ではありません。
入力値の範囲の設定は、「Outline」タブの「lengthValidator1」を選択し
設定します。
「Outline」タブより「lengthValidator1」を押下してください。
すると、「Properties」タブに「maximum」、「minimum」を設定する項目が
表示されます。ここに適切な値（範囲）を設定してください。
今回は、maximum=15,minimum=5を入力します。
この状態で、プログラムを1度ビルドしてデプロイ、実行してみてください。
すると下記のような実行結果が得られます。
以上で、標準Validatorを使用したサンプルができましたが、如何でしょうか？
補足：
標準Validatorのエラーメッセージは、プロパティの値を上書きしていただく事で
メッセージを変更できます。例えば、LengthValidatorの場合、下記のプロパティを
作成して下さい。（詳細はJSFの関連書籍を参考にしてください。）
message.properties
javax.faces.validator.LengthValidator.MAXIMUM=15文字以上入力できません。
javax.faces.validator.LengthValidator.MINIMUM=5文字以上入力してください。
Validatorの設定（独自Validatorの作成）
次に独自のValidatorを作成しましょう。
まず、「TextField」でマウス右クリックをし「Edit Event Handler」から
「validate」を選択してください。
すると下記のコードが自動的に作成されるかと思います。
public void textField2_validate(FacesContext context, UIComponent component, Object value) {
// TODO: Check the value parameter here, and if not valid, do something like this:
// throw new ValidatorException(new FacesMessage(“Not a valid value!”));
}
この部分に独自コードを実装します。例えば半角カナと空白のみ入力を
受け付けるコードは下記のようになります。
public void textField2_validate(FacesContext context, UIComponent component, Object value) {
// TODO: Check the value parameter here, and if not valid, do something like this:
// throw new ValidatorException(new FacesMessage(“Not a valid value!”));
if(value instanceof String){
if(isKatakanaString((String)value) == false){
showErrorMessage(“カタカナを入力してください。”);
}
}else{
showErrorMessage(“不正な値です。”);
}
}
/**
* 引数で与えられた文字列をMessageコンポーネントに表示する。
*
* @param value – エラーメッセージ
*/
private void showErrorMessage(String errorMessage){
FacesMessage message = new FacesMessage(errorMessage);
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(message);
}
/**
* 入力された文字がカタカナかを判定する。
*
* @param value – 判定する文字列
* @return true:全角・半角カタカナ・全角空白・空白 false:不正文字列
*/
private boolean isKatakanaString(String value){
logger.debug(“isKatakanaString() started.”);
boolean returnValue = false;
for(int i=0;i<value.length();i++){
char code = value.charAt(i);
//カタカナと全角空白・半角空白ならばOK
/*
if(code >= 0x30a1 && code <= 0x30fe){ //全角カナ
returnValue = true;
}else if(code == 0x3000 ||
*/
if(code == 0x20){ //半角空白・全角空白
returnValue = true;
}else if(code >= 0xff61 && code <= 0xff9f){ //半角カナ
returnValue = true;
}else{
returnValue = false;
return returnValue;
}
}
return returnValue;
}
上記で、showErrorMessage()メソッドは重要ですが、ここで独自のエラーメッセージを
設定し、ValidatorException()を送出しています。
上記のコードの実行結果は下記の通りです。
実行例１
実行例２
補足
独自Validatorは、実際のプロジェクトでは標準Validatorを利用する以上に
よく使われるかと思います。しかし、isKatakanaString()メソッドのように切り分ける事で
JSFに精通していないJavaエンジニアも検証用のコードを記述することが可能になります。
そこでこのValidatorの実装はできるだけ作業分担しましょう。
最後に、今回紹介したValidatorも重要ですが、今後AJAXと併用してリアルタイムで
バリデーションを行う機能や入力補完機能と共に使われることも多くなってくるのでは
ないかと思いますので是非下記もチェックしてみてください。
https://bpcatalog.dev.java.net/nonav/ajax/textfield-jsf/design.html(AJAX Auto-Completion)
https://bpcatalog.dev.java.net/nonav/ajax/validation/design.html(Realtime Valiadtion)
次回は、コンバータかFileUploadを紹介します。
Creator2でGoogle WebServiceを実装する
さて、本日は予定を変更してGoogleの検索WebServiceをCreator2で実装します。
作成するWebアプリケーションは、テキストフィールドに入力された検索キーワードを元に
Googleに問い合わせ、検索結果を表示するアプリケーションです。
作成イメージ
まず、実際にGoogleのWebServiceを利用する前に、Google Web APIについて、
簡単に御紹介します。
Google Web APIを使用するとWebアプリケーションの開発者は
自身のサイト上で直接Googleに問い合わせ、世界中のWebサイトを検索できるようになります。
GoogleはSOAPとWSDLを使用しているため、JavaやPerl等を使用して利用が可能です。
Googleが提供しているサービスとして以下があります。
- 検索
- キャッシュの取得
- スペルチェック
Google Web APIに関する詳細は下記を御参照ください。
Google Web APIs (beta)
次に、実際にアプリケーションを構築する前に、事前に準備していただく事が
一つだけあります。
それは、Google上でアカウントを作成していただく事です。
アカウントを取得後、「ライセンスキー」を取得してください。
ライセンスキーを使用すると１ライセンスキー辺り、1日に1000回まで検索することが
可能です。
ライセンスキーを取得するまでの大まかな流れは下記となりますので、
下記に従いライセンスキーを入手してください。
- Googleへの登録
- Googleからメールを受信
- 受信したメールに記述されているURLにアクセス
- ライセンスキーが記述されたメールを受信
ライセンスキーのサンプルを下記に示します(最後10桁は変更してます)。
kZ7RVhlQFHKFUh/ZN8h7epABCDEFGHIJ
問題なく、ライセンスキーは入手できましたか？
それでは、実際にGoogleの検索Webアプリケーションを作成していきましょう。
まず、今までと同様新規プロジェクトを作成してください。
プロジェクト名として「GoogleSearch」を指定してください。
次に、画面上に表示するコンポーネントをドラッグ＆ドロップにて貼り付けてください。
ここでは、検索キーを入力するテキストフィールド「TextField」と、実行ボタン
「Button」、検索結果を表示するテーブル「Table」を貼り付けて下さい。
次に、検索結果を表示する表（テーブル）に対して、データプロバイダを指定します。
ここでは、デフォルトのデータプロバイダに変え、「Object Array Data Provider」を
指定します。
「Palette」タブより「Data Providers」を選択し「Object Array Data Provier」
を表示してください。このプロバイダを画面デザイン上の「Table」へドラッグ＆ドロップ
します。
これにより、自動的に「Page1.java」に下記のコードが追加されます。
private ObjectArrayDataProvider objectArrayDataProvider1 = new ObjectArrayDataProvider();
public ObjectArrayDataProvider getObjectArrayDataProvider1() {
return objectArrayDataProvider1;
}
public void setObjectArrayDataProvider1(ObjectArrayDataProvider oadp) {
this.objectArrayDataProvider1 = oadp;
}
次に、WebServiceをプロジェクト上に配置します。
「Servers」タブより、「Web Services」→「Samples」→「GoogleSearch」を
選択してください。そして「GoogleSearch」を画面デザイン上にドラッグ＆ドロップ
します。
すると、「Outline」タブ上に「googleSearchClient1」というプロパティが表示されている
事が確認できます。
（本来は上のデータプロバイダの指定の前にこの項目をやったほうがいいのですが、、）
次に、プロパティを追加します。追加するプロパティはGoogleからの検索結果を
格納する為の配列となります。
追加方法は、「Projects」タブの「Page1.java」ファイルを選択し、
マウス右クリックしてください。すると「Property」が表示されますので、
これを選択実行します。
「Property」を選択すると下記の画面が表示されます。
それぞれの項目に値を入力し、「OK」ボタンを押下してください。
プロパティの追加により、「Page1.java」に下記のコードが追加されます。
private webservice.googlesearchservice.ResultElement[] resultElement;
public webservice.googlesearchservice.ResultElement[] getResultElement() {
return this.resultElement;
}
public void setResultElement(webservice.googlesearchservice.ResultElement[] resultElement) {
this.resultElement = resultElement;
}
次に、先ほど作成した「Object Array Data Provider」と「resultElement」を対応させます。
まず、「Outline」タブより「objectArrayDataProvider1」を選択しプロパティ設定画面を
確認します。ここで「array」の要素のコンボボックスを押下すると、「resultElement」が
追加されていることが確認できますので、これを選択します。
これで、「Object Array Data Provider」と「resultElement」の対応付けが完了です。
それでは画面デザインに戻ってください。Tableのデータは今までの操作で
「resultElement」の値を対応付けさせました。
そこで「resultElement」の構成要素から表示項目を選択します。
表示項目の選択は、「Table」よりマウス右クリックにて「Table Layout」を選択します。
次に、項目中よりタイトル(title)・要約(snippet)・URLを選択します。
以上で表示項目の選択は完了です。
以上が終了すると画面デザインは下記のように変更されていることが
確認できます。
最後に、ボタン押下時の処理を記述してください。
画面デザインで、ボタンをダブルクリックしてJavaソースエディタを開いてください。
そして下記のコードを記述してください。
＃下記では便宜上、例外処理等、詳細な実装は抜いています。
public String button1_action() {
String searchString = (String)textField1.getText();
try{
GoogleSearchClient sclient = getGoogleSearchClient1();
GoogleSearchResult result = sclient.doGoogleSearch(“kZ7RVhlQFHKFUh/ZN8h7epABCDEFGHIJ”, //Googleライセンスキー
searchString, //検索キーワード
0,
10, //検索結果の最大件数
false,
“lang_ja”,
false,
null,
null,
null);
resultElement = result.getResultElements();
objectArrayDataProvider1.setArray(resultElement);
}catch(Exception e){
return “error”;
}
return null;
}
上記のコードを実装後、ビルド・デプロイして実行してください。
Google検索Webアプリケーションの実行結果、下記の画面が表示されます。
補足：
「Servers」タブで「GoogleSearch」を選択した際に、処理可能な内容（メソッド）が表示されますが、
Creator2上から簡単にテストできます。
「GoogleSearch」より「doGoogleSearch」を選択してください。
ここで、マウス右クリックにて「Test Method」という項目が表示されます。
これを選択してください。
「Test Method」にて表示される画面にて必要項目を入力し「Submit」ボタンを押下します。
すると、「Results」欄に結果が表示されます。
以上で、Creator2を使用したWebサービスの使い方について説明しましたが、如何ですか？
とても簡単にWebサービスを利用できますよね！！
他にもWebサービスに関するサンプルが多くあるので、是非試してみてください。
また、今回は、とりあえずGoogleのWebServiceを使ってみるということが目的だったため、
WSDLの登録や表示項目についての詳細は取り上げませんでした。
（リンクを押下しても画面遷移されない等。）
この辺は、また後日説明します。
次回は、ナビゲーションか、バリデータどちらかを紹介する予定です。
UIコンポーネントとDBのバインド
さて、本日は、UIコンポーネントとDBのバインドについて説明します。
今回のプログラムは、前回のプログラムを少し改造して作成を行います。
実行結果：
DBより人間の名前を取得しドロップダウンリスト（コンボボックス）上に
表示させます。
そして、リストより名前を選択し、ボタンを実行すると対応する人に対して、
「こんにちは、＊＊＊さん」と表示するプログラムを作成します。
事前情報：
まず、プログラムを作成する前に、事前情報を少し話しします。
今回、ここで提供したい情報はCreator2がJDBCのRowSetをサポートしている
ということです。
JSR 114: JDBC Rowset Implementations
このJDBC RowSet(行セット)テクノロジにより、Creatorでは、
データベースにドラッグ & ドロップでグラフィカルに
アクセスしたり、照会をグラフィカル編集したりできます。
加えて、JDBC 互換の為、Creator から、広範囲の SQL データベース
を利用できるようになります。
プログラムの作成：
さて、前置きはここまでにして、実際にプログラムを作成していきましょう。
まず、前回のプロジェクトからテキストフィールドを削除してください。
削除は、テキストフィールドを選択し、マウスの右ボタンをクリックします。
そして、「Delete」を選択実行するとコンポーネントを削除できます。
そしてDropDownListコンポーネントをドラッグ＆ドロップにて、
画面に貼り付けてください。すると下記の画面が表示されます。
ここで、下記の「outline」パレットを確認してください。
デフォルトで設定されている、dropDownListコンポーネントのオプションの値が
確認できます。仮に現在の状態でプログラムを実行するとドロップダウンリスト
（コンボボックス）には「Item1」、「Item2」、「Item3」の文字列が表示され
選択可能になっていることが確認できます。
UIコンポーネントとDBテーブルのバインド
この状態は、まだDBにはバインドされていませんが、これからdropDownList
コンポーネントをDBのテーブルにバインドする方法を行います。
今回は、DBテーブルとしてCreator2にデフォルトで登録されている、「Person」
テーブルにバインドします。
補足：CreatorはデフォルトでPointBaseという簡易データベースサーバが同梱されています。
手順として、まず「Server」タブを選択します。「Server」タブ中の「Data Sources」
ツリーより、「Trabel」→「Tables」→「PERSON」テーブルを表示させます。
そして、「PERSON」テーブルをドラッグ＆ドロップでdropDownListコンポーネント上に
配置します。
すると、dropDownListコンポーネント上に表示されていた、「Item1」の項目は
「abc」という文字列に変わります。
ここで、ドロップダウンリスト上で選択可能な表示項目、そして選択した後の
実行結果を設定します。ドロップダウンリスト上でマウス右クリックを押下して
ください。すると下記の項目が表示されます。ここで「Bind to Data」を実行します。
「Bind to Data」を実行すると下記の画面が表示されます。
ここで、「Value Field」と「Display Field」を選択します。
今回の例では、表示も実行結果も人間の名前を設定したい為、両方ともに、
「PERSON.NAME」を選択し「OK」ボタンを押下してください。
これで、UIコンポーネントとDBへのバインドは完了です。
とても簡単ですよね！！
さて、それではこのプログラムの実装を行いたいと思います。
前回のプロジェクトと同様、画面デザインに戻って、「こんにちは」ボタンを
ダブルクリックしてください。
すると、button1_action()メソッドを記述する画面が表示されるかと思います。
ここで、下記のコードを記述してください。
public String button1_action(){
//TODO: Replace with your code
String name = (String) dropDown1.getSelected();
String splitnames[] = name.split(“,”);
staticText1.setText(“こんにちは” + splitnames[1] + “さん!!”);
return null;
}
コードを若干説明します。ドロップダウンリストをドラッグ＆ドロップした際、
dropDown1というIDが割り当てられ、そしてCreatorにより自動的に
下記のコードが生成されています。今回、DropDownクラスのインスタンスメソッド
getSelected()を実行し、選択された値を取得しています。
取得した文字列（名前）は、”,”（カンマ）によって分割されたFirstNameと
LastNameとなっています。今回LastNameだけを表示させるため、文字列を分割して
表示させています。
private DropDown dropDown1 = new DropDown();
public DropDown getDropDown1() {
return dropDown1;
}
public void setDropDown1(DropDown dd) {
this.dropDown1 = dd;
}
さて、上記のコードを記述したら、後は「Build」して実行します。
無事コンパイル（Build）は完了しましたか？実行すると下記のような
実行結果が得られるかと思います。
最後に、先ほどは表示名と返り値を共に「PERSON.NAME」としましたが、
色々と変えて実行してみてください。
以上で、UIコンポーネントとDBテーブルとのバインドについて説明しましたが、
問題なくできたでしょうか？
次回は、HTMLの<TABLE>（表）に対してDBテーブルをバインドさせる方法について
記載する予定です。
Creator2によるHelloWorldプロジェクトの作成
今回より実際に、プロジェクトを実装していくことになりますが、
プロジェクトを進めていく上で重要な画面機能について理解する必要があります。
それは、下記の「Projectsタブ」と「Filesタブ」です。
「Projectsタブ」で表示される項目ファイル等はプロジェクトを実装する上で
必要な項目が含まれます。「Filesタブ」はOSのファイルシステム上に存在する
ファイルを示し、プロジェクトで削除された項目を実際にファイルシステム上から
削除したいような場合は、こちらのタブを使用してください。
 |  |
Projectsタブ | Filesタブ |
次に、画面を作成する為に使用するパレットについて説明します。
Creator2ではCreator1を使用して実際に開発を行っている、
開発者からの多くの声を反映し非常によく使われるコンポーネント
（ファイルアップロードやカレンダー等）を標準で利用できるように
なっています。
また、この独自拡張UIコンポーネントを使用する事を前提として
作成されているため、逆にJSFの標準タグのみを使用して画面を
作成する事は難しくなります。
（Creator1のプロジェクトをインポートすると作成できると
Creator2のエンジニアから言われているがまだ実際には試していません。）
ただし、利点として今までファイルアップロード、カレンダー、Tree等の
コンポーネントを利用したい場合、MyFacesもしくは、独自に作成しなければ
利用できなかったのですが、Creator2を利用するとこれらが簡単に
利用できるようになります。
Creator2の拡張コンポーネントを利用した場合、JSP中では、<ui:***>
というタグが使用されます。
UIタグの使用例（ボタン）：
<ui:button action=”#{Page1.button1_action}” binding=”#{Page1.button1}” id=”button1″ style=”left: 288px; top: 72px; position: absolute” text=”ボタン”/>
 |  |
Basic パレット（Creator2独自拡張） | Standard パレット(JSF標準) |
それでは、画面を作成していきましょう。
画面を作成する方法は非常に簡単でパレットよりコンポーネント
（ボタン、テキストフィールド等）をドラッグ＆ドロップして画面
（グリッド表示されている画面）に配置していきます。
配置した際のイメージは下記のようになります。
ここで、赤線で引いた部分「Design」、「JSP」、「Java」とありますが、
それぞれを押下すると、デザインに対応するJSPファイル、Javaファイルを参照
できます。
（Creatorで画面を作成すると対応する***.jsp,***.javaが自動作成されます。）
上記の画面に対応するJSPのコードは下記となります。
ここで、画面デザインに一度戻ります。
個々のコンポーネントはそれぞれプロパティをもっています。
下記に、ボタンとテキストフィールドのプロパティをしめします。
ここで、ボタンの表示名やテキストフィールドの初期値を設定することができます。
それ以外にも多くのプロパティが存在しますので、それぞれ確認してください。
ボタンプロパティの編集
テキストプロパティの編集
コンポーネントプロパティの編集を完了すると、
最後に実装コードを記述します。
実装は、画面デザインに作成したコンポーネントをダブルクリックして編集します。
下記の例では、ボタンが押下された際の処理を記述するために、
ボタンをダブルクリックした際に表示されるコードを示します。
public String button1_action() {
// TODO: Process the button click action. Return value is a navigation
// case name where null will return to the same page.
return null;
}
ここでは、Text Fieldコンポーネントに入力された値を取得し、
Static Textに入力値を表示するコードを記述します。
コードは下記のようになります。
public String button1_action() {
// TODO: Process the button click action. Return value is a navigation
// case name where null will return to the same page.
String name = (String)textField1.getText();
staticText1.setText(“こんにちは” + name + “さん！！”);
return null;
}
これで入力された値を表示するプログラムの完成です。
しかし、ここで疑問がでる方もいらっしゃるかと思います。
何故、textField1.getText()で入力値が取得できるの？
これに対しては、明確な理由があります。下記に理由を説明します。
まず、Creator2の「Design」にて画面作成した全コンポーネントには、
それぞれのコンポーネントを一意に識別するIDが存在します。
たとえば、Text Fieldのコンポーネントを貼り付けると、画面右部に
下記のプロパティが表示されることがわかります。
– General
(id) textField1
このIDがこのText Fieldコンポーネントを識別するIDとなります。
「Design」にて画面にコンポーネントを貼り付けた後、
作成されたJSPのコードを確認します。
すると、下記のJSPコードが自動生成されていることを確認できます。
ここで、先ほどの「Design」で入力したIDに一致するid=”textField1″が
存在していることがわかります。
<ui:textField binding=”#{Page1.textField1}” id=”textField1″/>
また、ここで注目して頂きたい部分がbinding=”#{Page1.textField1}”
の部分です。
これは、Page1というManaged BeanのプロパティtextField1に値をバインドしている
ということです。
では、そのManaged BeanのtextField1の実体はどこに存在しているのでしょう。
これは、「Java」を選択して表示されるPage1.javaファイル中に存在します。
デフォルトで非表示部分に記述されていますので、Page1.javaより探してみましょう。
public class Page1 extends AbstractPageBean {
のクラス定義直後に下記のタブが存在していることを確認できます。
これを展開してみましょう。
+ [Creator-Managed Component Definition]
すると、Creatorが自動的に作成したコンポーネントに1対１で対応する
インスタンス変数、セッター、ゲッターが存在することが確認できます。
private TextField textField1 = new TextField();
public TextField getTextField1() {
return textField1;
}
public void setTextField1(TextField tf) {
this.textField1 = tf;
}
先ほど、皆様は、Page1.java中のbutton1_action()メソッド中から
textField1.getText()を呼び出しました。
つまり、これは通常のインスタンス変数のメソッドを実行しているのと
同じことが理解できます。
以上で、「Design」、「JSP」、「Java」についての説明を行いましたが、
理解されましたか？
以上、コードの入力を完了しプロジェクトを実行してみましょう。
Creator2のメニューより、「Run」→「Run Main Project」を実行します。
実行結果、ブラウザに下記のような結果が得られます。
補足１
上記で、binding=”#{Page1.***}”と記述しましたが、これは
managed-beans.xmlファイル中で定義しています。
これは、hellowwebパッケージ中のPage1クラスをPage1として参照可能であることを
定義しています。またこのPage1というBeanはrequestスコープで使用することを
定義しています。
<managed-bean>
<managed-bean-name>Page1</managed-bean-name>
<managed-bean-class>helloweb.Page1</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
補足２
最後に、今後、Creator2を御使用いただいていただく上でのTipsを一つ
御紹介します。
コードを入力する際に、「Ctrl + Space」(Solaris,Linuxの場合 Ctrl + \)を
入力してください。すると自動的にコード補完を行ってくれますので、
入力の際に非常に役立ちます。
今回は、簡単なプロジェクトの作成方法についてまなびました。
次回は、コンポーネントを使ったDBへのリンクについて説明します。
起動とプロジェクトの作成方法について
Sun Java Studio Creator2の起動
インストールが正常に完了しプログラムを実行すると下記の画面が表示されます。
これが、Creator2のインストール直後の起動画面になります。
JSFの新規プロジェクトの作成
上記画面で、「Create New Project」ボタンを押下すると
プロジェクトを作成することができます。
そして、今回JSFのアプリケーションを作成しますので、
「JSF Web Application」を選択し「Next >」ボタンを押下します。
すると下記の画面が表示されます。そして「Project Name」にプロジェクト名を入力し、
最後に「Finish」ボタンを押下します。
これで、Sun Java Studio Creator2の新規プロジェクトが作成されます。
新規プロジェクトが作成されると下記の画面が表示されます。
正常にプロジェクトは作成できましたか？
御覧頂いたようにとても簡単にプロジェクトを作成できます。
JSFのWeb Application以外にもさまざまなプロジェクトを作成できますので、
それぞれ試してみてください。
次回は、HelloWebアプリケーションの実装について記載します。
Sun Java Studio Creatorについて
2005/10/09 10/10に東京国際フォーラムにて
Java One TokyoのSun Java Studio Creator2の
ハンズオンラボを行いました。
10/09のセッションにおきましては、一部不手際があり、
ここで改めて御侘び申し上げます。
10/10のセッションにおきましては、すべての演習を
完了することができ、またアンケートの結果でも
好評をいただきました。
両日とも御参加頂いた皆様、大変ありがとうございました。
ここでは、セッションの復習と共にセッションで
説明ができなかった点、また不十分だった点について
数回にかけてアップデートしていく予定ですので
どうぞ復習の際にこちらも加えて御確認頂ければと
思います。
まず、技術的な内容を説明する前に一点、
今回のJavaOneTokyoで弊社開発ツールに関する重要な
発表が行われました。
それは、Sun Java Studio CreatorとSun Java EEの
開発ツールが無償で提供されることになったということです。
詳細につきましては、下記URLを御参照ください。
http://developers.sun.com/prodtech/javatools/free/
次に、Creator2 EA版の入手先を下記に示します。
現在、Creator2のEarly Access版（英語版）が提供されて
おります。日本語版につきましては現在作成中ですので、
今しばらく御待ち下さい。
Creator Home Page
まずSDNメンバーとして登録して頂きCreator2を入手してください。
入手後、インストールバイナリ、もしくはスクリプトを実行して
Creator2にインストールしてください。
インストール完了後、プログラムを実行すると上記
起動画面が表示されます。
次回以降、技術的な内容を序所に説明していく予定です。
寺田 佳央 - Yoshio Terada 