3 Nisan 2015 Cuma

ÖRNEK UYGULAMALAR - Social Bileşenleri - Phone Call Uygulaması





"Android Yazılımı Artık Çok Kolay"


TELEFON ARAMASI YAPMA UYGULAMASI: Bu örnek uygulamamızda telefon özelliği olan bir cihazın rehberine ulaşıp seçeceğimiz numarayı arayacağız.
İlk önce ekrana bileşenleri belli bir düzende tutmak için 2 sütun 3 satırlı bir “TableArrangement” bileşeni ekliyoruz. Bu bileşenin içine “PhoneNumberPicker1” bileşenimizi yerleştiriyoruz. Bu bileşen bir buton görünümündedir ve tıklandığında bize rehberimizdeki tüm telefon numarası bulunan kişileri listeler.
Blok bölümüne geçiyoruz. “PhoneNumberPicker1” bileşenimizin açtığı listeden seçim yapıldığında “when..PhoneNumberPicker..AfterPicking” olayı tetiklenir. Biz bu olay bloğu içinde “Set..PhoneCall1..PhoneNumber..to” bloğu ile “PhoneCall” bileşenin “PhoneNumber” yani telefon numarasına seçtiğimiz “PhoneNumberPicker1” bileşeninin “PhoneNumber” değerini atıyoruz. aynı atamayı “TextBox1” bilşenimizin “Text” değişkenine de yapıy numarayı görüyoruz.
“Button1” bileşenimizin “Click” olay bloğu içine yerleştirdiğimiz “Call..PhoneCall1..MakePhoneCall” prosedürü “PhoneCall1” bileşenimize atanmış numarayı aramamızı sağlar.


TELEFON_ARAMASI_01.png


TELEFON_ARAMASI_02.png
“When..PhoneCall1..PhoneCallEnded” bloğu aramamız bitince çalışır. İçinde bulunan “PhoneNumber” değeri yukarıda atanan değerdir. “status” değeri ise o anki durum hakkında verilen bir numaradır.
“When..PhoneCall1..PhoneCallStarted” bloğu aramamız başlayınca çalışır. İçinde bulunan “PhoneNumber” değeri yukarıda atanan değerdir. “status” değeri ise o anki durum hakkında verilen bir numaradır.
Programı çalıştırıp sonuçlarını gözlemleyebiliriz.



ÖRNEK UYGULAMALAR - Sensors Bileşenleri - GPS Location Sensor



"Android Yazılımı Artık Çok Kolay"



GPS SENSOR UYGULAMASI: “LocationSensor” bileşeni ile cihazmızın GPS (Konum) sensörünü açarak bize enlem, boylam ve yükseklik bilgisini vermesini sağlayabiliyoruz. Bunun için Ekranımıza LocationSensor” bileşeni yanında bu bileşeni aktif ve pasif yapacak 2 buton bileşeni ile bilgilerin gösterileceği 3 adet “TextBox” bileşeni ve bunların açıklamalarının yeralacağı 3 “Label” bileşeni ve LocationSensor” bileşeninin durumunu ve kullandığı sensörü gösterir iki “Label” bileşeni daha ekliyoruz. Ve bu bileşenlerin yerleşimini düzenlemek için “Layout” bölümünden “HorizontalArrangement” ve “VerticalArrangement” bileşnlerini de ekliyoruz. Dizay ekranı aşağıda göründüğü gibi yerleştiriyoruz.
GPS_UYGULAMA_01.png


Blok bölümüne geçiyoruz ve “Button1” ile “LocationSensor1” bileşenimizi aktif hale getiriyoruz ve bu butonun “Enable” (Kullanılabilirlik) özelliğini “False” yaparak tekrar basılması sonucunda oluşabilecek olumsuzlukların önüne geçiyoruz ve programın başında “Screen1” bileşnin ilk gösteriminde çalışan bloğun içinde “False” yaptığımız “When..Screen1..İnitialize” “Button2” nin “Enable” (Kullanılabilirlik) özelliğini “True” yaparak kullanıcının istediği zaman “LocationSensor1” bileşenimizi pasif hale getirebileceği bloğu çalıştırabilmesini sağlıyoruz.
“When..LocationSensor1..LocationChanged” bloğu altında; enlem boylam ve yükseklik için ayarladığımız “TextBox” bileşnlerinin “Text” özelliklerine, yine “When..LocationSensor1..LocationChanged” içinde bulunan ve bize bu olayın döndürdüğü değerlerini kilitliyoruz.
“When..LocationSensor1..StatusChanged” olayı ise bize hem iletişim kurduğu sensörü “provider” değişkeni ile verir hemde anlık olarak sensör durumunu “status” değişkeni ile döndürür. bu değişkenleri resimde görüldüğü üzere “Label5” ve “Label6” bileşenlerinin “Text” özelliklerine kilitliyoruz.
Programı çalıştırıyoruz. Konumdaki değişmeleri görebilmeniz için açıkhavada olmanız GPS sinyali almanız gerekiyor ve mümkünse 500 metreye yakın bir mesafe görünebiliyor, tabi ki bu kullandığınız cihazın GPS sensörüne bağlı.


