Skip to content

Instantly share code, notes, and snippets.

@ricma

ricma/example.js Secret

Last active January 4, 2016 02:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Question about setting CSS classes to custom SAPUI5 controls. Also see this discussion: http://scn.sap.com/thread/3488261
/**
* An example according to
* https://sapui5.hana.ondemand.com/sdk/docs/guide/
* OnTheFlyControlDefinition.html#TheRendererMethodObject
*/
jQuery.sap.declare("my.ExtendedTextField");
jQuery.sap.require("sap.ui.commons.TextField");
// --------------------------------------------------------------------
sap.ui.commons.TextField.extend("my.ExtendedTextField", {
metadata: {
properties: {
tagName: {type: "string", defaultValue: ""},
someClassName: {type: "string"}
},
},
renderer: function(oRm, oControl) {
// ------------------------------------------------------------
// add the div element used for a single day
var sTagName = oControl.getTagName();
var bUseAdditionalDomElement = !!sTagName && sTagName != "";
if (bUseAdditionalDomElement) {
oRm.write("<" + sTagName);
}
// append css classes
var sItem = oControl.getSomeClassName();
if (!!sItem) {
// FIXME: We should escape spaces here ... but we skip it
// for the sake of the example
oControl.addStyleClass("my-class-" + sItem);
}
// force writing of the style classes -- the render function
// below does not seem to do this for us!
// Note: The `oRm.writeControlData(oControl)` call is done --
// we must not call this here as this leads to the id being
// present multiple times!
// The other StyleClasses added above are *not* set by the
// TextFieldRenderer.
if (bUseAdditionalDomElement) {
// Iterate over all classes manually and add them using
// the RenderManager
// FIXME: This uses internal properties and not parts of
// the public API
jQuery.each(
oControl.aCustomStyleClasses || [],
function(iIdx, sClass) {
oRm.addClass(sClass);
});
oRm.writeClasses();
oRm.writeStyles();
oRm.write(">");
}
// ------------------------------------------------------------
// call the renderer of the base class
// QUESTION: There are style classes attached to the control
// (see above). Why aren't they put into the rendered control
// here?
// Note: There is a remark about the class not being visible
// here:
// https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/
// ThemingFAQ.html#IamaddingastyleclassbutitdoesnotworkWhy
// The classes are put in, however, if some style is set to the
// final control while defining the view!
sap.ui.commons.TextFieldRenderer.render(oRm, oControl);
// ------------------------------------------------------------
// finish the HTML section
if (bUseAdditionalDomElement) {
oRm.write("</" + sTagName + ">");
}
},
init: function() {
// call the base-class init
// (Not so important for TextField but for sap.me.Calendar,
// for example)
sap.ui.commons.TextField.prototype.init.call(this, arguments);
// Note: this makes the addStyleClass above work!
// QUESTION: If this is commented out, then also the css class for
// setting the background is not set!
this.addStyleClass("some-meaningless-string");
}
});
// --------------------------------------------------------------------
// use the above in an example
oMyText = new my.ExtendedTextField({
value: "no extra DOM element",
someClassName: "FunkyClass"})
oMyText.placeAt("content");
oMyText2 = new my.ExtendedTextField({
value: "extra div element",
tagName: "div",
someClassName: "FunkyClass"});
oMyText2.placeAt("content");
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Custom controls</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
<!-- add some css styles for highlighting -->
<style type="text/css">
.some-meaningless-string.sapUiTfStd {
color: #FF7CC0;
}
.my-class-FunkyClass .sapUiTfStd,
.my-class-FunkyClass.sapUiTfStd {
/* FIXME: This color is taken from the CSS rule for */
/* `.sapUiTableRowHdr.sapUiTableRowSel` in theme `bluecrystal`. */
/* Unfortunately there is no way to reference that color in a */
/* theme-independent way like saying 'always use the color you */
/* would use in `.sapUiTableRowHdr.sapUiTableRowSel`'. */
background: #007CC0;
}
</style>
<script type="text/javascript" src="example.js">
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment