Merhaba Lits Consulting takipçileri! Bu yazıda, SAP UI5 Flexible Programming Model kullanarak örnek uygulamamızı ayağa kaldıracağız. Bunu yapmak için de SAP UI5 eklentilerinin bize sağladığı hazır “Template Wizard”ları kullanacağız. Sonra da bir “Filter Bar” ekleyeceğiz.
Bunu yapmak için ilk olarak nesne ağacımıza “app” adında bir klasör ekliyoruz. Bu klasör bizim uygulamamızı içeren ana klasör olacak çünkü bu klasörün “SAP UI5 Application” olduğunu belirtmek için “package.json” içerisine tanımlıyor olacağız.
Klasörü tanımladıktan sonra “Command Palette” içerisindeki tüm komutları göstermesi için “Ctrl + Shift + P” kısayolunu kullanarak komut listesini açıyoruz ve 1. adımda gösterildiği gibi “Open Application Generator” yazıyoruz. Visual Studio kullanırken de bu klavye kısayolunu ve “Open Application Generator” komutunu kullanabilirsiniz. Şekilde görüldüğü gibi tam yazmadan da bize öneriyor.
“Fiori Application Generator” Kullanımı
Bir “Template Wizard” açıldığını göreceksiniz. Burada SAP Fiori Application yazısının altında bir şablon kullanmak için ihtiyacımız olan şeyleri görebilirsiniz. 2. adımdaki gibi, açılan Fiori şablonlarından “Custom Page”i seçiyoruz ve ilerliyoruz.
Burada “Data Source ve Service” için nereyi kullanmamız gerektiğini belirtmemiz gerekiyor. Aslında blog yazımızın “Part 2” kısmında tam olarak burada kullanmak istediğimiz Data Kaynağını oluşturmak için ortam kurmuştuk. “Use a Local CAP Project”i seçiyoruz ve diğer seçenekleri otomatik dolduruyor.
Burada bir hatayla karşılaşmamanız gerekiyor çünkü geliştirmelerimizin tamamı bu Data Kaynağı üzerine olacak.
Adımları şekillerdeki gibi tanımlıyoruz.
Adımları tamamladığımızda “Fiori Template Wizard” bizim için uygulamamızı oluşturuyor ve gerekli “Dependencies”leri de tanımlamış oluyor.
Fiori Uygulamamızın Bileşenleri
İlk adımda gördüğümüz “sap.fe.core.fpm” komponenti aslında bizim uygulamamızı kapsayan bir Fiori Element Uygulaması ve 2. adımdaki “View”ı kapsıyor. Bu sebeple uygulamamız aslında bir “View”.
Bu “View”ı görmek için uygulamamızın ana klasörüne gelip sağ tıklayıp “Show Page Map“e tıklıyoruz.
Burada oluşan sayfamızla ilgili “Title” ve “Description” ve diğer birçok bilgiyi görebilirsiniz. Örneğin sayfamızın “Title”ına bakarsak “{{appTitle}}” gibi bir isim görürüz. Çünkü “HTML5” diline göre iki süslü parantez arasına yazılan değişken, dinamiktir. Bu sebeple bizim durumumuzda “Title” değerini “webapp” klasöründeki “i18n”den alır.
Oluşan “View”ı görmek için 1. adımdaki gibi düzenlemeye tıklıyoruz ve “webapp / ext/main” klasörünün içinde oluşan “Main.view.xml” ve buna bağlı oluşan “Main.controller.js”i görebiliyoruz.
Uygulamamızı önizlemek için aşağıdaki şekildeki gibi “webapp” klasörüne sağ tıklayıp “Preview Application” seçeneğini seçiyoruz.
Burada açılan “Batch Terminal”inde aslında yapmak istediğimiz şeyin projenin ana klasörüne gidip “npm run watch-alpkilicflexapp” yazmak olduğunu görebiliriz.
Şekildeki URL’e giriyoruz.
Açılan pencerede “Web Applications” kısmından “..index.html”i seçin. Bizim senaryomuzda bu “/alpkilicflexapp/webapp/index.html”. Sizi aşağıdaki gibi boş bir “Freestyle Fiori” ekranı beklediğini göreceksiniz.
SAP UI5 Flexible Programming Model – “Filter Bar Building Block” Eklemek
“Root” klasörümüz olan “webapp” klasörüne sağ tıklıyoruz ve “Open Guided Development”ı seçiyoruz. 2. adımdaki gibi arama kutusuna “filter bar” yazıyoruz. 3. seçenekte de gösterilen, arama sonuçlarımızın içindeki “Custom Page – Add a filter bar building block” seçeneğini seçiyoruz.
Açılan rehberde 1. adıma gidip ekrandaki verileri dolduruyoruz. Bunları Fiori ekranımızı filtrelerken seçim kriteri olarak kullanacağız. Girdiğimiz verilerle aşağıdaki kod bloğunun şekil almaya başladığını göreceksiniz. “Open Guided Development” bizim için bu kolaylığı sağlıyor. Bu yüzden “Insert Snippet” diyoruz ve ilgili kod bloğu belirttiğimiz “CDS File” içine ekleniyor.
“Insert Snippet”tan sonra ilgili kod bloğu açılıyor ve bir yanlışlık varsa düzeltiyoruz. Bu örneğimizde “Path doesn’t exist” hatası aldığımız için kodu elimizle siliyoruz ve önerilenlere bakmak için “Ctrl + Space” yapıp önerilenleri yazıyoruz.
Bu bozulmanın sebebi Data kaynağımızdaki “Entity“lerin zamanla değişmesi olabilir, kontrol etmekte fayda var.
“Open Guided Development“ın ikinci adımına geçip verilerimizi dolduruyoruz. Buradaki kod bloğu ise “Main.view.xml” dosyamız için oluşturuluyor.
Şekildeki düzenlemeyi de yapıp “Insert Snippet”a bastığımızda Fiori ekranımız şekildeki gibi “Filter Building Block” eklenmiş bir halde güncelleniyor. İşte bu kadar!
SAP UI5 Flexible Programming Model blog yazımızın devamında ihtiyacımıza yönelik “table building block” ekleyeceğiz.
Projenin İlk Hali: https://github.com/aalpkilic/ui5-travel-fpm-init
Projenin Son Hali: https://github.com/aalpkilic/ui5-travel-fpm
Kullanılan teknolojiler sürekli değiştiği ve geliştiği için bu yazıyı okuduğunuz tarihe göre değişen hatalar alabilirsiniz. Yorum kısmında görüşlerinizi, önerilerinizi ve sorularınızı bekliyor olacağız!
Bir cevap yazın