Skip to Content

“Painting” with Design Studio via CSS3

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…

/wp-content/uploads/2014/09/paint_536113.png

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:

I hope you have fun with this content.

3 Comments
You must be Logged on to comment or reply to a post.