Web 用 CallOptions ターゲット

Web オブジェクトをページにロードする際、呼び出し元オブジェクトが配置されている領域とは異なる領域にロードしたいことがあります。
これは、たとえば、極小画面のデバイスではメニューをスライドジェスチャーで表示し、大型画面のデバイスではメニューを静的な固定位置 (画面の上部、左側、右側、下部) に表示するようなレスポンシブ Web デザインアプリケーションの場合に非常に役立ちます。
極小画面のデバイスで右側からのスライド効果によってメニューの表示/非表示を切り替える例を示します。

大型画面の場合、画面の右ターゲットに静的に表示されます。

この動作を実現する方法について説明します。

CallOptions Target と Show (Expand) Target

[ CallOptions Target ] プロパティを使用すると、オブジェクトが呼び出されたときにそのオブジェクトが作成されるページ領域を指定できます。

⁽¹⁾<オブジェクト名>.CallOptions.Target = TargetName
⁽²⁾<オブジェクト名>()

<オブジェクト名> は、呼び出すオブジェクトです。
まず、オブジェクトを描画するターゲット (Content、Top、Right、Bottom、Left) を指定する必要があります。ターゲットを指定していない場合、またはターゲットを [ Content ] に指定した場合は、オブジェクトのナビゲーションは従来と同じように実行されます。
その後 ⁽²⁾、オブジェクトを「呼び出し」ます。この呼び出しでは、オブジェクトは表示されません。オブジェクトは、ターゲットの領域に作成されます。その領域が表示されている場合にのみ、オブジェクトが表示されます。

重要な注記
Top、Right、Bottom、Left のターゲットのステータスは「非表示」です。表示するには、Navigation 外部オブジェクトのメソッドを使用して明示的に表示する必要があります。また、テーマの設定によってターゲットを表示することもできます (下記参照)。

ShowTarget と ExpandTarget は、Navigation 外部オブジェクトのメソッドで、ターゲットの表示や展開を指定できます。

Navigation.ShowTarget(TargetName)
Navigation.ExpandTarget(TargetName)

注:

オブジェクトのターゲットを指定するには、呼び出し元オブジェクト内でマスターページを定義する必要があります。
Top、Right、Bottom、Left のターゲットにロードされるオブジェクトは、[ URL access ] プロパティが YES の Web コンポーネントである必要があります。
Top、Right、Bottom、Left のターゲットにロードされるオブジェクトは、呼び出し元オブジェクトと呼び出し先オブジェクトが同じマスターページを共有している場合、別のオブジェクトにナビゲートする際に再描画されません。別のオブジェクトにナビゲートすると、ターゲットは「非表示」の状態に切り替わります (テーマの設定によって、表示状態が維持されるかどうかが決定されます)。詳細については、下記を参照してください。

ターゲット

SD と異なり、Web ジェネレーターには、プラットフォームごとに事前に定義されたナビゲーションスタイルはありません (Slide Navigation と Split Navigation)。そのため、Web 向けに、可能性のある 5 つのターゲットが用意されています。プログラマーは、独自のスタイルを定義することで、それぞれのケースに応じて最適なターゲットを表示し、カスタムデザインをセットアップできます:

Top
Right
Bottom
Left
Content (既定)。Content ターゲットの領域は、マスターページと呼び出し元オブジェクトです。

各ターゲットについて、ページのマスターページ用に予約されている領域があります。

注: ターゲットの領域は、GeneXus 内の Master Page オブジェクトの Web フォームには表示されません。

テーマ設定

既定では、Top、Right、Bottom、Left のターゲットの領域は非表示であり、極小サイズの画面ではスライド効果によって表示されます。ほかの画面サイズでは、ロードされたオブジェクトがある場合は常に固定されます。テーマを使用することで、この動作を完全に変更できます。
そのため、Form タイプのクラスに [ Navigation Style Class ] プロパティがあり、新しい NavigationStyle タイプのクラスを選択できます。

NavigationStyle タイプのクラスには、次のプロパティがあります。

Mode	3 種類の値を取ることができます: Static: 固定ターゲットを設定します。 Slide: ターゲットの非表示状態を維持し、ターゲットが表示されると、Content ターゲットを移動します。 Custom: ターゲットの表示方法を完全にカスタマイズできます。上級ユーザー向けです。
Top Target Height	Mode が Custom 以外の場合にのみ表示されます。Top ターゲットの高さを指定できます。
Right Target Width	Mode が Custom 以外の場合にのみ表示されます。Right ターゲットの幅を指定できます。
Bottom Target Height	Mode が Custom 以外の場合にのみ表示されます。Bottom ターゲットの高さを指定できます。
Left Target Width	Mode が Custom 以外の場合にのみ表示されます。Left ターゲットの幅を指定できます。
Top Target Class	CallTarget タイプのクラスを選択可能にします。このクラスでは、Top ターゲットの外観を指定できます。
Right Target Class	CallTarget タイプのクラスを選択可能にします。このクラスでは、Right ターゲットの外観を指定できます。
Bottom Target Class	CallTarget タイプのクラスを選択可能にします。このクラスでは、Bottom ターゲットの外観を指定できます。
Left Target Class	CallTarget タイプのクラスを選択可能にします。このクラスでは、Left ターゲットの外観を指定できます。

