演習 1.5: スタイルの動的変更

演習 1.1 では、EGL 変数を JSF コンポーネントにバインドすることにより、これらのフィールドの値 を EGL コードから実行時に変更できることを学習しました。 この演習では、これらのフィールドのスタイルを EGL コードから実行時に変更する方法を学習します。 これらのフィールドのスタイルを変更することで、コンポーネントの背景色の変更など、演習 1.2 で加え た変更の多くを設計時ではなく実行時に加えることができます。

この演習では、JSF コンポーネントのフォントの色を変更する EGL コードを追加します。 ユーザーが無効な情報を入力した場合や必須の入力フィールドを飛ばした場合は、 注意を促すためにコンポーネントのスタイルをこのように変更するとよいでしょう。

JSF コンポーネントの値とスタイルの変更のほかにも、EGL コードを使用して JSF コンポーネントに加 えることができる多くの変更があります。 詳しくは、『 pageHandler から JSF コンポーネントへのアクセス』というヘルプ・トピックを参照してください。

JSF コンポーネント・インターフェースのサポートの追加

この方法で JSF コンポーネントにアクセスするには、EGL パッケージをプロジェクトに追加する必要が あります。 このパッケージには、JSF コンポーネントへのアクセスを可能にする EGL パーツが含まれています。 この作業は、JSF コンポーネントにアクセスする各 EGL Web プロジェクトについて 1 回のみ実行する必要 があります。

  1. プロジェクト・エクスプローラー・ビューで、「EGLWeb」プロジェクトを右クリックし、 ポップアップ・メニューから「プロパティー」をクリックする。「EGLWeb のプロパティー」ウィンドウ が開きます。
  2. 左側のフレームで、「Web プロジェクト・フィーチャー」をクリックする。
  3. 「使用可能な Web プロジェクト・フィーチャー」の下で、「EGL の JSF コンポーネント・インタ ーフェースのサポート」チェック・ボックスを選択する。
  4. OK」をクリックする。

    com.ibm.egl.jsf パッケージが、EGLWeb プロジェクトの EGLSource フォルダーに追加されます。 このパッケージには、JSF コンポーネントへのアクセスを可能にする EGL パーツが含まれています。

Web ページの作成と JSF コンポーネントの追加

  1. プロジェクト・エクスプローラー・ビューで、「EGLWeb」プロジェクトをクリックして選択する。
  2. メニュー・バーから「ファイル」>「新規」>「Faces JSP ファイル」をクリックする。新規 Faces JSP ファイル・ウィザードが開きます。
  3. ファイル名」フィールドに次のファイル名を入力する。

    JSFStyleChange

  4. ページ・テンプレートから作成」チェック・ボックスを選択する。
  5. 次へ」をクリックする。
  6. ページ・テンプレート・タイプ」の下で、「ユーザー定義ページ・テンプレート」をクリックする。
  7. サムネール」の下で「A_gray.htpl」テンプレートをクリックする。
  8. 終了」をクリックする。新規ファイルがプロジェクトに追加され、そのファイルがエディターで開きます。
  9. Place your page content here」というサンプル・テキストを除去して、Enter キー を 3 回押して 3 つの改行を追加する。
  10. パレット・ビューの「Faces コンポーネント」ドロワーから、「出力」コ ンポーネントをページ上の最初のブランク行へドラッグする。
  11. 入力」コンポーネントと「コマンド - ボタン」 コンポーネントをページ上の 2 つ目と 3 つ目のブランク行 (「出力」コンポーネントの下) にド ラッグする。
  12. ページ上の「出力」コンポーネントをクリックして選択する。
  13. プロパティー・ビューで、「myOutputField」というテキストを「ID」フィ ールドに入力する。

    プロパティー・ビューの左側は次のようになります。

    プロパティー・ビューの外観

    コンポーネントの ID フィールドにニーモニックを入力すると、EGL コードからこのコンポーネント を参照しやすくなります。

    ページは次の図のように表示されます。追加したコンポーネントの位置は、ページ上で これらを配置した場所に応じて多少異なることがあります。 このチュートリアルでは、正確な配置は重要ではありません。

    JSFStyleChange.jsp ページの外観

  14. ページを保管する。

