Bileşenler

1. 1
Arayüz Bileşenleri
Kullanıcı arayüzü (user interface)
Bu palette uygulama arayüzünde bulunan ve kullanıcıların etkileşime girebileceği bileşenler bulunmaktadır.
Kullanıcılar ekrandaki uygulamada bu bileşenleri görmekte ve bunlar üzerinden uygulama ile etkileşime girmektedir.
Bu bileşenlerin bazıları veri girişi, bazıları veri gösterme gibi işlevler yapmaktadır.
ÖRNEK
 Örneğin ekrana bir etiket (Label) ekleyelim. Ekrana
eklediğimiz bileşenin özelliklerini Properties penceresinden
değiştiririz. Ekranda görülen yazıyı yazmak için
 Text özelliğinden istediğimiz başlığı yazıyoruz.
 Arka plan rengini Background Color kısmından
mavi,
 Text Color kısmından da yazı rengini beyaz
yapıyoruz.
 İtalik, kalın font ve font büyüklüğü de buradan
ayarlanabilir.

2. 2
 Örnekte gördüğünüz üzere Kullanıcı Arayüzü
paletinden çeşitli bileşenlerle bir Randevu Defteri
oluşturulmuştur.
 Ekrana yerleştirilen bileşenler yanda
gösterilmiştir. Bu bileşenler sürükle-bırak ile ekrana
taşınmış ve bir önceki slaytta olduğu gibi Properties
(Özellikler) penceresinden yazı tipi, rengi gibi özellikleri
değiştirilmiştir.
 Gördüğünüz gibi bileşenler alt alta yerleştirilmiş
ve bir hizalama yapılamamıştır. Bu istediğiniz şekilde bir
tasarım yapmanızı zorlaştırır. Bir sonraki aşamada
bileşenleri isimlendirdikten sonra düzen ve hizalama
seçenekleri gösterilecektir.
Düzen (layout)
Bu palette ekrandaki öğelerin düzeni ve hizalanmasıyla ilgili bileşenler bulunmaktadır. Bu bileşenleri kullanarak ekran
tasarımınızı yapabilir ve bileşenlerinizi ekranda istediğiniz yere istediğiniz düzende yerleştirebilirsiniz.
Daha önceden verilen randevu defteri örneğinde tüm bileşenler alt alta sıralanmıştı ve hiç hizalama yapılmamıştı.
Bileşenlerin hizalamasını yapmak için Table Arrangement özelliği kullanılabilir. TableArrangement bileşeni ekrana
sürüklenip bırakıldığında içi boş bir çerçeve oluşur. Aşağıda yeni bir uygulama örneğinde görüldüğü üzere özelliklere
bakıldığında tablo 2 sütun (columns) ve 2 satır (rows) içermektedir. Bu sayı isteğe göre artırılabilir. Aşağıda tablo
hizalamanın içerisine sürükle-bırak ile 4 adet buton bileşeni eklenmiştir.

3. 3
Yanda gördüğünüz üzere bir önceki örnekte gösterildiği
gibi arayüze dikey ve yatay hizalama bileşenleri de
eklenmiştir.
Hizalama çerçevesinin içerisine istediğiniz bileşeni
sürükleyip bırakabilirsiniz. O çerçeve içerisinde
olduklarından emin olmak için Components kısmından
hizalama bileşeni altında yer alıp almadığını kontrol
edebilirsiniz.
Dikey ve yatay hizalama, tablo hizalamanın içerisinde de
kullanılabilir. Bu şekilde tablo içerisinde de dilediğiniz
şekilde bileşen yerleştirmesi yapabilirsiniz.
Medya (media)
Bu palette uygulama arayüzünde ses ve video gibi medya bileşenlerinin eklenmesi ve oynatılması için gerekli
bileşenler bulunmaktadır. Uygulamanıza ses, video ekleme, ses kaydetme, fotoğraf çekme gibi bileşenler eklemek
istediğinizde bu bileşenleri kullanırsınız.

4. 4
ÖRNEK
Bu örnek Kaydı Başlat butonuna tıklandığı zaman ses
kaydını başlatan, Kaydı Durdur butonuna tıklandığında
kaydı bitiren ve Tanımla butonuna tıklandığında kaydedilen
sesi metne çeviren bir uygulama arayüzü olarak
tasarlanmıştır.
Örnekte Label (etiket) bileşeni ile uygulamaya başlık
eklenmiştir. Tanımlanan kayıt kısmı da Label ile
oluşturulmuştur.
Yatay hizalama kullanılarak içerisine 3 adet buton
eklenmiştir.
Son olarak da ses kaydetme ve ses tanımlama bileşenleri
eklenmiştir. Gördüğünüz üzere bu bileşenler non-visible
yani arayüzde görünmemektedir. Daha sonra gösterileceği
şekilde bloklar yardımıyla onları programlayacaksınız.
Çizim ve animasyon (Drawing and Animation)
Bu palette uygulamaya çizim ve animasyon ekleme bileşenleri bulunmaktadır. Uygulamanıza hareketli öğeler
yerleştirmek istediğinizde bu bileşenleri kullanırsınız.
Çizim ve animasyon hareket içeren uygulamalar için kullanılır
Yandaki örnekte topları hareket ettirmek için ekrana bir Canvas bileşeni
sürüklenip bırakılarak eklenmiştir. Ball bileşeninden de yine sürüklenip
bırakılarak üç tane içerisine eklenmiştir. Topların renkleri Properties
penceresinden değiştirilmiştir.
Toplara hareket vermek için onlara ait kod bloklarının oluşturulması
gereklidir. Toplar sınırları belirlenen Canvas alanı içerisinde hareket
ederler.

