IT干货网

UI5-文档-4.12-Shell Control as Container

sanshao 2022年03月09日 SAP 175 0

现在我们使用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

API Reference:sap.m.Shell


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.11-Pages and Panels