GPS_UYGULAMA_02.png

Burada dikkat edilecek noktaya gelirsek cihazının GPS özelliğini açmanız gerekir. Eğer güncellemeyi daha sık aralıklarla almak isterseniz. “LocationSensor1” bileşeninin “set..LocationSensor1..Timeinterval” bloğunundaki özelliğine milisaniye (Örn:1 saniye için 1000 değeri girilecek) olarak değer atayabilirsiniz. Örneğin bu bloğu “Button1” in “Click” olayı içine yerleştirin.  






ÖRNEK UYGULAMALAR - Media Bileşenleri - Text To Speech



"Android Software Made Easy"


  • Metin Okuma (TextToSpeech) Uygulaması: Bu uygulamamızda android cihazımızın bizim için metin seslendirme özelliği göreceğiz.
İlk olarak ekranımıza “TextToSpeech” bileşeni, içindeki metinin okunması için “TextBox” bileşeni, işlemi “click” olayı ile başlatacak bir “Button” ve metin alanına değer girilmediği zaman uyaracak “Notifer” bileşeni yerleştiriyoruz.
METIN_OKUMA_01.png

Blok bölümüne geçiyoruz ve “Button1” “click” olayının içine bir şartlı kontrol bloğu yerleştiriyoruz. Bu blok ile ilgili açıklamalar daha önceki bölümlerde mevcut. Şunu hatırlatmakta yarar var “Else” ifadesi ilk bloğu eklerken görünmüyorsa bu bloğun üzerindeki kırmızı alanda fare ile tıkladığımız zaman çıkacak olan baloncuğun içinden else bloğunu alarak yine baloncuğun içindeki “if” bloğunun içine sürüklüyoruz.

METIN_OKUMA_02.png
“İf..Then..Else” bloğunda ilk kulakçığa mantıksal sınama kilitlenir. Burada “TextBox1” bileşeninin “Text” değişkeni boş “” yani hiçbir değer girilmemiş ise program “then” bloğuna atlayacak ve bu blok içindeki “Notifier1” bloğunun “notice” değişkenine kilitlenen metini gösterecek, ardından “TextBox1” bileşenine odaklanacaktır.
Eğer (if) “TextBox1” bileşeninin “Text” değişkeni boş “” değil ise (else) program “else” bloğuna atlayacak ve “TextBox1” bileşeninin “Text” özelliğindeki değeri seslendirecektir.
Burada görününen “SpeechRate” bloğu; “TextToSpeech1” bileşeninin okuma hızını ayarlar, girilen değerler 0 (sıfır) ile 2 (iki) arasındadır. Sıfır (0) en yavaş iki (2) en hızlı değerdir. Bu blokla düzenleme yapılmaz ise “SpeechRate” değişkeninin değeri “1” bire eşittir.

ÖRNEK UYGULAMALAR - Media Bileşenleri - Speech Regognizer



"Android Software Made Easy"



  • Ses Tanıma Uygulaması: Bu uygulamamızda “Google” firmasının android cihazlar için verdiği ses tanıma desteğini kullanacağız. Ses tanıma işlemi ekranda mikrofon simgesinin çıkıp sizin konuşmayı başlatmak ve bitirmek için bir ses duymanız arasında geçen sürede gerçekleşir.
Bu uygulama için ekranımıza resimde görüldüğü üzere Bir adet “SpeechRegognizer”, bir adet “Button”, tanınan seslerin anlık yazılacağı bir “TextBox” bileşeni, “TextBox” bileşeninin yanına bir etiket ve tanınan konuşmaların sırasıyla eklendiği bir “ListView” bileşeni ekliyoruz.
Bu uygulamada “ListView” bileşeninin kullanımı hakkında örnekler bulacaksınız.

