Tool Header in XML-View - sapui5

Question

I've started with my first SAPUI5 application and I wanna use the Tool Header item like in the Demo Kit.
(I'm using an XML-View.)
I've included it into my view but now I get the error:
UIComponent.js:6 Uncaught Error: failed to load 'sap/tnt/ToolHeader.js' from resources/sap/tnt/ToolHeader.js: 404 - Not Found
Do I have embed a special script in my application? (Which one?)
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>
the only one script in my 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

Your code is correct, but according to the comments, you are using an older version which does not yet include the ToolHeader control.
By upgrading to SAPUI5 1.34+ you will be able to use the ToolHeader with the same code.
The documentation for the control includes the information when the control was added.

Answer 2

You need import module dependency "sap.tnt" to your project. You can do it this way:
1. install dependency via bower
bower install openui5/packaged-sap.tnt
if you need another dependency, you can find here: https://github.com/openui5
2. add reference lib to index.html
<script .... data-sap-ui-libs="sap.m, sap.tnt"></script>
3. if you use grunt serve, expose dependency resources by openui5_connect
on file Gruntfile.js, find openui5_connect key and add
openui5_connect: {
options: {
resources: [
...
'bower_components/openui5-sap.tnt/resources',
],
testresources: [
...
'bower_components/openui5-sap.tnt/test-resources'
]
}
}
4. To finish, add dependency entry to manifest.json
"sap.ui5": {
"dependencies": {
"libs": {
...
"sap.tnt": {}
}
}
}
And run your app