Tuesday, March 16, 2010

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

PastedGraphic.aNLScNOn2gLf.jpg

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

PastedGraphic1.8s6Ex8ksxKiv.jpg

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

10 comments:

  1. Thanks Tom for posting this. Your notes look to be accurate. I think these type of simple examples are really helpful for newcomers to Limelight.

    ReplyDelete
  2. Hi,
    I have Ruby on rails app with me.Now I want to integrate my app with JRuby in order to get the asynchronous feature.How do I proceed?
    Any help would be greatly appreciated,thank you very much.

    ReplyDelete
  3. Thank you for showing us how we can style our limelight notes. Honestly, I was really in such a need to understand that as I am a writer for dissertation writing UK based and there are much important stuff that I have to note down and by knowing such way of styling I can set priorities on them as well. I just can’t wait now to try this.

    ReplyDelete
  4. I think you want css expert for more creative and stylish designing. visit my page for more ideas : www.exporthub.com/auto-transportation

    ReplyDelete
  5. Thank you so much for ding the impressive job here, everyone will surely like your post. 바카라사이트

    ReplyDelete
  6. I have never seen this type of information before. Thanks for sharing this. Please also visit 카지노사이트

    ReplyDelete
  7. 스포츠토토 Iwas more than happy to find this site. I want
    to to thank you ffor your time for this particularly
    wonderful read!! I definitely savored every little bit of it and i also have yyou saved
    aas a favorite to check out new stuff in your website.

    ReplyDelete
  8. 토토 It's awesome designed for me to have a web site, which is helpful designed for my knowledge. thanks admin

    ReplyDelete

  9. You're so interesting! I don't suppose I've read anything like this before.
    So great to find someone with a few unique thoughts on this issue.
    Seriously.. many thanks for starting this up. This site is something that is needed on
    the internet, someone with some originality! 청마담

    ReplyDelete
  10. Great post I would like to thank you for the effort you put into writing this interesting and informative article, no matter what is the purpose of your trip to Turkey, you need to pay the visa cost Turkey before submitting the visa application .Depending on your desired option, the e Visa Turkey cost are calculated.

    ReplyDelete