SES_TANIMA_01.png
Uygulamanın blok bölümüne geçiyoruz.
“Button1” ile ses tanıma işlemi başlatılıyor. “When..SpeechRegognizer1..AfterGettingText” olayı ile ses tanıma işlemi bittikten sonra bu olay bloğunun köşesinde bulunan kırmızı renkli “result” (Tanınmış sesin metin hali) yazısının üzerine fare ile durduğumuz zaman “get..result” bloğunu “TextBox1” bileşeninin “Text” değişkenine kilitliyoruz.
“ListView1” bileşeni ile yaptığımız ise, “liste_eleman” isminde bir değişken oluşturup bu değişkene “SpeechRegognizer1” bileşenin “result” bloğunu add..item..list” bloğu yardımı ile “ListView1” bileşeninin sonuna bir eleman daha ekliyoruz.
SES_TANIMA_02.png


2 Nisan 2015 Perşembe

ÖRNEK UYGULAMALAR - Media Bileşenleri - SoundRecorder - Player


"Android Yazılımı Artık Çok Kolay"

  • Ses Çalma ve Ses Kayıt Uygulaması:Bu uygulama için ekranımıza 3 adet “Button” bileşeni yerleştirip sırasıyla “Button1=Kaydetmeye Başla”, “Button2=Kaydetmeyi Durdur” ve “Button3=Kaydedilen sesi Çal” olarak “Properties” alanından butonların “Text” özelliklerini değiştiriyoruz. İlk iki butonu ekranda yanyana görünmesi için “HorizontalArrengement1” içine yerleştiriyoruz.
Ekranımıza 1 adet “Player”, 1 adet “SoundRecorder” ve bize yapılan işi görsel olarak göstermesi için “Notifier” bileşeni ekliyoruz ve blok ekranına geçiyoruz.
Bu Ekranda resimde de görüldüğü üzere, butonlardan “Button1” ses kaydını başlatır, “Button2”  ses kaydını dururur ve “Button3” de kayıt sonrası “When..Recorder1..AfterSoundRecorder” oulayı ile “Player1” bileşeninin “Source” özelliğine kaydedilen dosyayı aktarır.
Bu uygulamada butonların “Properties” alanındaki “Image” özelliğini kullanarak butonla alakalı resim tanımlayabilirsiniz. Örneğin “play”, “stop”, “record” olarak internette aratacağınız küçük resimleri dizayn ekranındaki media alanına bu küçük resimleri yükleyin ve bu resimleri  butonların “Properties” alanındaki “Image” özelliğinden seçiniz. “Player1” bileşeninin duraklatma (Call..Player1..Pause) ve durdurma (Call..Player1..Stop) bloklarını da yerleşim bileşenlerinin düzenlemesi ile yerleştirip kullanabilirsiniz.

SES_CALMA_02.png
SES_CALMA_01.png



Hemen uyarayım resimleri butonlara tanımladığınızda yazıların altında arka plan olarak kendilerini gösterirler. En uygunu, resim kullanırken “Text” özelliğini boş bırakmak olur.

ÖRNEK UYGULAMALAR - Media Bileşenleri - Camera


"Android Yazılımı Artık Çok Kolay"


  • Fotograf Çekme Uygulaması:Bir önceki uygulama ile aynı şablonda yapacağız bu uygulamayı yani cihazın fotoğraf çekme özeliğini kullanacağız. Ekranımıza “buton”, “Image” ve media bölümünden “Camera” bileşenleri ekliyoruz. “Image1” in “Width” özelliğini “FillParent” yapıyoruz.
Butonumuzun “Text” özelliğini “Fotograf Çek” olarak değiştiriyoruz ve blok bölümünde butonumuzun “click” olayına “Camera1” bileşeninin fotograf çekmeye başlamasını tetikliyoruz. “When..Camera1..AfterPicture” olayı ile de “Camera1” bilşeninin “getimage” değerini“image1” bileşeninin “picture” değişkenine kilitliyoruz.
Burada dikkat edilmesi gereken en önemli nokta “When..Camera1..AfterPicture” olay bloğunda, köşede “image” özelliği vardı; bu özelliğin üzerinde fareyi bekletirseniz “getimage” (cihazın kamera uygulamasının çektiği fotoğraf yolunu verir) özelliğini gösteren baloncuk görüntülenir, bu baloncuğun içinden “getimage” bloğunu şeçip “image1” bileşeninin “picture” değişkenine kilitliyoruz.
KAMERA_01.png

ÖRNEK UYGULAMALAR - Media Bileşenleri - Camcorder


"Android Yazılımı Artık Çok Kolay"

MEDIA BİLEŞENLERİ İLE ÖRNEK UYGULAMALAR:

  • Video Kamera ve Video Oynatma Uygulaması: Bu uygulamamız ekranımıza  bir adet “Button” bileşeni, bir adet “Camcorder” bileşeni ve çektiğimiz video görüntüsünü görebilmek için de “Videoplayer” bileşeni ekliyoruz. Buton bileşenimizin “Text” özelliğini “VİDEO GÖRÜNTÜSÜ AL” olarak değiştiriyoruz. Blok ekranına geçiyoruz ve aşağıdaki düzenlemeleri yapıyoruz. Burada kullanılan blokları tek tek izah etmiyorum, çünkü önceki bölümlerde yapılan açıklamalar doğrultusunda bileşenler ve özellikleri ve “Blok Kavramı ve Görünümü” bölümüne başvurabilirsiniz.
Burada dikkat edilmesi gereken en önemli nokta “When..Camcorder1..AfterRecording” olay bloğunda, köşede “clip” özelliği vardı; bu özelliğin üzerinde fareyi bekletirseniz “getclip” (cihazın video kamera uygulamasının çektiği video yolunu verir) özelliğini gösteren baloncuk görüntülenir, bu baloncuğun içinden “getclip” bloğunu şeçip yerleştirebiliriz. Biz burada bu değer bloğunu, “VideoPlayer1” bileşeninin “Source” (kaynak veya dosya yolu) değişkenine kilitliyoruz. Böylece çekim bittikten sonra video “VideoPlayer1” içinde görüntülenir. Benim kullandığım cihazda “call..videoplayer1..start” bloğu ile oynatmaya başlaması komutu verildiği halde otomatik başlamıyor bileşenin üzerine dokunup “play” tuşuna basılması gerekiyor.
Video görüntüsünün şekilsiz olmasını ise “VideoPlayer1” bileşenin dikey görüntülemeye ayarlı olmasıdır. Bunu düzeltmek için cihazı çevirdiğimizde ekran bileşenlerinin otomatik olarak yerleşmesi ile yapılabilir. Bu işlem için Dizayn ekranında “Screen1” bileşeni seçili iken “Properties” alanından “ScreenOriantation” özelliğini “Sensor” olarak değiştiriyoruz böylece cihazımızın yönüne göre görüntü ve bileşenlerin yerleşimi otomatik olarak ayarlanacak.
Bu satırları yazarken “VideoPlayer” bileşeninin görüntü yerleşimi ve boyutlandırma sorunları vardı. En yakın zamanda düzeltilmesini diliyoruz.
VIDEO_KAMERA_01.png

VIDEO_KAMERA_02.png

ÖRNEK UYGULAMALAR - Layout Bileşenleri


"Android Yazılımı Artık Çok Kolay"


2. LAYOUT BİLEŞENLERİ İLE ÖRNEK UYGULAMALAR:

Yeni bir proje oluşturuyoruz. “Components” Alanı içinde “Screen1” üzerine tıklıyoruz, ve “Properties” alanı içindeki “AlignHorizontal” (Yatay Hizala) özelliğini “Center” (Ortala) olarak değiştiriyoruz. Böylece ekrana yerleştireceğimiz bileşenler ortalanacak görünümü daha iyi algılanacak.
Sırasıyla “Layout” bölümünden “HorizontalArrangement”(Yatay Yerleşim Düzenleme), “VerticalArrangement” (Dikey Yerleşim Düzenleme) ve “TableArrangement”(Tabloda Yerleşim Düzenleme) bileşenlerini ekrana ekliyoruz. Bu bileşenlerin genel görünümü kare şeklinde kutucuklardır. yapı olarak ise sadece “TableArrangement” içinde bileşen yerleştirirken fark edebileceğimiz; seçili olarak 2 satır ve 2 sütun şeklinde hücreler vardır. Bu bileşenin hücre sayısını “Properties” alanından ayarlayabilirsiniz.
Bileşenlerimizin içine “User Interface” Bölümünden “Button” bileşeni ekliyoruz görüldüğü gibi;
- “HorizontalArrangement”(Yatay Yerleşim Düzenleme) içine yerleştirilen butonlar yanyana yerleşir.
- “VerticalArrangement” (Dikey Yerleşim Düzenleme)içine yerleştirilen butonlar ise üst üste yerleşir. Daha doğru bir anlatımla dikey sıralanır.
- “TableArrangement”(Tabloda Yerleşim Düzenleme) içine yerleştirilen butonların yerleştirme anında görünen hücrelere yerleştiğini fark edeceksiniz.

LAYOUT_01.png
Tüm bu yerleşim bileşenlerinin “Properties” alanında “Width” (Genişlik) ve “Height” (Yükseklik) özelliklerinin olduğunu göreceksiniz. Bu özellikler seçili olarak “Automatic” olarak gelir. Bu özelikler:
  1. Automatic: Bileşenin içine yerleştirilen bileşenlerin boyutu oranında genişlik veya yükseklik otomatik ayarlanır.
  2. FillParent: Bileşen bir üst düzenleme bileşeninin içine doldurur. İç içe birçok düzenleme bileşeni olabileceği gibi bu örnekteki gibi sadece “Screen1” içinde olabilir bu durumda üst düzenleme bileşeni “Screen1” olarka kabul edilir ve o bileşnin içi doldurulur.
  3. Pixels: Boyutu piksel olarak ayarlamak için buraya istediğimiz değeri girebiliriz.

