App Inventor ekran geçişi: Uygulamada ekranlar arası geçiş nasıl yapılır?

App Inventor ekran geçişi, uygulamaya birden fazla ekran ekleyip bu ekranları bloklarla birbirine bağlayarak yapılır. Bunun için önce Designer bölümünden yeni ekran oluşturulur, ardından bir düğmenin Button.Click olayına open another screen bloğu bağlanır.

İki ekranlı bir bilgi yarışmasında ilk ekran soruya başlamak için, ikinci ekran ise soruyu göstermek için kullanılabilir. Ekranlar arasında geçiş yaparken ekran adlarını doğru yazmak ve geri dönüşte mevcut ekranı kapatmak, uygulamanın akışını daha anlaşılır tutar.

App Inventor projesine yeni ekran nasıl eklenir?

Yeni ekran eklemek için Designer bölümünün üst araç çubuğundaki Add Screen seçeneğini kullanmalısın. Designer, Türkçe karşılığıyla tasarım ekranıdır; Add Screen ise ekran ekleme anlamına gelir. MIT App Inventor belgelerinde bu seçeneğin Designer penceresinin üst bölümünde yer aldığı ve seçildiğinde yeni ekran için ad girilen bir pencere açıldığı belirtilir.

1. MIT App Inventor’da projen açıldığında Designer görünümüne geç.
2. Üst bölümdeki Add Screen düğmesine bas.
3. Açılan alana ekranın amacını anlatan bir ad yaz. Örneğin bilgi yarışmasının soru ekranı için QuizScreen kullanılabilir.
4. Yeni ekran oluşturulduğunda App Inventor tasarım görünümünü bu ekrana geçirir. Ekrana düğme, etiket ve diğer bileşenleri Palette bölümünden ekleyebilirsin.

Yeni projelerde başlangıç ekranı otomatik olarak Screen1 adıyla oluşturulur. Uygulama açıldığında ilk görünen ekran Screen1 olur. Sonradan eklediğin ekranlar, örneğin Screen2, bloklarla açılır. Screen1’in adı değiştirilemez; yeni ekran adını oluştururken dikkatli seçmek gerekir çünkü ekran adı daha sonra bloklarda kullanılacak kimliği belirler. Ekranın uygulama içinde görünen başlığı ise adından farklıdır ve Properties bölümündeki Title özelliğinden düzenlenebilir.

Ekran adını bloklarda birebir aynı yazmalısın. Screen2, screen2 ve Screen_2 aynı adlar değildir. Büyük ve küçük harfleri kontrol et, ekran adlarında boşluk kullanmak yerine QuizScreen veya Question_Screen gibi anlaşılır adlar seç. Böylece hangi ekranın ne işe yaradığını bloklara bakarken daha kolay anlayabilirsin.

Bir düğmeyle başka ekran nasıl açılır?

Bir düğmeye basıldığında başka ekranı açmak için Control kategorisindeki open another screen bloğunu kullanmalısın. Control, Türkçe karşılığıyla denetim kategorisidir; open another screen ise başka ekranı aç anlamına gelir. Bu blok, Designer bölümünde oluşturulmuş ekranın adını alır.

1. Designer bölümünde Screen1’e bir Button ekle ve düğmenin yazısını “Başla” yap.
2. Blocks bölümüne geç.
3. Button bileşeninden when Button.Click olay bloğunu al. Türkçe anlamı, düğmeye tıklandığında şeklindedir.
4. Control kategorisinden open another screen bloğunu bu olayın içine yerleştir.
5. Bloğun screenName alanına hedef ekranın adını yaz veya ilgili ekran adını seç. Örnekte bu ad Screen2 olsun.

when StartButton.Click
do
  open another screen screenName "Screen2"

Bu akış çalıştığında Başla düğmesine dokunman, Screen2 ekranını açar. Ekran açılmıyorsa hedef ekran adının gerçekten Screen2 olup olmadığını ve büyük küçük harfleri kontrol et.

Geri dönmek için yeniden open another screen kullanmak yerine close screen bloğunu kullanmalısın. Close screen, Türkçe karşılığıyla mevcut ekranı kapat anlamına gelir. Böylece açılmış olan Screen2 kapanır ve uygulama onu açan önceki ekrana döner. Aynı ekranı tekrar tekrar açmak yerine mevcut ekranı kapatmak, ekranların gereksiz biçimde üst üste açılmasını önlemeye yardımcı olur.

