NewControl.js:
sap.ui.define([
"sap/ui/core/Control",
"sap/m/RatingIndicator",
"sap/m/Label",
"sap/m/Button"
], function (Control, RatingIndicator, Label, Button) {
"use strict";
return Control.extend("control.NewControl", {
metadata : {
properties : {
value:
{type : "float", defaultValue : 0}
},
aggregations : {
_rating : {type : "sap.m.RatingIndicator", multiple: false, visibility : "hidden"},
_label : {type : "sap.m.Label", multiple: false, visibility : "hidden"},
_button : {type : "sap.m.Button", multiple: false, visibility : "hidden"}
},
events : {
change : {
parameters : {
value : {type : "int"}
}
}
}
},
init : function () {
this.setAggregation("_rating", new RatingIndicator({
value: this.getValue(),
iconSize: "2rem",
visualMode: "Half",
liveChange: this._onRate.bind(this)
}));
this.setAggregation("_label", new Label({
text: "{i18n>productRatingLabelInitial}"
}).addStyleClass("sapUiSmallMargin"));
this.setAggregation("_button", new Button({
text: "{i18n>productRatingButton}",
press: this._onSubmit.bind(this)
}).addStyleClass("sapUiTinyMarginTopBottom"));
},
setValue: function (fValue) {
this.setProperty("value", fValue, true);
this.getAggregation("_rating").setValue(fValue);
},
reset: function () {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
this.setValue(0);
this.getAggregation("_label").setDesign("Standard");
this.getAggregation("_rating").setEnabled(true);
this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelInitial"));
this.getAggregation("_button").setEnabled(true);
},
_onRate : function (oEvent) {
var oRessourceBundle = this.getModel("i18n").getResourceBundle();
var fValue = oEvent.getParameter("value");
this.setProperty("value", fValue, true);
this.getAggregation("_label").setText(oRessourceBundle.getText("productRatingLabelIndicator", [fValue, oEvent.getSource().getMaxValue()]));
this.getAggregation("_label").setDesign("Bold");
},
_onSubmit : function (oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
this.getAggregation("_rating").setEnabled(false);
this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelFinal"));
this.getAggregation("_button").setEnabled(false);
this.fireEvent("change", {
value: this.getValue()
});
},
renderer : function (oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("myAppDemoWTProductRating");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_rating"));
oRM.renderControl(oControl.getAggregation("_label"));
oRM.renderControl(oControl.getAggregation("_button"));
oRM.write("</div>");
}
});});
App.controller.js:
sap.ui.controller("sap.ui.core.n-t.n-t.App", {
App.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sap.ui.core.n-t.n-t.App" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="app"></App>
</core:View>
master.controller.js:
sap.ui.controller("sap.ui.core.n-t.n-t.master", {
onPress: function(oEvent)
{
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("second");
}
master.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:cntrl="control"
controllerName="sap.ui.core.n-t.n-t.master" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Master view">
<content>
<VBox>
<Label text="Welcome on the first view !" />
<Button text="Navigate to the second view" press="onPress" />
<cntrl:NewControl value="2" />
</VBox>
</content>
</Page>
</core:View>
Slave.controller.js:
sap.ui.controller("sap.ui.core.n-t.n-t.Slave", {
onBack: function()
{
sap.ui.controller("sap.ui.core.n-t.n-t.master").onPress();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("master", true);
}
Slave.view.xml:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sap.ui.core.n-t.n-t.Slave" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Slave view">
<content>
<VBox>
<Label text="Welcome on the second view !" />
<Button text="Navigate back to the first view" press="onBack" />
</VBox>
</content>
</Page>
</core:View>
Component.js:
sap.ui.define( ["sap/ui/core/UIComponent"], function (UIComponent) {
"use strict";
return UIComponent.extend("sap.ui.core.n-t", {
metadata: {
"manifest":"json"
},
init : function () {
UIComponent.prototype.init.apply(this, arguments);
// Parse the current url and display the targets of the route that matches the hash
this.getRouter().initialize();
}
});
}, /* bExport= */ true);
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 src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{
"sap.ui.core.n-t": "./"
}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("control");
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer({
name : "sap.ui.core.n-t"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
</body>
</html>
manifest.json:
{
"_version": "1.8.0",
"sap.ui5": {
"models": {
},"rootView": {
"viewName": "sap.ui.core.n-t.n-t.App",
"type": "XML",
"async": true
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.core.n-t.n-t",
"controlId": "app",
"controlAggregation": "pages",
"async": true
},
"routes": [
{
"pattern": "",
"name": "master",
"target": "master"
},
{
"pattern": "second",
"name": "second",
"target": "second"
}
],
"targets": {
"master": {
"viewID": "master",
"viewName": "master"
},
"second": {
"viewId": "Slave",
"viewName": "Slave"
}
}
}
}
}
output:
