クライアント側レイアウト・マネージャ

縦方向および横方向のアクティブ・グループ

画面を次の 4 つの領域に分割するとします。

• 上部の固定メニュー領域

• 下部の出力ペイン

• 右側の詳細情報表示領域

• 以上の領域が決定された後、残りのすべてのウィンドウ領域に広がるメイン作業領域

また、出力ペインおよび詳細ペインが画面に占める大きさを、ユーザが実行時に対話的に調整できるようにするとします。さらに、ウィンドウ・サイズが変更された場合、自動的にレイアウトが調整されるようにします。つまり、ブラウザ・ウィンドウが拡大されて全画面モードになった場合、メニューおよび出力領域のサイズは固定したままで、メインの作業領域および補足詳細領域のサイズが変更されます。以下に、この設計の概念図を示します。

これらの設計目的に対処するには、<activeVGroup> および <activeHGroup> を使用するのが最適です。 根本的には HTML テーブルに基づいている <vgroup> や <hgroup> とは異なり、アクティブ・グループは、CSS および JavaScript を使用して、使用可能な画面領域を個々のサブセクションに分割します。この分割は、必ず 2 分割になります。縦方向の分割は上と下、横方向の分割は左と右に子の領域が分けられます。

この 2 つの配置は、実装上の制約であり、設計上の制限ではありません。アクティブ・グループは互いに入れ子にして、使用可能な画面領域を複数に分割したように表示することができます。前の図がその例です。縦方向に、一番上のメニュー領域、中央のメイン領域と補足領域の結合領域、一番下の出力領域と 3 つに分割されています。

次の Zen ページ・クラスに示すように、3 つの入れ子のアクティブ・グループを使用して、前の図に示したレイアウトを提供できます。

Class MyApp.ActiveTest Extends %ZEN.Component.page
{
Parameter PAGENAME = "ActiveGroupLayout";

XData Style
{
<style type="text/css">
  #outerSplit {
    width:100%;
    height:100%;
    }
</style>
}

XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" layout="none">
  <activeVGroup id="outerSplit" noResize="true" handleThickness="1" split="30" >
    <group enclosingStyle="width:100%;height:100%;background:white;">
      <!-- Menu Area -->
    </group>
    <activeVGroup id="innerVSplit"  split="-150" >
      <activeHGroup id="horizontalSplit" split="80%" >
        <group enclosingStyle="width:100%;height:100%;background:#ccccff;">
          <!-- Main Work Area -->
        </group>
        <group enclosingStyle="width:100%;height:100%;background:#ccffff;">
          <!-- Supplemental Detail Area -->
        </group>
      </activeHGroup>
      <group enclosingStyle="width:100%;height:100%;background:cyan;">
        <!-- Output Area" -->
      </group>
    </activeVGroup>
  </activeVGroup>
</page>
}

ClientMethod onloadHandler() [ Language = javascript ]
  {
    ZLM.refreshLayout();
  }

ClientMethod onlayoutHandler() [ Language = javascript ]
  {
    ZLM.notifyResize(document.body);
  }
}

このコードの例について説明します。

• outerSplit という <activeVGroup> は、ウィンドウを縦方向に 2 つの領域に分割します。 上の領域は、30 ピクセルの高さで、ユーザはサイズを変更できません。上下の領域の間には 1 ピクセルの太さの区切りバーが入ります。下の領域は、ウィンドウの高さから 31 ピクセル (上の領域の高さとハンドルの太さの合計) を除いた領域を使用します。上の領域には、メニュー領域を示すラベルが格納されます。下の領域には、さらに <activeVGroup> が格納されます。

• innerVSplit という <activeVGroup> は、ウィンドウを再度縦方向に分割し、片方の領域は 150 ピクセルの高さになります。ただし、ここでは、split プロパティに負の値が指定されています。これは、そのプロパティが下の領域用に確保されているスペースを指していることを意味します。既定では、ユーザは分割の大きさを調整することが可能で、マウス・ポインタで容易につかめる程度の太さの調整バーが表示されます。

