I always create a js file with my own ui elements which I use in my app.
These elements are always based on the innovaphone.ui1.* elements, which you all find inside your local sdk/web1 folder.
Here is a simple example for a button "class", which uses already existing elements and methods.
The innovaphone.ui1.nodePrototype which you see at the bottom is important to integrate into the "framework" of the ui1 elements:
manufacturer.SampleApp.Button = manufacturer.SampleApp.Button || function (style, translationId, onClick, cancelButton, svgSymbolCode) {
var that = this;
this.createNode("button", "text-align:center; padding:5px 20px 5px 20px; display:flex; overflow:hidden; align-items:center; " + style, null, "button");
this.container.setAttribute("type", "submit");
this.setNoSelect();
this.container.disabled = true;
if (cancelButton) {
this.addClass("button-cancel");
noSubmit();
}
if (svgSymbolCode) {
this.add(new innovaphone.ui1.SvgInline("flex:0 0 auto; width:15px; height:15px; margin-right:10px", "0 0 20 20", svgSymbolCode));
}
var text = this.add(new innovaphone.ui1.Div("flex:1 1 auto")).addTranslation(innovaphone.MyPortal.texts, translationId);
function enable() {
if (that.container.disabled) {
that.addEvent("click", that.onClick);
that.remClass("button-disabled");
that.container.disabled = false;
that.setStyle("cursor", "pointer");
}
}
function disable() {
if (!that.container.disabled) {
that.remEvent("click", that.onClick);
that.addClass("button-disabled");
that.container.disabled = true;
that.setStyle("cursor", "default");
}
}
function noSubmit() {
that.container.setAttribute("type", "button");
}
function setTranslation(translationId) {
innovaphone.MyPortal.texts.clear(text);
text.addTranslation(innovaphone.MyPortal.texts, translationId);
}
function setOnClick(fncOnClick) {
if (!that.container.disabled) {
that.remEvent("click", that.onClick);
that.addEvent("click", fncOnClick);
}
that.XonClick= fncOnClick;
}
this.enable = enable;
this.disable = disable;
this.noSubmit = noSubmit;
this.XonClick= onClick;
this.setTranslation = setTranslation;
this.setOnClick = setOnClick;
enable();
};
manufacturer.SampleApp.Button.prototype = innovaphone.ui1.nodePrototype;
Greetings,
Daniel
Edit: sorry, the Forum removes the indentations inside the code
ui-controls.png
