librelist archives

« back to archive

layout question

layout question

From:
J. Kaiden
Date:
2011-06-22 @ 15:12
hey folks,

  well, back with more questions!  i'm working on a music directory browser
for the player, and i have a question about Shoes layouts.

  here's a simplified version of what i'm doing (or trying to do!):

#####
class DirCell < Shoes::Widget
def initialize(img, txt)
s = stack width: 200 do
i = image(img)
i.style(width: 190, height: 190, align: "center")
para txt, align: "center"
end
s.click{yield(txt)}
end
end

Shoes.app width: 800 do
range = 0..50
range.each{|n|
dir_cell("./TradyBlix.png", "cell #{n}"){|txt| p txt}
}
end
#####

  my understanding is that the Shoes.app main window is a flow itself, so i
expected these dir_cells to be lined up horizontally until the app width was
met, at which point they would start on a new line...  not the case.  they
instead are laid out as if in a stack, with each dir_cell below the
previous.  i've tried putting a 'flow do / end' around the whole Shoes.app
block, but with no change.

  any ideas about what's going on here, and how i might get my desired
layout?

  thanks,

  - j

Re: [shoes] layout question

From:
Cecil Coupe
Date:
2011-06-24 @ 04:21
I ran your example on Linux and it's just what you describe. An explicit
flow does not help just as you describe.

Sadly, IMO, widgets with their own internal layout and Shoes elements
inside don't interact understandably with outer level layouts. I gave up
trying to do what you are attempting when I looked at the widget code.
It doesn't seem to have been fixed since my attempts. 

There maybe some magic combo of explicit height and width every where
that might work but it won't look Shoes like.

On Wed, 2011-06-22 at 17:12 +0200, J. Kaiden wrote:
> hey folks,
> 
> 
>   well, back with more questions!  i'm working on a music directory
> browser for the player, and i have a question about Shoes layouts.
> 
> 
>   here's a simplified version of what i'm doing (or trying to do!):
> 
> 
> #####
> class DirCell < Shoes::Widget
> def initialize(img, txt)
> s = stack width: 200 do
> i = image(img)
> i.style(width: 190, height: 190, align: "center")
> para txt, align: "center"
> end
> s.click{yield(txt)}
> end
> end
> 
> 
> Shoes.app width: 800 do
> range = 0..50
> range.each{|n|
> dir_cell("./TradyBlix.png", "cell #{n}"){|txt| p txt}
> }
> end
> #####
> 
> 
>   my understanding is that the Shoes.app main window is a flow itself,
> so i expected these dir_cells to be lined up horizontally until the
> app width was met, at which point they would start on a new line...
>  not the case.  they instead are laid out as if in a stack, with each
> dir_cell below the previous.  i've tried putting a 'flow do / end'
> around the whole Shoes.app block, but with no change.
> 
> 
>   any ideas about what's going on here, and how i might get my desired
> layout?
> 
> 
>   thanks,
> 
> 
>   - j

Re: [shoes] layout question

From:
J. Kaiden
Date:
2011-06-24 @ 11:09
hi Cecil,

>
> Sadly, IMO, widgets with their own internal layout and Shoes elements
> inside don't interact understandably with outer level layouts.
>
...

> There maybe some magic combo of explicit height and width every where
> that might work but it won't look Shoes like.


 thanks for the feedback - though honestly i was hoping someone could point
out something idiotic that i had missed and easily solved the problem!  oh
well...  i'll keep whacking away at it, and if i come up with anything that
works i'll post back with it.

  thanks again -

 - j

Re: [shoes] layout question

From:
Steve Klabnik
Date:
2011-06-24 @ 11:25
Yeah, I think that this is just an area where Shoes is deficient at the 
moment. :/ 

Re: [shoes] layout question

From:
ashbb
Date:
2011-06-24 @ 11:28
Hi J,

Umm,... I confimed the problem on my Windows7 with Shoes 3 (0.r1514).
I'm not sure this is a bug or not. But obviously a strange behavior.

A workaround is here anyway:

class DirCell < Shoes::Widget
 def initialize(img, txt, f)
   f.append do
     s = stack width: 200 do
       i = image(img)
       i.style(width: 190, height: 190, align: "center")
       para txt, align: "center"
     end
     s.click{yield(txt)}
   end
 end
end

Shoes.app width: 800 do
 f = flow
 range = 0..50
 range.each{|n|
   dir_cell("./TradyBlix.png", "cell #{n}", f){|txt| p txt}
 }
end

ashbb

ps. In Green Shoes, J's original code works as expected. ;-)

Re: [shoes] layout question

From:
J. Kaiden
Date:
2011-06-24 @ 12:36
hey there -

  ashbb, thanks for the workaround - it works (around) well... ;)

  strange behavior to be sure...  maybe the fact that it works in green
shoes could provide some clues as to what's going on here?

  anyway - thanks again, you guys are the best...

  - j

Re: [shoes] layout question

From:
J. Kaiden
Date:
2011-06-24 @ 16:55
could not decode message

Re: [shoes] layout question

From:
J. Kaiden
Date:
2011-06-24 @ 19:25
oops, just noticed that to run the script you'll have to get rid of or
change the shebang - set up for my system!  sorry...