• Yanlış ekran adı: Blokta yazan ad ile Designer bölümündeki ekran adını karşılaştır.
• Büyük ve küçük harf farkı: Screen2 ile screen2 yazımlarını karıştırma.
• Geri düğmesi: Geri dönüşte yeni bir open another screen bloğu yerine close screen kullan.

Start value ile ekranlar arasında veri nasıl gönderilir?

Başka ekrana veri göndermek için open another screen with start value (başlangıç değeriyle başka ekran aç), gönderilen bilgiyi almak için get start value (başlangıç değerini al) bloklarını birlikte kullanmalısın.

İki ekranlı bir bilgi yarışması örneğinde, Screen1 üzerinde oyuncunun adını yazacağı bir TextBox ve ekranı açacak bir Button bulunabilir. Başla düğmesinin Click (tıklanınca) olayında hedef ekran olarak Screen2, gönderilecek değer olarak da TextBox.Text (metin kutusundaki yazı) seçilir. open another screen with start value bloğu, değeri açılan ekrana aktarır.

Screen2 açıldığında Screen2.Initialize (Screen2 başlatıldığında) olayını kullanarak get start value bloğundan gelen değeri alabilirsin. Bu değeri Label.Text özelliğine, başına “Merhaba ” metnini ekleyerek yazdırabilirsin. Başlangıç değeri hedef ekranın açılış akışında okunmalıdır. Bloğu başka bir olaya koyarsan değer henüz alınmadan Label bileşenini değiştirmeye çalışabilir ve beklediğin metni göremeyebilirsin.

Screen1:
when ButtonStart.Click (Başla düğmesine tıklanınca)
do
  open another screen with start value (başlangıç değeriyle başka ekran aç)
    screenName = "Screen2"
    startValue = TextBoxName.Text (metin kutusundaki yazı)

Screen2:
when Screen2.Initialize (Screen2 başlatıldığında)
do
  set LabelGreeting.Text (etiket metni) to
    join "Merhaba " and get start value (başlangıç değerini al)

when ButtonBack.Click (Geri düğmesine tıklanınca)
do
  close screen (ekranı kapat)

TextBox içine Deniz yazıldığında Screen2 üzerindeki Label bileşeninde Merhaba Deniz görünür. Geri düğmesinde close screen (ekranı kapat) kullanmak, açılan Screen2'yi kapatıp önceki ekrana dönmeyi sağlar. Bir ekranı tekrar tekrar açmak yerine geri dönüşte kapatmak, kaynak kullanımını daha kontrollü tutmaya yardımcı olabilir.

Çok ekran yerine tek ekranda görünürlük ne zaman kullanılır?

Küçük uygulamalarda bazı bölümleri aynı ekran içinde görünür ve gizli yapmak, ekranlar arası geçiş ihtiyacını azaltabilecek bir seçenektir. Örneğin giriş bölümü, soru bölümü ve sonuç bölümü aynı Screen1 üzerinde farklı VerticalArrangement bileşenleri içinde tutulabilir.

Designer bölümünde bir VerticalArrangement seçerek Properties alanındaki Visible (görünür) özelliğini değiştirebilirsin. Blocks bölümünde ise set VerticalArrangement1.Visible to false (VerticalArrangement1'i gizle) ve set VerticalArrangement2.Visible to true (VerticalArrangement2'yi göster) bloklarıyla hangi bölümün görüneceğini belirleyebilirsin. Visible özelliği kapatıldığında düzenleme bileşeni ve içindeki bileşenler ekranda görünmez.

Bu yaklaşım, birkaç bölüm arasında ilerlenen basit akışlarda anlaşılır olabilir. İçerikler birbirinden bağımsız çalışıyor, her bölümün kendi açılış ve geri dönüş davranışı bulunuyor ya da ekranlar arasında çok sayıda veri taşınıyorsa ayrı ekranlar daha düzenli bir yapı sağlayabilir. Ekran sayısı arttıkça ortak verilerin nasıl paylaşılacağına, geri dönüşün hangi blokla yapılacağına ve telefon üzerindeki çalışma durumuna dikkat etmelisin. Kesin bir yavaşlama varsaymak yerine uygulamayı Companion ile denemek ve gereksiz ekranları kapatmak daha sağlıklı bir değerlendirme sunar.

• Bölümler bağımsız akışlara sahipse ayrı ekranları değerlendirebilirsin.
• Bölümler aynı verileri sık kullanıyorsa tek ekran ve Visible özelliği daha kolay yönetilebilir.
• Geri dönüş adımları çoğalıyorsa ekranların açılma ve kapanma sırasını test etmelisin.
• Telefon testi sırasında geçiş, görünürlük ve veri aktarımını birlikte kontrol etmelisin.

