Blazor Hybrid Proje Kodları Anlama(Mobil, Desktop)

Merhabalar, önceki yazıda özetle ayağa kalkan bir Hybrid projemizi oluşturmuştuk. Peki bu yapının kodları nasıl çalışıyor. Bununla ilgili kendimce anlamaya çalıştığım bilgileri aktarmaya çalışacağım.

1. Eğer web projesini çalıştırdıysanız sadece index sayfasının sorunsuz çalıştığını diğer sayfaların ise çalıştığında hatalı olduğunu göreceksiniz. Buradan başlayarak adım adım kodlarımızı inceleyelim ve sorunları çözmeye çalışalım. Index sayfasına nasıl erişiyoruz => Ana Projemizi açıyoruz. WebUI içerisinde Pages klasörü içerisinde Index ve diğer razor uzantısı ile biten sayfalarını görüyoruz. Blazor projelerinde Razor component’lerini kullanıyoruz. İçerisinde Html ve c# kullanarak geliştirme yapmamızı sağlayan yapılardır. c# kodlarımızı @ işareti ile başlıyoruz.

Not: Aşağıdaki kod’da @page “/” ile sayfanın ismini belirtmiş. Dikkat ederseniz @ işareti ile başlamış. Razor’da sayfa isimlerini bu şekilde belirtiyoruz. Bir sayfaya birden fazla isim verebilir, parametreler almasını sağlayabilir, birden fazla parametreler aldırabilir ve bu parametreleri kontrol edebilirsiniz. İlerleyen konularda detayına giriyor olacağız.

2. Counter sayfasına tıklayalım. Bu sayfanın neden Web projesine çalışmadığını android ve desktop uygulamasında çalıştığını anlamaya çalışıyoruz. Counter.Razor sayfasına baktığımızda;

*Page ile Sayfa ismi belirtilmiş
*Inject ile bir class eklenmiş. Dikkat ederseniz bu class kırmızı ile çizdiğim yerde.(Alttaki Resim)
*Impelements diye bir eleman çağrılmış. Bu iplementasyon ile Dispose metoduna erişim sağlamış.
*Kod yapısına baktığımızda ortada html tag’ları ve @ işareti ile c# kodları kullanılmış. En altta ise @code {} içerisinde bildiğimiz c# kodları eklenmiş. Bu yapı Blazor’da çokça göreceğimiz bir yapı. Burada istersek code kısmını ayrı bir class olarak da yapabiliriz.
*Burada yapılan aslında inject ile eklediğimiz class’ın içerisindeki CurrenCount’ın değerini gene inject içerisindeki metot’dan buton’a her tıklama ile artmasını sağlamak.

• Peki Web sayfamızda bu kod neden çalışmıyor. Çünkü inject ettiğimiz her elemanı bizim Web dosyamız içerisinde yer alan Program.cs’de tanımlamamız gerekiyor. Peki Mobil ve Dekstop inject edilmiş elemanı tanımlaması gerekmiyor muydu. Evet gerekiyor şimdi onu keşfedelim.

3. Ana dosyamız içerisinde yer alan App.cs dosyamıza bakalım. Bu arkadaş mobil ve desktop uygulamanın program.cs dosyası gibi. Tanımlamaları buraya yapıyoruz. Dikkat ederseniz services olarak CounterState elemanı yani inject edilen elemanı burada tanımlamışlar. O zaman Web içinde aynı işlemi yapmamız gerekiyor.

4. Aşağıdaki Web.Client içerisinde Program.cs içerisine servisimizi ekliyoruz. Eğer CounterState class’ını public yapmayı unutmayın. Şuan artık projemiz çalışıyor olacak. İlerleyen makalelerde Dependency Injection ile kullanacağımız her class ve interface’ler burada tanımlanmalı. Yoksa sayfa yüklenme hatası verecektir.

5. Web.Server projesine sağ tıklayıp Set as Startup project diyerek çalıştırdığımızda sorunsuz Counter sayfamız ayağa kalkar.

6. Şimdi projemizde sol tarafta görünen menüleri var. Counter üzerinde sabit duran About kısmı var. Bunlara nereden ulaşabilir ve değiştirebiliriz bakalım.

Ana dosya dizinimizi açıyoruz. Shared klasörünü genişlettik. İçerisinde MainLayout isimli razor sayfamız var. Bu tüm eklediğimiz razor sayfaların bağlı olduğu ana dosyamız. Peki bir sayfa bu sayfaya bağlı olduğunu anlıyor. Biz razor sayfalarımızda @page “/counter” yazdığımızda artık default olarak bu mainlayout’un bir sayfası oluyor. İstersek farklı layoutPage’ler oluşturabiliriz. Oluştururken dikkat edeceğimiz ise inherits olarak LayoutComponentBase’den miras almalı. Bu şekilde Body metodunu kullanabiliriz.

