その他の Zen コンポーネント

<iframe> の属性

Zen の <iframe> コンポーネントには、以下の属性があります。

フレームのコンテンツをクライアントから変更する場合は、プログラム処理で iframe オブジェクトの src プロパティの値を再設定します。

クライアント側で src プロパティ値を変更する際は、次のようにプロパティを単純に設定しないでください。

var frame=zen('contentFrame');
frame.src='C:\myfile';

代わりに、次のように、setProperty() メソッドを使用します。

var frame=zen('contentFrame');
frame.setProperty('src','C:\myfile');

ボタン・コントロールのイメージ

ボタン・コントロールに onclick イベントまたはその他のタイプのイベントを定義できるように、そのボタン・コントロールにイメージを配置する場合は、<image> コントロールを使用します。これによりイベント処理の制御を強化できます。詳細は、“Zen コントロール” の章の "<image>" の説明を参照してください。

イメージ・データ・ストリームのレンダリング

イメージ・データ・ストリームをレンダリングする場合、<iframe> は使用しないことをお勧めします。 代わりに、“Zen コントロール” の章で説明のある <image> を使用します。特に、イメージが JPG 形式で、ブラウザが Internet Explorer (IE) の場合は、このようにする必要があります。このトピックで詳細を説明します。

<iframe> を使用して、データ・ストリームを提供する CSP ルーチン経由でデータベースから取得したコンテンツをレンダリングするとします。ストリームには、PDF、GIF、JPG、Doc、RTF などがあります。しかし、イメージが JPG 形式でブラウザが IE の場合、<iframe> 内で JPG データをレンダリングすると、Zen のコア機能が無効になることが判明しました。

この問題の根源は、IE のデータ・ストリームのレンダリング方法にあります。

Firefox などのブラウザでデータ・ストリームが HTML ページでないと確認された場合、ブラウザではダミーの DOM を作成して受信ストリームをラップします。GIF および JPG はHTML <IMG> タグになり、それらのタグの src 属性は指定された URI に設定されます。PDF では、ビューワの起動などを目的とした HTML <EMBED> タグが自動的に生成されます。そのような場合、必ず DOM が作成され、JavaScript の実行に関する標準の範囲設定規則が適用されます。

しかし、IE は異なります。IE では DOM を作成しません。通常のページ処理に代わって、当該コンテンツの専用ビューワが優先されます。通常の Web ページでは、一般的には問題になりません。画像をロードしたり PDFをダウンロードするだけなら、DOM と対話することはないので、DOM があってもなくても問題ありません。

問題は、コンテンツが IE で <iframe> にロードされる場合に発生します。

PDF や RTF などの外部プラグインが必要なコンテンツは、IE で正しく機能すると考えられます。埋め込み GIF ビューワも正しく機能しているようです。しかし、JPG ビューワは機能しません。JPG イメージを直接ストリームとして <iframe> にロードする場合、IE で埋め込みビューワを初期化するときに、IE は <iframe> の JavaScript 実行領域だけでなく、そのページの JavaScript ネームスペース全体を破棄し、クライアント側のグローバル変数および JavaScript 関数の定義も削除してしまいます。ビューワの初期化後は、JavaScript はイベント・コールバック用の <iframe> の外で処理を続けます。そのため、<iframe> のロード前に初期化されたクライアント側データはすべて NULL にリセットされている可能性は十分あります。

このような問題に対処するための最も良いクロスプラットフォーム・ソリューションは、以下のように Zen コンポーネント <iframe>および <image> を使用することです。

• <iframe>。外部プラグイン (PDF など) を要する HTML ドキュメントまたはデータ・ストリームの場合。

• <image>。GIF、JPG、または PNG タイプのデータ・ストリームをレンダリングする場合。

このソリューションの唯一の欠点は、ストリームをデータベースから取得する場合、2 つのクエリが必要になることです。1 つ目は送信データのタイプを判別するクエリ、2 つ目は実際のデータを送信するクエリです。この場合のオーバーヘッドは、データ量が小さいので、ほとんどがネットワークのオーバーヘッドになります。そのため、データベースから取得するデータ・ストリームをレンダリングするための最善の手段は、以下のようになります。

1. <iframe> と <image> の両方を含むテンプレート表示ページを定義します。両方のコンポーネントとも、最初は非表示です (hidden='true')。