5. 5
Canvas alanındaki bileşenler x ve
y koordinatları ile kontrol edilir.
Örnekte görülen Canvas alanının
genişliği (x) 300 piksel, yüksekliği
de (y) 200 piksel olarak
ayarlanmıştır.
Örneğin ekrandaki turkuaz renkli
olan top3 bileşeninin hareket
alanındaki x koordinatı 223, y
koordinatı da 23 pikseldir.
Bloklarla programlama yapılırken
bileşenlerin nereye hareket
edeceği yeni x ve y
koordinatlarının ayarlanması ile
belirlenir.
Sensörler (sensors)
Bu palette cihazdaki Sensörlerin kullanımına ilişkin bileşenler bulunmaktadır.

6. 6
Bu bileşen grubundaki bileşenlerin tümü görünmeyen bileşenlerdir. Yani
Viewer penceresindeki Screen1 uygulama ekranında görünmezler. Onun
altında Non-visible olarak yer alırlar.
Bileşen olarak eklendikten sonra Blocks arayüzünde kod blokları yardımıyla
programlanırlar.
Çoğunlukla mobil cihazın yan yatırılması, ters çevrilmesi ve sallanması
durumlarında tepki verme eylemleri için bu bileşenleri kullanabilirsiniz.
Sosyal (Social)
Bu palette uygulamanın sosyal medyayla ve kişilerle bağlantılarının yapılabileceği bileşenler bulunmaktadır. Telefon
rehberiyle bağlantı, mesajlaşma, arama, Twitter gibi sosyal medya bağlantılarını bu bileşenler yardımıyla
kullanabilirsiniz.

7. 7
Bu bileşen grubundaki bileşenler hem internette sosyal medya
bağlantısı ve paylaşım için, hem de telefon üzerinde paylaşım
için kullanılabilir.
Örnekte telefon rehberinden numara seçen, seçilen numarayı
görüntüleyen ve o numaraya Texting1 bileşeni ile mesaj
gönderecek olan uygulamanın ekran görüntüsü verilmiştir.
Components kısmından hangi bileşenlerin eklendiğini inceleyin.
Ekrana başlık için etiket, numara seçmek için
PhoneNumberPicker (numara seçme) butonu, seçilen numarayı
göstermek için yine bir etiket ve metin kutusu (yatay hizalama
içerisinde) ve mesaj gönderme butonu eklenmiştir.
Depolama (Storage)
Bu palette uygulamanın içerisinde ve veritabanında veri saklamayla ilgili bileşenler bulunmaktadır. Uygulamada veri
saklanması ya da başka depolama alanlarından veri alınması gibi işlemler için bu bileşenleri kullanabilirsiniz.
Bağlantılar (Connectivity)
Bu palette uygulama ile Bluetooth ve Web gibi bağlantıların yapılmasını sağlayan bileşenler bulunmaktadır. Mobil
cihazın diğer cihaz ya da sunucularla bağlantı kurması için bu bileşenleri kullanabilirsiniz.
Depolama ve Bağlantılar bileşen gruplarına ait bileşenlerin hepsi görünmeyen bileşenlerdir. Ekrana eklendikten sonra
kod bloklarıyla programlanarak kullanılırlar.
Bu bileşen grupları ileri düzey uygulama geliştirme işlemlerinde kullanılır. Web üzerinde ya da cihazın depolama
birimi kullanılarak bu bileşenlerle depolama, web, bluetooth bağlantısı gibi işlemler yapılabilir

8. 8
Bileşenleri isimlendirme
Uygulama arayüzüne eklediğiniz bileşenlerin isimleri
varsayılan olarak Button1, TextBox1, Label1 gibi
isimlerle eklenir. Bu isimleri Components
penceresinden değiştirebilirsiniz.
Bileşenlere anlamlı isimler vermeniz bir sonraki
aşamada bileşenlerinizi programlarken size kolaylık
sağlayacaktır.
Bileşenlerin ismi Components penceresindeki
Rename (yeniden adlandır) üzerine tıklanarak
değiştirilir.
İsim verirken Türkçe karakter kullanmayınız
(ç,ş,ğ,ı,ö,ü).