ネストされたビューを使用して他のビューを破棄します。

Question

<semantic:DetailPage title="Detail Page Title"> 
    <mvc:XMLView viewName="query.sap.view.Table"/> 
    <mvc:XMLView viewName="query.sap.view.chart"/> 
</semantic:DetailPage> 

同じコンテンツ内に2つのネストされたビューがあり、そのうちの1つだけを表示したいとします。ボタンを押すと、もう一方のボタンに切り替える必要があります。

Answer 1

スイッチがあり、現在の値をローカルJSONモデルに保存します。ここでは、この値を使用して2つのビューを切り替えます。 switchがtrueの場合は、最初のビューを表示し、それ以外の場合は2番目のスイッチを表示します。以下は

はコードです：

XML（私はちょうどビューの場所（同じもの）でテキストを使用しました）：

 <Switch state='{/showFirstView}' /> 
     <Text text='TExt 1' visible='{/showFirstView}' /> 
     <Text text='TExt 2' visible='{=!${/showFirstView}}' /> 

コントローラー：

onInit: function() { 
     var model = new sap.ui.model.json.JSONModel({showFirstView:true}); 
     this.getView().setModel(model); 
    }, 

、それ働くスクリーンショット：

と：（私たちの場合、子ビューのいずれかで）目に見える唯一の制御を行うためには

Answer 2

単一のビューを追加することをおすすめします。その後、任意のイベントで sap.m.semantic.SemanticPage.removeContent（vContent）を使用して元のビューを削除し、sap.m.semantic.SemanticPage.addContent（）を使用して新しいビューを追加することができます。

Link to the relevant SAPUI5 Guide Page

は、それはあなたのお役に立てば幸いです。

Answer 3

、我々は最初にすべてのコントロールをインスタンス化して使用するように誘惑されるかもしれませんvisibleプロパティを使用して「不要な」ものを非表示にすることができますが、これらのコントロールの複雑さや内容に応じて、この方法でperformance issueが発生する可能性があります。これはテーブルやビューなどのコントロールで特に当てはまります。そのため、コントロールのインスタンス化を遅れての代わりに行う必要があります。

ありがたいことに、UI5はすでにアプリ記述子ファイル（manifest.jsonを）内部targetsプロパティで簡単に設定することができます我々の場合のための組み込みの遅延ロード機能を備えています。ここで

は、オンデマンドで唯一の子ビューを示すの最小限の例です。

1. parent：このためhttps://embed.plnkr.co/HRSJ44/

   を、私たちは、子ビューのターゲット・オブジェクトのための3つのプロパティを必要とするポインティング親ビューが定義されている親ターゲット名

2. controlId：子ビューを添付するコントロールのID。
   上記のPlunkerの例では、コントロールはNavContainerで、スライディングアニメーションもボーナスとして提供されています。アニメーションはtransition: "show"でオフにすることができます。
3. controlAggregation：私たちの場合"pages"（NavContainerのデフォルト集約）。

これら3つのプロパティを定義したら、display the target view without changing the hashか、component.getRouter().navTo("thatChildRouteName");を呼び出して子ビューに移動できます。いずれにしても、子ビューは遅延して作成され、異なる子ビューを通して柔軟に切り替えることができます。

ボタンを押して上の遅延ロードを示すネットワークの滝：