LAYOUT_02.png
Bu bileşenlerin “Visible” (Görünürlük) özelliğini kullanarak programın çalışması esnasında istediğiniz bileşenlerin olduğu gibi düzenleme bileşenin içe yerleştirdiğiniz tüm bileşenlerin de görünür olması veya gizlenmesini sağlayabilirsiniz. Aşağıdaki resimde ilgili bloklar ile  “TableArrangement1” bileşenini gösterip gizleyen bir blok dizisi vardır. Bu bloklar “Button1” bileşeninin “Click” olayına kilitlenmiştir.
LAYOUT_03.png

ÖRNEK UYGULAMALAR - User Interface Bileşenleri


"Android Yazılımı Artık Çok Kolay"

  1. USER INTERFACE BİLEŞENLERİ ORNEK UYGULAMALAR

İlk olarak oluşturduğumuz yeni projenin dizayn ekranında  “Screen1” üzerine, “Layout” bölümünden “TableArrengement” bileşeni ekliyoruz ve bileşenin “Properties” bölümündeki “Columns” değerini “1”, Rows değerini “10”, “Width” değerini “FillParent” “Height” değeini ise “FillParent” yapıyoruz. Bu bize ekranın tüm kenarlarına dayanmış 1 sütunlu 10 satırlı bir tablo ızgarası oluşturur.
“Screen1” bileşenini “Components” alanından seçiyoruz ve “Properties” alanından “Scrollable” (Kaydırma çubuğu kullan) kutucuğunu işaretliyoruz.
Aşağıdaki resimde görüldüğü üzere “Button” ve “TextBox” harici (ilk uygulamamızda bu bileşenler ile ilgili örneğimiz var) tüm bileşenleri sırasıyla tablo ızgarasının en üstünden altına kadar yerleştirelim. “Text” yani etiket olan bileşenlerinde etiketlerini özellikle değiştirmiyoruz ki gözümüzün önünde hangi tür bileşen olduğunu bilelim, uzmanlaştıkça “Properties” alanından düzenlemeleri yaparsınız.

CheckBox: İlk olarak “CheckBox1” bileşenimiz için, işaretli olup olmamasını ekranda uyarı olarak gösteren ve “Notifier1” bileşeninin de kullanılacağı  uygulama blokları oluşturacağız. Blok Ekranına geçiyoruz ve “CheckBox1” bileşenimizin üzerine tıklayıp “When..CheckBox1..Changed” olayını ekliyoruz, ardından “Notifier1” bileşenimize tıklayıp “Call..Notifier1..ShowAlert” ekliyor ve bunu bir önceki olayın içine kilitliyoruz.  “Call..Notifier1..ShowAlert” metodu yanında boş bir “Text” kulakçığı ile gelir. Bu kulakçık “Built-in” altındaki “Text” bloklarının en üstünde bulunan boş yazı (Text) değeri ile doldurulacak.USER_INTERFACE_01.png
Artık uygulamamız çalıştırıldığında “CheckBox1” bileşeninin her seçimi değiştirildiğinde uyarı görüntüleyecek. Bu olayı programın çalışması esnasında ilgi değişkenin değerini seçime göre değiştirmek için kullanabilirsiniz.

