Step 5: Adding Step Navigation
In this step, you will be adding the sap.ui.vk.StepNavigation control to a 3D Viewer application.
The controls in the sap.ui.vk library are currently flagged as experimental. For more information, see Compatibility Rules.
Sometimes, you may encounter a 3D model that has a sequence of animations associated with it. The StepNavigation control allows you to display the steps in the animation sequence, navigate to the individual steps in the animation sequence, and play the animation in a single step or in all of the steps.
The content in this step builds on the code from Step 4: Adding a Scene Tree, and code changes performed in this step of the tutorial are done in relation to the files in Step 4: Adding a Scene Tree.
You can view and download all files in the Explored app in the Demo Kit under 3D Viewer - Step 5 - Viewport with Scene Tree and Step Navigation .
index.html
Update the index.html file to reference the viewportScenetreeStepnav namespace, which will be the namespace we'll use for the sample application in this step.
#!html<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script id="sap-ui-bootstrap"
src="../../../../../../../../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.vk, sap.m, sap.ui.core"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"viewportScenetreeStepnav": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function(){
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
name : "viewportScenetreeStepnav"
})
}).placeAt("content");
});
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>Component.js
Update the Component.js file to reference the namespace specified for this application.
#!jssap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("viewportScenetreeStepnav.Component", {
metadata: {
manifest: "json"
},
init: function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});i18n.properties
Because we are not creating any fields that a user can interact with, we only have one line of code which specifies what the label for the page title is.
#!properties# Page Descriptor
pageTitle=Viewport with Scene Tree and Step Navigationmanifest.json
Update the manifest.json file so that it references the correct files.
#!js{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "viewportScenetreeStepnav",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "viewportScenetreeStepnav.view.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "viewportScenetreeStepnav.i18n.i18n"
}
}
}
}
}App.view.xml
In this file, we have added a <vk:StepNavigation> element to this file. We have specified the width and height of the StepNavigation control on the screen.
#!xml<mvc:View
controllerName="viewportScenetreeStepnav.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:vk="sap.ui.vk"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:u="sap.ui.unified"
displayBlock="true">
<App id="viewportScenetreeStepnav">
<Page
title="{i18n>pageTitle}">
<vk:StepNavigation
id="StepNavigation"
width="100%"
height="17.5%"/>
<vk:Viewport
id="viewport"
width="100%"
height="50%"/>
<vk:SceneTree
id="scenetree"
width="100%"
height="50%"/>
</Page>
</App>
</mvc:View>App.controller.js
The highlighted sections in the following code block indicate the additions and changes made in the code to incorporate step navigation in the 3D Viewer application.
#!jssap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/vk/ContentResource",
], function (Controller, JSONModel, ContentResource) {
"use strict";
var contentResource = new sap.ui.vk.ContentResource({
source: "/models/boxTestModel.vds",
sourceType: "vds",
id: "abc123"
});
return Controller.extend("viewportScenetreeStepnav.controller.App",{
onInit: function() {
var mainScene;
jQuery.sap.require("sap.ui.vk.GraphicsCore");
var graphicsCore = new sap.ui.vk.GraphicsCore({},{
antialias: true,
alpha: true,
premultipliedAlpha: false
});
var view = this.getView();
var viewport = view.byId("viewport");
var sceneTree = view.byId("scenetree");
var stepNavigation = view.byId ("StepNavigation");
viewport.setGraphicsCore(graphicsCore);
graphicsCore.loadContentResourcesAsync([contentResource], function(sourcesFailedToLoad){
if (sourcesFailedToLoad){
jQuery.sap.log.error("Some of content resources cannot be loaded.");
} else {
var scene = graphicsCore.buildSceneTree([contentResource]);
if (scene){
mainScene = scene;
viewport.setScene(mainScene);
var viewStateManager = graphicsCore.createViewStateManager(mainScene.getDefaultNodeHierarchy());
viewport.setViewStateManager(viewStateManager);
sceneTree.setScene(mainScene, viewStateManager);
stepNavigation.setScene(mainScene);
} else {
jQuery.sap.log.error("Failed to build the viewport, the scene tree, and the step navigation.");
}
}
});
}
});
});Let us look at the changes in more detail.
The following line of code adds a new Step Navigation object.
#!jsvar stepNavigation = view.byId ("StepNavigation");We then associate the scene with the Step Navigation object, so that the animation sequences in the model are displayed in the StepNavigation control.
#!jsstepNavigation.setScene(mainScene);
Finally, we changed the message for the condition that determines whether the Viewport, the Scene Tree, and the Step Navigation controls loaded successfully or not:
#!jsjQuery.sap.log.error("Failed to build the Viewport, the Scene Tree, and the Step Navigation.");