• 2 つの <activeVGroup> 要素で設定された制約により、ウィンドウ上部に 30 ピクセル、下部に 150 ピクセル、調整バーおよびパーティション・バーに少々 (実際は 8 ピクセル) 確保されます。縦方向の残りすべてのピクセルは、innerVSplit グループの最初の子が占有します。 この子が、ウィンドウの中央部分をメイン作業領域と補足詳細領域に分割する <activeHGroup> です。 この分割では、使用可能なウィンドウ幅の 80 % で区切ります。これは、既定でユーザによる調整が可能です。

均等にサイズを変更するアクティブ・グループ

<activeVGroup> および <activeHGroup> により、そのコンテンツに対する操作に“サイズを合わせる”ことができます。この機能を有効にするには、次の 4 つの手順が必要です。これを設定すると、最初のページ・ロード時にグループは自動的にウィンドウいっぱいに展開され、ウィンドウのサイズ変更イベントに応じてそのサイズが自動的に調整されます。

1. <page> コンポーネントでは、その layout 属性を "none" に設定する必要があります。

   <page xmlns="http://www.intersystems.com/zen" layout="none">
   

   

   これにより、ページ・レイアウトの責務をサーバからブラウザに移行します。

2. XData Contents ブロックの最も外側のアクティブ・グループでは、その CSSの幅と高さを明示的に 100% に設定する必要があります。これは、<activeVGroup> または <activeHGroup> の enclosingStyle 属性を使用して設定できます。また、Zen ページ・クラスの前の例で示した方法でそれを設定することもできます。

   • CSS スタイルのルールを定義します。

     XData Style
     {
     <style type="text/css">
       #outerSplit {
         width:100%;
         height:100%;
         }
     </style>
     }

     

   • id 属性を使用して、このルールを最も外側のアクティブ・グループに適用します。

     XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
     {
     <page xmlns="http://www.intersystems.com/zen" layout="none">
       <activeVGroup id="outerSplit" noResize="true" handleThickness="1" split="30" >
         <!-- Everything else -->
       </activeVGroup>
     </page>
     }

     

3. 以下の事項は、最上位レベルの <page> コンテナからウィンドウのサイズ変更に応じて自動調整するその中のグループまで、グループ・コンポーネントのすべての階層において適用されます。このような方法でグループのサイズを変更したくない場合は、これらの制限は不要です。

   • アクティブ・グループは、layout 属性を使用できません。

   • アクティブ・グループでないすべてのグループは、その CSS の幅と高さの属性を 100% に設定する必要があります。

   前の Zen ページ・クラスの例は、これらのルールに従っています。また、CSS の幅と高さを定義するために、正式な CSS スタイル・ルールでなく、enclosingStyle 属性を使用した例も示します。例えば、以下のように作成できます。

   <group enclosingStyle="width:100%;height:100%;background:#ccffff;">
   

   

4. Zen ページ・クラスの onloadHandler および onlayoutHandler メソッドは、Zen クライアント側ライブラリ・モジュールにコールバックして、ユーザがウィンドウ・サイズを調整したら、アクティブ・グループの配置を再計算させるようにする必要があります。前の Zen ページ・クラスの例は、次のような適切な呼び出しを示しています。

   
   ClientMethod onloadHandler() [ Language = javascript ]
     {
       ZLM.refreshLayout();
     }
   
   ClientMethod onlayoutHandler() [ Language = javascript ]
     {
       ZLM.notifyResize(document.body);
     }
   
   

   

3 分割の割合の計算

次のクラス・コードは、<activeVGroup> および <activeHGroup> で行われる 2 分割処理を使用して、画面の領域を 3 分割するページを実装する方法を示しています。この設計には、以下の特徴があります。

