8.1 Ustawianie kontekstu: rola SAP UI5 w Fiori

SAP UI5 to podstawowy framework technologiczny do tworzenia aplikacji SAP Fiori. To nowoczesny, oparty na JavaScript framework, zaprojektowany specjalnie do tworzenia responsywnych, wieloplatformowych aplikacji korporacyjnych. Jego strategiczne znaczenie w ekosystemie Fiori jest nie do przecenienia, ponieważ każda aplikacja Fiori jest tworzona z wykorzystaniem SAP UI5. Framework opiera się na otwartych standardach, takich jak JavaScript, CSS i HTML5, i kompiluje się w OpenAjax, co pozwala na łączenie go z innymi popularnymi bibliotekami JavaScript.

8.2 Kluczowe cechy i architektura SAP UI5

SAP UI5 charakteryzuje się dobrze zaprojektowanymi modelami danych, silnym naciskiem na optymalizację wydajności oraz rozszerzalnym modelem komponentów interfejsu użytkownika, który umożliwia programistom tworzenie nowych kontrolek.

Architektura wysokiego poziomu SAP UI5 składa się z podstawowego frameworka JavaScript (zawierającego jQuery) oraz zbioru bibliotek, kontrolek i motywów. Framework zawiera również opcjonalne komponenty po stronie serwera, służące do takich zadań, jak generowanie motywów. Najpopularniejsze biblioteki kontrolek stanowią podstawę interfejsów użytkownika aplikacji:

• sap.ui.commons: Zawiera podstawowe elementy sterujące, takie jak przyciski i pola tekstowe, przeznaczone do tradycyjnych aplikacji komputerowych.
• sap.ui.table: Zapewnia zaawansowane funkcje kontroli tabeli i siatki umożliwiające wyświetlanie dużych zestawów danych.
• sap.ui.ux3: Zawiera kontrolki dla określonych, starszych wzorców projektowych UX3.
• sap.m: Jest to najważniejsza biblioteka dla Fiori, zawierająca kompleksowy zestaw responsywnych elementów sterujących zaprojektowanych tak, aby bezproblemowo działać zarówno na urządzeniach mobilnych, jak i na komputerach stacjonarnych.

8.3 Paradigmat Model-Widok-Kontroler (MVC)

SAP UI5 opiera się na wzorcu projektowym Model-View-Controller (MVC), który oddziela logikę aplikacji od interfejsu użytkownika. To rozdzielenie aspektów jest najlepszą praktyką, która ułatwia tworzenie, testowanie i utrzymanie aplikacji.

• Model: Model odpowiada za zarządzanie danymi aplikacji. Przechowuje dane i jest niezależny od interfejsu użytkownika. Gdy dane w modelu ulegną zmianie, powiadamia wszystkie powiązane kontrolki widoku o konieczności ich aktualizacji.
• Widok: Widok odpowiada za definiowanie i renderowanie interfejsu użytkownika. SAP UI5 oferuje kilka typów widoków: XML, JavaScript, JSON i HTML. Kluczowe jest przeanalizowanie kompromisów w tym zakresie. Widok XML To podejście zalecane przez SAP, ponieważ wymusza wyraźne oddzielenie deklaratywnej struktury interfejsu użytkownika od imperatywnej logiki aplikacji w kontrolerze. Poprawia to czytelność i łatwość utrzymania, szczególnie w środowiskach zespołowych. W przeciwieństwie do tego, Widok JavaScript Oferuje maksymalną elastyczność programistyczną, ale ryzykuje mieszanie prezentacji z logiką, co z czasem może utrudniać zarządzanie kodem i debugowanie. Widoki JSON i HTML to inne deklaratywne opcje, ale XML jest dominującym wyborem w przypadku programowania w Fiori.
• Kontroler: Kontroler działa jako pośrednik między modelem a widokiem. Zawiera logikę aplikacji, reagując na interakcje użytkownika w widoku (takie jak kliknięcia przycisków) i odpowiednio aktualizując dane w modelu.

8.4 Wiązanie danych i typowe wzorce projektowe

Wiązanie danych

Powiązanie danych to mechanizm synchronizujący dane między modelem a widokiem. Tworzy ono połączenie między kontrolką interfejsu użytkownika (np. polem tekstowym) a źródłem danych w modelu. Umożliwia to automatyczną aktualizację interfejsu użytkownika po każdej zmianie danych aplikacji bazowej. SAP UI5 obsługuje dwukierunkowe powiązanie danych, co oznacza, że ​​jeśli użytkownik zmieni wartość w kontrolce interfejsu użytkownika, dane aplikacji w modelu również zostaną automatycznie zaktualizowane.

SAP UI5 obsługuje trzy podstawowe typy modeli danych:

• Model JSON: Model po stronie klienta obsługujący dane w formacie JavaScript Object Notation (JSON).
• Model XML: Model po stronie klienta dla danych w formacie XML.
• Model OData: Model po stronie serwera, który stanowi kluczowy odpowiednik po stronie klienta usług OData tworzonych za pośrednictwem SAP NetWeaver Gateway. Model ten obsługuje złożoność tworzenia żądań HTTP, analizy odpowiedzi i abstrahowania komunikacji sieciowej od dewelopera aplikacji. Jest to podstawowy typ modelu dla aplikacji Fiori komunikujących się z zapleczem SAP.

Wzorce projektowe UI5

Aby zapewnić spójność i użyteczność, firma SAP zdefiniowała kilka wspólnych wzorców projektowych do tworzenia aplikacji z interfejsem użytkownika UI5:

• Szczegóły główne: Idealne rozwiązanie dla aplikacji na tablety i komputery stacjonarne, w których listę elementów roboczych (głównych) można wyświetlić obok szczegółów wybranego elementu.
• Mistrz-Mistrz-Szczegóły: Używane w scenariuszach wymagających przejścia przez trzy poziomy szczegółowości, np. z regionu do klienta w tym regionie, a następnie do konkretnego zamówienia dla tego klienta.
• Pełny ekran: Najlepiej nadaje się do skomplikowanych zadań wymagających dużej ilości danych lub dużych wizualizacji, w których użytkownik potrzebuje jak największej powierzchni ekranu, aby się skupić.
• Wieloprzepływowy: Elastyczny wzorzec stosowany w przypadku złożonych przepływów aplikacji, które mogą wymagać łączenia elementów z innych wzorców projektowych w celu zbudowania kompletnej aplikacji.

—————————————————————————–

Podsumowując, SAP Fiori reprezentuje transformacyjną strategię doświadczenia użytkownika, przekształcając oprogramowanie korporacyjne ze złożonego, zorientowanego na funkcje paradygmatu w prosty, oparty na rolach i atrakcyjny dla użytkownika model. System opiera się na solidnej i elastycznej architekturze, opartej na nowoczesnych frameworkach programistycznych, takich jak SAP UI5, i został zaprojektowany od podstaw z myślą o uproszczeniu i usprawnieniu interakcji użytkowników z podstawowymi procesami biznesowymi przedsiębiorstwa.