SAPUI5 使用 XML 文件作为带有“data-sap-ui-resourceroots”的视图？

Question

I'm doing the SAPUI5 Walkthrough and stuck at step 4. (Walkthrough Step 4)我正在做 SAPUI5 演练并停留在第 4 步。（演练步骤 4）

I'm working with Eclipse and don't know how to change this code-line so it works for my project and is going to find my view.我正在使用 Eclipse，但不知道如何更改此代码行，以便它适用于我的项目并且将找到我的视图。

         data-sap-ui-resourceroots='{
        "sap.ui.demo.wt": "./"
     }'

I need to know what to insert for "sap.ui.demo.wt" when using an Eclipse project.我需要知道在使用 Eclipse 项目时为“sap.ui.demo.wt”插入什么。

Thanks for any hints :)感谢您的任何提示:)

EDIT:编辑：

Now I got a working page with a button which triggers a pop-up.现在我得到了一个带有按钮的工作页面，它会触发一个弹出窗口。

Folder structure:文件夹结构：

SAPUI5_Test
 - WebContent
    - controller
       -> NewView.controller.js
    - view
       -> NewView.view.xml
    - index.html

index.html:索引.html：

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <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_bluecrystal"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-preload="async"
        data-sap-ui-resourceroots='{
            "SAPUI5_Test": "./"
        }'>
    </script>
    <script>
        sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
                viewName: "SAPUI5_Test.view.NewView"
            }).placeAt("content");
        });
    </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

NewView.view.xml:新视图.view.xml：

<mvc:View
controllerName="SAPUI5_Test.controller.NewView"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button 
text="Say hello"
press="onShowHello"/>
</mvc:View>

NewView.controller.js新视图.controller.js

sap.ui.controller("SAPUI5_Test.controller.NewView", {
    onShowHello : function() {
        alert("Hello SAPUI5_Controller");
    }
});

So thanks for the help!所以谢谢你的帮助！ And maybe this could help someone in the future :)也许这可以帮助将来的某个人:)

Answer 1

SAPUI5 is searching for resources like views, controllers or other classes by their full names. SAPUI5 正在按全名搜索视图、控制器或其他类等资源。

It is assuming that every namespace part is a folder and the class/view name is the filename.假设每个命名空间部分都是一个文件夹，而类/视图名称是文件名。 If its a view the filename has to be xxx.view.xml.如果是视图，则文件名必须是 xxx.view.xml。 if its a controller the filename has to be xxx.controller.js.如果是控制器，则文件名必须是 xxx.controller.js。

The root folder where it starts its search is by default the folder of the sap-ui-core.js.默认情况下，它开始搜索的根文件夹是 sap-ui-core.js 的文件夹。

You can change the root folder by defining a data-sap-ui-resourceroots mapping.您可以通过定义 data-sap-ui-resourceroots 映射来更改根文件夹。 Its a javascript object that maps a namespace to a path (relative to the index.html).它是一个将命名空间映射到路径（相对于 index.html）的 javascript 对象。

With the following bootstrap tag company.myProject.view.View1 is searched for at /resources/company/myProject/view/View1.view.xml :使用以下引导标记company.myProject.view.View1在/resources/company/myProject/view/View1.view.xml搜索：

<script id="sap-ui-bootstrap" 
    src="resources/sap-ui-core.js"></script>

With this bootstrap tag company.myProject.View1 is searched for at /view/View1.view.xml :使用此引导标记company.myProject.View1在/view/View1.view.xml搜索：

<script id="sap-ui-bootstrap" 
    src="resources/sap-ui-core.js"
    data-sap-ui-resourceroots='{
      "company.myProject": "./" }'></script>

And with this bootstrap tag company.myProject.View1 is searched for at ddd/myProject/view/View1.view.xml :并使用此引导标记company.myProject.View1在ddd/myProject/view/View1.view.xml ：

<script id="sap-ui-bootstrap" 
    src="resources/sap-ui-core.js"
    data-sap-ui-resourceroots='{
      "company": "./ddd" }'></script>

Edit: Please beware that you have to use " inside of the map. ' will not work.编辑：请注意，您必须在地图内使用" 。 '将不起作用。

Edit: Clarification of folder structure编辑：文件夹结构的澄清

I would recommend that you put everything in a project namespace.我建议您将所有内容都放在项目命名空间中。 Use this folder structure:使用此文件夹结构：

WebContent
- controller
  - NewView.controller.js
- view
  - NewView.view.xml
- index.html

Rename View folder to view (namespaces are camelCase by convention).重命名View文件夹以查看（命名空间按惯例是驼峰式命名的）。
Rename newView.view.xml to NewView.view.xml (Classes/Views are PascalCase by convention)将newView.view.xml重命名为NewView.view.xml （按照惯例，类/视图是 PascalCase）
Use data-sap-ui-resourceroots='{ "myproject": "./" }' .使用data-sap-ui-resourceroots='{ "myproject": "./" }' 。
Change your Controller name to myproject.controller.NewView : Controller.extend("myproject.controller.NewView", {...});将您的控制器名称更改为myproject.controller.NewView ： Controller.extend("myproject.controller.NewView", {...}); or sap.ui.controller("myproject.controller.NewView",{...});或sap.ui.controller("myproject.controller.NewView",{...}); . .
In the xmlview use controllerName="myproject.controller.NewView" .在 xmlview 中使用controllerName="myproject.controller.NewView" 。
Instantiate the view with sap.ui.xmlview({ viewName: "myproject.view.NewView"}).placeAt("content");使用sap.ui.xmlview({ viewName: "myproject.view.NewView"}).placeAt("content");实例化视图. .

With that you don't have to add a mapping for every subfolder in your project.这样您就不必为项目中的每个子文件夹添加映射。

Answer 2

I had the same problem and the solution by @schnoedel didn't work for me until i changed src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" to src="resources/sap-ui-core.js" next to installing openui5 in webapp/resources.我遇到了同样的问题，@schnoedel 的解决方案对我不起作用，直到我将src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"更改为src="resources/sap-ui-core.js"在 webapp/resources 中安装 openui5 旁边。 It seems the location of index.html is only used as root when using a local installation.使用本地安装时，似乎 index.html 的位置仅用作 root 。 I debugged the resource root while using the remote variant and it failed with error message "cannot load https://openui5.hana.ondemand.com/resources/view/App.view.xml" .我在使用远程变体时调试了资源根目录，但失败并显示错误消息“无法加载https://openui5.hana.ondemand.com/resources/view/App.view.xml” 。

SAPUI5 使用 XML 文件作为带有“data-sap-ui-resourceroots”的视图？

问题描述

2 个解决方案

解决方案1
7 已采纳 2016-03-01 12:05:04

解决方案2
0 2021-01-05 09:57:30

SAPUI5 使用 XML 文件作为带有“data-sap-ui-resourceroots”的视图？

问题描述

2 个解决方案

解决方案1 7 已采纳 2016-03-01 12:05:04

解决方案2 0 2021-01-05 09:57:30

解决方案1
7 已采纳 2016-03-01 12:05:04

解决方案2
0 2021-01-05 09:57:30