Hello Colleagues,
The version of 3D model application in samples of SAPUI5 demo sdk is working.
I tried to dig in deep with Michael Murray training in SAPUI5 3D model development.
I literally failed and wondering how come the code don't work?
i am attaching my source code here.
Index.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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.vk, sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"com": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function(){
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
name: "com"
})
}).placeAt("content");
});
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
component.js
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("com.Component", {
metadata: {
manifest: "json"
},
init: function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
}
});
});
View.xml
<mvc:View
controllerName="com.controller.App"
xmlns:m="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">
<m:App id="com">
<m:Page
title="{i18n>pageTitle}">
<l:FixFlex class="fixFlexVertical" fixFirst="true">
<l:fixContent>/>
<m:Panel expandable = "true" expanded = "false" headerText="Container3d">
<m:headerToolbar>
<m:Toolbar>
<m:Title text="Interacting with 3d content"/>
</m:Toolbar>
</m:headerToolbar>
<m:content>
<m:VBox class="sapUiTinyMargin">
<m:Text text="this is a ex"/>
</m:VBox>
<f:SimpleForm layout = "ResponsiveGridLayout">
<f:content>
<mvc:Title text="clickedNodeInfo"/>
<m:TextArea id = "txtInfo" width="100%"/>
</f:content>
</f:SimpleForm>
</m:content>
</m:Panel>
</l:fixContent>
<l:flexContent>
<l:Splitter orientation = "Vertical" height="100%" width="100%">
<l:DynamicSideContent>
<l:mainContent>
<vk:Viewport
id="viewer"
width="100%"
height="50%"
backgroundColorTop="rgba(255,255,255,1)"
backgroundColorBottom="rgba(155,155,155,1)"
contentConnector=""
viewStateManager="vsmA"/>
</l:mainContent>
<l:sideContent>
<vk:SceneTree
id="scenetree"
width="100%"
height="50%"/>
</l:sideContent>
</l:DynamicSideContent>
</l:Splitter>
</l:flexContent>
</l:FixFlex>
</m:Page>
<m:dependents>
<vk:ContentConnector id ="first-connector">
<vk:contentResources>
<vk:ContentResource name = "Car" source="https://damals00196.hanatrial.ondemand.com/3dmodels/src/models/sap_car_drive_system_good.vds"/>
</vk:contentResources>
<vk:viewStateManagers>
<vk:viewStateManagers id = "vsmA"/>
</vk:viewStateManagers>
</vk:ContentConnector>
</m:dependents>
</m:App>
</mvc:View>
Controller code
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/vk/ContentResource",
"sap/ui/vk/ContentConnector",
"sap/ui/vk/dvl/ViewStateManager"
], function (Controller, JSONModel, ContentResource, ContentConnector, ViewStateManager) {
"use strict";
return Controller.extend("viewportScenetree.controller.App",{
onInit: function() {
var firstConnector = this.getView().byId("first-connector");
var viewStateManager = this.getView().byId("vsmA");
var viewport = this.getView().byId("viewer");
//viewport.setSelectionMode(none);
viewStateManager.setHighlightColor('rgb(0,255,0');
viewport.attachNodesPicked(function(oEvent)
{
var pickedNode = oEvent.getParameter('picked');
sap.m.MessageToast.show(JSON.Stringify(pickedNode)+""+viewport.getSelectionMode());
});
//viewStateManager.setVisiblityState(pickedNode,False,true)
//viewStateManager.setTintColor(pickedNode,false,true)
viewStateManager.attachSelectionChanged(function(oEvent){
var selectedNodes = oEvent.getParameter("selected");
var unselectedNodes = oEvent.getParameter("unselected");
sap.m.MessageToast.show("sellected"+selectedNodes+"unselected nodes"+unselectedNodes);
});
}
/* onInit: function() {
var view = this.getView();
var oViewport = view.byId("viewer");
var oViewport1 = view.byId("viewer");
var viewStateManager = this.getView().byId("vsmA");
viewStateManager.setHighlightColor('rgb(0,255,0)');
var sceneTree = view.byId("scenetree");
//Constructor for a new content resource. procides an object that owns content resouces, tracks changes, loads and destroys
//content built from the content resource.
var contentResource = new sap.ui.vk.ContentResource({
//specifying the resource to load
source: "models/sap_car_drive_system_good.vds",
sourceType: "vds",
sourceId: "abc123"
});
//Constructor for a new content connector
var contentConnector = new ContentConnector("abcd");
////Manages the visibility and the selection states of nodes in the scene.
var viewStateManager = new ViewStateManager("vsmA", {
contentConnector: contentConnector
});
var viewStateManager1 = new ViewStateManager("vsmA1", {
contentConnector: contentConnector
});
//set content connector and viewStateManager for viewport
oViewport.setContentConnector(contentConnector);
oViewport.setViewStateManager(viewStateManager);
oViewport1.setContentConnector(contentConnector);
oViewport1.setViewStateManager(viewStateManager1);
//set scene tree content connector and viewStateManager
sceneTree.setContentConnector(contentConnector);
sceneTree.setViewStateManager(viewStateManager);
sceneTree.setViewStateManager(viewStateManager1);
view.addDependent(contentConnector).addDependent(viewStateManager);
view.addDependent(contentConnector).addDependent(viewStateManager1);
//Add resource to load to content connector
contentConnector.addContentResource(contentResource);
}*/
});
});
@Michael Murray this code is done as xs app. please find and guide me to get your approach working. thanks a lot.
the error i receive is
Uncaught Error: Cannot add text nodes as direct child of an aggregation. For adding text to an aggregation, a surrounding html tag is needed: />
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.