• 画面の余白は、上部に 10%、下部に 10%、左右に 12.5% 取り、中央は作業領域とします。したがって、メイン作業領域は、ウィンドウの使用可能領域に対して、横幅の 75%、高さの 80% を使用します。

• メイン作業領域は3 分割して、それぞれに独自の垂直スクロール・バーを持たせます。ウィンドウのサイズを変更すると、それぞれの領域も自動的にサイズが変更されます。

• ハンドルを見える太さにすることで、画面がどう分割されているかわかりやすくなります。 handleThickness を 0 に設定すると、このハンドルは完全に表示されなくなります。

以下に、この設計の概念図を示します。

以下の Zen ページ・クラスに示すように、アクティブ・グループを使用してレイアウトを作成できます。

Class MyApp.LayoutTest Extends %ZEN.Component.page
{

Parameter PAGENAME = "LayoutTest";

/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
#outerSplit {
    width:100%;
    height:100%;
  }
</style>
}

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" >
  <activeVGroup id="outerSplit" noResize="true"
                handleThickness="1" split="90%" >
    <activeVGroup id="topMarginSplit" noResize="true"
                  handleThickness="1" split="11%" >
      <!-- Top Margin -->
      <group id="Top"/>
      <activeHGroup id="rightMarginSplit" handleThickness="1"
                    noResize="true" split="88%" >
        <activeHGroup id="leftMarginSplit" handleThickness="1"
                      noResize="true" split="14%" >
          <!-- Left Margin -->
       <group id="Left"/>
          <group layout="none"
                 enclosingStyle="width:100%;height:100%;background:#ccccff;">
            <!-- Main Work Area -->
            <activeHGroup id="outerThreeway" noResize="true"
                          handleThickness="2" split="67%" >
              <activeHGroup id="innerThreeway" noResize="true"
                            handleThickness="2" split="50%" >
                <group id="leftLeft"
    enclosingStyle="width:100%;height:100%;overflow:scroll;background:#ffcccc;">
                  <label value="Left-Left"/>
                </group>
                <group id="leftRight"
    enclosingStyle="width:100%;height:100%;overflow:scroll;background:#ccffcc;">
                  <label value="Left-Right"/>
                </group>
              </activeHGroup>
              <group id="rightRight"
    enclosingStyle="width:100%;height:100%;overflow:scroll;background:#ffffcc;">
                <label value="Right-Right" />
              </group>
            </activeHGroup>
          </group>
        </activeHGroup>
        <!-- Right Margin -->
      </activeHGroup>
    </activeVGroup>
    <!-- Bottom Margin -->
  </activeVGroup>
</page>
}

ClientMethod onloadHandler() [ Language = javascript ]
  {
    ZLM.refreshLayout();
  }

ClientMethod onlayoutHandler() [ Language = javascript ]
  {
    ZLM.notifyResize(document.body);
  }
}

この例においては、アクティブ・グループの 2 分割の性質に、すべての配置をパーセントで指定するという設計要件が組み合わさっているため、アクティブ・グループを使用することで生じる根本的な制約に注意する必要があります。メイン作業領域内では、2 つの横方向の分割を入れ子にすることで 3 等分処理を実現します。外側の分割では全領域の 67% を分割し、水平ピクセルの 2/3 を左の子、1/3 を右の子に割り当てています。内側の分割では 左の子に 50% を割り当てています (33% ではありません)。2/3 の領域を 2 等分することで、領域全体が 3 等分され、目的どおりの結果が得られます。

同様の方法によって、中央の作業領域に対するページの左右の余白を正確に取ることができます。外側の分割では全領域の 88% を分割し、大部分を左の子に割り当て、右側の余白に 12% 確保しています。内側の分割では 左の子に 14% を割り当てています (12% ではありません)。そうすることにより左側の余白は、外側の分割で作成された右側の余白と同じ幅になります。そのため、中央の作業領域はウィンドウ幅の 約 75% を占め、左右の余白にはさまれて中央に配置されるようになります。

