再利用可能パーツを利用しての UI 作成には、リスポンシブ・アプリケーションの要件を考慮に入れると、非常に大きな利点があります。図 17 はデスクトップに対しては適切なレイアウトですが、より小さな画面では、リストとエディターを取りかることができるように再度デザインする必要があります。この場合、個別のコントロールをすべて移動するよりも、再利用可能パーツを動かす方が、ずっと簡単です。
再利用可能パーツの作成に加え、ページで複数のレイアウトを作成して、ランタイムにこれを取り替える方法が望ましいです。
図 17 – 複数のレイアウト
図 18 は、異なる向きや画面サイズを処理するための 2 つめのレイアウトが作成された結果を示しています。レイアウトは両方ともレイアウトのリストに載せられており、デザイナーでこの 2 つを切り替えることができます。
同様にこの 2 つをプログラムで切り替えることも可能です。通常これは、以下のように簡単な IF/ELSE コードでページにレイアウトを割り当て、Web ページのデザイン機能を使用して行います。
Evtroutine Handling(#Com_owner.DesignChanged) Design(#Design)
If (#Design *isequalTo #Mobile)
#Com_owner.LayoutManager <= #Layout1
Else
#Com_owner.LayoutManager <= #Layout2
Endif
Endroutine