Skip to Content
Author's profile photo Karol Kalisz

“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.

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Very good one.  Could you share us how did you get the CSS list of a componient? Say how did you know there's a "border-top:" in panel componient?  Many Thanks.

      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      Denny,

      the trick on this painting is the fact that a panel is represented by a HTML DIV component.

      This means for you, you can apply all styles which are possible for a DIV component, and here you can see the generic documentation on CSS Tutorial.

      There you can find eg the settings for backgrounds - CSS Background.

      you can style a DIV by changing background, borders (CSS Border), placing images etc.

      Author's profile photo Former Member
      Former Member

      Hi Karol,

      Good to know. Many thanks!