今回より実際に、プロジェクトを実装していくことになりますが、プロジェクトを進めていく上で重要な画面機能について理解する必要があります。それは、下記の「Projectsタブ」と「Filesタブ」です。「Projectsタブ」で表示される項目ファイル等はプロジェクトを実装する上で必要な項目が含まれます。「Filesタブ」はOSのファイルシステム上に存在するファイルを示し、プロジェクトで削除された項目を実際にファイルシステム上から削除したいような場合は、こちらのタブを使用してください。ProjectsタブFilesタブ次に、画面を作成する為に使用するパレットについて説明します。開発者からの多くの声を反映し非常によく使われるコンポーネント(ファイルアップロードやカレンダー等)を標準で利用できるようになっています。この独自拡張UIコンポーネントを使用する事を前提として作成されているため、逆にJSFの標準タグのみを使用して画面を作成する事は難しくなります。Creator2のエンジニアから言われているがまだ実際には試していません。)ただし、利点として今までファイルアップロード、カレンダー、Tree等のコンポーネントを利用したい場合、MyFacesもしくは、独自に作成しなければ利用できなかったのですが、Creator2を利用するとこれらが簡単に利用できるようになります。Creator2の拡張コンポーネントを利用した場合、JSP中では、<ui:***>というタグが使用されます。パレット(JSF標準)それでは、画面を作成していきましょう。画面を作成する方法は非常に簡単でパレットよりコンポーネント(ボタン、テキストフィールド等)をドラッグ&ドロップして画面(グリッド表示されている画面)に配置していきます。配置した際のイメージは下記のようになります。ここで、赤線で引いた部分「Design」、「JSP」、「Java」とありますが、それぞれを押下すると、デザインに対応するJSPファイル、Javaファイルを参照できます。(Creatorで画面を作成すると対応する***.jsp,***.javaが自動作成されます。)上記の画面に対応するJSPのコードは下記となります。ここで、画面デザインに一度戻ります。個々のコンポーネントはそれぞれプロパティをもっています。下記に、ボタンとテキストフィールドのプロパティをしめします。ここで、ボタンの表示名やテキストフィールドの初期値を設定することができます。それ以外にも多くのプロパティが存在しますので、それぞれ確認してください。最後に実装コードを記述します。実装は、画面デザインに作成したコンポーネントをダブルクリックして編集します。下記の例では、ボタンが押下された際の処理を記述するために、ボタンをダブルクリックした際に表示されるコードを示します。Textに入力値を表示するコードを記述します。コードは下記のようになります。null;}これで入力された値を表示するプログラムの完成です。ここで疑問がでる方もいらっしゃるかと思います。textField1.getText()で入力値が取得できるの?これに対しては、明確な理由があります。下記に理由を説明します。Creator2の「Design」にて画面作成した全コンポーネントには、それぞれのコンポーネントを一意に識別するIDが存在します。Fieldのコンポーネントを貼り付けると、画面右部に下記のプロパティが表示されることがわかります。Fieldコンポーネントを識別するIDとなります。作成されたJSPのコードを確認します。すると、下記のJSPコードが自動生成されていることを確認できます。ここで、先ほどの「Design」で入力したIDに一致するid=”textField1′′が存在していることがわかります。id=”textField1′′/>また、ここで注目して頂きたい部分がbinding=”#{Page1.textField1}”の部分です。BeanのプロパティtextField1に値をバインドしているということです。BeanのtextField1の実体はどこに存在しているのでしょう。これは、「Java」を選択して表示されるPage1.javaファイル中に存在します。デフォルトで非表示部分に記述されていますので、Page1.javaより探してみましょう。{のクラス定義直後に下記のタブが存在していることを確認できます。これを展開してみましょう。Definition]すると、Creatorが自動的に作成したコンポーネントに1対1で対応するインスタンス変数、セッター、ゲッターが存在することが確認できます。tf;}先ほど、皆様は、Page1.java中のbutton1_action()メソッド中からtextField1.getText()を呼び出しました。これは通常のインスタンス変数のメソッドを実行しているのと同じことが理解できます。理解されましたか?以上、コードの入力を完了しプロジェクトを実行してみましょう。Project」を実行します。実行結果、ブラウザに下記のような結果が得られます。補足1上記で、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>補足2最後に、今後、Creator2を御使用いただいていただく上でのTipsを一つ御紹介します。\)を入力してください。入力の際に非常に役立ちます。今回は、簡単なプロジェクトの作成方法についてまなびました。次回は、コンポーネントを使ったDBへのリンクについて説明します。使用に同意したとみなされます。Terada現在53人フォロワーがいます。購読管理このバーを折りたたむ%d人のブロガーが「いいね」をつけました。