Düğme, Web Uygulamaları düzenleyicisinin en basit öğesidir ancak tamamlanmış uygulamanın arayüzündeki ana rollerden birini oynar. Üstelik bugün sizlere sadece butonlardan oluşacak bir uygulama yapmanızı öneriyoruz. Görev biraz garip görünebilir, ancak bunu yaparsanız, düğmeleri nasıl özelleştireceğinizi, editörle çalışmanın temellerini ve tüm platformun mantığını anlamayı öğreneceksiniz.

Alice Harikalar Diyarında kitabından yola çıkarak kısa bir test yapalım. Kullanıcıların Alice'in Cheshire Kedisi ile ilk nerede tanıştığını hatırlayıp hatırlamadığını öğrenelim.

Uygulamamız şunlara sahip olacaktır:

  1. Soru metni: Alice, Cheshire Kedisi ile ilk nerede tanıştı?
  2. Seçim düğmeleri: Deli Çay Partisi, Düşes Evi, Ahşap, Kroket Zemin. Kullanıcı yanlış cevabı seçerse - onunla birlikte olan düğme kaybolur, kullanıcı doğru olanı seçerse - yanlış cevapları olan tüm butonlar aynı anda kaybolur.
  3. Cevabın doğru olup olmadığını söyleyen açılır mesajlar.

Bu arada, hangi seçeneğin doğru olduğunu hatırlıyor musunuz?

Bir düğme nasıl oluşturulur

"Düğme" öğesini fare işaretçisiyle (sol tuşa tıklayıp basılı tutarak) düğmeyi yerleştirmek istediğiniz alana sürükleyin.

Olası cevapların sayısına göre dört düğme eklemeniz gerekir.

Düğme görünümünü özelleştirme

İlk düğmeye bir kez tıklayın - ayarlar penceresi açılacaktır. Kendinizi düğmelerin görünümünden sorumlu olan "Bak ve Hisset" sekmesinde bulacaksınız.

