-
New Feature
-
Resolution: Unresolved
-
Normal
-
None
-
10.0.0
-
None
-
None
-
None
User Story
As an application developer, I want a template-based approach way to define a component's mold, so that I can customize a component's DOM structure more easily. For example, add and icon.
Acceptance Criteria
Details
Here is the current window mold, which is hard to read and understand, and hard to customize. We can improve it by javascript Template literals
function (out, skipper) { var uuid = this.uuid, title = this.getTitle(), caption = this.caption, contentStyle = this.getContentStyle(), contentSclass = this.getContentSclass(), tabi = this._tabindex, btnRenderer = zul.wgt.ButtonRenderer; out.push('<div', this.domAttrs_({tabindex: 1}), '>');//tabindex attribute will be set in the child elements if (caption || title) { out.push('<div id="', uuid, '-cap" class="', this.$s('header'), '">'); if (caption) caption.redraw(out); else { out.push(zUtl.encodeXML(title)); out.push('<div id="', uuid, '-icons" class="', this.$s('icons'), '">'); if (this._minimizable) btnRenderer.redrawMinimizeButton(this, out, tabi); if (this._maximizable) btnRenderer.redrawMaximizeButton(this, out, tabi); if (this._closable) btnRenderer.redrawCloseButton(this, out, tabi); out.push('</div>'); } out.push('</div>'); } out.push('<div id="', uuid, '-cave" class="'); if (contentSclass) out.push(contentSclass, ' '); out.push(this.$s('content'), '" '); if (contentStyle) out.push(' style="', contentStyle, '"'); out.push('>'); if (!skipper) for (var w = this.firstChild; w; w = w.nextSibling) if (w != caption) w.redraw(out); out.push('</div></div>'); }