Skip to Content

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.

To report this post you need to login first.

3 Comments

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

  1. Denny Cai

    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.

    (0) 
    1. Karol Kalisz 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.

      (0) 

Leave a Reply