Red GUI Örnekleri

Üzerinde bir buton olan pencere:

Red [needs: 'view]
view [
    button "Bana tıkla"
]

Buton tıklandığında bişey yapsın:

Red [needs: 'view]
view [
    button "Bana tıkla" [print "Beni tıkladılar!"]
]

Burada da bir buton ve "f" değişkenine atanan bir field var. Butona tıkladığımızda f field'ına yazdığımız yazıyı bize gösterir:

Red [needs: 'view]
view [
    f: field "Buraya yazın ve butonu tıklayın"
    button "Bana tıkla" [print f/text]
]

Burada buton tıklanınca field içeriği "mytext.txt" dosyasına saklanır ve "kaydedildi" mesajı verilir:

Red [needs: 'view]
view [
    f: field "Buraya yazın ve butonu tıklayın"
    button "Bana tıkla" [
        write %mytext.txt f/text
        print "kaydedildi"
    ]
]

Başka bir buton ekleyerek dosya içeriğini field'e okuyalım. Şimdi programı kapattıktan sonra tekrar açıp dosyadan bilgiyi okuyabiliriz:

Red [needs: 'view]
view [
    f: field  "Buraya yazın ve Kaydet butonu tıklayın"
    button "Kaydet" [
        write %mytext.txt f/text
        print "Kaydedildi"
    ]
    button "Yükle" [
        f/text: form read %mytext.txt
    ]
]

Buradaki örnek tek satırlık field yerine çok satır alabilen "area" kullanıyor ve aynı işi yapıyor. Bu sayede basit bir text editörümüz oldu:

Red [needs: 'view]
view [
    a: area
    button "Kaydet" [
        save %mytext.txt a/text
        print "Kaydedildi"
    ]
    button "Yükle" [
        a/text: load %mytext.txt
    ]
]

Kaydırma oyunu

Biz küçükken bunun plastikten yapılmış gerçekleri vardı. Yanında boşluk olan bir parçaya tıkladığımızda parça o boşluğa kayıyor ve eski yeri boşalıyor. Böyle kaydırarak parçaları sıraya diziyoruz.

1. Gümüş renk arkaplana sahip etiketi "Tile Game" olan bir pencere yapıyoruz.
2. Red'in "style" kelimesi ile "t" adında buton üretme kodu yazıyoruz. Bu "t" widget'ı tıklanınca 3 işlem yapılıyor. "x" değişkenine butonun şu andaki koordinatı yükleniyor, Butonun koordinatı boş yer ifade eden zemin renginde "e" widget'i koordinatına eşitleniyor (yani buton boşluğa kaydırılıyor, en son da boşluk widget'ı "e" butonun eski yerine konuyor. 
3. Red yapısında "return" fonksiyonu widget'lar için bir yeni satıra geçilmesini belirtir. Bu sayede her 3 buton da bir alt satıra geçiliyor.
4. Ekrana 9 tane buton ve en sona da boşluk olan "e" widget'ı ekleniyor.

Red [needs: 'view] 
view [ 
     title "Tile Game"
     backdrop silver
     style t: button 100x100 [
         x: face/offset
         face/offset: e/offset 
         e/offset: x
     ] 
     t "8"  t "7"  t "6"  return 
     t "5"  t "4"  t "3"  return 
     t "2"  t" 1"  e: base silver
]

Hesap Makinası

Hadi bu uygulamayı başka programlama dilleriyle yapın bakalım ne kadar karmaşık oluyor:

Red [needs: 'view]
view [
     title "Calculator"
     f: field 170x50 font-size 25 ""  button "C" 50x50 [clear f/text] return 
     style b: button 50x50 font-size 25 [append f/text face/text]
     b "1"  b "2"  b "3"  b " + "  return 
     b "4"  b "5"  b "6"  b " - "  return 
     b "7"  b "8"  b "9"  b " * "  return 
     b "0"  b "."  b " / "  b "=" [
             calculation: attempt [form do f/text]
             append clear f/text calculation 
     ] 
]

Not: Noktalı sayılarla çalıştırmak isterseniz sayıların birini noktalı olarak girin (yani "2 / 3" yerine "2.0 / 3" gibi). Yaa işte böyle sevgili okur.