The Green Shoes Manual 1.1.357

Common Methods

すべてのメソッドの中でもっとも一般的なメソッドの一つはstyleです。 （これはスロットのstyleメソッドとしてもカバーされます。）

 Shoes.app do
   stack do
     # Background, text and a button: 
     # both are elements!
     @back  = background green
     @text  = banner "A Message for You, Rudy"
     @press = button "Stop your messin about!"
     # And so, both can be styled.
     @text.style size: 12, 
       markup: fg(@text.text, red), margin: 10
     @press.style width: 400
     @back.style height: 10
   end
 end

個別のコマンドについては、左にあるElementsセクションの他のリンクを見てください。 ビデオファイルの中断または再生がしたいなら、ビデオの中断や再生は特異なので、 Videoセクションを確認してください。中断するボタンという感じではありません。

要素を移動して置き換えます。しかし周囲のレイアウトは変更しません。 特にアニメーションしている間でも要素の位置を保持したいなら、これは微妙なアニメーションに 重要です。おそらく素早く震えるボタンや視界にスロットを滑り込ませるような。

要素を置き換えるとき、それが配置されている左上の角から相対的に移動します。 そのため、要素が(20, 40)の座標にあり、2ピクセル左と6ピクセル上に置き換えるなら、 結果的に(22, 46)の座標となります。

 # Not yet available
 Shoes.app do
   flow :margin => 12 do
     # Set up three buttons
     button "One"
     @two = button "Two"
     button "Three"
     # Bounce the second button
     animate do |i|
       @two.displace(0, (Math.sin(i) * 6).to_i)
     end
   end
 end

他の２つのボタンは動かずにじっとしていますが、２番目のボタンが飛び跳ねることに 注目してください。この状況で普通のmoveを使うなら、２番目のボタンはレイアウトから 取り除かれて、２番目のボタンが全くそこにないかのように振る舞うでしょう。 （moveの例を見てください。）

特に注意してください：表示される要素の座標を得るためにleftとtopメソッドを 利用するなら、通常の座標を得るだけです。それは置き換えが行われていないかのようです。 置き換えは即座のアニメーションだけを目的とします。

注意: Green Shoesはdisplaceメソッドをサポートしていません。

エレメントの垂直のピクセルによるスクリーンサイズです。画像の場合には、これは画像全体の サイズではありません。これは要素の現在表示されている高さです。

150x150ピクセルの画像を持っていて50ピクセルに幅を設定するなら、このメソッドは50を 返します。

例や他の解説のためにwidthメソッドも見てください。

要素が見えないように、非表示にします。showやtoggleも 見てください。

要素の左端の位置をピクセルで得ます。

スロットの範囲内でピクセルによって指定した位置に要素を移動します。 その要素はスロットの内部にあります。しかし、もはやスロットの他の要素と一緒に 積み上げられたりフローされたりしません。その要素は絶対的な位置指定ではなく、 自由に浮かんでいます。

 Shoes.app do
   # Set up three buttons
   b = button "One"
   @two = button "Two"
   button "Three"
   # Bounce the second button
   animate do |i|
     @two.move(33, 33 + (Math.sin(i) * 6).to_i)
   end
 end

３番目のボタンがその位置にスライドすることを許しており、２番目のボタンは特定の場所に 動かされてします。要素を別の場所に変更しないで移動したいなら、 displaceメソッドを見てください。

その要素のコンテナのオブジェクトを得ます。反対のことを行うためにはスロットの contentsも見てください：コンテナの要素を得ます。

スロットから要素を削除します。（他の言葉で言い換えると：ガベージに投げます。） その要素はもう表示されません。

要素が非表示なら、表示します。hideやtoggleも見てください。

ハッシュの形で、要素に適用するフルセットのスタイルを得ます。widthやheightや topのようなメソッドは特定のピクセルでのサイズを返しますが、style[:width]または style[:top]を利用すると、初めの設定を得ることができます。 （"100%"の幅または"10px"のトップのような）

 Shoes.app do
   # A button which take up the whole page
   @b = button "All of it", 
     width: width, height: height
   # When clicked, show the styles
   @b.click { alert(@b.style.inspect) }
 end

要素のスタイルを変更します。これは要素の:widthと:height、テキストのフォントの :size、形状の:strokeや:fillを含みます。または他の多くのスタイルの設定もです。

要素が表示されているなら非表示にします。または要素が非表示なら表示します。

要素の上端のピクセルの位置を得ます。

要素の全体の大きさの幅をピクセルで得ます。 このメソッドはいつも正確なピクセルサイズを返します。 画像の場合は、画像の全幅ではなく、表示されているサイズだけです。 詳しくはheightメソッドも見てください。

また、120ピクセルの幅のスタック内に1.0の幅の要素を作成したなら、120が返されます。 style[:width]を呼んだなら、120を得ます。

 Shoes.app do
   stack width: 120 do
     @b = button "Click me", width: 1.0 do
       alert "button.width = #{@b.width}\n" +
         "button.style[:width] = " +
         "#{@b.style[:width]}"
     end
   end
 end

幅を設定するためには、styleメソッドをもう一度調べる必要があります。 そして、150ピクセルの幅にボタンを設定するには：@b.style(width: 150)。

Next: Background