TUTORIAL RUBY DENGAN SHOES GUI
BAHASA PEMOGRAMAN
OLEH :SLAMET NURHADI TEKNIK INFORMATIKA UNIVERSITAS NASIONAL
1.Animasi Tombol
Animasi tombol, buat kode seperti dibawah ini lalu simpan dengan ekstensi .rb 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, @two.displace(0, (Math.sin(i) * 6).to_i) end end end
buat kode seperti dibawah ini lalu simpan dengan ekstensi .rb 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.move(40, 40 + (Math.sin(i) * 6).to_i) end end end
2.Style Tombol
Style pada Tombol, buat kode seperti dibawah ini lalu simpan dengan ekstensi .rb Shoes.app do # A button which take up the whole page @b = button "All of it", :width => 1.0, :height => 1.0 # When clicked, show the styles @b.click { alert(@b.style.inspect) alert(@b.style.inspect) } End
Style pada Tombol, buat kode seperti dibawah ini lalu simpan dengan ekstensi .rb Shoes.app do stack :width => 120 do @b = button "Click me", :width => "100%" do alert "button.width = #{@b.width}\n" + "button.style[:width] "button.style[:width] = #{@b.style[:width]}" #{@b.style[:width]}" end end end
Style pada Tombol, buat kode seperti dibawah ini lalu simpan dengan ekstensi .rb Shoes.app do stack :width => 120 do @b = button "Click me", :width => "100%" do alert "button.width = #{@b.width}\n" + "button.style[:width] "button.style[:width] = #{@b.style[:width]}" #{@b.style[:width]}" end @c = button "Click me", :width => "100%" do alert "button.width = #{@b.width}\n" + "button.style[:width] "button.style[:width] = #{@b.style[:width]}" #{@b.style[:width]}" end end end
3.Tombol
Membuat Tombol sederhana, buat kode seperti dibawah ini lalu simpan dengan ekstensi .rb Shoes.app do button "OK!" button "Are you sure?" end
Shoes.app do button "OK!" do append { para "Well okay then." } end button "Are you sure?" do append { para "Your confidence is inspiring." } end end
Shoes.app do @b1 = button "OK!" @b1.click { para "Well okay then." } @b2 = button "Are you sure?" @b2.click { para "Your confidence is inspiring." } End
4.CheckBox
Shoes.app do stack do flow { check; flow { check; flow { check; flow { check; end end
para para para para
"Teknik Informatika" } "Sistem Informasi" } "Telekomunikasi" } "Manajemen Informatika" }
Shoes.app do @list = ['Teknik Informatika', 'Sistem Informasi', 'Telekomunikasi', 'Telekomunikasi', 'Manajemen Informatika'] stack do @list.map! do |name| flow { @c = check; para name } [@c, name] end button "What's been checked?" do selected = @list.map { |c, name| name if c.checked? }.compact alert("You selected: " + selected.join(', ')) end end end
5.EditBox
Shoes.app do edit_box edit_box :width => 100, :height => 100 end
Shoes.app do edit_box do |e| @counter.text = e.text.size end @counter = strong("0") para @counter, " characters" end
6.EditLine Shoes.app :height => 300, :width => 500 do stack do edit_line edit_line :width => 400 end end
7.ListBox Shoes.app do para "Choose a fruit:" list_box :items => ["Grapes", "Pears", "Apricots"] end
Shoes.app do para "Choose a fruit:" list_box :items => ["Grapes", "Pears", "Apricots"], :width => 120, :choose => "Apricots" do |list| @fruit.text = list.text end @fruit = para "No fruit selected" End
8.Progress Shoes.app :height => 150, 150, :width => 500 500 do stack :margin => 0.1 do title "contoh Progress" @p = progress :width => 1.0 animate do |i| @p.fraction = (i % 100) / 100.0 end end end
9.Radio Shoes.app do para "Among these films, which do you prefer?\n" radio; para strong("The Taste of Tea"), " by Katsuhito Ishii\n" radio; para strong("Ketika Cinta Bertasbih"), " by Habiburrahman al syirazi\n" radio; para strong("Laskar Pelangi"), " by Andrea Hirata\n" end
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" end flow do radio :films para "Ketika Cinta Bertasbih by Habiburrahman Habiburrahman al syirazi" end flow do radio :films para "Laskar Pelangi by Andrea Hirata"
end end end