1. Aşağıdaki alanları düzenleyin:

  • Etiket: düğme metni - ilk yanıtı girin: "Çılgın Çay Partisi";
  • Simge: düğme simgesi - "Simge seç" e tıklayın ve beğendiğinizi seçin (şimdi 2500'den fazla var);
  • Boyut: düğme boyutu - düğmeyi büyütmek için “Büyük” olarak ayarlayın;
  • Ad: Bu, uygulamanızdaki diğer öğeler tarafından düğmenin "görüldüğü" addır; her düğmenin benzersiz bir adı olmalıdır - düğmeyi "btn-mad_tea" olarak adlandırın.

Alanları düzenlediğinizde, pencerenin üst kısmındaki görüntü, ayarlar uygulandıktan sonra düğmenin nasıl görüneceğini gösterecek şekilde değişecektir.

2. Tüm alanları doldurduğunuzda - "Kaydet"e tıklayın.

  1. Düğmelerin geri kalanını, ilkine benzer şekilde, adları kullanarak yapılandırın: btn-duchess_h, btn-wood, btn-croquet_g.
  2. Uygulamanızdaki değişiklikleri kaydetmek için "Değişiklikleri kaydet"i tıklayın - aksi takdirde, sayfayı yenilediğinizde veya düzenleyiciyi kapattığınızda düğmeler kaybolacaktır.

Tetikleyicileri ve olayları ayarlama

Şimdi düğmelerin eylemlerini ayarlamanız gerekiyor. Doğru cevabı olanla başlayalım - "Düşes'in Evi" . Göreviniz Web Uygulamaları düzenleyicisine "açıklamak":

  • düğmenin tetiği nedir - tam olarak neye tepki vermesi gerektiği anlamına gelir: basıldığında;
  • bu durumda hangi olay meydana gelir: düğmeler kaybolur;
  • bu olayın gerçekleştiği yerde, hangi öğeler değişir: diğer düğmeler.

“Düşes Evi” düğme ayarlarına geri dönün ve Tetikleyiciler sekmesine gidin. Bunun için eklenen tüm tetikleyiciler görüntülenecektir:

  1. Şimdi sadece bir tane var - "OnClick". Otomatik olarak eklenir ve düğmenin üzerine tıkladığınızda harekete geçeceği anlamına gelir (ki bu tam olarak ihtiyacınız olan şeydir).
  2. "OnClick"e ek olarak, düğme için başka tetikleyiciler de mümkündür. Açıklama içeren tam bir liste, platform belgelerindedir.

Şimdi etkinlikle ilgili bilgileri belirtmeniz gerekiyor (bunlardan üç tanesine sahip olacaksınız - her düğme için bir tane). "OnClick"in yanındaki "+" işaretini tıklayın. Etkinlik ayarları penceresi açılacaktır.

"Hedef bileşen" alanında, olayın nerede gerçekleşeceğini, "Eylem" alanında - ne tür bir olay olacağını belirtmeniz gerekir.

Tüm yanlış cevapları gizle

Çılgın Çay Partisi düğmesini gizleyecek bir etkinlik ekleyin:

  1. "Hedef bileşen" alanına tıklayın ve benzersiz btn-mad_tea adıyla bulun. Eylem alanında, bu durumda uygun olayı seçin - “Düğmeyi Gizle”.
  2. "Kaydet"e tıklayın.

Geri kalan düğmeleri de aynı şekilde gizlenecek şekilde yapılandırın.

  1. İşiniz bittiğinde “Düşesin Evi” düğmesinin tetikleyicileri listesi bu şekilde görünmelidir.
  2. Değişikliklerinizi kaydetmek için “Kaydet”e tıklayın.

Şimdi her şeyin çalıştığından emin olmanız gerekiyor.

  1. Değişikliklerinizi kaydedin.
  2. Uygulamayı yayınlamak (İnternet'e yerleştirmek) için düğmeye basın, "Geliştirme" seçeneğini seçin.
  3. Uygulamanızın simgesine gidin - yeni bir sekmede açılacaktır.

Uygulamaya gidin ve doğru seçeneği belirlediğinizde diğer düğmelerin kaybolduğundan emin olun.

Tıklamada yanlış cevapları gizle

Şimdi yanlış cevaplı "Çılgın Çay Partisi" butonunu kullanıcı tıkladığında ortadan kaldıralım. Bu durumda, hem tetik (basma) hem de olay (kaybolma) aynı düğmeye aittir - sadece onunla çalışmanız gerekir.

Düğme ayarlarını açın, “Tetikleyiciler” sekmesine gidin, “onClick” tetikleyicisine yeni bir olay ekleyin. "Hedef bileşen" alanında, düğmenin kendisi için bir olayı etkinleştirdiğini belirtmek için "Bu bileşen (kendi)" öğesini seçin. "Eylem" alanının değeri önceki örnekteki ile aynıdır - "Düğmeyi Gizle".

Tüm değişiklikleri kaydedin ve uygulamayı yayınlayın, uygulama sekmesine geçin ve yenileyin. Her şeyin amaçlandığı gibi çalıştığını kontrol edin:

Şimdi Ahşap ve Kroket Zemini ayarlayın. Kaydedin, yayınlayın ve tekrar test edin.

Düğme türleri

Harika, cevaplar işe yarıyor. Bir soru eklemenin zamanı geldi. Elbette, Appmaster.io'nun bunun için özel öğeleri var, ancak görevimizi hatırlıyorsunuz - düğmeler ve başka bir şey değil. Öyleyse bir tane daha ekleyelim. Bu sefer - ana tuvale değil, sayfanın üst kısmına:

Daha eğlenceli hale getirmek için soruyu bu ekran görüntüsündeki gibi doldurun:

Şimdi farklı düğme türleri için renk şemalarını kullanarak "renklendirin": ayarlara gidin ve "Tür" alanındaki değeri başka bir değere değiştirin.

Bunu böyle aldık, ancak seçeneğinizi seçebilirsiniz, düğmenin renk şeması çalışmasını etkilemez:

Şimdi son göreve geçelim - kullanıcı için bir mesaj ayarlama.

Daha zor görev

Bir mesajı ekranda farklı şekillerde görüntüleyebilirsiniz. En sıra dışı olanlardan birini seçtik:

- Öncelikle kullanıcı doğru cevabı verdiğinde soruyu içeren butonların otomatik olarak devre dışı kaldığından emin olalım. Griye dönecekler ve tıklamalara yanıt vermeyi bırakacaklar. Bunu yapmak için henüz düşünmediğimiz Etkinleştir (Devre Dışı Bırak) işlevini ve zaten tanıdık olan "onClick" i kullanıyoruz.

- Sonra yeni bir tetikleyiciyi ele alacağız - düğmenin durumu değiştiğinde tetiklenen onStateChange. Bu tetikleyiciyi "?" öğesine atayalım. - ve mesaj üzerinde görüntülenecektir.

Devre dışı bırakma düğmeleri

"Etkinleştir" alan seçiciyi değiştirerek düğmeyi ayarlarında manuel olarak etkinleştirebilir veya devre dışı bırakabilirsiniz:

Otomatik geçişi ayarlamak için "Duchess' House" düğme tercihlerini açın ve bir "onClick" tetikleyicisi ekleyin. "Hedef bileşen" alanında, "Eylem" - "Devre Dışı Bırakma Düğmesi" alanlarındaki soru düğmelerinden birini seçin. Soru içeren tüm düğmeler için tekrarlayın. Şöyle görünmelidir:

Tüm değişiklikleri kaydetmeyi, yayınlamayı ve uygulamanın düzgün çalışıp çalışmadığını kontrol etmeyi unutmayın.

Şimdi mesajın başlangıcını "?" Düğmesine bağlayalım. ("btn_qqq" adını verdik). Buna "onStateChange" tetikleyicisini ekleyelim. Düğmenin durumu değiştiğinde, örneğin kapandığında etkinleşir.

"Hedef bileşen" alanında, "Uygulama"yı seçin (mesaj uygulama penceresinde açılır), "Eylem" alanında - "UI Mesajını Göster" (kullanıcıya bir mesaj gösterin).

  1. "Mesaj stili" alanında, durumunuza en uygun olanı seçin. Bizim durumumuzda, bu "Başarı" - başarılı tamamlama hakkında bir mesaj.
  2. "Başlık" ve "İçerik" alanlarını doldurun - kullanıcıya cevabın doğru olduğunu bildirin veya sadece güzel bir şeyler yazın.

Kaydet, yayınla ve test et.

Sonuç

Doğru seçenek seçildiğinde, yanlış cevapları olan butonlar gizlenmeli, sorunun metni soluklaşmalı ve bir onay mesajı gelmelidir.


Tabii ki mesajı doğru cevapla butonuna bağlayarak daha kolay özelleştirmek mümkündü. Her ne kadar bugün kolay yollar aramıyoruz. Üstelik, bunu bizim talimatlarımız olmadan yapacak kadar zaten biliyorsunuz. Yanlış cevabı seçtiğinizde açılacak olan hata mesajını kişiselleştirmeye çalışın. Şöyle görünmelidir:

Bu talimatın Appmaster.io'yu daha iyi tanımanıza yardımcı olduğundan eminiz. Ancak net değilse (veya tam tersine, çok basit), ihtiyacınız olan talimatlar hakkında teknik desteğimizin telgraf kanalına yazın. Onları yazacağız!

Studio.appmaster.io hakkında daha ayrıntılı bilgi arıyorsanız, lütfen belgelerimize bakın.