Here I cust collect for you building blocks for SDK components, which can be used "copy&paste" with "search&replace" afterwords.
There are always 3 parts:
- contribution.xml
- contribution.ztl
- component.js (or a JS file as you name it)
This blog is just a start. I will try to extend this as soon I have more.
Create New SAPUI5 Component (in this example, we start with Absolute Layout)
- contribution.xml
<component
id="%YourComponentId%"
title="%Your Component Id Title%"
icon="res/%your subfolder%/%YourComponentId%.png"
handlerType="sapui5"
group="%YourComponentGroupId%">
<jsInclude>res/%your subfolder%/%YourComponentId%.js</jsInclude>
<cssInclude>res/%your subfolder%/%YourComponentId%.css</cssInclude>
... here will be more content - delete for now this line ...
</component>
- contribution.ztl
Important: your component is located in some package, you have to sync the package on all places!
here: %your.sdk.package% == org.kalisz.karol.scn.pack
/**
* Class for MenuButton
*/
class %your.sdk.package%.%YourComponentId% extends Component {
... here will be more content - delete for now this line ...
}
- component.js (or a JS file as you name it - eg %YourComponentId%.js)
sap.ui.commons.layout.AbsoluteLayout.extend("%your.sdk.package%.%YourComponentId%", {
/** here we will insert all parameters later */
metadata: {
properties: {
... here properties extensions - delete for now ...
}
},
/** this method is used later for init*/
initDesignStudio: function() {
},
renderer: {},
/** this method is requried for content update */
afterDesignStudioUpdate : function() {
},
});
Add Simple Property (Sting, Boolean)
- contribution.xml
- what is important here?
- I have used the prefix "d" to avoid collisions with any property of SAPUI5 component "AbsoluteLayout"
- but this is not requried if you knwo that SAPUI5 does not have this property
- what is important here?
instead of this line:
... here will be more content - delete for now this line ...
insert...
<property
id="dText"
type="String"
title="Text Value"
tooltip="Button text displayed at runtime"
group="Display"
visible="true"/>
<property
id="dEnabled"
title="Enabled"
tooltip="Switches enabled state of the control"
type="boolean"
group="Display"
visible="true"/>
- contribution.ztl
- what is important here?
- the variable names must be same as in the contribution.xml
- what is important here?
instead of this line:
... here will be more content - delete for now this line ...
insert...
/** some documentation */
String getText () {*
return this.dText;
*}
/** some documentation */
void setText (String value) {*
this.dText= value;
*}
/** some documentation */
String getEnabled () {*
return this.dEnabled;
*}
/** some documentation */
void setEnabled (boolean value) {*
this.dEnabled= value;
*}
- component.js (or a JS file as you name it - eg %YourComponentId%.js)
sap.ui.commons.layout.AbsoluteLayout.extend("%your.sdk.package%.%YourComponentId%", {
/** here we will insert all parameters later */
metadata: {
properties: {
"dText": {type: "string"},
"dEnabled": {type: "boolean"},
}
},
/** this method is used later for init*/
initDesignStudio: function() {
},
renderer: {},
/** this method is requried for content update */
afterDesignStudioUpdate : function() {
// access the properties
var oText = this.getDText();
var oEnabled = this.getDEnabled();
},
});
Add Array Property
- contribution.xml
<property
id="dElementsContent"
type="String"
title="Property For Elements"
group="Display"
visible="false"/>
- contribution.ztl
- what is important here?
- the variable is "dElementsContent"
- always this variable must be set, independent what you do in the script
- what is important here?
/** remove all elements */
void removeAllElements () {*
var elementsArray = [];
this.dElementsContent= JSON.stringify(elementsArray);
*}
void addElement (
/**Element Key (must be unique)*/ String elementKey,
/**Element Text*/ String elementText,
/**Some Optional Boolean*/ optional boolean isActive) {*
// default
if(isActive== undefined) {
isActive= true;
}
var itemDef = {
"key": elementKey,
"text": elementText,
"active": isActive
};
if (this.elementsContent === undefined || this.elementsContent === "" || this.elementsContent === "<delete>"){
this.elementsContent = "[]";
}
var elementsJson = JSON.parse(this.dElementsContent);
var alreadyFound = false;
for (var i = 0; i < elementsJson.length ; i++){
if (elementsJson[i].key == elementKey) {
alreadyFound = true;
break;
}
}
if(!alreadyFound) {
elementsJson.push(itemDef);
}
this.dElementsContent= JSON.stringify(elementsJson);
*}
- component.js (or a JS file as you name it - eg %YourComponentId%.js)
- what is important here?
- dElementsContent is the name, SAPUI5 will automatically generate set and get methods: getDElementsContent() and setDElementsContent(value)
- the way how to read this property is a standard jeson parse algorithm
- what is important here?
metadata: {
properties: {
"dElementsContent": {type: "string"},
}
},
/** this method is requried for content update */
afterDesignStudioUpdate : function() {
var lElementsToRender = this.getDElementsContent();
if(lElementsToRender != null && lElementsToRender != undefined && lElementsToRender != ""){
var lElementsToRenderArray = JSON.parse(lElementsToRender);
// distribute content
for (var i = 0; i < lElementsToRenderArray.length; i++) {
var element = lElementsToRenderArray[i];
var lNewElement = this._createElement(i, element.key, element.text, element.active);
}
}
},
Special Area: Initialization / Default Values
- contribution.xml
- what is important here?
- you should initialize all layout properties
- you should also set defaults for your own properties
- what is important here?
at the place of this line.
... here will be more content - delete for now this line ...
<initialization>
<defaultValue property="WIDTH">400</defaultValue>
<defaultValue property="HEIGHT">40</defaultValue>
<defaultValue property="TOP_MARGIN">0</defaultValue>
<defaultValue property="LEFT_MARGIN">0</defaultValue>
<defaultValue property="RIGHT_MARGIN">auto</defaultValue>
<defaultValue property="BOTTOM_MARGIN">auto</defaultValue>
<defaultValue property="dEnabled">true</defaultValue>
<defaultValue property="dText">Some Text</defaultValue>
</initialization>
The examples above are quite basic, you can see such examples in my components. Of course, there are many ways to acieve the same.
With this you can simply prepare your own SDK component and this will be rendered as empty Absolute Layout...
If someone wants to try out and you get any troubles, please comment - I will fix and update
If you have another snippet which can be used, just post it.
- SAP Managed Tags:
1 Comment