Uygulamayı çalıştırıp gözlemleyelim.
USER_INTERFACE_02.png
Aşağıdaki bloklar, oluşturulmuş değişkene, seçime bağlı olarak değer aktarmaktadır.
USER_INTERFACE_03.png
DatePicker: Ekranımızdaki “Datepicker1” bileşenimizi, blok ekranında seçiyoruz ve “When..DatePicker1..AfterDateSet” olay bloğunu ekliyoruz. Ardından “Notifier1” bileşenimize tıklayıp “Call..Notifier1..ShowAlert” ekliyoruz.“Notifier1” bileşenimizin  boş olan kulakçığına “Text” bölümünden “Join” prosedürü ekliyoruz bu prosedür bize “Text” değerlerini arka arkaya birleştirmeye yarar. Resimde görüldüğü üzere “DatePicker1” bileşeninin gün, ay ve yıl değerlerini ekliyoruz. Aralara görünürlüğü kolaylaştırmak için “/” karakteri ekleniyor. Uygulamayı çalıştırdığınızda “DatePicker1” bileşenine tıkladığınızda açılacak olan ekrandan seçtiğiniz tarih bilgileri, uyarı mesajı olarak görüntülenecektir.
USER_INTERFACE_04.png
İmage: Bu bileşenimizin herhangi bir olayı (event) yoktur. Pasiftir yani program akışına müdahale edemez. Bileşenimizde bir resim dosyası görüntülemek için “Media” alanından dosya yükleyip o dosyayı “İmage1” bileşeninin “Properties” alanındaki “Picture” özelliğinden seçip görüntüleme imkanınız var. Ama biz bu resmin internetten yüklenmesini sağlıyacağız. Bunun için blok ekranına gidip “Built-in” bölümün altında bulunan “Screen1” seçiyoruz bu bileşenin bloklarından “When..Screen1..initialize” seçiyoruz. Bu olay bileşenlerin konumlandığı ekran ilk gösteriminde gerçekleşir. Bu olayın altına “image1” bloklarından “Set..image1..picture” bloğunu kilitliyoruz. Bu bloğun sonuna “Text” bloklarından en üstte bulunan değer bloğunu seçiyoruz ve bu bloğu “Set..image1..picture” bloğunun sonuna kilitliyoruz,boş kutucuğa “http://cdn-www.xda-developers.com/wp-content/uploads/2011/12/original.jpg” yazıyoruz. Siz internet üzerindeki herhangi bir resmin url adresini de yazabilirsiniz.
Uygulama çalıştırılınca ilgili resim görüntülenir. Bu işlem sırasında internet bağlantınızın aktif olması gerekir.

USER_INTERFACE_05.png

Label: Bu bileşen adından da anlaşılabileceği gibi herhangi bir bileşeni isimlendirmek için kullanılır. Örneğin “TextBox” bileşenlerinin  yanına konulduğunda o bileşene hangi bilgi girileceğini bildirir. “Label1” bileşenin görünün metnini değiştirmek için, bileşenin “Properties” alanındaki “Text” özelliğini değiştirin. Bu özellik “set..label1..text” bloğu ile de değiştirilebilinir.

USER_INTERFACE_06.png

ListPicker: Bu bileşen bir liste görüntüler demiştik. Liste yi oluşturmak için “Components” alanından “ListPicker1” seçiyoruz ve “Properties” alanında “ElementsFromString” (Liste elemanlarını metin içinden al) bölümüne tırnak içindeki şu metni yazalım “Eleman1, Eleman2, Eleman3, Eleman4” . Bu ifadedeki virgül ile ayrılmış her, kelime bir liste elemanı olacaktır. Programı çalıştırıp “ListPicker1” üzerine dokunursanız size oluşturduğumuz elemanların olduğu bir liste penceresi görüntüler.
USER_INTERFACE_07.png
Elemanlardan birini seçtiğiniz anda blok bölümünde bileşene ait “When..ListPicker1..AfterPicking” olayı oluşur. aşağıda bu olay sonrası “Notifier1” bileşeninde seçilen elemanı gösteren bloklar vardır.
USER_INTERFACE_08.png

ListView: Bu bilşen ListPicker bileşenine benzer bu bileşende içine yazılan elemanları listeler ama liste sürekli görünümdedir. Aşağıdaki bloklarda
bir önceki “ListPicker1” bileşeni gibi bu bileşenin de “When..ListView1..AfterPicking” olayı vardır. Elemanlardan birini seçtiğiniz anda blok bölümünde bileşene ait “When..ListView1..AfterPicking” olayı oluşur. aşağıda bu olay sonrası “Notifier1” bileşeninde seçilen elemanı gösteren bloklar vardır.

USER_INTERFACE_09.png
USER_INTERFACE_10.png

Spinner: Bu bileşenin de “Properties” alanında “ElementsFromString” (Liste elemanlarını metin içinden al) özelliği vardır.Bu özelliği “Seçim1, Seçim2, Seçim3, Seçim4” olarak değiştiriyoruz. Ek olarak “Properties” alanında başka bir özellik olan “Prompt” (Bu özellik açılan liste ekranının başlığı) özelliğini de “Lütfen bir seçim yapın.”  olarak girin.
Bu özellikleri değiştirdikten sonra Blok ekranına geçiyoruz ve “Spinner1” bileşeninin üzerine tıklıyoruz. “ListPicker1” ve “ListView1” bileşeninde yaptığımız gibi bu bileşeninde “When..Spinner1..AfterSelection” olayı var bu bloğun altına aşağıdaki gibi “Notifier1” bileşeninin “showAlert” olayını kilitliyoruz. “Notifier1” bileşeninin “notice” değişkenine de “Spinner1” bileşeninin “Spinner1..Selection” değerini kilitliyoruz.

