1. Pencere: arayüz

Kitaplar / Yöntem Birimler ve Araçlar Kılavuzu / 1. Pencere: arayüz

Pencere birimi (İngilizce adıyla UI) düğme, giriş kutusu, etiket ve tuvallerden arayüz kurar. Aynı program üç yerde çalışır:

Nerede	Nasıl	Ne olur
Oyun alanı	Çalıştır’a basılır	Arayüz Uygulama sekmesinde canlı açılır
Web ya da telefon	`yontem paketle program.y`	Tek başına çalışan bir web uygulaması üretilir
Komut satırı ve testler	`yontem program.y`	Benzetim: olayları programın kendisi üretir, arayüz metin olarak yazılır

Bir arayüz programı üç adımdan oluşur: bileşenler oluşturulur, olaylara prosedür bağlanır ve bileşenler Yerleştir ile pencereye konur.

Yöntem

program Selamlayıcı
{ Pencere birimi: bir giriş kutusu, bir düğme ve bir etiket.
  Oyun alanında ya da paketlenmiş uygulamada arayüz gerçekten açılır; komut satırında
  ve testlerde olaylar Gir ve Tıkla ile benzetilir. }
kullan Pencere

değişken adKutusu, selamDüğmesi, sonuç: herhangi

prosedür Selamla
başla
  eğer adKutusu.Metin = '' ise sonuç.Metin := 'Önce adını yaz.'
  değilse sonuç.Metin := 'Merhaba, ' + adKutusu.Metin + '!'
bitir

başla
  Başlık('Selamlayıcı')
  adKutusu := GirişKutusu('Adın')
  selamDüğmesi := Düğme('Selam ver')
  sonuç := Etiket('')
  selamDüğmesi.Tıklanınca(@Selamla)
  Yerleştir(Yatay(adKutusu, selamDüğmesi), sonuç)

  eğer değil Canlı ise
  başla
    Tıkla(selamDüğmesi)
    yaz(sonuç.Metin, 1)
    Gir(adKutusu, 'EdaEce')
    Tıkla(selamDüğmesi)
    yaz(sonuç.Metin, 1)
  bitir
  Çalıştır
bitir.

Komut satırındaki çıktısı şöyledir:

Çıktı

Önce adını yaz.
Merhaba, EdaEce!
Pencere "Selamlayıcı"
  Yatay
    GirişKutusu "EdaEce" (ipucu "Adın")
    Düğme "Selam ver"
  Etiket "Merhaba, EdaEce!"

Canlı, program gerçek bir arayüzde çalışıyorsa doğrudur. eğer değil Canlı ise bloğu yalnızca benzetimde çalışır: Gir kutuya metin yazar, Tıkla düğmeye basar. Sondaki Çalıştır canlı ortamda olayları beklemeye başlar; benzetimde arayüzün son hâlini ağaç olarak yazar. Testler bu ağacı beklenen çıktıyla karşılaştırır.

Bileşenler

Bileşen	Oluşturma	Başlıca üyeleri
Etiket	`Etiket(metin)`	`Metin`
Düğme	`Düğme(metin)`	`Metin`, `Tıklanınca(@P)`
Giriş kutusu	`GirişKutusu(ipucu)`	`Metin`, `İpucu`, `Değişince(@P)`
Onay kutusu	`OnayKutusu(metin, işaretli)`	`İşaretli`, `Değişince(@P)`
Kaydırıcı	`Kaydırıcı(enAz, enÇok, değer)`	`Değer`, `Değişince(@P)`
Seçim kutusu	`SeçimKutusu(seçenekler)`	`Seçili`, `SeçiliMetin`, `Seçenekler`, `Değişince(@P)`
Tuval	`Tuval(genişlik, yükseklik)`	`Renk`, `Çizgi`, `Dikdörtgen`, `Daire`, `Yazı`, `Temizle`, `Dokununca(@P)`
Yerleşim	`Yatay(…)`, `Dikey(…)`	`Ekle`, `Temizle`, `Çocuklar`

Her bileşende Etkin ve Görünür vardır. Pencere düzeyinde Başlık(metin), Yerleştir(…), Temizle, belirli aralıklarla bir prosedürü çağıran Aralıkla(ms, @P) ve AralığıDurdur bulunur. Benzetim yardımcıları Tıkla, Gir, Seç, Dokun ve zamanı ilerleten İlerle(ms)’dir.

Olay prosedürleri @Ad ile verilir. Kısa işler için adsız prosedür de yazılabilir: düğme.Tıklanınca(prosedür başla sayı := sayı + 1 bitir).