Uygulamayı telefonda nasıl test edip hataları bulabilirsin?

Uygulamayı telefonda test etmek için MIT App Inventor’ın Connect > AI Companion bağlantı akışını kullanırsın. Önce projeni aç, telefona MIT App Inventor Companion uygulamasını yükleyip çalıştır ve bilgisayar ile telefonu aynı Wi-Fi ağına bağla. Ardından üst menüden Connect ve AI Companion seçeneklerini sırayla seç. Bilgisayarda bir QR kod ve bağlantı kodu görünür. Companion içinden Scan QR code seçeneğiyle QR kodu okutabilir veya ekrandaki kodu yazarak Connect with code düğmesine dokunabilirsin. Bağlantı kurulduğunda uygulamanın canlı test görünümü telefonda açılır ve yaptığın bazı değişiklikler telefona yansır. MIT App Inventor’ın resmi telefon bağlantısı yönergelerinde bu akış ayrıntılı olarak açıklanır.

İki ekranlı bilgi yarışması örneğini test ederken şu sırayı izle:

1. Screen1 üzerinde adını yaz ve gönderme düğmesine dokun.
2. Uygulamanın Screen2 ekranını açtığını kontrol et.
3. Screen2 açıldığında çalışan Screen2.Initialize olayının gönderilen bilgiyi aldığını incele.
4. Ekrandaki metnin, örneğin “Merhaba, Deniz!” şeklinde oluştuğunu kontrol et.
5. Geri düğmesine dokun ve close screen, yani “ekranı kapat” bloğuyla Screen1 ekranına dönüldüğünü gör.

Blok akışının mantığı aşağıdaki gibi olmalıdır:

Screen1.GönderButton.Click
  open another screen with start value
    screenName: "Screen2"
    startValue: AdKutusu.Text

Screen2.Initialize
  set MerhabaEtiketi.Text to
    join "Merhaba, " get start value

Screen2.GeriButton.Click
  close screen

Hedef ekran açılmıyorsa open another screen, yani “başka ekran aç” bloğundaki ekran adını kontrol et. Buradaki Screen2 metni, projenin ekran adındaki büyük ve küçük harflerle aynı olmalıdır. İkinci ekranda ad boş görünüyorsa Screen1 tarafındaki open another screen with start value bloğunda startValue, yani “başlangıç değeri” alanını ve Screen2 tarafındaki get start value, yani “başlangıç değerini al” bloğunu incele. Bu değer, Screen2.Initialize olayının içinde kullanılmalıdır.

Geri düğmesi önceki ekrana dönmek yerine yeni bir ekran açıyorsa bu düğmedeki open another screen bloğunu kaldırıp close screen bloğunu ekle. Böylece yeni bir ekran yığını oluşturmadan açık olan ekran kapanır ve önceki ekran görünür.

Sık Sorulan Sorular

open another screen ile close screen arasındaki fark nedir?

open another screen yeni bir ekran açar ve uygulamayı o ekrana taşır. close screen ise açık olan ekranı kapatarak önceki ekrana dönülmesini sağlar.

Start value ile gönderilen bilgi neden ikinci ekranda boş görünebilir?

Bilgi, ilk ekrandaki startValue alanına konulmadığında veya ikinci ekranda Screen2.Initialize içinde get start value bloğu kullanılmadığında boş görünebilir.

Geri düğmesine basınca neden yeni bir ekran açmak yerine close screen kullanılmalıdır?

Geri düğmesinde close screen kullanmak, açık ekranı kapatıp önceki ekrana dönmeyi sağlar. Yeni bir ekran açmak, gereksiz ekranların art arda birikmesine yol açabilir.

Her bölüm için ayrı bir ekran oluşturmak gerekir mi?

Her bölüm için ayrı ekran oluşturmak gerekmez. İçeriğin yapısına göre tek ekranda bileşenlerin görünürlüğünü değiştirerek de farklı bölümler gösterebilirsin.

MIT App Inventor uygulaması telefonda nasıl test edilir?

Uygulama, bilgisayardaki proje ile telefondaki MIT App Inventor Companion uygulaması aynı bağlantı üzerinden eşleştirilerek test edilir. Bunun için Connect menüsünden AI Companion seçilir, ardından QR kod okutulur veya bağlantı kodu girilir.

Test sırasında her ekranı sırayla deneyip hangi olayın çalıştığını kontrol etmek, hatanın tasarımda mı yoksa blok akışında mı olduğunu daha kolay anlamanı sağlar.