USER_INTERFACE_11.png
USER_INTERFACE_12.png
Program çalıştırınca bir açılan listede seçilebilecek elemanları görüyor olacaksınız. Herhangi bir elemanı seçtiğinizde “Notifier1” bileşeni bir uyarı notu halinde size bu elemanı gösterecek.


TimePicker: Bu bileşenimiz “DatePicker” bileşeninin saat bilgisi (Saat ve dakika) içeren modelidir. “TimePicker1” butonuna tıkladığınızda saat ve dakika bilgisi içeren değiştirilebilir bir ekran çıkacaktır. Seçili olarak o anki cihaz saati esas alınır.
Bileşenimizi nasıl kullanabileceğimizi görmek için, “TimePicker1” bileşenimizi, blok ekranında seçiyoruz ve “When..TimePicker1..AfterTimeSet” olay bloğunu ekliyoruz. Ardından “Notifier1” bileşenimize tıklayıp “Call..Notifier1..ShowAlert” ekliyoruz.“Notifier1” bileşenimizin  boş olan kulakçığına “Text” bölümünden “Join” prosedürü ekliyoruz bu prosedür bize “Text” değerlerini arka arkaya birleştirmeye yarar. Resimde görüldüğü üzere “TimePicker1” bileşeninin saat (hour), dakika (minute) değerlerini ekliyoruz. Aralara görünürlüğü kolaylaştırmak için “:” karakteri ekleniyor. Uygulamayı çalıştırdığınızda “TimePicker1” bileşenine tıkladığınızda açılacak olan ekrandan seçtiğiniz saat bilgileri, uyarı mesajı olarak görüntülenecektir.
USER_INTERFACE_13.png
PasswordTextBox:Bu bileşen “TextBox” bileşeninin tüm özelliklerini içerir. Farklı olarak içine girilen karakterlerin bir karakter ile maskelemesi yapılır.
Programınızı çalıştırıp bu bileşene klavye ile bir karakter girdiğinizde imleç ilerler ama sizin girdiğiniz karakteri ekrana “.” (nokta) olarak basar.
Şifre girişi veya özel bir kod girişi için bu bileşeni kullanmak idealdir.

Bloklar ( BLOCKS ) Alanı - Diğer Bloklar ( Built-in Altında )


"Android Yazılımı Artık Çok Kolay"



Diğer Bloklar (Bulit-in Altında): Kontrol bileşenleri ve çeşitli değişken ile mantıksal, matematiksel operatörler ve prosedürler gibi blokları kapsar. Renkleri kendilerine özgüdür. Aşağıdaki örnek resimde tüm blokların kendi bölümündeki örnekleri sıralanmıştır, renklerin aynı ve karakteristik olduğuna dikkat edelim.BLOK_PROPERTIES_01.pngBLOK_PROPERTIES_02.png
BLOK_BUILT_IN.png
  1. Control: “İf...Then” ve “İf...Then...Else” şartlı kontrol operatörleri, “for...each”, “while...do” döngüleri ile; çalışan uygulamanın (close application) kapatılması veya o anki aktif ekranın (close Screen) kapatılması işlemleri yerine getiren metodları da barındıran bloklardan oluşur. Temel düzeyde programcılık bilgisi gerektirse de, ingilizce veya türkçe kaynaklardan bu döngüler ve operatörler hakkında bilgi alınabilir.
  2. Logic: Mantıksal değişkenler bu bloklardadır. bir önceki maddede, “İf...Then” ve “İf...Then...Else” şartlı kontrol operatörleri ile beraber kullanılan karşılaştırma blokları da bu bölümdedir.
  3. Math: Matematiksel işlemlerde kullanılan değişken ve metodları içeren bloklar bu bölümdedir. Sayısal tüm değişken işlemleri ve mantıksal karşılaştırmalar için bu alandaki blokları kullanırız. 4 işlem olarak bildiğimiz, toplama, çıkarma, bölme, çarpmanın yanında tüm trigonometrik fonksiyonları da içerir.
  4. Text: “Text” (Metin) olarak tabir ettiğimiz tüm alfanumerik değerleri tutan değişken blokları ve bu bloklar üzerinde çeşitli işlemler (Ekleme, bölme, büyük harfe çevirme, küçük harfe çevirme, metin karakter sayısı…) yapmaya yarayan metod blokları vardır.
  5. Lists: Listeler oluşturma, listeye eleman ekleme, listeden eleman çıkarma, listeyi kopyalama, listeyi bir “*.csv” dosyasına verme veya bir “*.csv” dosyasından veri almaya yarayan metodlar vardır. CSV Dosyaları bir tablo içindeki satır ve sütunların özel ayırıcı ile dosyaya yazılmasından oluşur. Bu dosyalarda satırdaki her hücre genelde “, (Virgül)” ile ayrılır satır sonunda “Windows(enter), MacOS (return)” tuşlarına basılarak alt satıra geçilir. Böyle tablo görünümü tamamlanmış olur. En popülerinden en basitine kadar birçok ofis yazılımı tabloları “*.csv” dosyası olarak kaydetmenize izin verir. Birçok verinin alınacağı elle girmenin zor veya riskli olduğunda, bu dosyalar çok pratiktir. Sonuç olarak blokları kullanarak bu dosyalardan verileri çekebilir siniz.
  6. Colors: İçinde hazır renk değişkenlerinin olduğu bloklar ve istediğinizde RGB kodlarını yazarak kendi renginizi tanımlayabileceğiniz metod blokları buradadır. Bu bloklar örneğin “BackgroundColor” gibi renk özelliği atanan bloklara eklenirler.
  7. Variables: Bu bloklar size programın çalışır olduğu süre kullanabileceğiniz ve her ekrandan (Screen) ulaşabileceğiniz değişkenler oluşturmazı sağlar. Yine bu bloklardan istediğinizde “get” bloğu ile değişkene ulaşabilir veya “set” bloğu ile değişkene yeni değer atayabilirsiniz.
  8. Procedures: Bu bloklarda “procedure” bölüme yazacağınız isimle (yukarıdaki resimde toplu_is_yap adında oluşturulmuş örnek vardır) oluşturabileceğiniz fonksiyon tanımlayabilirsiniz. Siz blok bölümündeki “View” alanına “do..procedure..do” eylemini eklediğiniz ve ismini değiştirdiğiniz anda ki bizim yukarıdaki resimde “toplu_is_yap” yazılmıştır, bu listeye ilgili fonksiyonu çalıştırmanız için gerekli metod hemen eklenir. “do..procedure..result” yazan blokta ise geriye  değer dönecektir.
