XML-View中的工具标题

Question

我已经开始使用我的第一个SAPUI5应用程序了，我想使用像Demo Kit中的Tool Header项目。 （我正在使用XML-View。）

我已将它包含在我的视图中，但现在我收到错误：

UIComponent.js：6未捕获错误：无法从resources / sap / tnt / ToolHeader.js加载'sap / tnt / ToolHeader.js'：404 - 未找到

我在应用程序中嵌入了特殊脚本吗？ （哪一个？）

page.view.xml

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m" 
    xmlns:tnt="sap.tnt" 
    xmlns:html="http://www.w3.org/1999/xhtml" 
    controllerName="zdemo.controller.MachDetail">

    <tnt:ToolHeader>
        <Button icon="sap-icon://menu2" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="NeverOverflow" />
            </layoutData>
        </Button>
        <ToolbarSpacer width="20px" />
        <Button text="File" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="Edit" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="View" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="Navigate" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="Code" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="Refactor" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="Run" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <Button text="Tools" type="Transparent">
            <layoutData>
                <OverflowToolbarLayoutData priority="Low" />
            </layoutData>
        </Button>
        <tnt:ToolHeaderUtilitySeparator />
        <ToolbarSpacer>
            <layoutData>
                <OverflowToolbarLayoutData priority="NeverOverflow" minWidth="20px" />
            </layoutData>
        </ToolbarSpacer>
        <Button text="Alan Smith" type="Transparent" press="handleUserNamePress">
            <layoutData>
                <OverflowToolbarLayoutData priority="NeverOverflow" />
            </layoutData>
        </Button>

    </tnt:ToolHeader>
</mvc:View>

我的index.html中唯一的一个脚本

<script src="resources/sap-ui-core.js"
    data-sap-ui-xx-bindingSyntax="complex" id="sap-ui-bootstrap"
    data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-resourceroots='{ "zdemo":"./"
    }'>

Answer 1

您的代码是正确的，但根据评论，您使用的是旧版本，但尚未包含ToolHeader控件。

通过升级到SAPUI5 1.34+，您将能够使用具有相同代码的ToolHeader。

documentation for the control包含添加控件时的信息。

Answer 2

您需要将导入模块依赖项“sap.tnt”添加到您的项目中。你可以这样做：

1.通过凉亭安装依赖

bower install openui5/packaged-sap.tnt

如果你需要另一个依赖，你可以在这里找到：https://github.com/openui5

2.将参考lib添加到index.html

<script .... data-sap-ui-libs="sap.m, sap.tnt"></script>

3.如果您使用grunt服务，请通过openui5_connect公开依赖项资源

在文件Gruntfile.js上，找到openui5_connect密钥并添加

openui5_connect: {
    options: {
        resources: [
            ...
            'bower_components/openui5-sap.tnt/resources',
        ],
        testresources: [
            ...
            'bower_components/openui5-sap.tnt/test-resources'
        ]
    }
}

4.要完成，请向manifest.json添加依赖项

"sap.ui5": {
    "dependencies": {
        "libs": {
            ...
            "sap.tnt": {}
        }
    }
}

并运行您的应用程序