Recent Posts

今回より実際に、プロジェクトを実装していくことになりますが、
プロジェクトを進めていく上で重要な画面機能について理解する必要があります。

それは、下記の「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へのリンクについて説明します。