レスポンシブ Web アプリケーションを実現し、表示を最適化するには、Web 抽象エディターを使用する必要があります。
ただし、Web アプリケーションフォームをより柔軟に設計するために、HTML エディターまたは抽象エディターを使用して、フォームの各部分を設計することもできます。
フォームレイアウトのネスト
前述のように、設計している Web フォームの部分に応じて、抽象エディターと HTML エディターを使い分けることができます。
これを行うには、抽象レイアウト内に HTML エディターを含めるか、HTML レイアウト内に抽象エディターを含めるかして、フォームレイアウトをネストします。
HTML フォーム内に抽象レイアウトをネスト
HTML の設計を基盤としてレスポンシブデザインを作成する必要がある場合に便利な方法です。
従来の HTML エディターを使用して作成した Web フォーム内に、[ Layout ] コントロールをドラッグできます。
HTML フォームにドラッグされた [ Layout ] コントロール
[ Layout ] コントロールをダブルクリックすると、抽象フォームがウィンドウのエディター内に表示されます。
編集するレイアウト
上の図では、ルートが [ RootForm ] であるツリーの子ノードが [ Layout1 ] です。
各ノードをクリックして、ツリーのノードをナビゲートできます。
抽象レイアウト内に HTML コンテナをネスト
図に示すように、HTML コンテナはツールボックスから抽象レイアウトにドラッグできます。
抽象レイアウト内の HTML コンテナ
抽象レイアウト内にレスポンシブテーブルをネスト
抽象レイアウト内で異なるレスポンシブテーブルを操作できます。つまり、複数のレスポンシブテーブルをネストでき、すべてのテーブルがエディターの同じウィンドウ内に表示されます。
抽象レイアウトでネストされたレスポンシブテーブル
同じ抽象レイアウト内で編集される複数のレスポンシブテーブル
それぞれのエディターに固有の利点があり、両方を使い分けることができるため、レスポンシブ Web アプリケーションを非常に柔軟かつ簡単に設計できます。
レイアウトツリー
1 つの Web フォームの設計で使用されるさまざまなレイアウトが、ツリー構造で表されます。フォームのレイアウトツリーは、HTML レイアウトまたは抽象レイアウトである複数のノードで構成されます。このツリーのルートフォームは、HTML レイアウトの場合も、抽象レイアウトの場合もあります。
Web オブジェクトの [ Web Form ] エレメントには、1 つのフォームレイアウトのみ表示できます。表示されるレイアウトは、ツリー上でどれを選択したかによって決まります。
例
次の例では、ResponsiveMasterPage オブジェクトのメイン HTML フォームに 3 つの抽象エディターが含まれています。
ResponsiveMasterPage オブジェクトの Web フォーム
いずれかの抽象エディターをダブルクリックするか、ツリー上で対応するノードを選択すると、 [ Web Form ] エレメントにそのフォームが表示されます。
この例では、RecentLinksLayout を選択した後にそれが [ Web Form ] エレメントに表示されます。
ここに表示された RecentLinksWrapper は、抽象レイアウトに組み込まれた HTML レイアウトです。
HTML レイアウトを含む抽象レイアウト
HTML レイアウトを編集するには、レイアウトをダブルクリックするか、ツリー上で選択します。
HTML レイアウトから抽象レイアウトに切り替える、または抽象レイアウトから HTML レイアウトに切り替える方法
この 2 つのフォームを自動的に切り替える方法はありません。ただし、ユーザーがより柔軟に操作できるように、それぞれのフォームを切り替える方法があります。次のリンク先の説明を参照してください:
ルートフォームとして Html を使用
ルートフォームとして Html を追加
ルートフォームとしてレイアウトを使用
ルートフォームとしてレイアウトを追加
|