<desktop> 行スタイル

<desktop> は、行内の <dragGroup> コンポーネントでのサイズ変更と配置の制約を強制できます。 rowStyle 属性に値を割り当てることで、構成を選択できます。有効な値は以下のとおりです。

• FILL_ROW — 行内のすべてのグループは、行の最も高いグループの高さです。 既定では、すべてのサブウィンドウの上下両端揃えになります。 高さは、行ごとに変えることができます。

• ALIGN_ROW_TOP — (既定) 行内のすべての <dragGroup> コンポーネントが上詰めされます。 行内の個々の <dragGroup> コンポーネントの高さは変えることができます。行のスペースは、行内の最も高いグループによって決まります。

• ALIGN_ROW_CENTER — すべての <dragGroup> コンポーネントは、それぞれの行内で縦長にセンタリングされます。 個々の <dragGroup> コンポーネントの高さは変えることができます。 行のスペースは、行内の最も高いグループによって決まります。

• ALIGN_ROW_BOTTOM — 行内のすべての <dragGroup> コンポーネントが下詰めされます。行内の個々の <dragGroup> コンポーネントの高さは変えることができます。 行のスペースは、行内の最も高いグループによって決まります。

• FILL_UNIFORM — デスクトップのすべての <dragGroup> コンポーネントは、最も高い <dragGroup> の高さになります。この結果、すべての行には縦長に一様にスペースが入り、すべての <dragGroup> コンポーネントは上下に両端揃えされます。

• ALIGN_UNIFORM_TOP — デスクトップ内のすべての行には、コンポーネント内の最も高いグループの高さによって指定された一様のスペースが入ります。各行内では、個々の <dragGroup> コンポーネントが上詰めされます。 個々の <dragGroup> コンポーネントの高さは変えることができます。

• ALIGN_UNIFORM_CENTER — デスクトップ内のすべての行には、コンポーネント内の最も高いグループの高さによって指定された一様のスペースが入ります。各行内では、個々の <dragGroup> コンポーネントは縦方向にセンタリングされます。個々の <dragGroup> コンポーネントの高さは変えることができます。

• ALIGN_UNIFORM_BOTTOM — デスクトップ内のすべての行には、コンポーネント内の最も高いグループの高さによって指定された一様のスペースが入ります。各行内では、個々の <dragGroup> コンポーネントが下詰めされます。 個々の <dragGroup> コンポーネントの高さは変えることができます。

<desktop> 列スタイル

通常、<desktop> の幾何学的な制約には、行に対してバイアス分が含まれています。実際、既定では、<desktop> は列の存在を認識しません。

しかし、colStyle 属性に値を割り当てるとこの動作が変わります。その結果、<desktop> は、行のすべての最初の要素を 1 列目、2 つめの要素を 2 列目というようにカウントします。行は削除または追加されると再パックしますが、列は短い行が指定された列に到達しない場合、隙間を埋め込むことができます。

列のスタイルを選択して、colStyle 属性に値を割り当てることで、<desktop> に列を認識させることができます。設定を行わない場合、列の概念は無視され、行ベースの制約のみが適用されます。

有効な colStyle 値は以下のとおりです。

• FILL_COLUMN — 指定された列内のすべての <dragGroup> コンポーネントは、最も広いグループの幅になります。 すべての <dragGroup> コンポーネントは、左右の両端揃えになります。 列のスペースの追加は、列ごとに変えることができます

• ALIGN_COLUMN_LEFT — 列の幅は、その列内の最も広いグループの幅によって指定されますが、個々のサブウィンドウの幅は変えることができます。 すべての <dragGroup> コンポーネントは、列内で左詰めされます。列のスペースの追加は、列ごとに変えることができます

