web-dev-qa-db-ja.com

Shell、App、Container、Page、View、SplitAppをいつ使用するか

最近、シェル->ビューとappContainer->ビューを使用して2つのUI5アプリを作成しました。どちらも同じ出力になります。 UI5でShell、App、Container、Page、View、SplitAppをいつ使用するか混乱しています。

それらの違いを知りたいのですが。また、経験から上記のコンテナを使用するためのベストプラクティスについて説明してください。

グラフィカルな説明は理解に大いに役立ちます。

sapui5
10
Natarajan Srikanta

そうです、コンテナコントロールはたくさんあり、これは混乱を招く可能性があります。それでは、簡単な概要を説明しましょう。

sap.m.Shell

シェルは、ここでは当然のことですが、ビューに使用できる親コンテナです。ただし、他のコンテナーとは対照的に、大型デバイスのアプリ幅を制限できます。アプリケーションでこれを実現したい場合は、これがあなたのコントロールです。

sap.m.Shell

sap.m.App | sap.m.SplitApp

sap.m.Appとsap.m.SplitAppの両方が、おそらく最も使用されている親コントロールです。実際、モバイルデバイスでのエクスペリエンスを向上させるためにHTMLを変更するため、そのうちの1つは常にモバイルアプリケーションの一部である必要があります（詳細については、 sap/ui/util/Mobile.init を参照してください）。もちろん、それらはどのシェルの子でもかまいません。さらに、それらはsap.m.NavContainerを拡張し、したがってナビゲーション機能を提供するため、重要です。たとえば、sap.m.Appにはpages集計があります。 toを呼び出すことで、あるページから別のページに簡単に移動できます（ルーティングを使用すると、これはルーターによって実行されます）。 sap.m.SplitAppには2つのNavContainerが含まれています。 1つはマスターエリア用で、もう1つは詳細エリア用です。さらに、アプリケーション全体で1つのバックグラウンドを管理できます。

sap.m.SplitContainer

コンテナについて話すと、sap.m.SplitContainerに言及する必要があります。基本的には、sap.m.SplitAppと同じ機能を提供しますが、アプリケーションにはアプリ（sap.m.Appまたはsap.m.SplitApp）が1つしかないため、このコントロールを使用して、アプリケーションをさらに深くナビゲートすると、マスター/詳細ビューが表示されます。

sap.ui.core.mvc.View

ビュー（およびJSView、XMLView、HTMLViewなどのすべてのサブタイプ）は、1つの単純なページまたはページの領域を反映します。他のすべてのコンテナーとは対照的に、ビューにはコントローラーが関連付けられている場合があり、MVCのビュー/コントローラー部分を実装できます。

sap.ui.core.Fragment

フラグメントは、ビューの軽量バリアントです。これらはビューのように使用され、同様に動作しますが、デフォルトではコントローラーが関連付けられていません。ただし、必要に応じて、コントローラーの代替として機能する単純なオブジェクトを使用できます。フラグメントは、ユーザーインターフェイスの特定の部分を別のファイルに外部化する（場合によっては複数回再利用する）場合に使用できます。

例

アプリケーションのアーキテクチャに関しては、表示する内容によって異なります（制限されたアプリの幅、マスター/詳細など）。ほぼすべての組み合わせが可能ですが、アプリケーションごとに1つのAppオブジェクトのみを使用することをお勧めします。いずれかのシェルの機能が必要ない場合は、それを省略して、アプリオブジェクトを最上位のコンテナーにすることができます。アーキテクチャの例は次のようになります。

sap.m.Shell内のSplitAppまたはSplitContainer

sap.m.Shell
    sap.m.SplitApp
        sap.ui.core.view.XMLView (Master)
            sap.m.Page

        sap.ui.core.view.XMLView (Detail)
            sap.m.Page

ui5 master detail pages within splitapp within Shell

シェルなしのSplitAppまたはSplitContainer

sap.m.SplitApp
    sap.ui.core.view.XMLView (Master)
        sap.m.Page

    sap.ui.core.view.XMLView (Detail)
        sap.m.Page

ui5 master detail pages within splitapp without Shell

sap.m。シェル内のsap.m.App

sap.m.Shell
    sap.m.App
        sap.ui.core.view.JSView
            sap.m.Page

ui5 page within view within app within Shell

シェルなしのsap.m.App

sap.m.App
    sap.ui.core.view.XMLView
        sap.m.Page

ui5 page within view within app without Shell

37
Tim Gerlach