Rich UI ハンドラー・パーツ

Rich UI アプリケーションのメイン・コンポーネントは Rich UI ハンドラー・パーツです。これは、ステレオタイプ RUIHandler を持つハンドラーです。ハンドラー・パーツによって、ウィジェットが Web ページ上に配置され、ユーザーによるボタンのクリックなどのイベントが処理されます。1 つのハンドラー・パーツのウィジェットおよび関数をその他のハンドラー・パーツに使用可能にすることができます (『複数のハンドラーによる Rich UI アプリケーションの作成』を参照)。

以下に、Rich UI ハンドラー・パーツの例を示します。
import com.ibm.egl.rui.widgets.Box; 
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;

handler ButtonTest01 type RUIhandler {initialUI = [ myTopBox ],
                          onConstructionFunction = initialization}

   myHelloField TextField
      { readOnly = true, text = "Hello" };
   myInTextField TextField{};
   myButton Button{ text = "Input to Output", onClick ::= click };
   myOutTextField TextField{};
	
   myBox03 Box{ padding=8, columns = 3, 
                children = [ myInTextField,  myButton, myOutTextField ],
                backgroundColor = "CadetBlue" };
	
   myBox02 Box{ padding=8,	columns = 2, children = [myHelloField],
                backgroundColor = "DarkGray"};
	
   myTopBox Box{ padding=8, children = [ myBox02,  myBox03 ],
                columns = 1, backgroundColor = "Aqua" };
	
   function initialization()
   end	
	
   function click(e EVENT in)
      myOutTextField.text = myHelloField.text + " " + myInTextField.text;	
   end	
end

ユーザーが、左下のテキスト・ボックスに単語 World を入力してからボタンをクリックすると、ユーザー・インターフェースは次のようになります。

RUI ハンドラーの出力例

DOM ツリーの説明に同じ例を使用します。詳細については、『ブラウザーによる Rich UI アプリケーションの処理方法の説明』を参照してください。

Rich UI ハンドラー・パーツのプロパティーは、パーツが Rich UI アプリケーションの最上位ハンドラーとして使用される場合にのみ使用されます。 プロパティーは以下のとおりです (オプション)。
cssFile
カスケーディング・スタイル・シート (CSS ファイル) を指定します。これは、個別のウィジェットかウィジェットのカテゴリーの表示特性を設定します。このプロパティーは、WebContent ディレクトリーに対する相対のパスを受け入れます。 デプロイメント時には、HTML ファイルに追加される <link> エントリーでこの CSS ファイルが参照されます。
以下に設定例を示します。
Handler ButtonTest Type RUIHandler 
   { children = [ui], cssFile = "buttontest/coolblue.css" }
以下に CSS ファイルの例を示します。
.EglRuiGridTable 
  { border: 3px solid black; }  

  .EglRuiGridHeader 
  { color:yellow; 	
    background-color:red;	 }  

  .EglRuiGridCell 
  { color:black; 	
    background-color:aqua; } 

cssFile プロパティーと includeFile プロパティーの両方を指定した場合は、cssFile プロパティーで参照される CSS のコンテンツが優先されます。そのコンテンツが優先されるのは、デプロイされる HTML ファイルでは、<link> エントリーは includeFile プロパティーで参照されるコンテンツの後で埋め込まれるためです。

スタイルの Rich UI サポートの詳細については、『ウィジェット・スタイル』を参照してください。

includeFile
デプロイされる HTML ファイルに組み込むファイルを指定します。 cssFile プロパティー同様、includeFile プロパティーは、WebContent ディレクトリーへの相対パスを受け入れます。
以下に設定例を示します。
Handler ButtonTest Type RUIHandler 
   { children = [ui], includeFile = "buttontest/coolblue.css" }
以下にファイル・タイプの詳細を示します。
  • css でも html でもない拡張子を持つファイルは、<script> 要素に組み込まれます。
    <script>
       <!-- ここにファイル内容を配置 -->
    </script>
  • 拡張子が html または css であるファイルは、 そのまま組み込まれます。ファイル拡張子が css の場合、 スタイル・ディレクティブは、<style> 要素内 にある必要があります。
    <style type="text/css">  
       .EglRuiGridTable 
       { 	border: 3px solid black; }  
    
       .EglRuiGridHeader 
       {  color:yellow; 	
          background-color:red;	 }  
    
       .EglRuiGridCell 
       { 	color:black; 	
          background-color:aqua; } 
    </style>
    ファイル拡張子が html である場合は、以下の記述が適用されます。
    • Rich UI プロジェクトで作業している場合は、xref 属性を 含むファイルを表示したときに、製品から警告メッセージが表示されることがあります。 例えば、以下に MyIncludeFile.html ファイルの内容を示します。このファイルは、開発時には WebContent/MyFolder フォルダーにあります。
      <link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">

      この例では、href 値が既存のファイルを参照していないことが警告メッセージで示されます。 この警告が存在するのは、開発時のエディターは実際のファイルである WebContent/css/dashboard.css ではなく WebContent/MyFolder/css/dashboard.css ファイルをシークするためです。 <href> タグの値に WebContent ディレクトリーに対する相対パスが含まれていることを確認し、別のパスが必要であることを示す警告メッセージは無視してください。

    • HTML ファイルの組み込み (デプロイされる HTML ファイルの内部に <html> 要素を配置) は、少なくとも一部のブラウザーでは有効です。includeFile プロパティーを使用する場合は、複数のブラウザーでアプリケーションをテストしてください。
initialUI
どのウィジェットが、初期の DOM ツリー文書エレメントの子であるかを指定します。指定されたウィジェットを配列で複数回参照する場合、最後の参照のみが使用され、他は無視されます。
onConstructionFunction
on-construction 関数を指定します。これは、ハンドラーの実行が開始されると起動されるハンドラー関数です。on-construction 関数、またはこの関数から (直接または間接に) 起動される関数の、initialUI の値をリセットできます。ただし、on-construction 関数が終了すると、initialUI の値は定数になります。
theme
アプリケーション全体でウィジェットの外観を一貫性のあるものにします。 Claro テーマまたは Tundra テーマのいずれかを指定できます。デフォルト値は Claro です。Dojo ウィジェットを含むアプリケーションをコーディングする場合、Nihilo および Soria のテーマも使用できますが、その指定によって影響を受けるのは Dojo ウィジェットのみです。 ウィジェットにテーマがない場合、スタイルはウィジェット固有です。

実行時には、ruiLib.setTheme() を呼び出すことで新規テーマを設定したり、ruiLib.getTheme() を呼び出すことで使用中のテーマの名前を取得したりできます。

テーマを使用するには、使用する CSS ファイルに必要な CSS ファイルをインポートするステートメントをコーディングする必要があります。 詳しくは、『アプリケーションで使用するテーマ』を参照してください。

title
HTML <title> 要素の値を指定します。 デフォルトはハンドラー名です。

実行時には、ruiLib.setTitle() を呼び出すことで新規タイトルを設定したり、ruiLib.getTitle() を呼び出すことで使用中のタイトルの名前を取得したりできます。

上記のように、ボックス・ウィジェットにはさまざまなプロパティー (特に children プロパティー) が含まれています。そのプロパティーは、ハンドラーが子やその他の子孫を initialUI 配列で指定されたウィジェットに追加するための手段になります。


フィードバック