Purpose
tips how to paint with design studio:
* a line
* a square
* a round
Preparation
You need empty application with a panel of your wished size - the size is important as you need later to position the components via coordinates. I call the panel PANEL_CONTENT.
Decide if you want to paint from top-left or bottom left. Dependent on this decition, you have to use:
- setTopMargin() and set LeftMargin()
or
- setBottomMargin() and set LeftMargin()
for positions of all components.
Painting a Line
Position a new Panel in PANEL_CONTENT at your coordinates. Assign the CSS class (which you have to define in your css file) which fulfills the purpose: eg. content-line.
css
.content-line { border-top: 1px solid #cccccc;
}
Painting a Square
Position a new Panel in PANEL_CONTENT at your coordinates. Assign the CSS class (which you have to define in your css file) which fulfills the purpose: eg. content-square.
css
.content-square { border-top: 3px solid black; background-color: red;
}
Painting a Round / Circle
Position a new Panel in PANEL_CONTENT at your coordinates. Assign the CSS class (which you have to define in your css file) which fulfills the purpose: eg. content-red-80.
css
.content-red-80 { width: 80px; height: 80px; border-radius: 40px 40px 40px 40px; border: 1px solid #cccccc; background-color: red;
}Example
By such tricks you can paint whatever you want, eg...
Manual Data Binding
of course, you can read any data value from DataSource with the function getData() and move the elements by changing the top/bottom and left margins. Buttons in the referenced application are showing how.
PANEL_SQUARE.setBottomMargin(PANEL_SQUARE.getBottomMargin()+ 60);
Apllication as Example
Download your application from GitHub:
- ZIP Version of Repository: Release Add of Paint and Thermometer Applications · KarolKalisz/DesignStudioBiAppRepository · GitHub
- Source Code: DesignStudioBiAppRepository/SCN_PAINT at master · KarolKalisz/DesignStudioBiAppRepository · GitHub
I hope you have fun with this content.