Wix Blocks Eğitimi: Sayaç Widget'ı Oluşturma
11 dakikalık okuma
Wix Blocks tüm Wix Studio kullanıcılarına açıktır. Blocks'a erişmek için Wix Studio'ya katılın
Bu eğitimde bir sayıyı artırıp azaltabileceğiniz bir sayaç widget'ının nasıl oluşturulacağı gösterilecektir. Wix Blocks ile yapabileceklerinizi bu basit widget üzerinden açıklamaya çalışacağız.
Bu widget'ı sıfırdan oluşturmanızı öneririz, ancak bunda zorlanırsanız Wix hesabınızda widget şablonunu Blocks'ta görüntüleme ve düzenleme olanağınız bulunmaktadır.
1. Adım | Blocks'ta yeni bir Widget oluşturun
- Boş bir Blocks uygulaması oluşturun.
- Varsayılan olarak oluşturulmuş bir widget yoksa, uygulamanıza bir widget ekleyin.
Ekran görüntüsünü göster
2. Adım | Düzenleyici ekleyin
Düzenleyici, duyarlılığa izin veren ve diğer ögeleri düzenli tutan bir kapsayıcıdır. Düzenleyici eklemek için:
- Üst menüdeki Öge Ekle simgesine tıklayın.
- Düzen -> Esnek Kutular -> Düzenleyiciler seçeneklerine tıklayın.
- Üç bölümlü dikey düzenleyiciye tıklayın.
Ekran görüntüsünü göster
3. Adım | Widget ögelerini ekleyin
Düğmeleri ekleyin
- Üst menüdeki Öge Ekle simgesine tıklayın.
- Düğmeler'e tıklayın.
- Düğmelerden birini düzenleyicinin sağ bölümüne sürükleyip bırakın.
Ekran görüntüsünü göster
4. Metni ve Simgeyi Değiştir'e tıklayın.
5. Açılır listeden Sadece metin'i seçin.
6. Metni "+" olarak değiştirin.
7. Denetçi panelindeki Tasarım simgesine tıklayın ve Metin'i seçin.
8. Stil'e tıklayın ve açılır listeden 6.Başlık'ı seçin.
9. Sol bölüme başka bir kare düğme sürükleyip bırakın.
10. Metni "-" olarak değiştirin.
Ekran görüntüsünü göster
Ortadaki sayıyı ekleyin
- Öge Ekle düğmesine tıklayın ve Metin'i seçin.
- 32px Title ögesini düzenleyicinin orta bölümüne sürükleyip bırakın.
- Metni "0" olarak değiştirin ve ortaya hizalayın.
Ekran görüntüsünü göster
Kimlikleri değiştirin
- Ekranın sağ altındaki Özellikler ve Olaylar simgesine tıklayın.
- Artırma düğmenizin kimliğini incBtn olarak değiştirin.
- Azaltma düğmenizin kimliğini decBtn olarak değiştirin.
- Metin ögenizin kimliğini countTxt olarak değiştirin.
Ekran görüntüsünü göster
4. Adım | Ögelerinize kod ekleyin
Şimdi widget'ın görevini yapmasını, yani düğmelere tıklandığında ileri ve geri saymasını sağlayacağız:
1. Widget'ınıza kod eklemek için Kod sekmesine tıklayın veya ekranınızın alt kısmına gidin.
Ekran görüntüsünü göster
2. Aşağıdaki kodu onReady() işlevinin öncesine ekleyin.
1//Sayacı 0'a ayarlayın
2let count = 0;
3//Metin ögenize sayım işlemi atayın
4function render() {
5 $w('#countTxt').text = count.toString(); }
6
7//Sayaç değerine belirli bir miktar ekleyin ve widget API'sinde bir etkinliği tetikleyin function addToCount(amount) { count += amount; render(); }
3. Aşağıdaki kodu onReady () işlevinize ekleyin.
1 $w('#incBtn').onClick(() => {
2 addToCount(1);
3 });
4
5$w('#decBtn').onClick(() => {
6 addToCount(-1); });
7
8render();
4. Önizleme düğmesine tıklayarak widget'ınızın çalışmasını kontrol edin.
5. Adım | Widget API ile widget'ınızı özelleştirilebilir hale getirin
Kullanıcının (widget'ı yükleyen bir site sahibinin) widget'ı kendi ihtiyaçlarına göre özelleştirebilmesi için bir widget API'si tanımlayabilirsiniz. Bu API'de özellikler, etkinlikler ve dışa aktarılan işlevler bulunabilir.
Sayacın adım ("step") miktarına site sahibinin karar verebilmesini istediğinizi varsayalım. Bu durumda site sahibi adım miktarının 2 olmasını tercih ederse, sayım 0, 2, 4, 6 vb. şeklinde ilerleyecektir.
Widget API'sine "step" adında bir özellik tanımlayabilir ve kullanıcının bunu özelleştirmesine izin verebilirsiniz.
"step" özelliği tanımlayın
- Widget API simgesine tıklayarak Widget API panelini açın
- Özellikler bölümünde Yeni Özellik Ekle'ye tıklayın (veya bölümün üzerine gelin ve simgesine tıklayın).
Ekran görüntüsünü göster
3. Özelliğinize "step" adını verin, Sayı türünü seçin ve varsayılan değer olarak 1 girin.
Ekran görüntüsünü göster
Kodununuzu yeni özelliği içerecek şekilde değiştirin
Düğmelere tıklandığında addToCount işlevinin varsayılan değer olan 1 yerine yeni özelliğinizdeki adım miktarı ile çağrılması için kodunuzda gerekli değişiklikleri yapın.
Özelliklerinize erişmek için $widget.props kullanın (Velo otomatik tamamlama önerilerine dikkat edin).
1$w.onReady(function () {
2 $w('#incBtn').onClick(() => {
3 addToCount($widget.props.step);
4 }); $w('#decBtn').onClick(() => {
5 addToCount(-$widget.props.step);
6 });
7
8 render(); });
Özelliğinizi önizleme modunda test edin
- Önizleme moduna geçmek için Önizleme'ye tıklayın.
- API Özelliklerini Test Et'e tıklayın.
Ekran görüntüsünü göster
3. Adım miktarını değiştirin ve widget'ınızın nasıl çalıştığını kontrol edin.
Ekran görüntüsünü göster
Widget API'nize genel etkinlik ekleyin
Widget API'nize sizin tercihinize göre tetiklenecek bir etkinlik ekleyebilirsiniz.
Örneğin, "count" değişkeninin (sayaç değerinin) değişmesi ile tetiklenen bir etkinlik eklemek için:
- Widget API simgesine tıklayarak Widget API panelini açın.
- Etkinlikler bölümündeki Yeni Genel Etkinlik Ekle'ye tıklayın (veya ilgili bölümün üzerine gelin ve simgesine tıklayın).
- Etkinliğinize "change" adını verin ve bir açıklama ekleyin.
Ekran görüntüsünü göster
4. Sayaç değeri değiştiğinde etkinliğin tetiklenmesi için aşağıdaki satırı addToCount() işlevinize ekleyin.
1$widget.fireEvent('change', count);
5. Şimdi, addToCount() işleviniz şöyle görünmelidir:
1function addToCount(amount) {
2 count += amount;
3 render();
4 $widget.fireEvent('change', count);
5}
Etkinliğinizi site editöründe yakalayın
Widget'ınızı web sitenize yükledikten sonra etkinliğinizi site editöründe yakalamanız gerekir (bu süreç 8. adımda açıklanacaktır).
Widget API'nize genel işlev ekleyin
Site sahiplerinin sayacı kolayca sıfırlayabilmeleri için bir reset() işlevi oluşturup dışa aktarın.
- Widget API simgesine tıklayarak Widget API panelini açın.
- İşlevler bölümünde Yeni Genel Hizmet Ekle'ye tıklayın (veya bölümün üzerine gelin ve simgesine tıklayın).
- Varsayılan adı foo() olan yeni bir boş işlev oluşturulur ve işlevinizi bir sitede kullanacak herkes tarafından okunabilecek bir JSDoc (not satırları) atanır.
Ekran görüntüsünü göster
4. Varsayılan işlev kodu yerine aşağıdaki kodu yapıştırın:
1export function reset(){
2 //Bu işlev genel API'min bir parçasıdır
3 count = 0;
4 render();
5}
5. JSdoc'u güncelleyin. Not: İşlev notlarında aşağıdaki formatı korumalısınız.
1/**
2*@function
3*@description Sayıyı 0'a ayarlar ve render eder.
4*@returns nothing
5*/
İpucu
Ayrıca tam tersi şekilde ilerleyebilirsiniz. Üst satırlarda uygun JSdoc ile dışa aktarılan tüm işlevler sağdaki Widget API panelinde görünecektir. Dolayısıyla, Yeni Genel Hizmet Ekle'ye tıklayarak şablonu almak yerine, doğrudan kodunuzu yazabilirsiniz.
6. Adım | (İsteğe bağlı) Widget'ınızın düzenleme-zamanı davranışını yapılandırın
Yapılandırma sekmesi, site sahiplerine editörde düzenleme yaparken widget'ın ve içindeki ögelerin davranışını belirleme olanağı sağlar. Yapılandırma sekmesindeki birkaç seçeneği deneyin.
Ekran görüntüsünü göster
Widget ögeleriniz için görünen ad ayarlayın:
- Azaltma düğmesine tıklayın.
- Denetçi panelindeki Öge Adı metnini "Azaltma Düğmem" olarak değiştirin.
Ekran görüntüsünü göster
Metin ögesinin editörde seçilebilir olmasını engelleyin:
- Sayaç değerini temsil eden metin ögesine tıklayın.
- Denetçi panelinin Davranış bölümündeki Öge seçilebilir onay kutusuna tıklayarak seçimi kaldırın.
Ekran görüntüsünü göster
7. Adım | (İsteğe bağlı) Daha fazla hazır tasarım oluşturun
Blocks'taki hazır tasarımlar özelliğini kullanarak aynı widget için çeşitli tasarım ve düzen varyasyonları oluşturabilirsiniz. Başka bir hazır tasarım oluşturmak için:
- Üst menüdeki Tasarım sekmesine tıklayın.
- Uygulama Yapısı altındaki Tasarım paneline gidin ve Hazır Tasarımlar bölümünde + Hazır Tasarım Ekle'ye tıklayın.
- Hazır tasarımınızı yeniden adlandırmak için Diğer Eylemler simgesine tıklayın. (Açılan listede ayrıca hazır tasarımı çoğaltma ve silme seçenekleri bulunur).
Ekran görüntüsünü göster
4. Widget'ınızın orta bölümünün rengini değiştirmek gibi görünür değişiklikler yapın.
Ekran görüntüsünü göster
Farklılıkları görmek için hazır tasarımlar arasında gezinin.
Hazır tasarımlarda tekil ve toplu değişiklikler
Bazı tasarım ve düzen değişikliklerinin yalnızca seçili hazır tasarımı etkilediğini, bazılarının ise tümüne uygulandığını unutmayın. (Daha fazla bilgi edinin).
8. Adım | Etkinliğinizi site editöründe yakalayın
Önemli
Bu adım Blocks'ta değil, Wix Editor veya Studio Editor'da gerçekleşir.
Etkinliği uygulamanızdan yakalamak için site editörünüze gidin. Öncelikle "değişme" etkinliği için bir Olay İşleyici kaydetmeniz gerekir:
- Widget uygulamanızı yükleyin.
- Geliştirici Modu'nu etkinleştirin.
- Özellikler ve Olaylar simgesine tıklayın.
- Widget kimliğini değiştirin (ör. "counter1" yapın).
- Olay İşleyicileri altından onChange( )'e tıklayın.
- Kutudaki counter1_change'e tıklayın.
Ekran görüntüsünü göster
Şimdi işlevi yazın. Parametre olarak `count` değerini alan ve sizin belirlediğiniz sayıya (buradaki örnekte: 30) ulaştığında sayacı sıfırlayan işleviniz şöyle görünmelidir:
1export function counter1_change({data: count}) {
2 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3 // Add your code for this event here:
4 if (count > 30) {
5 $w('#counter1').reset();}
6}
Sayacınızın nasıl çalıştığını görmek için sitenizi önizleyin veya yayınlayın.