This is my first SDK component made (also my very first blog too), inspired fromDesign Studio 1.2 SDK - Creating a custom line component by David Richardson. It's a very basic component, without any data binding.
At first, I tried to make the code easier to read, but I end up almost recreating it from the scratch.
First up, the line property
Property Name | Type | Value/Description |
---|---|---|
lineColor | color | Determines the color of the line. Can accept color name or in HTML RGB (#000000). |
lineSize | int | Determines the thickness of the line. Size of the arrow is fixed at 3 * lineSize. |
lineType | String | Determines the type of the line (total of 14 type). Can accept input (1 - 14) only. |
arrowPos | String | Determines the position of the arrow. Can accept input (None, Start, End, Both) only. |
Below is the example of the possible line types:
Line Type | Example (Arrow: None, Start, End, Both) |
---|---|
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 |
Lastly, the methods within contribution.ztl
class org.scn.community.basics.line.Line extends Component { /* Returns the current color of the line. */ String getLineColor() {* return this.lineColor; *} /* Sets the current color of the line. */ void setLineColor(/* New Line Color */ String newLineColor) {* this.lineColor = newLineColor; *} /* Returns the current type of the line. */ String getLineType() {* return this.lineType; *} /* Sets the current type of the line. */ void setLineType(/* New Line Type */ String newLineType) {* this.lineType = newLineType; *} /* Returns the current size of the line. */ String getLineSize() {* return this.lineSize; *} /* Sets the current size of the line. */ void setLineSize(/* New Line Size */ int newLineSize) {* this.lineSize = newLineSize; *} /* Returns the current arrow position of the line. */ String getArrowPos() {* return this.arrowPos; *} /* Sets the current arrow position of the line. */ void setArrowPos(/* New Arrow Position */ String newArrowPos) {* this.arrowPos = newArrowPos; *} }
I thought of making diagonal lines, but it would be kinda hard to do since I need to make sure that the line and the arrows wouldn't get out from the canvas, which will make it not drawn properly. Maybe I will work on it on the future.
You can get the component from here. Please bear with it since I'm not familiar with Github at the moment.
Any feedback is appreciated.