-
-
Save harun/9db290c4e8f95beab24302d96cbab831 to your computer and use it in GitHub Desktop.
Creating Custom Controls in SAPUI5 Demo // source http://jsbin.com/kojisi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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