• ALIGN_COLUMN_CENTER — 列の幅は、その列内の最も広いグループの幅によって指定されますが、個々の <dragGroup> コンポーネントの幅は変えることができます。 すべての <dragGroup> コンポーネントは、列内でセンタリングされます。列のスペースの追加は、列ごとに変えることができます

• ALIGN_COLUMN_RIGHT — 列の幅は、その列内の最も広いグループの幅によって指定されますが、個々の <dragGroup> コンポーネントの幅は変えることができます。 すべての <dragGroup> コンポーネントは、列内で右詰めされます。列のスペースの追加は、列ごとに変えることができます

• FILL_WIDTH — 最も長い行の幅の合計が、全体の <desktop> のレイアウトの範囲を指定します。短い行の <dragGroup> コンポーネントの幅は、各行の最後のグループの右端が <desktop> のその他の各行の幅に位置合わせされるように比例して大きくなります。

• ALIGN_WIDTH_LEFT — FILL_WIDTH と似ています。行内の <dragGroup> コンポーネントは、最も長い行の幅に基づいて横長にスペースが入ります。個々の <dragGroup> コンポーネントの幅は埋め込まれず、行内にはランダムなスペースの外観が作成されます。

• ALIGN_WIDTH_CENTER — FILL_WIDTH と似ています。行内の <dragGroup> コンポーネントは、最も長い行の幅に基づいて横長にスペースが入ります。個々の <dragGroup> コンポーネントの幅は埋め込まれず、<dragGroup> コンポーネントは変更されたスペース境界内でセンタリングされます。

• ALIGN_WIDTH_RIGHT — FILL_WIDTH と似ています。行内の <dragGroup> コンポーネントは、最も長い行の幅に基づいて横長にスペースが入ります。個々の <dragGroup> コンポーネントは埋め込まれず、<dragGroup> コンポーネントは変更されたスペース境界内で右揃えされます。

• FILL_UNIFORM — すべての列は、<desktop> 内の最も広い <dragGroup> によって指定された幅とスペースになります。 すべての <dragGroup> コンポーネントは、一様の幅が指定され、自動的に左右の両端揃えになります。

• ALIGN_UNIFORM_LEFT — FILL_UNIFORM に似ていますが、列内のすべての <dragGroup> コンポーネントは左揃えになります。

• ALIGN_UNIFORM_CENTER — FILL_UNIFORM に似ていますが、列内のすべての <dragGroup> コンポーネントは列スペース内でセンタリングされます。

• ALIGN_UNIFORM_RIGHT — FILL_UNIFORM に似ていますが、列内のすべての <dragGroup> コンポーネントは右揃えになります。

動的レイアウトと静的レイアウト

<snapGrid> 内の <dragGroup> コンポーネントをサイズ変更したり、ドラッグ・アンド・ドロップする機能は、主に <dragGroup> で制御されます。属性 moveEnabled および resizeEnabled では、このグループの移動またはサイズ変更を可能にするかどうかを指定します。<dragGroup> も、ヘッダとサイズ変更ボタンに依存して、ユーザのドラッグおよびサイズ変更操作のアフォーダンスを提供します。それらが存在しないと、ドラッグ・グループの移動やサイズ変更はできません。<snapGrid> のメソッド broadcast を使用すると、グリッド内のすべての <dragGroup> コンポーネントの外観や動作に関するさまざまな側面を制御できます。このような broadcast の使用例は、SAMPLES ネームスペースの ZENDemo.SnapGridDemoOpens in a new tab クラスに含まれる restyleHeaderStyles メソッドに示されています。

broadcast は、スナップ・グリッド内のアクティブなドラッグ・グループの各コンポーネントに信号を送信します。有効な信号は、以下のとおりです。

• resize – 各ドラッグ・グループの onresize ハンドラを呼び出します。

• disableResize – ドラッグ・グループの右下隅からサイズ変更ボタンを削除します。

• disableMaxToggle – ドラッグ・グループのヘッダが、最大化ボタンではなく、ドラッグ・ハンドルになるように再定義します。

