SAP UI5 Flexible Programming Model – Part 3

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.

sap,ui5,travel,flexible,programming,model,object,list

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.

fiori,application,generator,template,wizard


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.

ui5,data,source,service,selection


Adımları şekillerdeki gibi tanımlıyoruz.

sap,fiori,application,entity,selection
sap,fiori,application,project,attributes


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”.

manifest,json,view,xml


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.

ui5,flex,app,show,page,map


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.

webapp,main,view,xml


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.

webapp,preview,application


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.

npm,run,watch,ui5,app


Şekildeki URL’e giriyoruz.

cds,server,url,localhost,4004


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,freestyle,fiori,screen


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.

webapp,open,guided,development,filter,bar,building,block


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.

sap,ui5,filter,bar,building,block,ui,selectionfields,annotation


“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.

filter,bar,building,block, annotation,cds


Bu bozulmanın sebebi Data kaynağımızdaki “Entity“lerin zamanla değişmesi olabilir, kontrol etmekte fayda var.

filter,bar,building,block,annotation,cds,insert,snippet


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.

filter,bar,building,block,view,service,entity,main


Ş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,programming,model,fiori,screen,filter,bar,building,block

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

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir