REBOL Örnekleri - 2

Hadi tekrar başlayalım :

REBOL [title: "ikinci kısım"]

view center-face layout [
    text "Merhaba 2. Kısım"
] 

center-face komutunu hangi nesneden evvel yazarsanız o nesne ta orta yere konur.

REBOL [title: "ikinci kısım"]

view layout [
    title "Merhaba Dünyalı"
] 

title stili ile başlık büyüklüğündeki puntolarla yazılır. Bir de BANNER ile nasılmış bakalım :

REBOL [title: "ikinci kısım"]

view layout [
    banner "Merhaba Dünyalı"
] 

Layout içinde birden çok stil tanımlayabiliriz. Bu örnek bir video heading (vh2) , bir text ve bir button içeriyor :

REBOL [title: "ikinci kısım"]

view layout [
    vh2 "Layout Tanımı:"
    text "Layoutlar grafik kullanıcı arabirimini (GUI) tanımlar."
    button "Hatırla"
]

Facet'ler yardımıyla bu stillere binlerce değişik efekt yapabiliriz :

REBOL [title: "ikinci kısım"]

view layout [
    backdrop effect [gradient 1x1 180.0.0 0.0.100]
    vh2 "Layout Tanımı:" 200x22 yellow
        effect [gradmul 1x0 50.50.50 128.128.128]
    vtext bold italic "Layoutlar grafik kullanıcı arabirimini (GUI) tanımlar."
    button "Hatırla" effect [gradient 0.0.0]
]

Layout içine ihtiyacınız kadar fazla sayıda stil atabilirsiniz. Mesela bu örnek bir backdrop, bir heading, text labellar, text input fieldler ve buttonlar içeriyor :

view layout [
    style lab label 100 right
    across
    vh2 "Bilgilerinizi Giriniz:" gold return
    lab "Kullanıcı Adı:" field return
    lab "Email Adresi:" field return
    lab "Tarih/Saat:" field form now return
    lab "Dosyalar:" text-list data load %. return
    lab
    button 96 "Kaydet"
    button 96 "İptal"
    return
]

Tanımlanmış REBOL stilleri şunlardır :

• title  Döküman etiket başlığı .
• h1 Dökümanda kullanılan ana başlık.
• h2 Kısımları ayıran başlık.
• h3 Alt kısımlar için başlık.
• h4 Alt kısımların altındaki başlık.
• h5 Alt kısımların altındaki başlık.
• banner Video stillerin etiket başlığı.
• vh1 Video stil kısımları ayıran başlık.
• vh2 Video stil kısımları ayıran başlık.
• vh3 Video stil kısımları ayıran başlık.
• text Döküman gövde metni.
• txt Yukardaki TEXT stili ile aynı.
• vtext   Video stili gövde metni.
• tt Sabit genişlikli teletype font.
• code  TT ile aynı ancak koyu seçilmiş.
• label  GUI içinde yazı satırları.
• field Yazı giriş alanı.
• info FIELD ile aynı ancak sadece okunabilir, yazılamaz.
• area Text düzenleme alanı , paragraf giriş.
• sensor Görünmeyen bir yüzey mouse hareketlerini algılamak için.
• image JPEG, BMP, PNG, veya GIF resim gösterir.
• box Dörtgen bir kutu çizer.
• backdrop Bir resmi tüm layout penceresine yayar.
• backtile Bir resmi tüm layout penceresinde tekrarlayarak kaplar.
• icon Yazı başlıkla beraber bir ikon resmi gösterir.
• led Bir gösterge ışığı.
• anim  Animasyonlu bir resim gösterir.
• button Standart tıklama düğmesi.
• toggle Her tıkta konum değiştiren BUTTON .
• rotary Birçok konuma tıklandıkça sırayla geçen buton.
• choice popup ile birçok seçim sunan button.
• check check box.
• radio Yuvarlak radio button.
• arrow Ok resimli button.
• progress  Bir progress bar.
• slider Slider bar.
• panel Layout içinde layout.
• list iterated alt-layout.
• text-list Basit bir liste formu.
• key Keyboard kısayolu

.

Ismarlama Stiller

Tüm yukarıdaki stiller istenilen şekilde facet'ler yardımıyla değiştirilebilir. Facet'ler yazıyı , boyutu , rengi, resimi değiştirebilir. Facet'ler isteğe bağlıdır, istediğinizi kullanırsınız. Aşağıda bir butona uygulanan çeşitli facet'ler gösterilmiştir:

view layout [
    button
    button "Easy"
    button "Easy" 40x40
    button "Easy" oldrab
    button "Easy" [print "Fun"]
    button "Easy" 40x40 maroon [print "Fun"]
]

Facet istenen sırada konabilir, kısıtlama olmadan istediğiniz şekilde kullanın, bir de hangisi önce yazılcaktı demeyin :

view layout [
    button "Easy" 40x40 navy [print "Fun"]
    button navy "Easy" 40x40 [print "Fun"]
    button 40x40 navy "Easy" [print "Fun"]
    button [print "Fun"] navy 40x40 "Easy"
]

Boyut Facet'leri

Boyutlar genişlik ve yüksekliği piksel olarak veren çiftler olabilir :

image %nyc.jpg 100x200
text "example" 200x200
button "test" 50x24

yada sadece genişliği verirler yükseklik stil içine göre otomatik ayarlanır :

text "example" 200
button "test" 50

Renk Facet'leri

Renkler kırmızı , yeşil , mavi karışımından oluşturulabilir.

image %palms.png 250.250.0
text "example" 0.0.200
button "test" 100.0.0

REBOL'un kullanabileceği 40 kadar ön tanımlı renk vardır :

text red "Warning"
text blue "Cool down"
text green / 2 "Ok"

Son satırda rengin parlaklığının nasıl kısıldığına dikkat ettiniz umarım. Bazı yüzeyler birden fazla renk alabilir, örneğin :

toggle "Test" red green

rotary "Stop" red "Caution" yellow "Go" green

Resim Facet'leri

Bir resim dosya adından internetten yada resim verisinden getirilebilir :

image %palms.png
image http://www.rebol.com/view/nyc.jpg
button "Test" %palms.png

Aksiyonlar

 Aksiyonlar blok olarak belirtilir. Aksiyonlar yüzeyleri hareketlendirir. Kullanıcı tıkladığında aksiyon bloğu içindeki program çalıştırılır :

image %nyc.jpg [print "Merhaba"]
text "Örnek" [print "Dünyalı"]
button "Test" [print "Kullanıcı"]

Bazı stiller ikinci bir blok alırlar , bu alternatif aksiyon içindir. Butona sol tıklanınca ilk, sağ tıklanınca ikinci aksiyon çalışır :

text "Buraya Tıkla" [print "Sol Tıkladın"] [print "Sağ Tıkladın"] 

Karakter Facet'ler

Bir kısayol tuşu bir tuşu string içinde ve başına # koyarak tanımlanır :

image %nyc.jpg #"a" [print "Merhaba"]
text "Örnek" #"^t" [print "Dünyalı"]
button "Test" #" " [print "Kullanıcı"]

 Facet Blokları

Facet blokları şekillendirme yaparken çok yararlıdır :

• Font font bloğu kullanılan yazının özelliklerini belirler :

text "black" font [color: 255.255.255 size: 16 shadow: none]

• Para bloğu yazının paragraf özelliklerini belirler :

text "test" para [origin: 10x10 margin: 10x10]

•  Efect ile özel grafik efektler yapılır :

image %nyc.jpg effect [contrast 20]
image %nyc.jpg effect [tint 120 brighten 30]
button "Test" effect [gradient 0x1 200.0.0]

Size Kelimesi

Size ile layout boyutları belirlenir. Programda layout'un ilk satırlarında olmalıdır.

size 200x100
h2 "Size Örneği"

Eğer Size belirtilmemişse layout boyutu içine konan stillere göre otomatik ayarlanır :

Origin Kelimesi

Origin layout içindeki stillerin başlangıç noktası belirtilir. Default değeri 20x20 dir Aşağıda orjinalinden daha küçük origin değeri:

origin 4x2
text bold "Origin şimdi 4x2"

Şimdi de orjinalinden daha büyük origin :

origin 50
text bold "Origin şimdi 50x50"

 Değer belirtilmeyince origin default değerine döner:

box 34x40 beige
origin
text bold "Origin geri döndü"

Yukardaki örnekten görüldüğü üzere origin ile size belirtilmediği zaman layout boyutlarını da etkileyebiliyoruz.
Origin ayarı özellikle paneller ve listelerde çok önemlidir. Sıklıkla listlerin içinde origin 0 yapılır :

vh2 "Filmler:"
list 144x60 [
    origin 0
    across
    text 60
    text 80
] data [
    ["Back to the Future" "1:45"]
    ["Independence Day" "1:55"]
    ["Contact" "2:15"] ]

List'le birlikte verilen şekillendirme bloğunda origin 0 olarak verilmiştir.

Otomatik Layout Yönlendirmeleri

Below Kelimesi

Below kendisinden sonra gelen kısımda layout için dikey yerleştirme yapılacağını belirtir. ACROSS ile beraber layoutların otomatik yerleşimlerinde kullanılır:

Layout için BELOW default yerleşimdir :

button "Button 1"
button "Button 2"
button "Button 3"

Layout boyunca BELOW ve ACROSS ile yerleşimi düzenleyebilirsiniz :

across
button "Button 1"
button "Button 2"
below
button "Button 3"
button "Button 4"

Across Kelimesi

Across kendisinden sonra gelen stilllerin yatay yerleştirileceğini belirtir. Bir sonra gelen stil öncekinin sağına eklenir :

across
button "Button 1"
button "Button 2"
button "Button 3"

Layout boyunca across ve below arasında dönebilirsiniz :

vh2 "Örnek"
across
button "Button 1"
button "Button 2"
return
button "Button 3"
button "Button 4"
return

Return Kelimesi

Return layout yerleşim yönüne bağlı olarak bir sonraki satır ya da sütuna geçiş için kullanılır. layout yönü across ise return ile bir sonraki satıra geçilir, below ise bir yeni sütun açılır :

across
text "İsim:" 100x24 right
field "Adınızı Girin"
return
text "Adres:" 100x24 right
field "Adresinizi Girin"
return

Boşluklar

Space Kelimesi

Space kelimesi ile layout içindeki elemanların arasındaki otomatik boşluk işlemleri ayarlanır. Layout içinde herhangibir yerde boşluk ayarları değiştirilebilir. Boşluk ayarı bir çift değerle yada tek integer sayı ile yapılabilir : 

space 2x4
button "Button 1"
button "Button 2"
return
button "Button 3"
button "Button 4"

ikinci örnek daha büyük aralık içerir.

space 20x16
button "Button 1"
button "Button 2"
return
button "Button 3"
button "Button 4"

Pad Kelimesi

Bu kelime ile bir sonra gelen stil ile aradaki mesafe tayin edilir. Sanki etrafında verilen ebatlarda görünmeyen bir çevre varmış gibi sonraki stil ittirilir.

text "Bar below"
pad 20x4
box 50x3 maroon