Skip to content

Instantly share code, notes, and snippets.

@harun
Forked from narennaik/index.html
Created March 9, 2017 05:39
Show Gist options
  • Save harun/9db290c4e8f95beab24302d96cbab831 to your computer and use it in GitHub Desktop.
Save harun/9db290c4e8f95beab24302d96cbab831 to your computer and use it in GitHub Desktop.
Creating Custom Controls in SAPUI5 Demo // source http://jsbin.com/kojisi
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Custom Controls in SAPUI5 Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons">
</script>
<style type="text/css">
/* here you could overwrite some sapui5 styles you don't like */
</style>
<script type="text/javascript">
/* a custom currency datatype */
(function(){
"use strict";
jQuery.sap.declare('nabisoft.bookstore.datatypes.CurrencyCode');
jQuery.sap.require('sap.ui.base.DataType');
/**
* A string type that represents currency codes that are currently supported
* by our little application. Currently only "USD" and "EUR" is supported
*/
nabisoft.bookstore.datatypes.CurrencyCode = sap.ui.base.DataType.createType(
"nabisoft.bookstore.datatypes.CurrencyCode",
{
isValid : function(sValue) {
return sValue === "EUR" || sValue === "USD";
}
},
sap.ui.base.DataType.getType('string')
);
})();
</script>
<script type="text/javascript">
/* our custom Book control */
(function () {
"use strict";
jQuery.sap.declare("nabisoft.bookstore.controls.Book");
//$.sap.includeStyleSheet("path/to/css/file");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.require("sap.ui.commons.Image");
jQuery.sap.require("sap.ui.commons.RatingIndicator");
jQuery.sap.require("sap.ui.commons.Link");
jQuery.sap.require("sap.ui.commons.TextView");
jQuery.sap.require("nabisoft.bookstore.datatypes.CurrencyCode");
sap.ui.core.Control.extend("nabisoft.bookstore.controls.Book", {
// the control API:
metadata : {
properties : {
/* Business Object properties */
title : {type : "string"},
author : {type : "string"},
description : {type : "string"},
price : {type : "float"},
currencyCode : {type : "nabisoft.bookstore.datatypes.CurrencyCode", defaultValue : "USD"}, //BUG defaultValue is not validated
comments : {type : "string[]", defaultValue: []},
numberOfPages : {type : "int"},
coverPictureUrl : {type : "string"},
expressDelivery : {type : "boolean", defaultValue : false},
/* other (configuration) properties */
width : {type : "sap.ui.core.CSSSize", defaultValue : "400px"},
height : {type : "sap.ui.core.CSSSize", defaultValue : "400px"},
// only for demonstration
someObject : {type : "object"},
whatever : {type : "any"}
},
aggregations : {
_buyButton : {type : "sap.ui.commons.Button", multiple : false, visibility: "hidden"},
coverPicture : {type : "sap.ui.commons.Image", multiple : false, visibility: "public"}
},
associations: {
relatedBooks : {type : "nabisoft.bookstore.controls.Book", multiple : true, singularName: "relatedBook"}
},
events : {
buy : {enablePreventDefault : true}
}
},
_oLink : null, //a very very private property
init : function(){
var oControl = this, oBuyBtn, oCoverPic;
this._oLink = new sap.ui.commons.Link();
//do something with the link
//...
//create a button to allow used buying that book
oBuyBtn = new sap.ui.commons.Button({
text: "Buy this book",
press: function (oEvent) {
oControl.fireBuy({
someData : "some data I want to pass along with the event object"
});
}
});
this.setAggregation("_buyButton", oBuyBtn);
//create initialize the cover picture, but we don't have a src yet
oCoverPic = new sap.ui.commons.Image({
decorative: true,
width: "150px",
height: "200px",
tooltip: "Cover of book"
});
oCoverPic.addStyleClass("nsBookCvrPic");
this.setCoverPicture(oCoverPic);
},
onAfterRendering: function (){
//called after instance has been rendered (it's in the DOM)
},
_somePrivateMethod : function () { /*do someting...*/ },
somePublicMethod : function () { /*do someting...*/ },
renderer : {
render : function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("nsBook");
oRm.writeClasses();
oRm.addStyle("width", oControl.getWidth());
oRm.addStyle("height", oControl.getHeight());
oRm.writeStyles();
oRm.write(">");
//content
oRm.renderControl(oControl.getCoverPicture());
//we don't do any fancy stuff because we are lazy ;-)
//oRm.writeEscaped("<div>escape this</div>");
oRm.write("<div>");
oRm.write("<div>Title : "+oControl.getTitle()+"</div>");
oRm.write("<div>Author : "+oControl.getAuthor()+"</div>");
oRm.write("<div>Description : "+oControl.getDescription()+"</div>");
oRm.write("<div>Price : "+oControl.getPrice().toFixed(2)+" "+oControl.getCurrencyCode() +"</div>");
oRm.write("<div>Comments : <br/>"+oControl.getComments().join("<br/>")+"</div>");
oRm.write("<div>Pages : "+oControl.getNumberOfPages()+"</div>");
oRm.write("<div>Express Delivery : "+oControl.getExpressDelivery()+"</div>");
oRm.write("<div>");
oRm.renderControl(oControl.getAggregation("_buyButton"));
oRm.write("</div>");
oRm.write("</div>");
oRm.write("</div>");
}
}
});
//overwrite setter
nabisoft.bookstore.controls.Book.prototype.setCoverPictureUrl = function (sVal) {
if (sVal) {
this.setProperty("coverPictureUrl", sVal, /*suppressInvalidate*/ true); //do not re-render
this.getCoverPicture().setSrc(sVal);
}
};
nabisoft.bookstore.controls.Book.prototype.exit = function () {
/* release resources that are not released by the SAPUI5 framework */
if (this._oLink){
this._oLink.destroy();
delete this._oLink;
}
};
}());
</script>
<script type="text/javascript">
"use strict";
/* here we implement the application */
var oBook = new nabisoft.bookstore.controls.Book({
title: "My Title",
author: "My Author",
description: "This is a Book about...",
price: 49.90,
currencyCode: "EUR",
comments: ["Great book!", "A must have!", "I liked chapter 6 the most!"],
numberOfPages: 293,
coverPictureUrl: "http://lorempixel.com/150/200/",
expressDelivery: true,
relatedBooks: [],
buy : function(oEvent){
var oBook = oEvent.getSource();
alert("Buy event received: '"+oBook.getTitle() + "' by " + oBook.getAuthor());
}
});
oBook.addEventDelegate({
onAfterRendering: function(){
//called after the instance has been rendered (it's in the DOM)
}
});
oBook.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment