Creator Pack For NetBeans
さて、今日は久々にCreatorネタを少しアップデートします。
以前から数多くの御客様から御要望をいただいていたのですが、
CreatorとNetBeansの統合についてですが、少しだけ情報がでてきました。
Creator2とNetBeansの統合計画(Shortfinというプロジェクト名で)が
本格的に進みだしたようです。
まだ、色々と仕様をつめている段階のようで、NetBeansの既存の画面項目と
Creatorの画面項目をどのように統合すべきか？等さまざまな議論がされている状況で
サンプルの画面もまだまだ御見せできない段階なのですが、
実はこのネタ今年のJava One 2006の前日のNetBeans Dayで紹介されたようです。（すいませんちょっと古いネタで。）
Winston Prakash's Weblog
http://blog.sun.com/roller/page/winston?entry=creator_pack_for_netbeans
これにより、NetBeansは統合開発環境としてモバイルからリッチクライアント
Webアプリケーションからエンタープライズ分野まで全てを網羅できるようになりそうです。
是非、このCreator Pack For NetBeansを楽しみにしておいてください。
Permalink
No Comments
Track Back :
ここで”アップロード”ボタンを押下します。
すると、"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アプリケーションも非常に簡単に作成できることが
御理解いただけたかと思います。
次に、「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と併用してリアルタイムで
バリデーションを行う機能や入力補完機能と共に使われることも多くなってくるのでは
ないかと思いますので是非下記もチェックしてみてください。
まず、実際にGoogleのWebServiceを利用する前に、Google Web APIについて、
簡単に御紹介します。
Google Web APIを使用するとWebアプリケーションの開発者は
自身のサイト上で直接Googleに問い合わせ、世界中のWebサイトを検索できるようになります。
GoogleはSOAPとWSDLを使用しているため、JavaやPerl等を使用して利用が可能です。
Googleが提供しているサービスとして以下があります。
次に、検索結果を表示する表（テーブル）に対して、データプロバイダを指定します。
ここでは、デフォルトのデータプロバイダに変え、「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アプリケーションの実行結果、下記の画面が表示されます。
「Test Method」にて表示される画面にて必要項目を入力し「Submit」ボタンを押下します。
すると、「Results」欄に結果が表示されます。
以上で、Creator2を使用したWebサービスの使い方について説明しましたが、如何ですか？
とても簡単にWebサービスを利用できますよね！！
他にもWebサービスに関するサンプルが多くあるので、是非試してみてください。
また、今回は、とりあえずGoogleのWebServiceを使ってみるということが目的だったため、
WSDLの登録や表示項目についての詳細は取り上げませんでした。
（リンクを押下しても画面遷移されない等。）
この辺は、また後日説明します。
次回は、ナビゲーションか、バリデータどちらかを紹介する予定です。
そして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テーブルをバインドさせる方法について
記載する予定です。
ここで、赤線で引いた部分「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へのリンクについて説明します。
JSFの新規プロジェクトの作成
上記画面で、「Create New Project」ボタンを押下すると
プロジェクトを作成することができます。
そして、今回JSFのアプリケーションを作成しますので、
「JSF Web Application」を選択し「Next >」ボタンを押下します。
すると下記の画面が表示されます。そして「Project Name」にプロジェクト名を入力し、
最後に「Finish」ボタンを押下します。
これで、Sun Java Studio Creator2の新規プロジェクトが作成されます。
新規プロジェクトが作成されると下記の画面が表示されます。
正常にプロジェクトは作成できましたか？
御覧頂いたようにとても簡単にプロジェクトを作成できます。
JSFのWeb Application以外にもさまざまなプロジェクトを作成できますので、
それぞれ試してみてください。
次回は、HelloWebアプリケーションの実装について記載します。
10/09のセッションにおきましては、一部不手際があり、
ここで改めて御侘び申し上げます。
10/10のセッションにおきましては、すべての演習を
完了することができ、またアンケートの結果でも
好評をいただきました。
両日とも御参加頂いた皆様、大変ありがとうございました。
ここでは、セッションの復習と共にセッションで
説明ができなかった点、また不十分だった点について
数回にかけてアップデートしていく予定ですので
どうぞ復習の際にこちらも加えて御確認頂ければと
思います。
まず、技術的な内容を説明する前に一点、
今回のJavaOneTokyoで弊社開発ツールに関する重要な
発表が行われました。
それは、Sun Java Studio CreatorとSun Java EEの
開発ツールが無償で提供されることになったということです。
詳細につきましては、下記URLを御参照ください。
