The Green Shoes Manual 1.1.357

Radio

ラジオボタン(Radio button)はクリック可能な円のグループです。 それをマークするには円をクリックしてください。ラジオボタンは1度に1つだけマークできます。 (1度に1つのオプションだけしか選択できないところは、リストボックスに似ています。)

それでは、リストボックスを利用すべきときと、ラジオボタンを利用すべきときをどのようにして 決定しますか?そうですね、リストボックスはボックスをクリックしてドロップダウンを表示すること なく1つのハイライトされたアイテムを表示します。 しかし、ラジオボタンはどれがマークされているか気にすることなく、すべて表示されます。

 Shoes.app do
   para "Among these films, which do you prefer?\n"
   radio
   para strong("The Taste of Tea"), 
     " by Katsuhito Ishii\n", width: 570
   radio
   para strong("Kin-Dza-Dza"), 
     " by Georgi Danelia\n", width: 570
   radio
   para strong("Children of Heaven"), 
     " by Majid Majidi\n", width: 570
 end

それらは(たくさんのparaとともに)同じスロット内で一緒にグループ化されているため、 3つのラジオボタンから1度に1つだけが選択できます。

これらをそれら自身のスロットに移動したら、この例は壊れます。

 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow do
       radio
       para "The Taste of Tea by Katsuhito Ishii", 
         width: 300
     end
     flow do
       radio
       para "Kin-Dza-Dza by Georgi Danelia",
         width: 300
     end
     flow do
       radio
       para "Children of Heaven by Majid Majidi",
         width: 300
     end
   end
 end

しかし、これは修正できます。 違うスロットのラジオボタンを一緒にグループ化することができ、それらにすべて同じグループ名を 与える必要があります。

ここでは:filmsグループにそれらすべてのラジオボタンをグループ化しました。

 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow do
       radio :films
       para "The Taste of Tea by Katsuhito Ishii",
         width: 300
     end
     flow do
       radio :films
       para "Kin-Dza-Dza by Georgi Danelia",
         width: 300
     end
     flow do
       radio :films
       para "Children of Heaven by Majid Majidi",
         width: 300
     end
   end
 end

下にあるそれらの一覧を越える更なるメソッドについては、Commonメソッドのページを 詳しく調べてください。それらのメソッドをすべてのラジオボタンで同様に利用できるからです。

checked?() » true or false

ラジオボタンがチェックされているかどうかを返します。 そして、trueの意味は"はい、チェックされています!"です。

ラジオボタンをマークしたりマークを外したりします。 例えば、checked = falseを利用して、ラジオボタンをクリアします。

ラジオボタンがクリックされたとき、そのclickブロックが呼ばれます。 このブロックは、クリックされたラジオボタンを示すオブジェクトのselfを渡します。

ラジオボタンをマークしたときとマークを外したときの両方で、クリックが送られます。

focus() » self

ラジオボタンのフォーカスを移動します。そのラジオボタンはハイライトされます。

Next: Shape