Uygulamamızı Geliştirelim -3

Merhabalar
Bu hafta geliştirmekte olduğumuz uygulamamıza biraz daha eklentiler yapıp geliştirelim diye düşünüyorum. Uygulamamızda içecekler sayfasında seçtiğimiz herhangi bir içeceği sepete eklemesini sağlamak için 'Add' butonu eklemiştik. Kullanıcıya bu siparişin sepete eklenip eklenmediğini bildirmek için bir geri bildirim sağlayabiliriz. Bunun için butona 'Toast component' ekleyebiliriz. Toast component ne diye açıklamak gerekirse:

Toast Component

 Kullanıldığı uygulamada, uygulamanın üzerinde görünen ince bir bildirimdir. Kullanıcıya kısa bir mesaj göstermek için kullanılır.Genellikle yaptığı işlemlerinin olup olmadığına dair kullanıcıya geri bildirim olarak gönderilir. Bu mesaj toast bileşeninin içerisinde tanımladığın konuma göre görünür. Bu konumlar 'top', 'bottom' veya 'middle' olabilir. 4 tane metodu 14 tane de özelliği (properties) vardır.

Methodlar:

 dismiss()         → toast mesajı gösterildikten sonra yok olmasını sağlar.
 onDidDismiss() → toast gittikten sonrası için bir vaatte bulunur.
 onWillDismiss()→ toast yok olacağı zaman çözümlenecek bir sözde bulunur.
 present()      → toast oluşturulduktan sonra gösterilmesini sağlar.

Özellikler:

 animated :   (boolean) Bu özellikle toast'a animasyon ekleyebiliriz. boolean değer alır.
 closeButtonText :  toast' u kapamak için olan butonun zerinde yazacak yazıyı belirler.String değer alabilir.
 duration :  mesajın ekranda ne kadar duracağını belirler.Sayı değeri alır.
 position :  mesajın konumunu belirler.3 seçenek alır; 'bottom','top' ve 'middle' .
 showCloseButton :boolean değer alır .eğer true'ya eşitlenirse close butonu görünür, false'a eşitlenirse close butonu çıkmaz.
 message : ile görüntülenecek olan mesaj tanımlanır.String değer alır.

  Bunlar özelliklerden birkaçı (özellikler hakkında daha fazla bilgi almak için bu sayfaya gidebilirsiniz). Bunları kendi uygulamamıza nasıl entegre edeceğimize bakacak olursak: öncelikle yapmak istediğimiz şey 'Add' butonuna bastığımızda bize 'Siparişiniz sepete eklendi' diye bildirimde bulunması. Bunun için kodlarımızda butonun bulunduğu sayfamızın page.ts uzantılı sayfasına giderek buraya bir metod tanımlamamız gerekiyor.(Bu sayfamı secondPage olarak tanımlamıştım onun içinde bulunan  secondPage.page.ts uzantılı sayfaya giderek) Öncelikle sayfaya Toast Controller'ı import ediyorum.

import {ToastController} from '@ionic/angular'

  Ardından constructora toast controllerı tanmlıyoruz..

 constructor(public toastController : ToastController ) { }

  Sıra mesajı oluşturmaya ve onu göstermeye geldi . Oluşturduğumuz mesajı belli bir süreliğine görünüp gitmesini istiyorsak duration özelliğine ne kadar durmasını istiyorsak onu tanımlayabiliriz aşağıda örnekte görüldüğü gibi.

async presentToast() {
    const toast = await this.toastController.create({
      message: 'Siparişiniz sepete eklendi',
      duration : 2000
    });
    toast.present();
  }

   Mesaja close butonu eklemek istiyorsak :

 async presentToastWithOption(){
    const toast =await this.toastController.create({
      message:'Siparişiniz sepete eklendi',
      showCloseButton :true,
      position:"top",
      closeButtonText:'close',
      animated : true
    });
    toast.present();
  }

 Şimdi html uzantılı sayfamıza geçip butonumuza (click)="presentToastWithOption()" ya da (click)="presentToast()" tanımlayarak butonumuza bastığımızda bu özelliği çağırmayı sağlayabiliriz.

 Bu hafta uygulamamıza Toast bileşenini eklemeyi inceledik .

 Gelecek Hafta görüşmek üzere.


Yararlandığım Kaynaklar:
https://beta.ionicframework.com/docs/api/toast#methods
https://beta.ionicframework.com/docs/api/toast/