Bu bloklar için bir örnek hazırladım. Bu prosedür bloklarını anlamanız için pekiştirici olsun istedim çünkü bu alanı iş yükünü azaltmak için sürekli kullanacaksınız.
  • Örneğimizde Dizayn ekranından iki “button” ve 1 adet “textbox” bileşenini ekranımıza ekleyin.
  • “Button1” in text özelliğini “properties” alanında bulun ve oraya “Değer döndür” yazın.
  • “Button2” nin text özelliğini “properties” alanında bulun ve oraya “Sadece işi yap” yazın.
  • “TextBox1” bileşeninin “Width” özelliğini “properties” alanında bulun ve buradaki değeri açılan kutucuktan “Fill Parent” (Üst düzenleme ızgarasını doldur) işaretleyin ve “Ok” tıklayın.
  • Blok bölümüne geçin ve “Button1” ve “Button2” nin “click” olaylarını ekleyin
  • “Procedures” bloğundan önce içinde “result” yazan prosedürü ekleyin adını resimde göründüğü gibi değiştirin. Aşağıdaki ilk resimde görüldüğü üzere; View alanındaki bloğun köşesinde bulunan mavi kutucuğa tıkladığınızda bir baloncuk açılacak ve baloncuğun içinde “input” giriş isminde bir değişken seçmenize yarayacak blok gelecek “input” ve yanında olan “x” olan kutucuğa tıklayın ve buraya “ilk_sayi” yazarak bu bloğu sürükleyerek baloncuğun içindeki “inputs” bloğuna kilitleyin. İkinci değişken için işlemleri tekrarlayın ve “x” yazan yere bu sefer “ikinci_sayi” yazın. Artık ilk eklediğiniz prosedür bloğu ve prosedürler bölümünde bulunan ve bu prosedürü çağırmamıza yarayan bloğun iki değişkeni olduğunu görürsünüz. PROCEDURES_01.png
  • İkinci olarak “Procedures” bloğundan “result” yazmayan prosedürü ekleyin adını resimde göründüğü gibi değiştirin.
  • Diğer blokları “control” blok alanından ve değişkenlere verdiğimiz “10” sayısını “math” blok alanından alın. “Textbox” bileşeninin text özelliğini ilk örneğimizde öğrenmiştik.
-Uygulamanızı deneyebilirsiniz.

PROCEDURES_02.png

Gyroscope Sensor

Gyroscope Sensor ( Jiroskop Sensör ) Kullanıcı arayüzünde görünür olmayan bu bileşen ile Üç boyutlu Açısal Hız ölçümü yapılabilir. Ç...