JSF コンポーネントにアクセスするためのコードの追加

  1. ページのコンテンツ領域を右クリックし、ポップアップ・メニューで「ページ・コードの編集」をクリックする。

    通常どおりに、EGL ページ・コード・ファイルがエディターで開かれ、このファイルにはこのペー ジの pageHandler が含まれています。 JSF コンポーネント・インターフェースのサポートを追加したので、新しい pageHandler には以下の 3 つの EGL コードが追加されています。

  2. viewRoot UIViewRoot; というコードの下に次のコードを追加する。

    inputColor string;
    outputText string = "This is my output text.";
    
    
    function changeColor()
      
      end

  3. function changeColor() 行と end 行の間にカーソルを置く。
  4. Ctrl+Shift+Z キーを押す。代わりに、右クリックして、ポップアップ・メニューから 「ソース・アシスタント」をクリックすることもできます。

    EGL ソース・アシスタントが開きます。ソース・アシスタントでは、ページに追加した各コンポーネントが含まれた JSF コンポーネント・ツリーと、コンテナーの役割を果たす HtmlForm および HtmlScriptCollector コンポーネントが表示されます。

  5. EGL ソース・アシスタントで、「HtmlOutputText (myOutputField)」をクリックする。

    「EGL ソース・アシスタント」ウィンドウは次のイメージのように表示されます。 コンポーネントの正確な配置は、これらのコンポーネントをどのように作成したかによって異なります。

    EGL ソース・アシスタントの外観

  6. OK」をクリックする。

    ソース・アシスタントは、次の 2 行のコードを pageHandler に追加します。

    myOutputField HtmlOutputText;
    myOutputField = viewRoot.findComponent("form1:myOutputField");

    1 行目のコードは、JSF コンポーネントと互換性のある型の EGL 変数を作成します。 2 行目のコードは、JSF コンポーネント・ツリーを表す変数を参照点として使用して、この EGL 変数を JSF コンポーネントにリンクします。 この変数が作成されて JSF コンポーネントにリンクされたので、この変数を使用してこの JSF コンポーネ ントにアクセスできます。

  7. ソース・アシスタントによって追加された 2 行のコードの下に、次のコードを追加する。

    myOutputField.setStyle("color: " + inputColor);
    このコードは、JSF 出力フィールドにアクセスして、このフィールドに新しいテキストの色を割り 当てます。 この色は、ページ上の入力フィールドにバインドされる inputColor 変数で定義されていま す。

    changeColor() 関数は次のようになります。

    changeColor 関数の外観

  8. ファイルを保存して閉じる。

JSF コンポーネントへの EGL 変数および関数のバインド

演習 1.1 と同様に、次のステップでは、pageHandler 内で作成した EGL 変数および関数をページ上の JSF コンポーネントにバインドします。

  1. JSFStyleChange.jsp ページに戻る。
  2. ページ・データ・ビューで、「JSFStylechange」を展開する。
  3. ページ・データ・ビューから、「outputText」をページ上の JSF 出力テキスト・コンポーネント へドラッグする。
  4. inputColor」を JSF 入力コンポーネントへドラッグする。
  5. アクション」を展開する。
  6. changeColor()」関数をページ上のコマンド・ボタンへドラッグする。
  7. ページを保管する。

    ページは次のようになります。

    JSFStyleChange.jsp ページの外観

ページのテスト

  1. ページをサーバーでテストする。
  2. ページがブラウザーで開かれたら、色の名前または数値を入力フィールドに入力する。 例えば、「Red」または「#FF0000」と入力します。 以下に、使用できる名前と数値の例をいくつか示します。
    色の名前と数値の例のテーブル
    色の名前 色の数値
    Red #FF0000
    Blue #0000FF
    Green #00FF00
    Yellow #FFFF00
    Black #000000
    Orange #FFA500
    White #FFFFFF
  3. ページ上の「実行」ボタンをクリックする。テキストが指定した色に変わります。

    ページは次のようになります。

    Web ブラウザー上の JSFStyleChange.jsp ページの外観

  4. 希望に応じて、その他の色についても試す。HTML で認識される任意の色の名前を使用するこ とも、ポンド記号 (#) に続く 6 桁の 16 進数を使用することもできます。 最初の 2 桁は赤の濃度を指定し、3 桁と 4 桁は緑の濃度を指定し、5 桁と 6 桁は青の濃度を指定します。

この演習では、EGL コードから JSF コンポーネントの色を変更する方法を学習しました。 myOutputField.setStyle("color: " + inputColor); というコードは、 setStyle() 関数を使用してコンポーネントの色を変更します。 setStyle() 関数を使用すると、その他の多くの変更をコンポーネントに加えることができま す。 例えば、myOutputField.setStyle("border-style: solid; border-color: Green" ); というコードは、コンポーネントの周囲に緑色の枠線を作成します。 setStyle() 関数は、多くの種類の Cascading Style Sheet コマンドをサポートしています。

また、JSF コンポーネントをこのように操作できるその他の関数もあります。 各タイプの JSF コンポーネントは、それぞれ異なる関数をサポートしています。 例えば、上記のように EGL ソース・アシスタントを使用して入力コンポーネントにアクセスして、 setDisabled(yes); 関数を使用することにより、入力コンポーネントを使用不可にして、 ユーザーがこのコンポーネントに入力できないようにできます。 JSF コンポーネントに対して実行できる各種処理についての詳細は、『 pageHandler から JSF コンポーネントへのアクセス』というヘルプ・トピックを参照するか、EGLSource フォルダー 内の FacesHtmlComponent.egl ファイルを開いて、JSF コンポーネントとこれらの各コンポーネントがサポート している関数のリストを参照してください。

これで、「モジュール 2: 検索ページの作成」を開始する準備ができました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.