Ö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.

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.

Ö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.

Ö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.

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.

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.

Ö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.

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.

Aşağıdaki bloklar, oluşturulmuş değişkene, seçime bağlı olarak değer aktarmaktadır.

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.

İ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.

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.

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.

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.

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.

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.

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.

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.

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.
• İ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.

Bloklar ( BLOCKS ) Alanı - Blok Kavramı ve Görünümü

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

1. BLOCKS ALANI:
1. BLOCK KAVRAMI VE GÖRÜNÜMÜ:

“App Inventor 2” de bir önceki bölümde anlatılan dizayn ekranında, “Viewer Alanı” na yerleştirilmiş olan tüm nesnelerle ilgi tüm programatik özellikler bu alanda yani “Blocks” alanında görüntülenen bileşenin üzerine tıkladığımızda sağ tarafta beliren bir liste içinde görüntülenir. Kontrol edebildiğimiz veya programlamaya katabildiğimiz bileşen özellikleri bileşenlere göre değişir ama temelde aşağıdaki başlıklar altındadır.

• Olaylar (Events): İlgili bileşen ile ilgili bir durumun meydana gelmesidir. Bu durumlar işletim sistemi aracılığı ile programa iletilir. Bir butona basmak için cihazın dokunmatik ekranına dokunduğunuzda ve çektiğinizde oluşan “OnClick” durumu gibi izlenebilen ve kullanıcı veya programın akışı sırasında meydana gelen olaylardır. Bir Screen ekranının “Close” metodu ile kapatılması. Olaylar içine metodları “Methods” alacak şekilde yapılmıştır. Aşağıdaki resimde şekli görünmektedir. Renklerine dikkat, tüm Olayla ilgili bloklar aynı renktedir.

• Metodlar (Methods): Bu özellik ilgili bileşen ile ilgili hazırlanmış metodları içerir. Yani bileşenin herhangi bir işini yapması gibi yukarıda resimde bize hazırlanan iki farklı metod görünüyor. Üstteki TextBox bileşeninin “Text” özelliğine sonuna getirilecek bileşeni atamak için hazır beklemektedir. Bu methos bir olay ile tetiklenirse TextBox bileşeninin “Text” özelliğine istenilen değeri yazacaktır. Alttaki metod örneği ise yine Camera bileşeninin “TakePicture” işlemini yapmasını yani fotograf çekmesi işlemini yaptıracatır. Methodlar genelde Mor renklidir. Fakat AppInventor un bizim için hazırladığı ve bileşenlerin özelliklerine değer atamaya yarayan “set” blokları da bir metod dur. Şekli aynıdır renkleri farklıdır.
• Bileşen Özellikleri (Properties): Bir önceki bölümde dizayn ekranının sağında olan ve “Components” alanındaki bileşenlere tıklayınca görüntülen “Properties” alanı içinde olan özelliklerdir bunlar. Bazı bileşen özellikleri sadece bloklarda görüntülenebilir dizayn ekranında görüntülenmez. Butonun üzerindeki etiket yani yazı, arka plan rengi, boyutlar gibi. Bu özellikler koyu yeşil “set” blokları ile değiştirilebilir veya açık yeşil özelik değerleri ile başka bir değişkene aktarılır. örnek resimlerde Buton bileşeninin ilgili blokları görünmektedir.