• enableMaxToggle – ドラッグ・グループのヘッダが、ドラッグ・ハンドルではなく、最大化ボタンになるように再定義します。

• enableResize – ドラッグ・グループの右下隅にサイズ変更ボタンを復元します。

• processAppMessage – 単に、<dragGroup> の子に指定する値を渡します。<dragGroup> のサブクラスは、既定の processAppMessage() メソッドをオーバライドし、ブロードキャスト機能を拡張して、アプリケーション固有のシグナルに対応するようにします。このメカニズムは単一値の引数を渡すだけですが、この値は JSON 文字列から取得することも、任意の JavaScript オブジェクトから取得することもできるため、複数の分断されたデータを 1 つのパッケージにまとめることができます。

• removeDragHeader – ドラッグ・ハンドルを完全に非表示にして、その分回収した領域を使用するようにウィンドウのサイズを変更します。

• restoreDragHeader – ドラッグ・ハンドルを復元して、新たに使用される領域を考慮に入れてウィンドウのサイズを変更します。

• setBodyStyle – スタイル・オブジェクトの JSON 表記法を値で指定して、ドラッグ本体の既存のスタイルに指定のルールを追加します。

• setHeaderStyle – スタイル・オブジェクトの JSON 表記法を値で指定されると、ドラッグ・ヘッダの既存のスタイルに指定のルールを追加します。

• setHeaderLayout – すべての子ドラッグ・グループの headerLayout プロパティを指定の値に設定します。

ZENDemo.SnapGridDemoOpens in a new tab を実行すると、ヘッダとサイズ変更のボタンが表示されるようになり、ドラッグ・グループの移動とサイズ変更を実行できるようになります。[ヘッダの削除] ボタンは、それらのアフォーダンスを削除します。その結果として、グリッド・レイアウトは静的になります。[ヘッダの再スタイル] ボタンは、最大化ボタンとして機能するヘッダを復元します。

表示方向固有のレイアウト

<snapGrid> コンポーネントは、そのコンポーネントが表示されるウィンドウの形状に応じて、行数と列数のレイアウトを調整できます。プロパティ rowsPortrait と colsPortrait では、ポートレート・モードの行数と列数を指定し、rowsLandscape と colsLandscape では、ランドスケープ・モードの行数と列数を指定します。これら 2 つのプロパティのセットのどちらか 1 つのみを設定すると、Zen は未指定のセットに対して既定の行値と列値を使用します。

この機能は携帯電話やタブレットなどのデバイスに表示されるアプリケーションを作成するときに役立ちます。このようなデバイスでは、デバイスの向きが変わると表示の向きも変わります。以下の例は、ブラウザに表示されたウィンドウの形状の変化に対応するページをコード化しています。CSS では、<snapGrid> の高さと幅を 100% に設定し、ページ・レイアウトは “none” に設定する必要があります (“均等にサイズを変更するアクティブ・グループ” のセクションを参照)。

Class demo.SnapGridLP Extends %ZEN.Component.page
{
 /// This Style block contains page-specific CSS style definitions.
 XData Style
 {
  <style type="text/css">
   #snapGrid {
    width: 100%;
    height: 100%;
    background-color: silver;
   }
  </style>
}
 /// This XML block defines the contents of this page.
 XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
 {
  <page xmlns="http://www.intersystems.com/zen" 
   layout="none">
   <snapGrid id="snapGrid" 
    colsLandscape="10" 
    colsPortrait="5" 
    rowsLandscape="5" 
    rowsPortrait="10" 
   >
    <dragGroup id="dg1" onclick="" 
     moveEnabled="true" resizeEnabled="true" 
     headerLayout="C" header="1"
     homeCol="1" homeRow="1" 
     colSpan="1" rowSpan="1">
    </dragGroup>
   </snapGrid>
  </page>
 }
}