Aşağıdaki kod’da göreceğimiz üzere NavMenu isimli razor sayfayı <NavMenu /> şeklinde çağırmış. Bizde istersek elimizdeki pages’lerden Counter sayfasını bu şekilde ekleyebiliriz. Alttaki 2.resimde ben ekledim bu örnekte biraz mantıksız olsada aslında component kullanma mantığı açısından sayfaları küçük kutucuklar haline oluşturup yönetmek tekrar kullanılabilirlik ve kullanım açısından çok faydalı.

About kısmının da burada tanımlandığını görüyoruz. İstersek silebilir değiştirebiliriz. Alt kısımda da Body ile page’ler içerisinde yer alan kısım ekranda görünmektedir. Gördüğünüz üzere yapısı aslında gayet kullanışlı.

7. Kendimize yeni bir razor component sayfası oluşturup bunu menü içerisinde ekleyelim. Pages klasörüne sağ tıklayıp Add Razor Component diyerek yeni bir sayfa ekledim. Aşağıdaki gibi farklı şekillerde sayfa isimlendirmeleri ve string olarak parametre alabilir dedim. Bir sınırımız yok. Parametreyi’de ekranda p tagı içerisinde gösterdim. Ayrıca Counter sayfamıda ekledim.

8. Bu kısımda Navmenu kısmını açarız. Burada gördüğünüz üzere mevcut menüleri görüyoruz. Ben bir tanesini kopyalayıp href kısmına yukarıda yazdığım page’lerden birini verdim.

9. Sayfayı çalıştırdığımda menü’de artık yeni bir menü elemanı göreceğiz. Parametre kısmınada herhangi bir şey yazdığımızda ekranda bunu gösterebiliyoruz.

10. Şimdi MainLayout kısmı tamam. İçerisinde NavMenu ve Body ile ekranda menü ve sayfa içeriklerini gösteriyoruz. Peki diğer platformlar buna nasıl erişiyor? Burada App.Razor sayfasını açıyoruz. Dikkat ederseniz bu sayfa içerisinde MainLayout’u sayfasını default olarak tanımlamış. Yani MainLayout bir üstte App.Razor’a bağlı. Peki hala diğer platformlar buna nasıl erişiyor bu gizemi çözelim.

11. Aslında Web projesini iplemente ederken Index sayfasını iplemente ederken orada bahsetmiştim. Her platformun index.html dosyası içerisinde yer alan <app> tag’ı ile aslında bu App.Razor tetikleniyor. Bu şekilde her platform kendi içerisinde bu yapıyı çalıştırıyoruz.

12. Kabaca kendimce anladığım şekilde yapı bu şekilde. Son bir kısım kaldı. Mobil ve desktop çalıştığında ekran web’den sanki biraz farklı görünüyor. Aşağıda Normalde Web’de menü başlığı ve altında index sayfası görünüyor. Diğer uygulamada ise menü başlığı üzerinde bir counter daha eklenmiş. Bu nereden çıktı diye düşünebiliriz.

13. Bu kısımda bizim ana dosyamız içerisindeki Main.Razor dosyamız. Buradan biz istersek sadece mobil kısımda görünecek eklemeler yapabiliriz. Yukarıdaki görselde de göreceğimiz üzere StackLayout içerisinde eklediğim kısım sadece mobil ekranda görünüyor. Web kısmında görünmüyor. Web kısmını BlazorWebView tagları içerisinde App.Razor dosyasını çalıştırarak eklemiş. StackLayout tagları arasında yazdığımız her kod direk olarak mobil ve desktop tarafında çalışmakta . Peki mobil taraf bu kısmı nasıl algılıyor. Bunun cevabı aslında App.cs dosyası içerisinde. Alttaki 2.görsel. Bu şekilde proje ayağa kalkarken bu dosyayı da çalıştırarak ekranda göstermekte. Ben mobilde görünen bu kısmı siliyorum ve web ve mobil’i tamamen aynı hale getiriyorum.

Son adımla birlikte artık projeyi uçtan uca kabaca nasıl çalıştığını kendimce anlatmaya çalıştım. Bir sonraki yazımda artık bir basit bir proje ile uygulamamızı daha da özelleştiriyor olacağız.

Görüşmek üzere..

GitHub Link

https://github.com/abbaskizildag/Blazor

Kaynak

https://docs.microsoft.com/en-us/mobile-blazor-bindings/walkthroughs/build-first-hybrid-app