将所有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. OpenWrt的web服务器

    参考: http://www.szchehang.com/news/10602.html 我们登录的路由器主界面就是通过这个软件指定了80端口来访问的.我们要添加自己额外的网站服务,那只需要重新定义一 ...

  2. EXPLAIN执行计划中要重点关注哪些要素(转)

    EXPLAIN的结果中,有哪些关键信息值得注意呢? MySQL的EXPLAIN当然和ORACLE的没法比,不过我们从它输出的结果中,也可以得到很多有用的信息. 总的来说,我们只需要关注结果中的几列: ...

  3. MySqli 中预处理类 stmt

    非select 语句(没有结果集的) 1.建立连接数据库 $mysqli=new mysqli("localhost","root","", ...

  4. 工欲善其事必先利其器系列之:更换Visual Studio代码风格.

    前言:如果你厌倦了默认的VS的背景颜色,可以在studiostyl下载.vssettinggs文件,将其导入VS中,黑色的风格还是蛮不错的,如果用的12的话就没这个必要了我觉得. 从网站下载后会得到扩 ...

  5. 【Spring学习笔记-4】注入集合类List、Set、Map、Pros等

    概要: 当java类中含有集合属性:如List.Set.Map.Pros等时,Spring配置文件中该如何配置呢? 下面将进行讲解. 整体结构: 接口 Axe.java  package org.cr ...

  6. springMVC学习(9)-全局异常处理

    一.异常处理思路: 系统中异常包括两类:预期异常和运行时异常RuntimeException,前者通过捕获异常从而获取异常信息,后者主要通过规范代码开发.测试通过手段减少运行时异常的发生. 系统的da ...

  7. 网络对抗 Exp0 Kali安装 Week1

    2018-2019 网络对抗 Exp0 Kali安装 Week1 目录 一.下载 二.安装运行 三.配置 四.问题 一.下载 在百度中搜索kali linux 选择并点击Kali Linux | Pe ...

  8. 杂项：GIT （分布式版本控制系统）

    ylbtech-杂项:GIT (分布式版本控制系统) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git的读音为/gɪt/.Git是一个开源的分布式版本控制系统 ...

  9. python3+selenium3.13的简单操作

    1.浏览器 1.1 浏览器窗口大小位置 driver.set_window_size(self, width, height, windowHandle) 将某个窗口设置为固定大小 driver.se ...

  10. TensorFlow函数：tf.FIFOQueue队列

    转载:https://blog.csdn.net/akadiao/article/details/78552037 tf.FIFOQueue tf.FIFOQueue继承基类QueueBase． Qu ...