将所有UI放到index.html文件将很快导致一个混乱的设置，有相当多的工作在我们前面。我们先用sap.m.Text进行模块化。控件导入专用视图。

SAPUI5支持多种视图类型(XML、HTML、JavaScript)。我们选择XML，因为它生成最易读的代码，并将迫使我们将视图声明与控制器逻辑分离。但是UI的外观不会改变。

Preview

The "Hello World" text is now displayed by a SAPUI5 control (No visual changes to last step)

Coding

你可以在此查看和下载所有文件Walkthrough - Step 4.

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

<mvc:View

   xmlns="sap.m"

   xmlns:mvc="sap.ui.core.mvc">

</mvc:View>

　　请注意：命名空间标识项目的所有资源，并且必须是惟一的。如果开发自己的应用程序代码或控件，则不能使用名称空间前缀sap，因为该名称空间是为sap资源保留的。相反，只需定义您自己的惟一名称空间(例如，myCompany.myApp)。我们在应用程序中创建一个新的视图view文件夹，并在应用程序文件夹中为XML视图创建一个新文件.XML结构的根节点是view。这里，我们引用缺省名称空间sa .m，大部分UI资产都位于该名称空间。我们定义了一个附加的sa .ui.core。别名mvc的mvc命名空间，SAPUI5视图和所有其他模型-视图-控制器(mvc)资产都位于此。

webapp/view/App.view.xml

<mvc:View

   xmlns="sap.m"

   xmlns:mvc="sap.ui.core.mvc">

   <Text text="Hello World"/>

</mvc:View>

在SAPUI5中，每个控件都有自己的ID。在上面的XML视图中，我们没有指定ID属性，因此SAPUI5运行时生成一个自己的ID并将其添加到控件中。但是，显式地设置控件的id是一种很好的实践，这样可以方便地标识控件。在view标记中，我们添加了文本控件的声明性定义，其属性与前一步相同。XML标记映射到控件，属性映射到控件的属性。

webapp/index.html

<!DOCTYPE html>

<html>

   <head>

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta charset="utf-8">

      <title>Walkthrough</title>

      <script

         id="sap-ui-bootstrap"

         src="/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-preload="async"

         data-sap-ui-resourceroots='{

            "sap.ui.demo.walkthrough": "./"

         }' >

      </script>

      <script>

         sap.ui.getCore().attachInit(function () {

            sap.ui.xmlview({

               viewName : "sap.ui.demo.walkthrough.view.App"

            }).placeAt("content");

         });

      </script>

   </head>

   <body class="sapUiBody" id="content">

   </body>

</html>

　　我们替换sap.m的实例化。文本控件，由我们的新应用程序XML视图。视图是由SAPUI5的工厂函数创建的，该函数确保视图被正确配置，并且可以被客户扩展。名称以名称空间sap.ui. walk .view作为前缀，以便惟一标识该资源。我们告诉SAPUI5 core, sap.ui.demo.walk - through名称空间中的资源位于与index.html相同的文件夹中。例如，对于在SAP Fiori launchpad中运行的应用程序来说，这是必要的。

　　请注意：从这一步开始，有必要在Web服务器上运行应用程序。我们使用从本地文件系统加载的多个文件来构造应用程序。如果没有Web服务器，浏览器会出于安全原因阻止这一操作。如果错误消息“sap未定义”出现在浏览器的开发工具中，则需要检查引导程序中的资源路径。

有关如何为特定环境安装Web服务器的更多信息，请参见Development Environment.

约定：

　　• 视图名称大写

　　• 所有视图都存储在view文件夹中

　　• XML视图的名称总是以*.view.xml结尾

　　• 默认的XML名称空间是sap.m

　　• 其他XML名称空间使用SAP名称空间的最后一部分作为别名(例如，SAP.ui.core.mvc的mvc)

Parent topic: Walkthrough

Previous: Step 3: Controls

Next: Step 5: Controllers

Related Information

