Powy\u017cszy odno\u015bnik bez w\u0105tpienia jest podstawow\u0105 pomoc\u0105 przy developmencie aplikacji na ka\u017cdym etapie i poziomie. Szczeg\u00f3lnie pomocne zak\u0142adki:<\/p>\n\n\n\n
- API Reference \u2013 lista wszystkich predefiniowanych kontrolek wraz z ich opisem, indywidualn\u0105 list\u0105 event\u00f3w, agregacji, asocjacji i metod<\/li>
- Samples \u2013 przyk\u0142ady wykorzystania konkretnych kontrolek w praktyce wraz z kodem \u017ar\u00f3d\u0142owym<\/li><\/ul>\n\n\n\n
Fiori a SAPUI5<\/h2>\n\n\n\n
Oba te poj\u0119cia cz\u0119sto wyst\u0119puj\u0105 zamiennie lub nieroz\u0142\u0105cznie, dlatego uwa\u017cam, \u017ce dobrze jest potrafi\u0107 ju\u017c na wst\u0119pie je rozr\u00f3\u017cnia\u0107.<\/p>\n\n\n\n
- SAPUI5 \u2013 jak ju\u017c wspomnia\u0142em wy\u017cej jest to framework MVC stworzony g\u0142\u00f3wnie z my\u015bl\u0105 o unowocze\u015bnieniu interfejs\u00f3w SAPa i jest technologi\u0105 b\u0119d\u0105c\u0105 baz\u0105 dla wszystkich aplikacji Fiori. Nie oznacza to jednak, \u017ce jej wykorzystanie ogranicza si\u0119 do tematyki SAPa. Tak jak np. Angular lub React.js, SAPUI5 mo\u017ce zosta\u0107 wykorzystany do tworzenia zupe\u0142nie autonomicznych i niezale\u017cnych od samego SAPa aplikacji.<\/li>
- SAP Fiori \u2013 najkr\u00f3cej m\u00f3wi\u0105c jest paradygmatem projektowania (UX), kt\u00f3ry dzi\u0119ki wykorzystaniu technologii SAPUI5 zapewnia sp\u00f3jny wygl\u0105d oraz mechanizmy dzia\u0142ania wszystkich aplikacji. Ujmuj\u0105c to bardziej oficjalnie i cytuj\u0105c fragment tekstu ze strony www.sap.com jest to \u201ewiod\u0105ce \u015brodowisko u\u017cytkownika wszystkich aplikacji SAP\u201d.<\/li><\/ul>\n\n\n\n
Architektura aplikacji<\/h2>\n\n\n\n
![\"schemat](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/05\/4-1.jpg\")
<\/a><\/figure><\/div>\n\n\n\nWidok<\/h3>\n\n\n\n
Cz\u0119\u015b\u0107 aplikacji odpowiedzialna za definiowanie i renderowanie interfejsu u\u017cytkownika (UI). W przypadku SAPUI5, wspierane s\u0105 konkretne typy widok\u00f3w: \u201eXML\u201d, \u201eJSON\u201d, \u201eJS\u201d, \u201eHTML\u201d, przy czym najmocniej wspieranym i zalecanym jest XML. W przyk\u0142adach aplikacji lub fragmenta kodu jakie cz\u0119sto mo\u017cna znale\u017a\u0107 niemal zawsze znajduje si\u0119 widok XMLowy. Dobrze jest r\u00f3wnie\u017c pozna\u0107 notacj\u0119 JavaScriptow\u0105 – przydaje si\u0119 ona m. in. w przypadkach konieczno\u015bci generowania dynamicznej zawarto\u015bci na widoku w samej logice jego kontrolera.<\/p>\n\n\n\n
Kontroler<\/h3>\n\n\n\n
Zawiera metody definiuj\u0105ce w jaki spos\u00f3b model wsp\u00f3\u0142dzia\u0142a z widokiem. Najprostsza konstrukcja kontrolera o nazwie ControllerName.controller.js<\/em> bez definiowania zale\u017cno\u015bci lub wykorzystywanych bibliotek przedstawia si\u0119 nast\u0119puj\u0105co:<\/p>\n\n\n
\nsap.ui.controller('name.space.ControllerName', {\n\/\/ logika kontrolera\n});\n<\/pre><\/div>\n\n\nSAPUI5, tak jak wiele innych framework\u00f3w, zapewnia obs\u0142ug\u0119 zdarze\u0144 zwi\u0105zanych z cyklem dzia\u0142ania aplikacji: \u201eonInit\u201d, \u201eonExit\u201d, \u201eonAfterRendering\u201d, \u201eonBeforeRendering\u201d. Dodatkowo ka\u017cda z kontrolek u\u017cytych na powi\u0105zanym widoku posiada swoje w\u0142asne predefiniowane zdarzenia, dok\u0142adnie wylistowane i opisane w oficjalnej dokumentacji.<\/p>\n\n\n\n
Model<\/h3>\n\n\n\n
Przetrzymuje dane i zapewnia metody do ich pobierania z bazy danych oraz ich modyfikowania, usuwania i dodawania (CRUD). Modele danych wspierane przez SAPUI5: \u201eOData\u201d, \u201eJSON\u201d, \u201eXML\u201d, \u201eResource\u201d.<\/p>\n\n\n\n
![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/05\/5.jpg\")
<\/a><\/figure><\/div>\n\n\n\nZgodnie z obrazem widocznym powy\u017cej modele danych dziel\u0105 si\u0119 na \u201eclient-side models\u201d oraz \u201eserver-side models\u201d. JSON, XML i Resource s\u0105 modelami typu client-side. Wszelkie dane s\u0105 \u0142adowane i dost\u0119pne bezpo\u015brednio po stronie klienta, a operacje takie jak sortowanie czy filtrowanie przeprowadzane s\u0105 r\u00f3wnie\u017c bez udzia\u0142u serwera. Odata z kolei jest modelem typu server-side i udost\u0119pnia klientowi dane konkretnie sformatowane wed\u0142ug jego zapyta\u0144.<\/p>\n\n\n\n
SAP Web IDE<\/h2>\n\n\n\n
Przechodz\u0105c do praktyki \u2013 do developmentu aplikacji SAPUI5 potrzebne b\u0119dzie IDE \u2013 w tym przypadku zalecan\u0105 opcj\u0105 przez wi\u0119kszo\u015b\u0107 os\u00f3b oraz firm z jakimi si\u0119 spotka\u0142em jest SAP Web IDE czyli \u015brodowisko programistyczne w chmurze. Pierwsza rzecz, jak\u0105 musimy w tym kierunku zrobi\u0107 to za\u0142o\u017cenie konta na SAP Cloud Platform (https:\/\/cloudplatform.sap.com\/index.html<\/a>) \u2013 platformie integruj\u0105cej szerok\u0105 gam\u0119 serwis\u00f3w i narz\u0119dzi do budowania i rozszerzania aplikacji SAPowych. Po zarejestrowaniu i zalogowaniu do SCP powinien ukaza\u0107 si\u0119 widok identyczny jak na zrzucie ekranu poni\u017cej.<\/p>\n\n\n\n
![\"AP](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/05\/6-1024x519-1.jpg\")
<\/a><\/figure><\/div>\n\n\n\n<\/div>\n\n\n\nPierwsza aplikacja<\/h2>\n\n\n\n
Tak jak w przypadku wielu innych framework\u00f3w tak r\u00f3wnie\u017c w SAPUI5 mo\u017cna r\u0119cznie, plik po pliku, linijka po linijce, utworzy\u0107 ca\u0142\u0105 aplikacj\u0119, jednak jest du\u017co prostsza i szybsza metoda umo\u017cliwiaj\u0105ca start. SAPUI5 udost\u0119pnia wiele szablon\u00f3w, kt\u00f3re potrafi\u0105 ograniczy\u0107 development do konfigurowania i wyklikiwania ustawie\u0144. Klikaj\u0105c kolejno \u201eFile\u201d -> \u201eNew\u201d -> \u201eProject from Template\u201d powinien wy\u015bwietli\u0107 si\u0119 widok jak na zrzucie ekranu poni\u017cej.<\/p>\n\n\n\n
![\"Screenshot](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/7-1024x516-1.jpg\")
<\/a><\/figure><\/div>\n\n\n\nPo wyborze \u201eSAPUI5 Application\u201d, okre\u015bleniu nazwy i przestrzeni nazw, nast\u0119pnie typu i nazwy pierwszego widoku uzyskamy pierwsz\u0105 aplikacj\u0119 SAPUI5. Aby j\u0105 uruchomi\u0107 wystarczy zaznaczy\u0107 folder z nazw\u0105 aplikacji, klikn\u0105\u0107 zielony tr\u00f3jk\u0105t w k\u00f3\u0142ku w pasku na g\u00f3rze strony, nast\u0119pnie w okienku, kt\u00f3re si\u0119 wy\u015bwietli zaznaczy\u0107 index.html i klikn\u0105\u0107 OK.<\/p>\n\n\n\n
![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/8-1024x519-1.jpg\")
<\/a><\/figure><\/div>\n\n\n\nW przypadku blokowania popup\u00f3w przez przegl\u0105dark\u0119 nale\u017cy post\u0119powa\u0107 wed\u0142ug instrukcji, kt\u00f3re wy\u015bwietli samo Web IDE. Uruchomiona aplikacja prezentuje si\u0119 jak ni\u017cej (pusty widok przygotowany do w\u0142a\u015bciwego developmentu):<\/p>\n\n\n\n
![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/9-1024x519-1.jpg\")
<\/a><\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/05\/10-1024x518-1.jpg\")
<\/a><\/figure><\/div>\n\n\n\n