现在我们使用shell控件作为应用程序的容器，并使用它作为新的根元素。shell通过在桌面屏幕上引入一个所谓的信箱，来负责应用程序对设备屏幕大小的视觉调整。
Preview
The app is now run in a shell that limits the app width
Coding
You can view and download all files at Walkthrough - Step 12.
webapp/index.html
<!DOCTYPE html> <html> <head> … <script> sap.ui.getCore().attachInit(function () { new sap.m.Shell({ app : new sap.ui.core.ComponentContainer({ name : "sap.ui.demo.walkthrough", settings : { id : "walkthrough" } }) }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
请注意：我们不将Shell控件添加到XML视图中的声明性UI定义中，因为在外部Shell中运行的应用程序，如SAP Fiori launchpad，在组件UI周围已经存在一个Shell。shell控件现在是我们应用程序的最外层控件，它会自动显示一个所谓的信箱，如果屏幕大小大于某个宽度，我们所需要做的就是将组件分配给shell的聚合应用程序。
还可以进一步选择自定义shell，比如设置自定义背景图像或颜色以及设置自定义徽标。有关更多细节，请参阅相关API参考资料。
Parent topic: Walkthrough
Previous: Step 11: Pages and Panels
Next: Step 13: Margins and Paddings
Related Information