Model View Controller (MVC)

Views

XML View

UI5-文档-4.4-XML Views的更多相关文章

  1. 【XML】利用Dom4j读取XML文档以及写入XML文档

    Dom4j简介 dom4j是一个Java的XML API,是jdom的升级品,用来读写XML文件的.dom4j是一个十分优秀的JavaXML API,具有性能优异.功能强大和极其易使用的特点,它的性能 ...

  2. DOM生成XML文档与解析XML文档(JUNIT测试)

    package cn.liuning.test; import java.io.File; import java.io.IOException; import javax.xml.parsers.D ...

  3. 基于POI和DOM4将Excel(2007)文档写进Xml文件

    刚进公司的training, 下面是要求: Requirements Write a java program to read system.xlsx Use POI API to parse all ...

  4. Ehcache 3.7文档—基础篇—XML Configuration

    你可以使用xml配置创建CacheManager,根据这个schema definition ( http://www.ehcache.org/documentation/3.7/xsds.html# ...

  5. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  6. Java解析XML文档——dom解析xml

    一.前言 用Java解析XML文档,最常用的有两种方法:使用基于事件的XML简单API(Simple API for XML)称为SAX和基于树和节点的文档对象模型(Document Object M ...

  7. c# 创建XML文档，解析XML文档

    1.静态函数 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  8. iOS学习笔记(6)——翻译苹果文档About Windows and Views

    About Windows and Views 关于窗口和视图 In iOS, you use windows and views to present your application’s cont ...

  9. net9：图片变成二进制流存入XML文档，从XML文档中读出图片以及从XML文档中读取并创建图片文件

    原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] fileToXml类： using System;using System.Data;using System.C ...

  10. 从多个XML文档中读取数据用于显示webapi帮助文档

    前言: 你先得知道HelpPageConfig文件,不知道说明你现在不需要这个,所以下文就不用看了,等知道了再看也不急.当然如果你很知道这个,下文也不用看了,因为你会了. 方法一: new XmlDo ...

随机推荐

  1. 记录 ThinkPHP 5.* 漏洞修复后的情况

    记录 ThinkPHP 5.* 漏洞修复后的情况 ThinkPHP 官方 2018-12-09 下午收到漏洞报告. 2018-12-09 晚上看到 Git 已经更新了,修复了漏洞. 2018-12-1 ...

  2. 为什么要用MQ

    现在公司系统在做微服务化,很多人在设计服务间通信时都会想到用MQ,然而有些人居然说不清楚为啥要用MQ? 其实用它主要是两点考虑: 1.应用解耦:两个服务间通过MQ通信,可以不用完全知道对方的存在,实现 ...

  3. centos yum安装PHP5.5,5.6,7.0

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案:1.检查当前安装的PHP包yum list installed | grep php如果有安装的PHP包,先删除他们 yum ...

  4. Angular 4 路由守卫

    路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...

  5. 【python】列表&&元组&&字典

    列表:用“[]”包裹,可对值增删改. 列表遍历: 方法一: alist=["a","b","c","d","e ...

  6. protobuf 协议 windows 下 C++ 环境搭建

    1. 下载protobuf https://code.google.com/p/protobuf/downloads/list Protocol Buffers 2.5.0 full source - ...

  7. Eclipse-Java EE

    1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  http://www.oracle.com/technetwork/java/javase/downloads/index.h ...

  8. 执行Chrome自动化时--正在受到自动软件的控制的显示屏蔽

    用selenium启动,浏览器出现‘Chrome正在受到自动软件的控制’ 屏蔽的方法: # coding:utf-8 from selenium import webdriver # 加启动配置 op ...

  9. Bootstrap-CSS：网格系统

    ylbtech-Bootstrap-CSS:网格系统 1.返回顶部 1. Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap ...

  10. JAVA URI URL 区别

    String urlString = "http://192.168.21.77:8080/swp/mainPage?aa=11&bb%3D22"; URI uri = U ...