问题描述
最近我使用 shell -> 视图和 appContainer -> 视图创建了两个 UI5 应用程序.两者都产生相同的输出.我很困惑何时在 UI5 中使用 Shell、App、Container、Page、View 和 SplitApp.
我想知道它们之间的区别.另请根据您的经验描述使用上述容器的最佳做法.
图形化的解释对理解有很大帮助.
您说得对,有很多容器控件,这可能会令人困惑.所以让我简要介绍一下:
sap.m.Shell
外壳,毫不奇怪,是一个可以用于视图的父容器.但是,与其他容器相比,它允许您限制大型设备的应用程序宽度.如果您想为您的应用程序实现这一点,这是您的控制.
sap.m.App |sap.m.SplitApp
sap.m.App
和 sap.m.SplitApp
可能是最常用的父控件.事实上,其中之一应该始终是您的移动应用程序的一部分,因为它们会进行一些 HTML 修改以改善移动设备上的体验(请参阅
SplitApp 或 SplitContainer 没有 Shell
sap.m.SplitAppsap.ui.core.view.XMLView(主)页面sap.ui.core.view.XMLView(详细信息)页面
sap.m.Shell 中的 sap.m.App
sap.m.Shell应用程序sap.ui.core.view.JSView页面
没有任何 Shell 的 sap.m.App
sap.m.Appsap.ui.core.view.XMLView页面
Recently I have created two UI5 apps using shell -> views and appContainer -> views. Both results in same output. I'm confused when to use Shell, App, Container, Page, View, and SplitApp in UI5.
I would like to know the differences between them. Also please describe the best practices of using the above containers from your experiences.
Graphical explanation would help a lot in understanding.
You're right, there are a lot of container controls and this can be confusing. So let me give a brief overview:
sap.m.Shell
The shell, no surprise here, is a parent container you can use for views. However, in contrast to other containers, it allows you to limit the app width for large devices. If you want to achieve this for your application, this is your control.
sap.m.App | sap.m.SplitApp
Both, the sap.m.App
and the sap.m.SplitApp
are probably the most used parent controls. In fact, one of them should always be part of your mobile application as they do some HTML modifications to improve the experience on mobile devices (see sap/ui/util/Mobile.init for details). Of course, they can be a child of any Shell. Furthermore, they are important since they extend a sap.m.NavContainer
and therefore offer navigation capabilities. For example, the sap.m.App
has a pages
aggregation. By calling to
, you can simply navigate from one page to another (once you are using routing, this is done by the router). The sap.m.SplitApp
contains two NavContainers. One for the Master Area and another for the Detail Area. In addition, it offers you to manage one background across your application.
sap.m.SplitContainer
Talking about containers one should mention the sap.m.SplitContainer
. Basically, it offers the same capabilities as the sap.m.SplitApp
but since you should have only one App (sap.m.App
or sap.m.SplitApp
) in your application, you can use this control if you want to start a Master/Detail view once you navigate deeper in your application.
sap.ui.core.mvc.View
The view (and all of its sub types like JSView
, XMLView
, HTMLView
) reflect one simple page or area of a page. In contrast to all other containers, a view may have a controller associated and enables you to implement the View/Controller part of MVC.
sap.ui.core.Fragment
Fragments are light-weight variants of a view. They are used like views and they behave similar, but have no controller associated by default. However, you can use simple objects with functions as a controller replacement if necessary. Fragments can be used if you have a particular part of the User Interface you want to externalize to a different file (and maybe reuse it multiple times).
Examples
Regarding an architecture of your application, it depends on what you want to display (limited app width, Master/Detail, ...). Almost every combination is possible but I think it is still best practices to have only one App object per application. If you don´t need a feature of one of the Shells you can simply omit it and make your app object the top level container. Some examples for an architecture could look like this:
SplitApp or SplitContainer in a sap.m.Shell
sap.m.Shell
sap.m.SplitApp
sap.ui.core.view.XMLView (Master)
sap.m.Page
sap.ui.core.view.XMLView (Detail)
sap.m.Page
SplitApp or SplitContainer without Shell
sap.m.SplitApp
sap.ui.core.view.XMLView (Master)
sap.m.Page
sap.ui.core.view.XMLView (Detail)
sap.m.Page
sap.m.App in a sap.m.Shell
sap.m.Shell
sap.m.App
sap.ui.core.view.JSView
sap.m.Page
sap.m.App without any Shell
sap.m.App
sap.ui.core.view.XMLView
sap.m.Page
这篇关于何时使用 Shell、App、Container、Page、View 和 SplitApp的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!