Skip to Content
avatar image
Former Member

component,View and Controller created using SAPUI5 in eclipse

My project name is SAPUIApplication.I have index.html in webContent folder.I don't see the view loaded in my index.html.I have also included the Component.js.I have commented that in my index.html.Eventually wanted to use it as component.

I am running this project in eclipse.Please suggest.

<!DOCTYPEHTML>

<html>

<head>

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metahttp-equiv='Content-Type'content='text/html;charset=UTF-8'/>

<scriptsrc="resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-xx-bindingSyntax="complex"

data-sap-ui-preload="async"

data-sap-ui-compatVersion="edge"

data-sap-ui-resourceroots='{"SAPUIApplication": "./">

</script>

<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs'ifrequired-->

<script>

sap.ui.getCore().attachInit(function() {

new sap.m.App ({

pages: [

new sap.m.Page({

title: "TextArea - Value Update",

enableScrolling : true,

//sap.ui.xmlview({ viewName: "SAPUIApplication.view.V"}).placeAt("content");

content: [ new sap.ui.core.ComponentContainer({

name : "SAPUIApplication.component"

})]

})

]

}).placeAt("content");

});

</script>

</head>

<bodyclass="sapUiBody"role="application">

<divid="content"></div>

</body>

</html>

My component in webContent/component/component.js

sap.ui.define(['sap/ui/core/UIComponent'],

function(UIComponent) {

"use strict";

var Component = UIComponent.extend("SAPUIApplication.component.Component", {

metadata : {

rootView : "SAPUIApplication.view.V",

dependencies : {

libs : [

"sap.m"

]

},

config : {

sample : {

files : [

"V.view.xml",

"C.controller.js"

]

}

}

}

});

return Component;

});

XML view inside webContent/view/V.view.xml

<mvc:View

controllerName="SAPUIApplication.controller.C"

xmlns:form="sap.ui.layout.form"

xmlns:mvc="sap.ui.core.mvc"

xmlns="sap.m">

<form:SimpleFormeditable="true">

<Labeltext="ValueLiveUpdate"/>

<Switchstate="{/ValueLiveUpdate}"/>

<Labeltext="Type here"/>

<TextAreaid="TypeHere"

value="{/InputValue}"

valueLiveUpdate="{/ValueLiveUpdate}"

liveChange="handleLiveChange"

/>

<Labeltext="input.getValue()"/>

<Textid="getValue"text=" "/>

<Labeltext="model.getProperty()"/>

<Textid="getProperty"

text="{/InputValue}"

/>

</form:SimpleForm>

</mvc:View>

My controller.js file webContent/controller/C.controller.js

sap.ui.define(['sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel'],

function(Controller, JSONModel) {

"use strict";

var CController = Controller.extend("SAPUIApplication.controller.C", {

onInit: function () {

var oModel = new JSONModel({data: {}});

this.getView().setModel(oModel);

},

handleLiveChange: function(oEvent) {

var sValue = oEvent.getParameter("value");

this.getView().byId("getValue").setText(sValue);

}

});

return CController;

});

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Oct 24, 2017 at 05:48 PM

    Hello,

    Generally, when there is a blank page it means that the UI5 lib is not loaded. Check out the path of sap-ui-core.js.

    Regards,

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 25, 2017 at 10:07 AM

    <scriptsrc="resources/sap-ui-core.js"

    There has to be a space between script and src like

    <script src="resources/sap-ui-core.js"

    Add comment
    10|10000 characters needed characters exceeded