2. レンダリングするデータのタイプを確認するクエリを発行します。

3. このクエリに基づき、<iframe> または <image> のいずれかの src 属性をデータ・ストリームの URI に設定して、対応するコンポーネントを表示するよう設定します (hidden='false')。

4. ページを閉じるときに、そのページで次のデータ・ストリームの準備ができるように、表示されているコンポーネントを非表示にリセットします (hidden='true')。

他の組み合わせも可能ですが、これは基本的な考え方です。Web ページにイメージ・データを表示するために、必ずしも <iframe> を使用する必要はありません。IE で JPG を扱うときにこれを使用すると Zen が破損するので、そのような場合は <iframe> を使用せず、代わりに <image> を使用します。

<dynaView> の OnGetViewContents コールバック・メソッド

<dynaView> では、Zen ページ・クラスで定義されたサーバ側コールバック・メソッドを呼び出すことにより、そのデータを取得できます。そのメソッド名は、以下の例に示すように、<dynaView> の OnGetViewContents 属性を使用して指定します。この例では、そのメソッド名は GetViewContents です。

<dynaView id="view" viewType="details"
          OnGetViewContents="GetViewContents"
          onchange="zenPage.viewChange(zenThis);" >
  <parameter paramName="label" value="Draft" />
</dynaView>

<dynaView> には、ゼロ個以上の <parameter> 要素を記述できます。各 <parameter> は、OnGetViewContents コールバック・メソッドの入力パラメータを指定します。各 <parameter> には以下の属性があります。

OnGetViewContents コールバック・メソッドには、以下のようなシグニチャが必要です。

Method GetViewContents(
    ByRef pParms As %String,
    Output pContents As %String,
    Output pHeaders As %String) As %Status

以下はその説明です。

• このメソッドは、%StatusOpens in a new tab 値を返し、成功または失敗を示します。

• pParms は、<dynaView> で定義されたすべての<parameter> 要素を表します。pParms は配列です。この配列の各メンバは、paramName を添え字として使用し、value を値として使用します。

• pContents は多次元配列で、ビュー・ボックスに表示する項目のセットを記述します。この配列には項目番号を表す添え字が付きます (先頭は 1)。各配列要素は、以下の情報を持つ $List 構造体になります。コールバック・メソッド内で以下のような文を使用して、ObjectScript 関数 $LISTBUILD ($LB) で pContents の各リスト項目を作成することができます。

    Set pContents(n) =
    $LB(textValue,logicalValue,icon,col2,col3)
  

  

  以下はその説明です。

  • textValue は、項目に表示される値です。

  • logicalValue は、項目に関連付けられた論理値です。

  • icon は、項目と共に表示されるイメージの URI です (存在する場合)。

  • これらに続いて記述する値 (col2、col3 など) には、dynaView が “details” モードであるときに追加列に表示する値を定義します。

• pHeaders は、列番号を添え字とする列ヘッダのセットを指定する多次元配列です。dynaView が “details” モードの場合、このプロパティを使用して、表示するデータ列の数およびその列ヘッダを定義します。以下はその例です。

      // define 3 column headers
      Set pHeaders(1) = "Name"
      Set pHeaders(2) = "Size"
      Set pHeaders(3) = "Date"
  
  

  

<dynaView> の属性

前のトピックでは、OnGetViewContents 属性について詳しく説明しました。以下のテーブルは、<dynaView> の属性の一覧を示しています。

プログラムを使用して %ZEN.Component.dynaViewOpens in a new tab を扱う際は、dynaView クラスの以下のプロパティについても知っておく必要があります。

• XData Contents の元の <dynaView> 定義で指定されている各 <parameter> 要素は、%ZEN.Auxiliary.parameterOpens in a new tab オブジェクトのリスト・コレクションである、dynaView の parameters プロパティのメンバとなります。各 <parameter> は、parameters コレクション内の通常の位置 (1、2、3 など) を取得します。

• 読み取り専用の text プロパティは、ツリーで現在選択されているノードのテキスト (表示) 値を保持します。これは、<dynaView> に表示されるノード・ラベルです。

• 読み取り専用の value プロパティは、ツリーで現在選択されているノードの論理 (実際の) 値を保持します。これは、<dynaView> で対応するラベルをユーザがクリックすると有効になる文字列です。

