Skip to Content
0

did not return a class definition from sap.ui.define. - XMLTemplateProcessor

Feb 08 at 01:18 PM

77

avatar image
Former Member

Hello,

i'm a beginner in UI5.

My app is based on the following tutorial:

https://www.slideshare.net/MaximilianLenkeit/building-custom-controls-to-visualize-data-ui5con-2016-frankfurt

But I get the following error:

My file structure is the following:

with the following code;

lager.js:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"2501Versuch/webapp/libs/d3"
], function (Controller, d3) {
	"use strict";
Controller.extend("2501Versuch.webapp.control.lager", {
  metadata: { 
  aggregations: { 
  _html : { type: "sap.ui.core.HTML", multiple : false, visibility : "hidden"}
         }
  },
  init : function(){
    this._sContainerId = this.getId() + "--container";
    this.setAggregation("_html", new sap.ui.core.HTML({content : "<svg id='" + this._sContainerId + "'></svg>"}));
  },
  renderer : function(oRm, oControl) {
    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.wirite(">");
    oRm.renderControl(oControl.getAggregation("_html"));
    oRm.write("</div>");
  },
  
  onAfterRendering : function(){
    var aData = [{x:30}, {x:25}, {x:20}];
    var selRects = d3.select("#" + this._sContainerId)
    .selectAll("rect")
    .data(aData);
    selRects.enter().append("rect").attr("width", 20);
  }
  });
}
);

App.controller.js:

/*global d3: true*/
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast) {
	"use strict";
Controller.extend("2501Versuch.webapp.controller.App", {
	beimKlicken: function () {
  MessageToast.show("hi Guys");
	}
  });
});

d3.js:

The d3.js library according this link:
/* https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js */

App.view.xml:

<mvc:View
xmlns="sap.m"
dispayblock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns:Control="2501Versuch.webapp.control"
ControllerName="2501Versuch.webapp.Controller.App">
<Carousel>
		<pages>
			<Image src="https://www.columbusglobus.de/globe-map/tresgrand/geo_wb24083.jpg"
				height="600px"/>
			<Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Wikipedia_Hello_World_Graphic.svg/2000px-Wikipedia_Hello_World_Graphic.svg.png"
				height="600px"/>
		</pages>
	</Carousel>
	<Control:lager/>
<Button text= "Hi Leute" press="beimKlicken"></Button>
</mvc:View>

index.html:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>2501Versuch</title>
	<script
		id="sap-ui-bootstrap"
		src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-preload="async"
		data-sap-ui-resourceroots='{
			"2501Versuch.webapp": "./"
		}'>
	</script>
	<script>
		sap.ui.getCore().attachInit(function () {
			sap.ui.xmlview({
				viewName: "2501Versuch.webapp.view.App"
			}).placeAt("content");
		});
	</script>


 
</head>
<body class="sapUiBody" id="content">
</body>
</html>

Thank you for helping me to fix this error.

capture1.png (5.6 kB)
capture.png (5.4 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Jun Wu Feb 08 at 02:13 PM
0

take something easier, custom control is not for beginner.

Share
10 |10000 characters needed characters left characters exceeded