To extend methods for a button

For Shoes - Raisin.

In the course I was doing Michael Kohl asked a question about centering a button without all the width => ... and height => ... business.

some discussion was had but it boiled down to this.

James Silberbauer a participant of the course offered up this bit of code.

Shoes.app :title => 'test', :width => 300  do
  flow(:width => 100)
  @my_flow = flow(:width => -100 ) do
    button('B 1', :width => 50)
    button('B 2', :width => 50)
  end
end

I followed it (and i admit I'm not the greatest but sometimes i get a win and this was one) and enhanced it as below.

class Shoes::Button
  def center
    @left= self.parent.class==Shoes ? (self.app.width-self.width)/2 : (self.parent.width-self.width)/2
    self.move(@left,self.top)
  end
  def centered
   @top = self.parent.class== Shoes ? (self.app.height-self.height)/2 : 
    (self.parent.height-self.height)/2
    self.move(@left,@top)
  end
  def both
   center
   centered
  end
end
 
Shoes.app do
  @ut=flow :left=>10, :top=>100, :height=>200 do  #, :width=>600
    @tt=button "hjhhjh" do
      para "Hola #{@tt.width}, #{@tt.left}"
    end
#    start {@tt.center }
  end
# start {@tt.center } 
         
# start{@tt.centered } 
  start{@tt.both }
 
    
end

Then Krzysztof Wicher popped up and gave us a really good sample.
WARNING!!!!!

Satoshi tested this and it didn't work as expected (namely button being placed to the Right of the window, In the centre, and lastly to the left so you may need to edit this.

class Shoes::Button
 def center
  @width=self.style[:width] ? self.style[:width] : self.style[:text].length*11
  @left= self.parent.class==Shoes ? (self.app.width-@width)/2 : (self.parent.style[:width]-@width)/2
  self.move(@left,self.style[:top])
 end
 def middle
  @top= self.parent.class==Shoes ? (self.app.height-22)/2 : (self.parent.style[:height]-22)/2
  self.move(self.style[:left],@top)
 end
 def centered
  center
  middle
 end
end
 
Shoes.app do
 
@tt=edit_line :top=>430
 
@f1=flow :left=>0, :top=>10, :width=>600, :height=>100 do
background red
para "center - centered horizontally"
  @b1=button "but1", :top=>10, :left=>100, :idth=>70 do
   @tt.text="Hola"
  end
  @b1.center
end
 
@f2=flow :left=>0, :top=>150, :width=>600, :height=>100 do
background blue
para "middle - centered vertically"
 
  @b2=button "but2", :top=>30, :left=>100, :idth=>70 do
   @tt.text="Hi"
  end
  @b2.middle
end
 
@f3=flow :left=>0, :top=>290, :width=>600, :height=>100 do
background green
para "centered - both horizontally and vertically"
 
  @b3=button "but3", :top=>30, :left=>100, :idth=>70 do
   @tt.text="Hey"
  end
  @b3.centered
end
 
end

hope these bits may be of help to someone.

dave.