<schedulePane> の OnGetScheduleInfo コールバック・メソッド

<schedulePane> では、Zen ページ・クラスで定義されたサーバ側コールバック・メソッドを呼び出すことにより、そのデータを取得できます。そのメソッド名は、以下の例に示すように、<schedulePane> の OnGetScheduleInfo 属性を使用して指定します。この例では、そのメソッド名は GetScheduleInfo です。

<schedulePane id="schedule" caption="Schedule for Bob"
  dateFormat="5" interval="30" startTime="540" endTime="1020"
  dropEnabled="true" ondrop="zenPage.scheduleDataDrop(dragData);"
  onselectitem="zenPage.selectItem(id,time);"
  OnGetScheduleInfo="GetScheduleInfo">
  <parameter id="parmPerson" paramName="Person" value="Bob" />
</schedulePane>

<schedulePane> には、ゼロ個以上の <parameter> 要素を記述できます。各 <parameter> は、OnGetScheduleInfo コールバック・メソッドの入力パラメータを指定します。各 <parameter> には以下の属性があります。

OnGetScheduleInfo コールバック・メソッドには、以下のようなシグニチャが必要です。

ClassMethod GetScheduleInfo
  (ByRef pParms As %String,
   pStartDate As %Date,
   pEndDate As %Date,
   ByRef pInfo As %List) As %Boolean

以下はその説明です。

• このメソッドは、%BooleanOpens in a new tab 値を返します。成功した場合は True、それ以外は False となります。

• pParms は、<schedulePane> で定義されたすべての <parameter> 要素を表します。pParms は配列です。この配列の各メンバは、paramName を添え字として使用し、value を値として使用します。

• pStartDate は開始日時を示します。これは、Caché の日付の内部格納形式である $HOROLOG ($H) 形式で指定します。"Caché ObjectScript リファレンス" で説明があるように、この形式では、1840 年 12 月 31 日からの経過日数、コンマ、午前 0 時からの経過秒数の順に指定します。つまり、以下のようになります。

  date,time

  date と time は整数です。

• pEndDate は、$HOROLOG ($H) 形式の終了日時です。

• pInfo は、スケジュール・カレンダーに表示するタイム・スロットを記述する多次元配列です。配列の添え字は、以下のように指定します。

  • day は $HOROLOG ($H) 形式の日付です。

  • time は、このタイム・スロットの開始時刻を、午前 0 時からの経過時間 (分) で示す整数です。この値を 60 の倍数として記述すると、コードは読みやすくなります。例えば、午前 9 時の場合、リテラル値として単に 540 と指定する代わりに 9*60 と指定できます。いずれも、正しく処理されます。

  • n は、同じ day および time 値を持つ複数のタイム・スロットを区別する場合に使用できる整数です (先頭は 1。通常は 1 です)。

  各 pInfo 配列要素は、以下の情報を持つ $List 構造体になります。コールバック・メソッド内で以下のような文を使用して、ObjectScript 関数 $LISTBUILD ($LB) で pInfo の各リスト項目を作成することができます。

    Set pInfo(day,time,n) =
    $LISTBUILD(duration,id,text,type,style)
  

  

  以下はその説明です。

  • duration は、スケジュールのこのタイム・スロットで予約する時間 (分) を示す整数です。

  • id は、スケジュールでこのタイム・スロットが選択されたときに、これを一意に識別するために onselectitem イベント・ハンドラが使用する整数です。

  • text は、スケジュールのこのタイム・スロットに表示する説明テキストです。

  • type は 0 または 1 です。

    • 0 は使用できないタイム・スロットです。

    • 1 はスケジュール済みのタイム・スロットです。

  • style は、スケジュールのこのタイム・スロットに適用される CSS スタイルです。この値は、このタイム・スロットに適用可能な他のすべての競合するスタイルより優先されます。

以下の例では、指定された開始日付の午前 9 時から 60 分間のスタッフ・ミーティングを設定し、それを予約済みタイム・スロットに設定して、スケジュールのカレンダー表示の背景色を緑に変更しています。

ClassMethod GetScheduleInfo(ByRef pParms As %String,
                            pStartDate As %Date,
                            pEndDate As %Date,
                            ByRef pInfo As %List)
                            As %Boolean
{
  Set pInfo(pStartDate,9*60,1)
  = $LB(60,1,"Staff Meeting",1,"background: green;")
  Quit 1
}

