Question about setting CSS classes to custom SAPUI5 controls. Also see this discussion: http://scn.sap.com/thread/3488261
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
| /** | |
| * 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"); |
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> | |
| <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