Limelight Notes: Styling

Basic notes I am gathering on Limelight GUI framework. These are just notes that are useful to me for the research I am doing. I am throwing them up on my blog because others may find this useful as well....This is also an experiment in using MacJournal as a new note taking tool.

Prop Layout

You can layout props based on fixed size (e.g. 30 in pixel) or on a relative size ( ’90%’ of parent). If the current prop will run past 100% width then it puts that props on a new row and a y position with is one more than the tallest prop in the preview row. Two examples...

This shows that the orange and green box are laid out at a y of the tallest previous prop (blue):

root :width => 500, :height => 500 do
box :width => '50%', :height => '10%', :background_color => :red
box :width => '50%', :height => '50%', :background_color => :blue
box :width => '50%', :height => '50%', :background_color => :orange
box :width => '50%', :height => '50%', :background_color => :green
end

If we modify this example a little bit:

root :width => 500, :height => 500 do
box :width => '50%', :height => '10%', :background_color => :red
box :width => '51%', :height => '50%', :background_color => :blue
box :width => '50%', :height => '50%', :background_color => :orange
box :width => '50%', :height => '50%', :background_color => :green
end

We can see that the red and blue box are laid out on separate rows now since the width of the blue box would have exceeded 100% if it was put onto the first row. This example shows another important aspect of layout. prop layout is first come first serve. The first two props fully fit the requested width and height, but the second two seem to run off the bottom.

Style Resolution

Style resolution most important to least: inline, prop name, left to right styles attribute values in that order.

Example:

props.rb:

box :width => 100, :height => 100, :styles => "big_box, heh", :background_color => :blue, :border_width => 5, :border_color => :black

styles.rb:

box {
border_color :red
}

big_box {
border_color :orange
}

heh {
border_color :blue
}

With all three, then we notice that the color is black. If I remove the inline element then we see that ‘box’ one. And ‘big_box’ comes in third if we comment out box. ‘heh’ comes in last.

A second aspect to style resolution is that any style which has overlapping behavior ends up wiping out the other style. So for example, if in the example above I add ‘left_border_width 1’, then the inline styling wipes this out with ‘:border_width => 5’. If we swap these two values so that left_border_width is the inline style then we will just see the left border and the border_width value will be wiped out. This is a very simple rule, but perhaps not what is expected in cases because

Styles in Limelight have no inheritance unlike CSS. Setting border_width of 1 on a parent will not cascade that rule to its children. If you really want to share behavior you can use extends:

fill_parent {
width '100%'
height '100%'
}

box {
extends :fill_parent
background_color :orange
}

I find this to be pretty powerful, but I would like to find a way to add methods which allow me to reduce text:

def percent_dims(w, h)
width w.to_s + ‘%’
height h.to_s + ‘%’
end

fill_parent {
percent_dims 100, 100
}

I know there is a way to extend style system, so I need to look into that...