また、pInfo 配列の最上位ノードに CSS スタイル値を設定すると、特定の日付のすべてのタイム・スロットに適用するスタイルを指定できます。次に例を示します。

  Set pInfo(day) = "background: yellow;"

<schedulePane> の属性

このトピックでは、OnGetScheduleInfo 属性については既に詳しく説明しました。以下のテーブルは、<schedulePane> の属性の一覧を示しています。

属性	説明
Zen コンポーネントの属性	<schedulePane> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。 "Zen の使用法" の “Zen コンポーネントの概念” の章の “動作” "Zen の使用法" の “Zen のスタイル” の章の “コンポーネントのスタイル属性”
caption	スケジュールの上部にキャプションとして表示するテキスト。このテキストは、HTML エスケープが行われないため、マークアップを含めることができます。caption の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。
cellHeight	スケジュール・カレンダーのタイム・スロットの高さ (ピクセル単位) を指定する整数。既定は 30 です。これは、dateFormat の図で示されているとおりです。cellHeight には単位を指定しないでください。
date	表示する日付 (YYYY-MM-DD 形式)。既定は、現在の日付です。スケジュール・カレンダーは、この日付の値を含めた日付の範囲を表示します。実際の範囲は、view 属性の現在の値 ("day"、"week"、または "month") により異なります。 date の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。
dateFormat	スケジュール・カレンダーのヘッダに使用する日付形式を示す整数。<schedulePane> により、自動的に曜日名の下にこの日付が表示されます。 dateFormat の既定値は -1 です。この既定値では、次の図に示すように、“Feb 18, 2009” という形式の日付が生成されます。図に示されている、スケジュール・カレンダー表示のこの部分の headerHeight および cellHeight 属性も構成することができます。 dateFormat の値として使用できる整数の一覧については、"Caché ObjectScript リファレンス" の $ZDATETIME ($ZDT) 関数の “パラメータ” セクションにある dformat の説明を参照してください。dateFormat では、dformat とほぼ同じ範囲の値を使用できます。dateFormat では、–1 および 1 ～ 13 の値を使用できます。
dayList	完全な曜日名のコンマ区切りリスト。 dayList の既定値は、英語の値 (Sunday ～ Saturday) を含む $$$Text マクロを使用します。このマクロを使用すると、メッセージ・ディクショナリからエクスポートしたときに、そのアプリケーションで翻訳する文字列のリストに dayList 値が自動的に格納されるようになります。ただし、そのためには Zen クラスの DOMAIN パラメータを設定している必要があります。詳細は、"Zen アプリケーションの開発" の “Zen のローカライズ” の章にある “$$$Text マクロ” を参照してください。 ZENLOCALIZE データ型パラメータは 1 (True) に設定されているので、dayList で $$$Text を使用できます。あらゆる dayList 文字列は、ローカライズした場合でも、7 個の項目をコンマ区切りリストの状態で維持する必要があります。dayList を変更したら、必ず shortDayList および firstDayOfWeek も調整してください。
endTime	スケジュール・カレンダーに表示する日次タイム・スロットの終了時刻。これは、午前 0 時からの経過時間 (分) を表す整数値です。endTime の既定値は 1080 (午後 6 時) です。endTime の範囲は 0 ～ 1440 です。これで 1 日 24 時間すべてに対応できます。 エンド・ユーザが startTime から endTime の範囲外にアポイントメントをスケジュールした場合、カレンダーはそのタイム・スロットを表示できるように拡張されます。 endTime の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。
firstDayOfWeek	スケジュール・カレンダーの週の最初の日として表示する曜日を示す整数。 0 は日曜日、1 は月曜日 ... 6 は土曜日となります。既定の firstDayOfWeek は 0 です。 firstDayOfWeek 属性の目的は、さまざまなロケールに合わせてスケジュール・カレンダーをカスタマイズできるようにすることです。firstDayOfWeek を変更したら、必ず dayList および shortDayList も調整してください。
headerHeight	スケジュール・カレンダーの上部のヘッダ行の高さ (ピクセル単位) を指定する整数。このヘッダ行には、曜日名とその日付が表示されます。既定は 40 です。これは、dateFormat の例で示されているとおりです。headerHeight には単位を指定しないでください。
interval	カレンダーの各タイム・スロットの時間 (分) を指定する整数。interval の既定値は 30 で、最小値は 5 です。interval の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。
monthList	完全な月名のコンマ区切りリスト。monthList の既定値は、英語の値 (January ～ December) を含む $$$Text マクロを使用します。 ZENLOCALIZE データ型パラメータは 1 (True) に設定されているので、monthList で $$$Text を使用できます。あらゆる monthList 文字列は、ローカライズした場合でも、12 個の項目をコンマ区切りリストの状態で維持する必要があります。
OnGetScheduleInfo	Zen ページ・クラスのサーバ側コールバック・メソッドの名前。このメソッドは、スケジュールの表示に必要な情報を取得します。 詳細は、“<schedulePane> の OnGetScheduleInfo コールバック・メソッド” を参照してください。
onselectitem	<schedulePane> の onselectitem イベント・ハンドラ。スケジュール・カレンダーにある項目をユーザがクリックすると、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 onselectitem 定義は、一般的には以下のようになります。<schedulePane onselectitem="zenPage.selectItem(id,time);" ... > 一方、Zen ページ・クラスの onselectitem ハンドラ・メソッドのシグニチャは、以下のようになります。ClientMethod selectItem(id, time)[ Language = javascript ] このハンドラは、引数として次の 2 つの特殊変数を使用します。 id — OnGetScheduleInfo コールバックにより指定されたスケジュール済み項目のユーザ定義識別子 (空のセルの場合は NULL)。 time — セルに関連付けられる時刻の値 (yyyy-mm-dd hh:mm:ss 形式)。
shortDayList	曜日の省略名のコンマ区切りリスト。shortDayList の既定値は、次の文字列を含む $$$Text マクロを使用します。 Sun,Mon,Tue,Wed,Thu,Fri,Sat ZENLOCALIZE データ型パラメータは 1 (True) に設定されているので、shortDayList で $$$Text を使用できます。あらゆる shortDayList 文字列は、ローカライズした場合でも、7 個の項目をコンマ区切りリストの状態で維持する必要があります。shortDayList を変更したら、必ず dayList および firstDayOfWeek も調整してください。
shortMonthList	月の省略名のコンマ区切りリスト。shortMonthList の既定値は、次の文字列を含む $$$Text マクロを使用します。 Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec ZENLOCALIZE データ型パラメータは 1 (True) に設定されているので、shortMonthList で $$$Text を使用できます。あらゆる shortMonthList 文字列は、ローカライズした場合でも、12 個の項目をコンマ区切りリストの状態で維持する必要があります。
startTime	スケジュール・カレンダーに表示する日次タイム・スロットの開始時刻。これは、午前 0 時からの経過時間 (分) を表す整数値です。startTime の既定値は 480 (午前 8 時) です。startTime の範囲は 0 ～ 1440 です。これで 1 日 24 時間すべてに対応できます。 エンド・ユーザが startTime から endTime の範囲外にアポイントメントをスケジュールした場合、カレンダーはそのタイム・スロットを表示できるように拡張されます。 startTime の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。
view	表示するスケジュールのタイプを指定します。指定可能な値は、"day"、"week"、または "month" です。既定は "day" です。view の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。

プログラムを使用して %ZEN.ComponentEx.schedulePaneOpens in a new tab を扱う際は、schedulePane クラスの以下のプロパティについても知っておく必要があります。

• XData Contents の元の <schedulePane> 定義で指定されている各 <parameter> 要素は、%ZEN.Auxiliary.parameterOpens in a new tab オブジェクトのリスト・コレクションである、schedulePane の parameters プロパティのメンバとなります。各 <parameter> は、parameters コレクション内の通常の位置 (1、2、3 など) を取得します。

• 読み取り専用の selectedTime プロパティは、スケジュール・カレンダーで現在選択されているタイム・スロットの開始時刻を保持します。selectedTime は、午前 0 時からの経過時間 (秒) を表す整数値です。

• 読み取り専用の selectedInterval プロパティは、スケジュール・カレンダーで現在選択されているタイム・スロットの長さ (分) を保持します。selectedInterval を selectedTime に加算して、終了時刻を計算します。