Question

我已经开始使用我的第一个SAPUI5应用程序了，我想使用Demo Kit中的工具标题项。（我正在使用XML-View。）

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

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

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

page.view.xml

PROC_A

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

<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>

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": {}
        }
    }
}

运行你的应用

XML-View中的工具标题

2 个答案: