読んで試して！ActiveWidgets！第1回

ActiveWidgetsのプログラミング

さて、ここでActiveWidgetsのオリジナルサンプルを参考にしながら、プログラミングに入っていきたい所ですが、残念ながらサンプルをそのまま参考にするのは、大きな問題があります。

ソースコードを見てみると、オリジナルのサンプルはお世辞にもきれいとは言えず、それだけなら良いのですが、タグ内に、普通のタグ記述、

そこで今回は、オリジナルのコンボボックスのソースコードを修正して使用しましょう。筆者が修正したソースコードの抜粋は、こちらからダウンロードできます（13611.zip/0.67 KB）。このソースコード（以下、プログラム1）を参照しながら以降の説明を進めていきます。

後ほど紹介するグリッドコントロールのソースコードと比べて、コンボボックスのソースコードの記述はシンプルです。ActiveWidgetsのコントロールはどのコントロールでも基本的なプログラミング処理手順はみな同じになっています。

では実際にプログラム1のソースコードを見ながら説明しましょう。

ActiveWidgetsのライブラリを使用する場合は、aw.cssファイル（1行目）とaw.jsファイル（11行目）を外部ファイル参照で必ず指定します。

画面表示は、14行目のイベントリスナから行われ、画面ロードイベント（load）で、コンボボックスを表示するinitOnLoad関数が呼び出されます。initOnLoad関数でのプログラミング手順は次のようになっており、ほかのコントロールの場合もほぼ共通しています。

コントロール表示で使用されるデータのセット
表示コントロールに対応したオブジェクトの生成
生成されたオブジェクトのメソッドを使用した表示コントロールの属性設定
コントロールの表示
イベント処理関数での処理内容記述

コンボボックス表示処理2>

それではこの手順に沿ってコンボボックス表示処理を見ていきます。

「1.コントロール表示で使用されるデータのセット」では、プルダウンの表示を設定します。具体的には、15、16行でプルダウンで表示されるリスト項目を配列にセットしています。配列はitemTextArrayとitemImageArrayの2種類があり、itemTextArrayがリスト項目データ用の配列で、itemImageArrayは表示されるイメージアイコン用の配列です。

ActiveWidgetsのコントロールでは、図2のスターマークのように、テキスト表示と並列にアイコン画像を表示することができます。しかし、業務系アプリケーションでは、あまりこのようなアイコンを表示する必要がないので、本連載でもこれ以降のサンプルでは、アイコン画像は外すようにしています。

「2.表示コントロールに対応したオブジェクトの生成」は17行目のvar comboObj = new AW.UI.Combo;で行われています。等式の右辺のnewが適用されるAW.UI.Comboのオブジェクト名はコントロールごとのもので、コンボボックスの生成では必ずこのオブジェクトを使用します。左辺のオブジェクトインスタンスcomboObjは任意に名前を付けることができ、この後のステップではこのcomboObjインスタンスを使用して属性指定を行っていきます。

「3.生成されたオブジェクトのメソッドを使用した表示コントロールの属性設定」では、コントロールの表示を指定します。

コントロールの属性設定はコントロールごとに設定項目に違いがありますが、どのコントロールでも18行のsetId()メソッドは必ず実行され、引数にID値を指定して、HTMLタグ内でのコンボボックスの表示場所を指定し、またCSSでのスタイル指定をリンクさせます。これにより4行目から6行目のスタイル指定（#view）が有効になりました。

4行目のスタイル指定（#view）では、コンボボックスの幅を110px、高さを22pxで指定していますが、これらの表示サイズ指定はsetIdの処理によって有効になっています。5行目のスタイル指定の#view-popupはコンボボックスがプルダウンされた時のプルダウンエリアのサイズ（高さと幅）や枠線の太さと色を指定しており、#view-popup .aw-mouseover-itemでは、プルダウンリスト内で文字をマウスオーバーした時の色指定を行っています。

その後の指定では19行目、20行目の.setControlText（"ホーム"）とsetControlImage（"favorites"）で、それぞれ初期表示状態でコンボ内に表示される項目とアイコンを指定しています。21行目、22行目のsetItemText()とsetItemImage()メソッドでは、それぞれ15行目、16行目で定義してある配列を項目およびアイコンの表示項目リストとして指定しています。なお、16行目の配列指定および、20行目、22行目のメソッドはアイコン表示用ですので、用途によっては省略しても問題ないものです。

次の23行目のsetItemCount(4)は、プルダウンリストでの表示項目数を指定する機能で、この場合は4項目を表示します。通常は15行目の配列指定項目数と一致させますが、配列項目すべてを表示させたくないような場合は、このメソッドで制御することになります。

「4.コントロールの表示」では、1から3までの設定完了後、24行目のcomboObj.refresh()を実行することでコンボボックスが表示されます。

4までの記述でコンボボックスは問題なく表示されますが、「5.イベント処理関数での処理内容記述」にて、プルダウウンリストから項リスト目を選択した場合などのイベント処理記述を追加する必要があります。

実際のソースコードでは25行目のcomboObj.onControlxxxxxx = function(event){ yyyyyyy; };のような記述がたくさん並んでおり、右側の関数内にプログラム処理記述を追加してさまざまなイベントに対応した機能を追加することになります。

このようなイベントハンドラのスケルトンはサンプルコードにすべて記述されていますので、それらのスケルトン記述を自分のプログラムにコピーし、使用するイベントに対応する匿名関数内にイベントに対応する処理手順を記述していきます。例えばプログラム1のソースコードでは、onControlTextChangedイベントに対応してalert文で選択されたリスト項目のテキストを表示するようになっています。

それでは次に、グリッドコントロールのプログラムを紹介します。