From 4a575ce537625c572355e46e5300ad8ac6d83c00 Mon Sep 17 00:00:00 2001 From: Volker Buzek Date: Fri, 5 Feb 2021 13:54:30 +0100 Subject: [PATCH 1/6] docs: rm unnecessary jquery import --- docs/controllibraries.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/controllibraries.md b/docs/controllibraries.md index c1f744bcf9d1..6d96141f65f5 100644 --- a/docs/controllibraries.md +++ b/docs/controllibraries.md @@ -120,9 +120,9 @@ One example `library.js` file of a small control library, the `sap.ui.suite` lib /** * Initialization Code and shared classes of library sap.ui.suite. */ -sap.ui.define(['jquery.sap.global', - 'sap/ui/core/library'], // library dependency - function(jQuery) { +sap.ui.define([ + 'sap/ui/core/library' +], function() { "use strict"; @@ -191,7 +191,7 @@ sap.ui.define(['jquery.sap.global', return sap.ui.suite; -}, /* bExport= */ false); +}, /* bExport = false */ ); ``` ### Translation file (messagebundle.properties) and translation From 758cc79f19d849732761d4f07ef66fe6afd546fe Mon Sep 17 00:00:00 2001 From: Volker Buzek Date: Fri, 5 Feb 2021 13:57:15 +0100 Subject: [PATCH 2/6] refactor(library.js): es5 -> es6 --- docs/controllibraries.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/controllibraries.md b/docs/controllibraries.md index 6d96141f65f5..e582cf1bf2ff 100644 --- a/docs/controllibraries.md +++ b/docs/controllibraries.md @@ -122,10 +122,7 @@ One example `library.js` file of a small control library, the `sap.ui.suite` lib */ sap.ui.define([ 'sap/ui/core/library' -], function() { - - "use strict"; - +], () => { /** * Suite controls library. * @@ -137,6 +134,7 @@ sap.ui.define([ */ // delegate further initialization of this library to the Core + // note the full api reference notation due to the Core not being "booted" yet! sap.ui.getCore().initLibrary({ name : "sap.ui.suite", version: "${version}", From 48c9c092574ce1d1a00068388c091df39ffbc673 Mon Sep 17 00:00:00 2001 From: Volker Buzek Date: Fri, 5 Feb 2021 14:11:20 +0100 Subject: [PATCH 3/6] refactor(renderer): es5 -> es6 --- docs/controllibraries.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/controllibraries.md b/docs/controllibraries.md index e582cf1bf2ff..d3f3c32fe777 100644 --- a/docs/controllibraries.md +++ b/docs/controllibraries.md @@ -431,61 +431,61 @@ The code within the `render()` method is the same as in "notepad controls". * ${copyright} */ -sap.ui.define(['jquery.sap.global'], - function(jQuery) { - "use strict"; - +sap.ui.define([ +], + () => { /** * @class NavContainer renderer. * @static */ - var NavContainerRenderer = { + const NavContainerRenderer = { + apiVersion: 2 }; /** * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}. * - * @param {sap.ui.core.RenderManager} rm the RenderManager that can be used for writing to the Render-Output-Buffer + * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the Render-Output-Buffer * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered */ - NavContainerRenderer.render = function(rm, oControl) { + NavContainerRenderer.render = (oRm, oControl) => { // return immediately if control is invisible, do not render any HTML if (!oControl.getVisible()) { return; } - rm.write(""); // div element + oRm.openEnd(); // div element if (this.renderBeforeContent) { - this.renderBeforeContent(rm, oControl); // hook method; may be used by inheriting renderers + this.renderBeforeContent(oRm, oControl); // hook method; may be used by inheriting renderers } var oContent = oControl.getCurrentPage(); if (oContent) { - rm.renderControl(oContent); + oRm.renderControl(oContent); } - rm.write(""); + oRm.close("div"); }; From e94b49637c90b3d7ae137a72826b6288ea835957 Mon Sep 17 00:00:00 2001 From: Volker Buzek Date: Fri, 5 Feb 2021 14:25:51 +0100 Subject: [PATCH 4/6] refactor: further -> es6 --- docs/controllibraries.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/controllibraries.md b/docs/controllibraries.md index d3f3c32fe777..1ab3883a8d6c 100644 --- a/docs/controllibraries.md +++ b/docs/controllibraries.md @@ -470,7 +470,7 @@ sap.ui.define([ oRm.writeClasses(); oRm.writeStyles(); - var sTooltip = oControl.getTooltip_AsString(); + const sTooltip = oControl.getTooltip_AsString(); if (sTooltip) { oRm.writeAttributeEscaped("title", sTooltip); } @@ -480,7 +480,7 @@ sap.ui.define([ this.renderBeforeContent(oRm, oControl); // hook method; may be used by inheriting renderers } - var oContent = oControl.getCurrentPage(); + const oContent = oControl.getCurrentPage(); if (oContent) { oRm.renderControl(oContent); } @@ -501,20 +501,22 @@ Note that the `.extend(...)` method used here is different from the normal UI5 i Documentation omitted to keep this example short: ```js // Provides default renderer for control sap.ui.commons.ToggleButton -sap.ui.define(['jquery.sap.global', './ButtonRenderer', 'sap/ui/core/Renderer'], - function(jQuery, ButtonRenderer, Renderer) { - "use strict"; +sap.ui.define([ + './ButtonRenderer', + 'sap/ui/core/Renderer' +], +(ButtonRenderer, Renderer) => { - var ToggleButtonRenderer = Renderer.extend(ButtonRenderer); + const ToggleButtonRenderer = Renderer.extend(ButtonRenderer); - ToggleButtonRenderer.renderButtonAttributes = function(rm, oToggleButton) { - var bPressed = oToggleButton.getPressed(); + ToggleButtonRenderer.renderButtonAttributes = function(oRm, oToggleButton) { + const bPressed = oToggleButton.getPressed(); if (bPressed) { - rm.addClass("sapMToggleBtnPressed"); + oRm.addClass("sapMToggleBtnPressed"); } - rm.writeAttribute('pressed', bPressed); + oRm.writeAttribute('pressed', bPressed); }; return ToggleButtonRenderer; From 51672f4863cc7e8037cea00973ea60ac3a1f2bb1 Mon Sep 17 00:00:00 2001 From: Volker Buzek Date: Fri, 5 Feb 2021 17:06:32 +0100 Subject: [PATCH 5/6] refactor: v2 render methods addClass -> class addStyle -> style --- docs/controllibraries.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/controllibraries.md b/docs/controllibraries.md index 1ab3883a8d6c..2c525c7850cc 100644 --- a/docs/controllibraries.md +++ b/docs/controllibraries.md @@ -459,12 +459,12 @@ sap.ui.define([ oRm.openStart("div"); oRm.writeControlData(oControl); - oRm.addClass("sapMNav"); - oRm.addStyle("width", oControl.getWidth()); - oRm.addStyle("height", oControl.getHeight()); + oRm.class("sapMNav"); + oRm.style("width", oControl.getWidth()); + oRm.style("height", oControl.getHeight()); if (this.renderAttributes) { - this.renderAttributes(oRm, oControl); // may be used by inheriting renderers, but DO NOT write class or style attributes! Instead, call addClass/addStyle. + this.renderAttributes(oRm, oControl); // may be used by inheriting renderers, but DO NOT write class or style attributes! Instead, call class/style. } oRm.writeClasses(); From 369835bc43369514ed098916319c32b894edb9ba Mon Sep 17 00:00:00 2001 From: Volker Buzek Date: Sun, 7 Feb 2021 15:14:15 +0100 Subject: [PATCH 6/6] refactor: es5, api v2 - moved modified code back to ES5 - double-checked usage of api v2 methods for renderer-scope code --- docs/controllibraries.md | 42 ++++++++++++++++------------------------ 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/docs/controllibraries.md b/docs/controllibraries.md index 2c525c7850cc..3c8d4b19488a 100644 --- a/docs/controllibraries.md +++ b/docs/controllibraries.md @@ -122,7 +122,7 @@ One example `library.js` file of a small control library, the `sap.ui.suite` lib */ sap.ui.define([ 'sap/ui/core/library' -], () => { +], function () { /** * Suite controls library. * @@ -189,7 +189,7 @@ sap.ui.define([ return sap.ui.suite; -}, /* bExport = false */ ); +}); ``` ### Translation file (messagebundle.properties) and translation @@ -275,9 +275,8 @@ sap.ui.define([dependency1Name, dependency2Name,...], function(dependency1, depe One example control implementation using this syntax (but not containing any documentation or further functionality): ```js -sap.ui.define(['jquery.sap.global', './ListItemBase', './library'], - function(jQuery, ListItemBase, library) { - "use strict"; +sap.ui.define(['./ListItemBase', './library'], + function(ListItemBase, library) { var MyListItem = ListItemBase.extend("sap.m.MyListItem", /** @lends sap.m.MyListItem.prototype */ { metadata : { library : "sap.m", @@ -289,12 +288,7 @@ sap.ui.define(['jquery.sap.global', './ListItemBase', './library'], }, /* bExport= */ true); ``` -You see the two standard dependencies: - -- ```jquery.sap.global``` providing jQuery itself, enriched with additional UI5 plugins -- ```./library``` providing the library definition in the `library.js` file - -as well as another very common dependency, the base class: +You see the standard dependency ```./library``` providing the library definition in the `library.js` file as well as another very common dependency, the base class: - ```./ListItemBase``` the base class of this specific ListItem type @@ -432,14 +426,13 @@ The code within the `render()` method is the same as in "notepad controls". */ sap.ui.define([ -], - () => { +], function () { /** - * @class NavContainer renderer. + * @class NavContainer renderer, using the faster new api version * @static */ - const NavContainerRenderer = { + var NavContainerRenderer = { apiVersion: 2 }; @@ -450,7 +443,7 @@ sap.ui.define([ * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the Render-Output-Buffer * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered */ - NavContainerRenderer.render = (oRm, oControl) => { + NavContainerRenderer.render = function (oRm, oControl) { // return immediately if control is invisible, do not render any HTML if (!oControl.getVisible()) { return; @@ -470,7 +463,7 @@ sap.ui.define([ oRm.writeClasses(); oRm.writeStyles(); - const sTooltip = oControl.getTooltip_AsString(); + var sTooltip = oControl.getTooltip_AsString(); if (sTooltip) { oRm.writeAttributeEscaped("title", sTooltip); } @@ -480,7 +473,7 @@ sap.ui.define([ this.renderBeforeContent(oRm, oControl); // hook method; may be used by inheriting renderers } - const oContent = oControl.getCurrentPage(); + var oContent = oControl.getCurrentPage(); if (oContent) { oRm.renderControl(oContent); } @@ -504,19 +497,18 @@ Documentation omitted to keep this example short: sap.ui.define([ './ButtonRenderer', 'sap/ui/core/Renderer' -], -(ButtonRenderer, Renderer) => { +], function (ButtonRenderer, Renderer) { - const ToggleButtonRenderer = Renderer.extend(ButtonRenderer); + var ToggleButtonRenderer = Renderer.extend(ButtonRenderer); - ToggleButtonRenderer.renderButtonAttributes = function(oRm, oToggleButton) { - const bPressed = oToggleButton.getPressed(); + ToggleButtonRenderer.renderButtonAttributes = function (oRm, oToggleButton) { + var bPressed = oToggleButton.getPressed(); if (bPressed) { - oRm.addClass("sapMToggleBtnPressed"); + oRm.class("sapMToggleBtnPressed"); } - oRm.writeAttribute('pressed', bPressed); + oRm.attr('pressed', bPressed); }; return ToggleButtonRenderer;