SAP UI5 Flexible Programming Model – Part 4

Merhaba Lits Consulting takipçileri! Bu yazıda, SAP UI5 Flexible Programming Model kullanarak örnek uygulamamıza bir “table building block” ve “object page” ekleyeceğiz.

Bunu yapmak için ilk adımımız “annotations” eklemek olacak. Hatırlarsanız blogumuzun “Part 3” kısmında “filter building block” yapmak için de ilk yaptığımız şey seçim kriterlerimizi “annotations” içine yazmak olmuştu. Bu yüzden şimdi de aynısını yapacağız.

SAP UI5 Flexible Programming – Table Building Block için Tanımlamalar

Aşağıdaki kod bloğunun kalın yazı ile belirtilmiş kısımlarını root klasörümüzün içindeki “annotations.cds” dosyasına ekliyoruz. Bu aşamada virgülden ve yazım hatalarından dolayı çok fazla yanlışlık çıkabiliyor. Bu nedenle buna dikkat etmenizi öneririm. Tipi “DataField” olan nesneler tablomuzun kolonlarına, “DataFieldForAction” olan nesneler ise tablonun satırı için uygulanabilecek olan butonlara ya da ismindeki gibi aksiyonlara karşılık geliyor.

        ..TravelStatus.code,
    ],
    UI.LineItem:[
        {
            $Type : 'UI.DataField',
            Label : 'Travel ID',
            Value : TravelID,
        },
        {
            $Type : 'UI.DataField',
            Label : 'Travel Status',
            Value : TravelStatus_code,
            Criticality : TravelStatus.criticality,
        },
        {
            $Type : 'UI.DataField',
            Label : 'Begin Date',
            Value : BeginDate,
        },
        {
            $Type : 'UI.DataField',
            Label : 'End Date',
            Value : EndDate,
        },
        {
            $Type : 'UI.DataField',
            Label : 'Agency ID',
            Value : to_Agency_AgencyID,
        },
        {
            $Type : 'UI.DataField',
            Label : 'Customer ID',
            Value : 'to_Customer_CustomerID',
        },
        {
            $Type : 'UI.DataField',
            Label : 'Total Price',
            Value : TotalPrice,
        },
        {
            $Type  : 'UI.DataFieldForAction',
            Label  : '{i18n>AcceptTravel}',
            Action : 'TravelService.acceptTravel',
        },
        {
            $Type  : 'UI.DataFieldForAction',
            Label  : '{i18n>RejectTravel}',
            Action : 'TravelService.rejectTravel',
        }
    ]
);

Henüz “DataField“lar için bir “i18n” etiketi tanımlamadık. Fakat “DataFieldForAction” için tanımlamış olduk. Oradaki tırnak içindeki süslü parantezler editörün onun aslında bir değişken olduğunu bilmesini sağlıyor. Bu yüzden “i18n/i18n.properties” dosyasında aşağıdaki gibi tanımlıyoruz.

Bir “table building block“u önizlemede görebilmemiz için son ve en önemli adım olarak “Main.view.xml” dosyasında aşağıdaki gibi bir tablo tanımlaması yapıyoruz.

Read only özelliğini açık tutuyoruz. Çünkü tablonun elle değiştirilebilir olmasını istemiyoruz. “filterBar” seçeneğini de önceki blog yazımızda eklediğimiz seçim kriteri filtresine referanslıyoruz. Böylece ikisi arasındaki ilişkilendirmeyi tamamlamış oluyoruz.

“Fiori Preview“a bakınca ve “Git”e basınca tanımladığımız tablomuzu, verilerimizi, ve aksiyonlarımızı görebiliyoruz. Fakat henüz aksiyonlarımızı aktive etmedik, yani satır seçip tıklayınca bir şey değişmiyor. Çünkü bunu yapmak için bu butonlara tıkladığımızda ne olacağını da bir yandan tanımlamamız gerekiyor. Bu kontrolleri bir sonraki SAP UI5 Flexible Programming – Part 5 yazımızda yazıyor olacağız.

Fiori Object Page Tanımlamaları

“Travel Entity“miz için bir “Object Page” eklemek için ilk olarak aşağıdaki gibi “Page Map“i açıyoruz. 1. adımdaki gibi uygulama klasörümüzün üstüne gelip sağ tıklayarak “Show Page Map“i seçiyoruz.

Açılan pencerede sırasıyla adımları takip ediyoruz.

“Object Page“imizin tam açılan bir sayfa gibi değil de yarıya kadar esneyen bir yapısı olmasını istiyoruz. Bu yüzden özelliklerini aşağıdaki şekildeki gibi değiştiriyoruz.

Yaptığımız bu düzenlemelerle uygulama önizlememize gidip herhangi bir veriye ait satırı seçince obje sayfamız açılıyor ve şöyle bir sonuç alıyoruz.

Henüz sayfamız biraz boş duruyor. Bu yüzden “header” için gerekli alanların başlıklarını açıklamalarını, kurgumuz için seyahat acentesi firmasının logosunu (bu örnekte LITS Consulting logosu olacak) ve diğer ilgili alanları doldurmak için aşağıdaki şekildeki gibi obje sayfasını konfigüre etme butonuna basıyoruz..

Burada “header” kısmına basıp 2. adımdaki alana “Travel” yazıyoruz. Sonra 3. adımdaki butona tıkladığımızda bize “{i18n>travel}” alanını önerdiğini görüyoruz. Hemen altındaki alana da “Travels” yazıp onu da aynı şekilde “{i18n>travels}”a çeviriyoruz.

Dikdörtgen içindeki alanları şekildeki gibi dolduruyoruz. “image” alanını da 4. adımdaki butona basarak “Ctrl + Space” yapıyoruz. Ve 5. adımdaki gibi tıklayıp fotoğrafımızın bağlantısını tırnak içine ekliyoruz.

En nihayetinde bu alanları şuna benzer bir şekilde doldurmuş olmalısınız. “Image URL” olarak deneme amaçlı kendi istediğiniz logo bağlantısını kullanabilirsiniz

        ..},
        Description : {
            $Type : 'UI.DataField',
            Value : Description,
        },
        ImageUrl : 'data:image/jpeg;base64,/9j/4AA..
..QSkZJRgAnnK19nHMduwNAv0Ho6EHjiOlFFTvEc07WPIBy5XOLb+FlHc7N6QEBAQEBB//2Q==',
    }
);

Fiori ekranımızı yenilediğimizde, obje sayfamızın özelliklerinin hangi alanları etkilediğini görebiliyoruz. İşte bu kadar!

SAP UI5 Flexible Programming Model blog yazımızın devamında ihtiyacımıza ve seyahat kurgumuza yönelik bir “Fiori Launchpad Tile” ekleyeceğiz ve ilgili kontroller yazacağız.

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!