Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: refactor library code templates #3147

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

docs: refactor library code templates #3147

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a575ce
docs: rm unnecessary jquery import
vobu Feb 5, 2021
758cc79
refactor(library.js): es5 -> es6
vobu Feb 5, 2021
48c9c09
refactor(renderer): es5 -> es6
vobu Feb 5, 2021
e94b496
refactor: further -> es6
vobu Feb 5, 2021
51672f4
refactor: v2 render methods
vobu Feb 5, 2021
369835b
refactor: es5, api v2
vobu Feb 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions docs/controllibraries.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,12 +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) {

"use strict";

sap.ui.define([
'sap/ui/core/library'
], () => {
/**
* Suite controls library.
*
Expand All @@ -137,6 +134,7 @@ sap.ui.define(['jquery.sap.global',
*/

// 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}",
Expand Down Expand Up @@ -191,7 +189,7 @@ sap.ui.define(['jquery.sap.global',

return sap.ui.suite;

}, /* bExport= */ false);
}, /* bExport = false */ );
flovogt marked this conversation as resolved.
Show resolved Hide resolved
```

### Translation file (messagebundle.properties) and translation
Expand Down Expand Up @@ -433,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([
],
() => {
flovogt marked this conversation as resolved.
Show resolved Hide resolved

/**
* @class NavContainer renderer.
* @static
*/
var NavContainerRenderer = {
const NavContainerRenderer = {
flovogt marked this conversation as resolved.
Show resolved Hide resolved
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");
rm.writeControlData(oControl);
oRm.openStart("div");
oRm.writeControlData(oControl);

rm.addClass("sapMNav");
rm.addStyle("width", oControl.getWidth());
rm.addStyle("height", oControl.getHeight());
oRm.class("sapMNav");
oRm.style("width", oControl.getWidth());
oRm.style("height", oControl.getHeight());

if (this.renderAttributes) {
this.renderAttributes(rm, 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.
}

rm.writeClasses();
rm.writeStyles();
oRm.writeClasses();
oRm.writeStyles();

var sTooltip = oControl.getTooltip_AsString();
const sTooltip = oControl.getTooltip_AsString();
if (sTooltip) {
rm.writeAttributeEscaped("title", sTooltip);
oRm.writeAttributeEscaped("title", sTooltip);
}
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();
const oContent = oControl.getCurrentPage();
if (oContent) {
rm.renderControl(oContent);
oRm.renderControl(oContent);
}

rm.write("</div>");
oRm.close("div");
};


Expand All @@ -503,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;
Expand Down