• SAP OPEN UI5 Step4 Xml View


    转载请联系vx:xiaoshitou5854

    XML View

    有多种view:html,xml,JavaScript。xml view可读性好,可以把view的声明从controller logic里抽离出来。

    webapp/view/App.view.xml (New)

    <mvc:View
       xmlns="sap.m"
       xmlns:mvc="sap.ui.core.mvc">
       <Text text="Hello World"/>
    </mvc:View>
    

    xmlns:引入sap.m库

    xmlns:mvc="sap.ui.core.mvc":引入sap.ui.core.mvc库,并给个别名叫mvc,把名字缩短了,方便后续使用。

    Text:定义一个Text控件。,Text的内容是Hello World

    webapp/index.js

    sap.ui.define([
    	"sap/ui/core/mvc/XMLView"
    ], function (XMLView) {
    	"use strict";
    
    	XMLView.create({
    		viewName: "sap.ui.demo.walkthrough1.view.App"
    	}).then(function (oView) {
    		oView.placeAt("content");
    	});
    
    });
    

    使用XMLView库。

    XMLView.create的作用是找到webapp/view/App.view.xml,并加载进来。sap.ui.demo.walkthrough1是index.html里data-sap-ui-resourceroots和data-sap-ui-onInit定义的

    then:如果找到了并加载成功就调用placeAt方法,替换掉id为content的DOM的内容。

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>SAPUI5 Walkthrough</title>
    	<script
    		id="sap-ui-bootstrap"
    		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    		data-sap-ui-theme="sap_belize"
    		data-sap-ui-libs="sap.m"
    		data-sap-ui-compatVersion="edge"
    		data-sap-ui-async="true"
    		data-sap-ui-onInit="module:sap/ui/demo/walkthrough1/index"
    		data-sap-ui-resourceroots='{
    			"sap.ui.demo.walkthrough1": "./"
    		}'>
    	</script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
    
    </html>
    

    本人微信:xiaoshitou5854

  • 相关阅读:
    (78) C# System.Text.Json
    EF 迁移数据库
    element table
    element-plus 安装
    asp.net core 跨域
    JS常用公共方法 获取弹出层合适的宽高
    一篇文章让你搞懂如何通过Nginx来解决跨域问题
    Dubbo系列讲解之服务注册【3万字长文分享】
    Dubbo系列讲解之扩展点实现原理分析【2万字分享】
    MySQL索引篇之索引存储模型
  • 原文地址:https://www.cnblogs.com/xiaoshiwang/p/14909146.html
Copyright © 2020-2023  润新知