クライアント側レイアウト・マネージャ
実行時、Zen はサーバでページの記述を作成して、クライアントに組み込みます。クライアントでは、指定されたとおりにページの記述がアンパック、展開、表示されます。これは、従来のブラウザベースの Web アプリケーションであり、サーバは表示要求を受け取ると以前にレイアウトされたページをリモート・ユーザに表示していました。この場合、ユーザへの表示内容は Zen アプリケーションによって完全に制御されます。
この状況の詳細は、"Zen の使用法" の “Zen のクライアントおよびサーバ” の章にある “実行時の Zen ページ” を参照してください。
クライアント側のレイアウトにより、この一般的な状況に対して役に立つ例外が提供されます。この章では、Zen ページにコンポーネントを追加する方法について説明します。ページがクライアントで表示された後、ユーザはページ・レイアウトに対するクライアント側の調整を開始できます。つまり、マウスをクリックおよびドラッグすることで、ページ・レイアウトを直接操作します。
このモデルでは、ユーザ・インタフェースは Web ブラウザで実行されますが、Web アプリケーションの厳密な要求 - 応答の交換に限定されません。正確には、ブラウザは Visual Basic などの言語で記述できるダイナミックなユーザ・インタフェースを提供する手段です。Zen では、クライアント側レイアウト管理のオプションをいくつか提供することで、このタイプのアプリケーションをサポートしています。
アクティブ・グループを使用したレイアウトの管理
クライアント側のレイアウト管理の最も簡単な方法は、組み込みのクライアント側レイアウト・マネージャを使用して Zen ページを記述するものです。これらの組み込みコンポーネントは、アクティブ・グループ・コンポーネントと呼ばれます。それぞれのコンポーネントは、Zen グループ・コンポーネントであり、クライアント側で直接操作できる特別な機能を備えています。また、各アクティブ・グループは、クライアント側レイアウト・マネージャでもあり、これらの用語は代替できます。
組み込みのアクティブ・グループには、以下のものがあります。
-
<dragGroup> コンポーネントを含む <corkboard>
-
<dragGroup> コンポーネントを含む <desktop>
-
<dragGroup> コンポーネントを含む <snapGrid>
この章では、組み込みのアクティブ・グループを使用する方法を説明します。以下の数セクションで、次の内容について説明します。
グループ内のすべてのコンポーネントに適用される方法でアクティブ・グループの動作をカスタマイズする場合、Zen クライアント側ライブラリ・モジュールを使用して、独自のクライアント側レイアウト・マネージャ (アクティブ・グループ) を記述することができます。完全参照は、このドキュメントの “クライアント側ライブラリ” を参照してください。
縦方向および横方向のアクティブ・グループ
画面を次の 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 つの手順が必要です。これを設定すると、最初のページ・ロード時にグループは自動的にウィンドウいっぱいに展開され、ウィンドウのサイズ変更イベントに応じてそのサイズが自動的に調整されます。
-
<page> コンポーネントでは、その layout 属性を "none" に設定する必要があります。
<page xmlns="http://www.intersystems.com/zen" layout="none">
これにより、ページ・レイアウトの責務をサーバからブラウザに移行します。
-
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> }
-
-
以下の事項は、最上位レベルの <page> コンテナからウィンドウのサイズ変更に応じて自動調整するその中のグループまで、グループ・コンポーネントのすべての階層において適用されます。このような方法でグループのサイズを変更したくない場合は、これらの制限は不要です。
-
アクティブ・グループは、layout 属性を使用できません。
-
アクティブ・グループでないすべてのグループは、その CSS の幅と高さの属性を 100% に設定する必要があります。
前の Zen ページ・クラスの例は、これらのルールに従っています。また、CSS の幅と高さを定義するために、正式な CSS スタイル・ルールでなく、enclosingStyle 属性を使用した例も示します。例えば、以下のように作成できます。
<group enclosingStyle="width:100%;height:100%;background:#ccffff;">
-
-
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>、<corkboard>、<snapGrid> など) に子オブジェクトを動的に追加するには、そのアクティブ・グループで子オブジェクトのクライアント側の初期化を実行する必要があります。
最初の手順では、初期化コードを呼び出す前に、DOM オブジェクト全体の準備が整っていることを確認します。 これを実行するには、パラメータに 1 または True を設定して refreshContents() メソッドを呼び出して、同期オブジェクトの作成を強制します。
その次に、アクティブ・グループとその子を再初期化します。これは、ZLM.initLayout() の呼び出しで実行できます。ただし、アクティブ・グループ自体がベース・ページの一部として静的に定義されている必要があります。
ZLM.initLayout() は必要に応じて繰り返して呼び出せますが、実行に時間がかかります。そのため、行内にいくつかのドラッグ・グループを作成していることがわかっている場合は、新しい子をすべて追加した後で refreshContents() を一度呼び出し、refreshContents() から復帰した後で ZLM.initLayout() を一度呼び出すことが最善策になります。 ウィンドウは個別に追加できますが、可能な場合はこれらを一括処理することにより、サーバとの対話やクライアント側の処理が削減されます。
その一例として、以下のコードでは、クライアントから、ページ全体を更新することなく、空のサイズ変更可能なドラッグ・グループを追加する際の、適切な呼び出し順序を示します。
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<hgroup>
<button caption="add" onclick="zenPage.addClientSide();"/>
</hgroup>
<snapGrid id="snapGrid" cols="10" rows="10"
enclosingStyle="height:500px;width:500px;background-color:silver">
</snapGrid>
</page>
}
ClientMethod addClientSide() [ Language = javascript ]
{
var sg=zen("snapGrid");
var dg=zenPage.createComponent("dragGroup");
dg.homeCol=1;
dg.homeRow=1;
dg.rowSpan=2;
dg.colSpan=2;
dg.header="new";
sg.addChild(dg);
sg.refreshContents(1)
ZLM.initLayout();
}
<activeHGroup> および <activeVGroup>
<activeHGroup> は、左と右の 2 つのパーティションに分割されたペインを表示するアクティブ・グループです。ペインはオプションで移動可能な調整バーによって区切られます。<activeHGroup> は、2 つの子コンポーネントのみを持つことができます。<activeHGroup> で定義された最初の子は左側のパーティションに表示され、2 つめの子は右側のパーティションに表示されます。<activeHGroup> の名前の “H” は、横方向を表します。
また、縦方向に配置する同様の機能として <activeVGroup> があります。<activeVGroup> は、左右でななく、上下にペインを分割します。
通常、<activeHGroup> または <activeVGroup> の子は両方ともグループです。これらの子グループはそれぞれパーティションのレイアウトを定義します。<activeHGroup> または <activeVGroup> の 2 つの子には、<hgroup>、<desktop>、<activeVGroup> などのグループ・タイプに応じた一般的な許容数および制限に従って、任意の数およびタイプの Zen コンポーネントを含めることができます。
<activeHGroup> および <activeVGroup> にはそれぞれ以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <activeHGroup> および <activeVGroup> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。ただし、layout 属性はアクティブ・グループには使用されません。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
autoExpand |
このプロパティが定義されている場合、2 つのパーティションのうちのいずれかがサイドバー・パネルを自動的に開き、自動的に閉じます。この場合、パーティション間の分割によって定義されている境界にマウスが入ると、指定されたパネルが拡大され、autoExpand 値で指定された幅に達するまで大きくなります。 autoExpand 値は、通常、ピクセル単位で解釈されます。 正の値は、自動的に拡大する左 (上) のパーティションを指定します。 負の値は、右 (下) のパーティションを指定します。 既定値 (NULL) は、このグループの機能を無効にします。 |
handlePattern |
ドラッグ可能なパーティション・ハンドルを描画するために使用するイメージのファイル名を示す文字列。<activeHGroup> の場合、このイメージは少なくともハンドルの幅でなければならず、ハンドルの長さに沿って縦長に繰り返されます。同様に、<activeVGroup> の場合は、このイメージは少なくともハンドルの高さでなければならず、ハンドルの長さに沿って横長に繰り返されます。 既定値は、グレーので勾配効果を生成する PNG イメージです。 |
handleThickness |
調整ハンドルの幅 (ピクセル単位)。2 つのパーティション間の分割線に表示されます。アクティブ・グループの動的特性により、このバーの幅は CSS を使用して設定できないため、handleThickness プロパティで指定する必要があります。 既定値は "7" で、大半の画面では 1/8 インチ (2 mm) でドラッグ・ハンドルが表示されます。 |
noResize |
True の場合、パーティションのサイズを変更できません。False の場合、マウスで調整ハンドルをドラッグすることでパーティションのサイズを調整できます。既定値は False です。 サイズ変更が有効 (noResize が False) な場合、マウスがドラッグ可能な位置に配置されると、マウス・ポインタは東西 (または北南) 方向のサイズ変更カーソルに変化します。 |
onresizeBottom | onresizeBottom イベントのハンドラを指定します。このイベントは、ユーザがこの <activeVGroup> の下部パネルをサイズ変更したときに発生します。 |
onresizeLeft | onresizeLeft イベントのハンドラを指定します。このイベントは、ユーザがこの <activeHGroup> の左パネルをサイズ変更したときに発生します。 |
onresizeRight | onresizeRight イベントのハンドラを指定します。このイベントは、ユーザがこの <activeHGroup> の右パネルをサイズ変更したときに発生します。 |
onresizeTop | onresizeTop イベントのハンドラを指定します。このイベントは、ユーザがこの <activeVGroup> の上部パネルをサイズ変更したときに発生します。 |
soundFX | 自動的に拡大するグループが拡大または縮小すると音が出るサウンド・ファイルのファイル名を示す文字列。 未定義または NULL (空白の文字列) の場合は、動画の音が出ません。既定は Null です。 |
split |
2 つのペイン間の分割を定義する文字列。Zen では、以下のように split 値が解釈されます。
既定の split 値は、以下のとおりです。 50% ペインの手動調整では、固定幅のサイズまたは割合を変更します。新しいサイズまたは比率は、ベース・コンテナがサイズ変更されたときに適用されます。 |
<activeHGroup> および <activeVGroup> は、split プロパティで指定されているようにページがロードされたときのウィンドウ・サイズに基づいて画面を分割します。ユーザは必要に応じて調整ハンドルを使用してこのレイアウトを再調整できます。ペインのサイズをプログラムでリセットできます。これには、分割を固定サイズまたは比率のいずれで計算するかの変更も含みます。split プロパティの値が “75%” のようにパーセント記号で終わる文字列の場合、分割は比率として計算されます。split の値が “75px” のように px で終わる文字列の場合、分割は固定幅として計算されます。split の値が 50% のように数字の場合は、分割は指定された数字を使用し、その時点で使用されている単位を維持してサイズ変更されます。例えば、以下のコード・フラグメントは、split を既定値の 50% に設定した <activeVGroup> を作成します。
<activeVGroup id="activeVGroup" handleThickness="5">
<vgroup>
<hgroup>
<button caption="Change To Pixels" valign="top"
onclick="zenPage.changeSize('pixels');" />
<button caption="Change To Percent" valign="top"
onclick="zenPage.changeSize('percent');" />
<button caption="Change Size Same Units" valign="top"
onclick="zenPage.changeSize('same');" />
</hgroup>
</vgroup>
</activeVGroup>
ボタン用の onclick イベント・ハンドラは、以下のように分割のサイズおよび単位を変更します。
ClientMethod changeSize(mode) [ Language = javascript ]
{
var avgr = zenPage.getComponentById('activeVGroup');
switch (mode)
{
case 'pixels':
avgr.setProperty('split',"75px");
break;
case 'percent':
avgr.setProperty('split',"75%");
break;
case 'same':
avgr.setProperty('split',30);
break;
}
}
ベース・ウィンドウのサイズ変更に応じてグループが自動的にレイアウトを再計算するようにするには、Zen ページのオプションの onlayoutHandler JavaScript コールバック・メソッドに以下の呼び出しを追加する必要があります。
ZLM.notifyResize(document.body);
この呼び出しが実行されると、ページが最初にロードされたときと、ブラウザ・レベルでウィンドウのサイズ変更に対応するときに notifyResize 関数が自動的に呼び出されます。onlayoutHandler コールバックに notifyResize を配置すると、さらに処理が必要な場合に、onlayoutHandler コールバックにその他の “サイズ変更の反応” を配置することができます。
onlayoutHandler の詳細は、“Zen のレイアウト・ハンドラ” のセクションを参照してください。
<corkboard>
<corkboard> には、1 つ以上の <dragGroup> コンポーネントを記述できます。<corkboard> は、子コンポーネントが重複表示されるアクティブ・グループです。ユーザが <corkboard> 内の <dragGroup> をクリックするとすぐに <dragGroup> が最前面に表示されます。その後、<dragGroup> をドラッグして、<corkboard> 内の新しい位置にドロップすることができます。ドラッグされたコンポーネントは、<corkboard> 内の他のすべてのコンポーネントの上に重なります。ドラッグされたコンポーネントに加えて他のコンポーネントのいずれも現在の位置を維持し、移動することはありません。
コンポーネントは、<corkboard> の中または外に移動させることはできません。直接的な操作は、<corkboard> コンテナの中でのみ行えます。
<corkboard> コンポーネントの直接の子は、<dragGroup> コンポーネントでなければなりません。ただし、<dragGroup> コンポーネント自体のコンテンツに制限はありません。<dragGroup> には、グループ内で有効な任意のコンポーネントを組み込めます。
<corkboard> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <corkboard> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
<desktop>
<desktop> には、1 つ以上の <dragGroup> コンポーネントを組み込めます。<desktop> は、その子コンポーネントが “並べて表示” され、各コンポーネントが互いに重なることなく完全に表示されるアクティブ・グループです。ユーザが <desktop> 内の <dragGroup> をクリックするとすぐに <dragGroup> が最前面に表示されます。その後、<dragGroup> をドラッグして、<desktop> 内の新しい位置にドロップすることができます。<dragGroup> コンポーネントを新しい位置にドラッグ・アンド・ドロップすると、ドラッグされたコンポーネントは、その場所を空けるため、<desktop> の他の <dragGroup> コンポーネントを移動します。ドラッグされたコンポーネントがドロップされると、すべての <dragGroup> コンポーネントの位置が変わります。
コンポーネントは、<desktop> の中または外に移動させることはできません。直接的な操作は、<desktop> コンテナの中でのみ行えます。
<desktop> コンポーネントの直接の子は、<dragGroup> である必要があります。ただし、<dragGroup> コンポーネント自体のコンテンツに制限はありません。<dragGroup> には、グループ内で有効な任意のコンポーネントを組み込めます。
<desktop> には以下の属性があります。
<desktop> の基本的な幾何学モデルは、行や列に基づいた簡単なものです。このため、<desktop> コンポーネントでは、そこに含まれる <dragGroup> コンポーネントに行や列の配置を制約することができる行や列のスタイル設定をサポートしています。
<desktop> 内の <dragGroup> コンポーネントの配置は変化しますが、通常、この配置は “行の非表示” の導入によるバイアス分が含まれています。 このため、<dragGroup> が指定された行から削除されると、同じ行のその他のグループが左に移動して、行の長さが非表示になり、行の右端が空白になることもあります。この規約は、ウィンドウの表示部分の使用を最大限にし、水平スクロールを最小限にします。
<desktop> 内の <dragGroup> コンポーネントの最初のレイアウトは、これらのコンポーネントの valign:top および align:left などの CSS スタイルを指定することで提示することができます。また、CSS スタイル・プロパティ top および left を明示的なピクセル値に設定することもできます。次に例を示します。
<dragGroup enclosingStyle="top:150px; left:233px;" >
<!-- contents of drag group here -->
</dragGroup>
<desktop> コンポーネントをレンダリングする際は、Zen は現在有効になっているその他の制約での推奨事項に従います。ただし、行と列のスタイル、自動的な行の非表示、および <dragGroup> コンポーネントの重複の禁止を行うと、CSS で推奨されている移動を確実に優先させることが保証できなくなります。
<desktop> コンポーネントには以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <desktop> には、アクティブ・グループとしての機能に加えて、その他の Zen グループと同じスタイルとレイアウトの属性があります。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
colStyle | <desktop> は、列内の <dragGroup> コンポーネントでのサイズ変更と配置の制約を強制できます。このテーブルの後に示す “<desktop> 行スタイル” の説明に従って、colStyle 属性に値を割り当てることで、列の構成を選択できます。 |
rowStyle | <desktop> は、行内の <dragGroup> コンポーネントでのサイズ変更と配置の制約を強制できます。 このテーブルの後に示す “<desktop> 行スタイル” の説明に従って、rowStyle 属性に値を割り当てることで、行の構成を選択できます。 |
<desktop> の状態をクエリ、保存、およびリストアすることができます。<desktop> コンポーネントは、特定のユーザが選択した <desktop> の配置情報 (Zen ページの前のセッションで、ユーザが <desktop> 内のコンポーネントをどのようにサイズ設定および配置したかについての情報) を保存およびリストアできる JavaScript メソッドを提供します。この情報は、次のように処理できます。
layout=getState()
getState メソッドは、<desktop> の状態を記録した文字列を返します。この文字列の形式は、このメソッドを使用するために理解する必要のない内部的なエンコード形式です。どんな方法でもかまいませんが、後で使用する際に restoreState を使用して取得できるように文字列を保存します。
restoreState(layout)
<desktop> の表示で使用される配置情報を示す文字列を入力します。layout は、以前に getState を使用して取得された文字列である必要があります。restoreState メソッドは、実際にはいずれのウィンドウも開きません。これは、開かれるウィンドウをすべて取得し、layout 文字列が保存されたときの配置にリストアされます。
<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>
<snapGrid> は、1 つ以上の <dragGroup> コンポーネントを含めることができ、それぞれがグリッドに合わせて配置できるように編成されるアクティブなグループです。指定した行数と列数により、基礎となるグリッドを定義します。その結果のグリッドは正規化された領域になります。つまり、4 列のレイアウトでは、各列の幅が合計の幅の 25% になるということです。
ポートレート・ページやランドスケープ・ページ用に、<snapGrid> の形状の高さが幅より大きくなった (またはその逆になった) ときに列数と行数が変化する別のレイアウトを定義することができます。これは、タブレットや携帯電話などのデバイスでレイアウトを適応させる場合に特に役立ちます。
<snapGrid> コンポーネントの直接の子は、<dragGroup> コンポーネントでなければなりません。ただし、<dragGroup> コンポーネント自体のコンテンツに制限はありません。<dragGroup> には、グループの有効な子である任意のコンポーネントを組み込めます。
子コンポーネントは、重ねて表示できます。<snapGrid> 内の <dragGroup> は、ユーザがクリックすると前面に現れます。適切なユーザ操作が有効化されている場合、ユーザは <dragGroup> をドラッグ・アンド・ドロップできます。ドロップされると、<dragGroup> は最も近くにあるグリッド・ラインにスナップします。グリッド自体はスクロールしませんが、グリッド内の <dragGroup> コンポーネントはスクロールできます。
ユーザは、<snapGrid> の内側または外側にコンポーネントを移動させることはできません。直接的な操作は、<snapGrid> コンテナの内側でのみ行えます。
<snapGrid> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <snapGrid> には、アクティブ・グループとしての機能に加えて、その他の Zen グループと同じスタイルとレイアウトの属性があります。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
cols | ポートレート・レイアウトとランドスケープ・レイアウトの両方に使用する列の数を指定します。既定値は 3 です。 |
colsLandscape | レンダリングされる <snapGrid> の幅が高さ以上のときに使用する列の数を指定します。 |
colsPortrait | レンダリングされる <snapGrid> の幅が高さ未満のときに使用する列の数を指定します。 |
rows | ポートレート・レイアウトとランドスケープ・レイアウトの両方に使用する行の数を指定します。既定値は 2 です。 |
rowsLandscape | レンダリングされる <snapGrid> の幅が高さ以上のときに使用する行の数を指定します。 |
rowsPortrait | レンダリングされる <snapGrid> の幅が高さ未満のときの行の数を指定します。 |
動的レイアウトと静的レイアウト
<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>
}
}
<dragGroup>
<dragGroup> は、<desktop>、<corkboard>、または <snapGrid> の直接の子になることができる、唯一の Zen グループ・コンポーネントです。<dragGroup> 自体に、グループ内に配置できる任意のコンポーネントを組み込めます。
<dragGroup> は、テキスト・ラベルと各種ボタンを含めることができるヘッダ・バーを表示できます。<dragGroup> は、ボタンのクリックや、右下隅のヘッダまたはサイズ変更アイコンのドラッグにより、サイズ変更、最大化、最小化、終了、および復元が可能です。多くの点で <dragGroup> は、一般的に Macintosh や PC のデスクトップに表示されるデスクトップ・ウィンドウと類似しています。
<dragGroup> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <dragGroup> は、その他の Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
centerHeader | 設定されている場合、このブーリアン・フラグは、ヘッダのタイトル・セクションが <dragGroup> の中央に配置されることを示します。 |
colSpan |
<dragGroup> が <snapGroup> の子の場合は、<snapGroup> の列内の <dragGroup> の初期の幅を指定します。 <snapGroup> 内の <dragGroup> のサイズ変更の詳細は、"動的レイアウトと静的レイアウト" を参照してください。 |
header |
タイトルは、この <dragGroup> の上部に表示されるヘッダ・バーに表示されます。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、$$$Text マクロによってクライアント側またはサーバ側のコードから invalidMessage プロパティに値を代入できるようになります。 |
headerLayout | ヘッダ・レイアウトのパターンにより、<dragGroup> ウィンドウ・フレームのヘッダ・セクションに追加されるコントロールの順序が決定されます。これは、以下のトークンで構成される 5 文字の文字列としてエンコードされます。
この文字列を使用すると、単一の呼び出しでコントロールの配置を再構成でき、特定のオペレーティング・システムの外観と使用感に合わせようとする場合に役立ちます。例えば、MS-Windows システムでは 'TIFC' というパターンに従い、MacOS ではタイトルを中央配置 ("centerHeader" を参照) にした CIFT の標準を採用しています。タイトル・セクションは、ヘッダ・レイアウトのブレークポイントのようなものを表します。ヘッダより前に現れるものはヘッダの左端から並べられ、ヘッダより後に現れるものはヘッダの右端から並べられます。 |
homeCol |
<dragGroup> が <snapGroup> の子の場合は、<dragGroup> の先頭が配置される初期列を指定します。<snapGroup> 内の <dragGroup> の再配置の詳細は、"動的レイアウトと静的レイアウト" を参照してください。 |
homeRow |
<dragGroup> が <snapGroup> の子の場合は、<dragGroup> の左端が配置される初期行を指定します。<snapGroup> 内の <dragGroup> の再配置の詳細は、"動的レイアウトと静的レイアウト" を参照してください。 |
imageClose |
ユーザがこの <dragGroup> を閉じるためにクリックするボタンに表示するイメージの URI。imageClose を指定しない場合、Zen では既定値が使用されます。
imageClose がファイルの相対パス名である場合は、Caché のインストール先ディレクトリの CSP ディレクトリを基準として認識されます。通常、このパスは Zen アプリケーションの images サブディレクトリになります。例えば、以下の値の場合 : <dragGroup imageClose="myApp/images/myClose.png"/> イメージ・ファイルは、次のディレクトリにあります : install-dir/CSP/myNamespace/myApp/images/myClose.png これは、<dragGroup> のイメージ属性にも当てはまります。 |
imageCloseHover |
マウスをアイコンの上に置いたときに、グループを閉じるボタンに表示するイメージの URI。 |
imageCloseWidth | グループを閉じるボタンのイメージに割り当てられる領域の幅 (ピクセル単位)。既定のイメージは、16x16 ピクセルです。イメージの高さに別の値を指定することはできません。 |
imageContract |
ユーザがこの <dragGroup> を縮小するためにクリックするボタンに表示するイメージの URI。imageContract を指定しない場合、Zen では既定値が使用されます。 ."imageClose" を参照してください。 |
imageContractHover | マウスをアイコンの上に置いたときに、グループの縮小ボタンに表示するイメージの URI。 |
imageContractWidth | グループの縮小ボタンのイメージに割り当てられる領域の幅 (ピクセル単位)。 |
imageExpand |
ユーザがこの <dragGroup> を拡大するためにクリックするボタンに表示するイメージの URI。imageExpand を指定しない場合、Zen では既定値が使用されます。 |
imageExpandHover | マウスをアイコンの上に置いたときに、グループの展開ボタンに表示するイメージの URI。 |
imageExpandWidth | グループの展開ボタンのイメージに割り当てられる領域の幅 (ピクセル単位)。 |
imageMinimize |
ユーザがこの <dragGroup> を最小化するためにクリックするボタンに表示するイメージの URI。imageMinimize を指定しない場合、Zen では既定値が使用されます。 |
imageMinimizeHover | マウスをアイコンの上に置いたときに、グループの最小化ボタンに表示するイメージの URI。 |
imageMinimizeWidth | グループの最小化ボタンのイメージに割り当てられる領域の幅 (ピクセル単位)。 |
imageResize |
ユーザがこの <dragGroup> をサイズ変更するためにクリックするボタンに表示するイメージの URI。imageResize を指定しない場合、Zen では既定値が使用されます。 |
imageResizeSize | アイコンのサイズ変更用に予約されている正方形のサイズ。これは、ピクセル単位の整数値です。既定は 16 で、16x16 ピクセルの正方形を示します。 |
minWidth | ユーザがインタラクティブにサイズ変更したときに dragGroup の最小幅 (ピクセル単位) を設定します。minWidth の値は、dragGroup のサイズのプログラムによる設定には影響しません。snapGrid コンテキスト内で使用された場合、実際の最小幅は、snapGrid 列幅の次に大きい偶数の倍数に設定されます。
プロパティは、暗黙のピクセル単位を持つ整数です。XData ブロック内で静的に、またはオブジェクト上で setProperty() への呼び出しで実行時に設定することができます。既定値は 96 です。 |
moveEnabled | このフラグが True の場合、<dragGroup> が含まれるアクティブ・グループ領域内でユーザがドラッグ・アンド・ドロップ操作を行うと、<dragGroup> の位置を変更できます。既定値は True です。moveEnabled で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。"Zen 属性のデータ型" を参照してください。 |
onclosepending | onclosepending イベント・ハンドラ。このイベントは、この <dragGroup> の閉じるボタンをユーザがクリックすると起動されます。ネイティブのブラウザ・ウィンドウとは異なり、このイベントに対応して abortClose() を呼び出すことで、ウィンドウが閉じられないようにすることができます。 |
onresize | onresize イベント・ハンドラ。このイベントは、ユーザが <dragGroup> のサイズを変更したときに起動されます。 |
onwindowdrop | onwindowdrop イベント・ハンドラ。このイベントは、ユーザがドラッグ・アンド・ドロップ操作後に、この <dragGroup> のタイトル・バーを放したときに起動されます。 |
onwindowgrab | onwindowgrab イベント・ハンドラ。このイベントは、ユーザがドラッグ・アンド・ドロップ操作で、このタイトル・バーのそばの <dragGroup> をつかんだときに起動されます。 |
resizeEnabled | このフラグが True の場合、ユーザは、この <dragGroup> のサイズを変更できます。 既定値は True です。resizeEnabled で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。"Zen 属性のデータ型" を参照してください。 |
rowSpan |
<dragGroup> が <snapGroup> の子の場合は、<snapGroup> の列内の <dragGroup> の初期の高さを指定します。<snapGroup> 内の <dragGroup> のサイズ変更の詳細は、"動的レイアウトと静的レイアウト" を参照してください。 |