将所有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. 如何开启GZIP

    服务器设置 gzip 压缩是 web 开发里很普遍的做法.假设你要请求一个 100k 的文件,网络传输速度为 50k/s,需要 2s 才能得到数据,但是如果在服务器设置了 gzip 压缩,将服务端的文 ...

  2. tomcat源码阅读之SingleThreadModel

    一.接口简介: 实现了SingleThreadModel接口的servlet类只能保证在同一时刻,只有一个线程执行该servlet实例的service方法,在tomcat实现中会创建多个servlet ...

  3. 从工程文化和运维理念理解Netflix

    http://www.infoq.com/cn/news/2018/01/netflix-engineering-culture 在技术圈儿,Netflix 是一家非常有特色的互联网公司.他们信奉“自 ...

  4. sublime text3安装 mac os汉化/常用模块

    sublime text介绍: Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器.Sublime Text是由 ...

  5. Django 中 python manage.py makemigrations 与 python manage.py migrate

    执行 python manage.py makemigrations django根据settings.py里面的INSTALLED_APPS项设置找到对应app里的models.py,应用里面创建的 ...

  6. java工具类-excel jxl

    jxl-2.6.9.14.jarimport net.sf.jxls.transformer.XLSTransformer;//jxls-core-1.0.2.jarimport java.io.Fi ...

  7. airtest IDE问题汇总

    FAQ 1.同一个脚本,使用IDE可以运行,使用命令行运行报错 原因:曾经开启过anyproxy代理,添加过HTTP_PROXY环境变量,将其取消即可 unset HTTP_PROXY https:/ ...

  8. 1109 Group Photo （25 分）

    1109 Group Photo (25 分) Formation is very important when taking a group photo. Given the rules of fo ...

  9. 1012 The Best Rank （25 分）

    1012 The Best Rank (25 分) To evaluate the performance of our first year CS majored students, we cons ...

  10. 针对ROS5版本的配置导出和导入（迁移其他服务器）

    1.在老ROS,导出当前系统配置export compact RouterOS 5.12 新增功能 export compact 命令,该命令简化了导出的参数,仅导出修改的配置,系统默 认配置参数将不 ...