^(*) まとめ

Mode が Static の場合、コンポーネントは表示されます。プログラムによる制御は必要ありません。
Mode が Slide の場合、メニューを表示 (展開) するアクションをプログラミングする必要があります。

一般的に、大型画面では Mode を Static に設定し、小型画面では Mode を Slide に設定します。Mode が Slide の場合、表示 (展開) アクションをトリガーするコントロールが必要です。
メニューは、スライドジェスチャーで (デスクトップの場合はクリックで) 非表示 (折りたたみ) になります。

例

上記のキャプチャー画像を例にして説明します。
マスターページの右側にメニュー (Web コンポーネント「ShowMostPopularSessions」) を表示したいと考えています。このメニューは、中型画面や大型画面では静的に表示され、極小画面や小型画面ではスライド効果で表示されるものとします。
まず、Start イベントで、メニューの CallOptions ターゲットを指定し、オブジェクトを呼び出します。

Event Start 
    ShowMostPopularSessions.CallOptions.Target = "Right"
    ShowMostPopularSessions()
EndEvent

メニューが表示されるタイミング

中型以上の画面に対して ResponsiveSlide クラスの [ Mode ] が Static に設定されているため、中型画面や大型画面の場合は、プログラムで制御する必要はありません (この目的のためには、テーマで条件付きルールを設定します)。

一方、極小画面や小型画面の場合は、 [ Mode ] プロパティを Slide に設定します。まだ ShowTarget や ExpandTarget をプログラミングしていないため、メニューは描画されません。メニューにボタン (「Favorites」) を追加する必要があります。

Event Favorites.Click
    Navigation.ShowTarget("Right")
EndEvent

Favorites コントロールは、極小画面の場合のみ表示する必要があります。そのためには、このコントロールに関連付けられたクラスに条件付きルールを設定します。中型以上の画面には「display:none;」と設定します。

サンプル「Event Day for WEB」をダウンロードしてください。

Advanced

[ Mode ] を Custom にすると、プロパティが表示されます。

プロパティ	説明
Columns Container Class	Section タイプのクラスを選択可能にします。このクラスでは、Left、Content、Right ターゲットのコンテナの外観を指定できます。
*Content Target*
Content Target Class	CallTarget タイプのクラスを選択可能にします。このクラスでは、Content ターゲットの外観を指定できます。
*Content Target > When other Targets are shown*
Content Target Class when Top is shown	CallTarget タイプのクラスを指定可能にします。このクラスは、Top ターゲットが表示されているときに Content ターゲットに適用されます。
Content Target Class when Right is shown	CallTarget タイプのクラスを指定可能にします。このクラスは、Right ターゲットが表示されているときに Content ターゲットに適用されます。
Content Target Class when Bottom is shown	CallTarget タイプのクラスを指定可能にします。このクラスは、Bottom ターゲットが表示されているときに Content ターゲットに適用されます。
Content Target Class when Left is shown	CallTarget タイプのクラスを指定可能にします。このクラスは、Left ターゲットが表示されているときに Content ターゲットに適用されます。
*Content Target > When another Target is collapsed*
Content Target Class when Top is collapsed	CallTarget タイプのクラスを指定可能にします。このクラスは、Top ターゲットが折りたたみ表示のときに Content ターゲットに適用されます。
Content Target Class when Right is collapsed	CallTarget タイプのクラスを指定可能にします。このクラスは、Right ターゲットが折りたたみ表示のときに Content ターゲットに適用されます。
Content Target Class when Bottom is collapsed	CallTarget タイプのクラスを指定可能にします。このクラスは、Bottom ターゲットが折りたたみ表示のときに Content ターゲットに適用されます。

CallTarget タイプのクラスは、Theme クラスの基本的なプロパティに加えて、次のプロパティを備えています。

Hidden Class	CallTarget タイプの別のクラスを選択可能にします。このクラスでは、ターゲットを非表示にしたときの外観を指定できます。
Collapsed Class	CallTarget タイプの別のクラスを選択可能にします。このクラスでは、ターゲットを折りたたみ表示にしたときの外観を指定できます。

注

この機能は、[ Web User Experience ] プロパティが Smooth に設定されている場合に使用できます。