SAPYeni Başlayanlar İçin UI5 Eğitimi
Jessica Blake
⚡ Akıllı Özet
SAPUI5 şudur: SAPMVC, masaüstü, mobil ve tablet cihazlarda kurumsal web uygulamalarına güç veren duyarlı bir HTML5 çerçevesidir. Bu kılavuz, MVC mimarisini, bileşen modelini, kütüphaneleri ve MVC içinde üst ve alt bileşenlerin nasıl oluşturulacağını açıklamaktadır. Eclipse.
Nedir? SAPUI5?
SAPUI5 Masaüstü, Mobil ve Tablet gibi birden fazla cihazda çalışan duyarlı web uygulamaları oluşturmaya yönelik bir kitaplık setidir. SAPUI5 çalışıyor MVC konsepti görünümde verileri, iş mantığını ve verilerin temsilini ayrı ayrı oluşturarak geliştirme döngüsünü hızlandırmak. Böylece görünüm ve denetleyicinin geliştirilmesi, modeller (veri kapları) oluşturmak için bağımsız olarak gerçekleşebilir.
SAPUI5 serinin en sonuncusudur SAP Kullanıcı arayüzü geliştirme teknolojileri. Temelin web entegrasyonunu sağlamak için SAP ERP sistemi, SAP BSP (İş sunucusu sayfaları), PDK (Portal geliştirme kiti), Web Dynpro gibi birden fazla kullanıcı arayüzü geliştirme teknolojisi ile geldi Java, Web Dynpro ABAP. Ve Web Dynpro ABAP'ın halefi SAPkullanıcı arabirimi5.
SAPUI5 Archidoku
SAPUI Archidoku şeması
Yukarıda ArchiYapı bölümünde, ilk kutu olan 'Cihazlar', UI5 uygulamalarının çalıştığı cihazları gösterir. UI5 uygulamalarına mobil uygulama veya herhangi bir tarayıcı üzerinden erişilebilir. Bu katmana 'Sunum Katmanı' denir.
SAPUI5 uygulamaları ve oData hizmetleri şu platformda yer almaktadır: SAP NetWeaver Ağ Geçidi Sunucusu. Mimari yapının bu katmanına 'Uygulama Katmanı' denir.
Gerçek iş mantığı şu şekilde uygulanır: SAP ECC, CRM ve BW gibi temel sistemler. İş mantığı şu şekilde uygulanabilir: SAP programlar ve fonksiyon modülleri. SAP işlemsel ve Ana Veriler burada bulunur SAP sistemler. Bu katmana 'Veritabanı Katmanı' veya 'Kalıcılık Katmanı' denir.
SAPUI5 Bileşeni
Bileşen, yeniden kullanılabilir bir kod parçasıdır. İki tür bileşen sağlanmaktadır. SAPkullanıcı arayüzü5:
- Kullanıcı Arayüzü Bileşenleri – Bunlar, kullanıcı arayüzü öğelerini içeren bir kullanıcı arayüzünü temsil eder. Bunlar şunlara dayanmaktadır: SAPUI5 sınıfı sap.ui.core.UIComponent olarak adlandırılır.
- Arayüzsüz Bileşenler – Bunların kullanıcı arayüzü yoktur. Bunlar şu temellere dayanmaktadır: SAPsap.ui.core.Component adlı UI5 sınıfı
Temel olarak, bir Bileşen bir klasördür. Yeni bir tane oluşturduğunuzda SAPUI5 uygulamasında proje gezgininizde aşağıdaki gibi oluşturulmuş bir klasör yapısını görebileceksiniz.
Bu UI5 uygulamasında PassNum bir bileşendir. Bir UI5 uygulamasının bileşen gibi davranabilmesi için Component.js dosyası zorunludur.
Bunda sonraki SAPUI5 Eclipse öğretici, nasıl kurulum yapılacağını öğreneceğiz SAPkullanıcı arabirimi5.
SAPUI5 Kurulumu
Başlamadan önce şunlardan emin olmanız gerekiyor:
- Eclipse (Luna sürümü) dizüstü bilgisayarınızda yüklü
- SAP için Geliştirme Araçları Eclipse Luna sizin bilgisayarınıza yüklenmiştir. Eclipse (SAP için Geliştirme Araçları Eclipse ay - https://tools.hana.ondemand.com/luna/)
- SAP Giriş paneli yüklendi ve erişim hakkınız var. SAP Bu blogda geliştireceğimiz uygulamanın dağıtımı ve test edilmesi için NetWeaver Gateway sistemi.
Uygulama tamamen oluşturulduktan sonra aşağıdaki gibi görünmelidir:
Bu SAPUI5 eğitim kılavuzunda, Parent Component ve Child Component adında iki bileşen oluşturacağız. İlk olarak Child Component'i oluşturacağız ve ardından onu Parent Component'te kullanacağız.
Ellerimizi kirletmeye başlayalım.
Bölüm 1) Alt Başvuru Oluşturun
Amacımız, 1 ile 12 arasında bir sayı kabul eden ve ayın adını görüntüleyen bir Alt Bileşen oluşturmaktır. Örneğin, 3 sayısını aldığında 'Mart' yazısını görüntülemelidir.
Adım 1) UI Projesini Oluşturun
Dosya->Yeni->Diğer->'e gidinSAPUI5 Uygulama Geliştirme -> Uygulama Projesi.
için bir uygulama projesi oluşturun. SAPSihirbazı takip ederek UI5'i kurun. Aşağıdaki ekran görüntüsüne bakın.
Projenin adını girin ve diğer seçimleri sihirbazın önerdiği şekilde bırakın.
Yukarıdaki ekran görüntüsünde, radyo düğmesi olarak görüntülenen 2 tür kütüphane bulunmaktadır:
- sap.m
- sap.ui.commons
sap.m'yi seçtiğinizde, sihirbaza, bootstrap bölümü otomatik olarak duyarlı web uygulamaları oluşturmak için tasarlanmış sap.m kütüphanesini içerecek bir UI5 uygulama projesi oluşturmasını söylüyorsunuz.
Bunda sonraki SAP FIORI eğitiminde, başlangıç görünümünü oluşturmanız gereken sihirbazın aşağıdaki bölümünü göreceksiniz. Başlangıç görünümü, uygulamaya erişildiğinde ilk olarak oluşturulacak görünümdür.
Burada görünümün adını vermeniz ve görünüm türünü seçmeniz gerekiyor. SAPUI5, yukarıdaki ekranda görüldüğü gibi 4 tür görünümü destekler. Yani bir kullanıcı arayüzü SAPUI5 uygulaması kullanılarak oluşturulabilir JavaKomut dosyası veya XML veya JSON veya HTML, hangisine aşina iseniz onu kullanabilirsiniz.
Sihirbazın sonunda, yeni bir proje oluşturulacak ve Proje Gezgini penceresinde görüntülenecektir. Eclipse aşağıdaki gibi.
Adım 2) Component.js kodu
Şimdi de Component.js adında bir dosya oluşturalım ve içine aşağıdaki kodu yazalım.
sap.ui.core.UIComponent.extend("DisplayMonth.Component", { metadata: { "name": "DisplayMonth", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; var oView = sap.ui.view({ viewName: "DisplayMonth.displaymonth.DisplayMonthView", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(oView); }, init: function() { // call super init (will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var sRootPath = jQuery.sap.getModulePath("DisplayMonth"); }, });
Adım 3) Index.html kodu
Şimdi de, uygulamamıza erişildiğinde Component.js dosyasının yüklenmesi için index.html dosyamıza talimat verelim. Aşağıdaki kodu index.html dosyasına yazın.
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{"DisplayMonth": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "DisplayMonth" }) }).placeAt("content"); }); </script> </head> // start of body of SAPUI5 application. It contains a div element. <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Adım 4) DisplayMonthView.view.xml kodu
Şimdi de, üst bileşenden aldığımız ay numarasını görüntülemek için displaymonth görünümümüze kod yazalım.
<html:style> #__xmlview1--id{ margin-left: 30rem; margin-top: 9rem; font-size: 6rem; font-style: italic; background-color: burlywood; } </html:style> <App id="fioricontent"> <Page title="Child Component"> <content> <Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text> </content> </Page> </App>
Yukarıdaki kodu yapıştırdıktan sonra, görünümünüz aşağıdaki gibi olmalıdır.
Adım 5) DisplayMonthView.controller.js kodu
Son olarak, DisplayMonthView'in Controller dosyasının kodunu yazalım.
Kod yalnızca onInit() hook metodunda yazılmıştır, bu nedenle buraya sadece o kısım yapıştırılmıştır. Dosyanın geri kalanı ise framework tarafından oluşturulduğu gibidir.
onInit : function() { sap.ui.getCore().getEventBus().subscribe("exchange", "data", function(channel, event, oEventData) { jsonModel = new sap.ui.model.json.JSONModel({ monthumber : oEventData, monthname : '' }); // derive month name from month number switch (jsonModel.oData.monthumber) { case "1": jsonModel.oData.monthname = 'January'; break; case "2": jsonModel.oData.monthname = 'February'; break; case "3": jsonModel.oData.monthname = 'March'; break; case "4": jsonModel.oData.monthname = 'April'; break; case "5": jsonModel.oData.monthname = 'May'; break; case "6": jsonModel.oData.monthname = 'June'; break; case "7": jsonModel.oData.monthname = 'July'; break; case "8": jsonModel.oData.monthname = 'August'; break; case "9": jsonModel.oData.monthname = 'September'; break; case "10": jsonModel.oData.monthname = 'October'; break; case "11": jsonModel.oData.monthname = 'November'; break; case "12": jsonModel.oData.monthname = 'December'; break; } this.getView().setModel(jsonModel, "myModel"); }, this); },
Adım 6) Uygulamanın dağıtımı SAP NetWeaver Ağ Geçidi Sunucusu
Projeyi dağıtın ve ABAP ön uç sunucusunda oluşturulan BSP uygulamasının teknik adını verin. Ad şu olsun: zdisplaymonthProjeniz aşağıdaki gibi görünmelidir.
BÖLÜM 2) Ana Bileşen Oluşturma
Şimdi, bu eğitimde şimdiye kadar oluşturduğumuz bileşeni kullanacak yeni bir bileşen (üst bileşen) oluşturmanın zamanı geldi.
Adım 1) Yeni bir tane oluşturun SAPUI5 uygulaması
Dosya->Yeni->Diğer->'e gidinSAPUI5 Uygulama Geliştirme -> Uygulama Projesi. Ardından, yeni bir proje oluşturmak için sihirbaz talimatlarını izleyin. SAPUI5 uygulama projesi. Bu, yukarıdaki eğitimde Bölüm 1'in 1. Adımında ayrıntılı olarak açıklanmıştır.
Ana bileşen projesinin adı şudur: PassNumDağıtım sonrasında oluşturulan BSP uygulamasının teknik adı şudur: zpassnumProje yapısı aşağıdaki gibi olacaktır.
Şimdi index.html, Component.js, PassNum.view.xml ve PassNum.controller.js dosyalarına kod yazalım.
Adım 2) Kaynak Code Üst Bileşenin Index.html dosyasının
<!DOCTYPE HTML> <html> <head> // adding meta tags to tell IE browser to render the page in IE-edge mode. <meta http-equiv="X-UA-Compatible" content="IE=edge"> // adding meta tag to tell eclipse to use UTF 8 as character encoding <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> // Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-resourceroots='{"PassNum": "./"}'> </script> <script> sap.ui.getCore().attachInit(function() { new sap.m.Shell({ app: new sap.ui.core.ComponentContainer({ height : "100%", name : "PassNum" }) }).placeAt("content"); }); </script> </head> // start of Body of SAPUI5 application, Contains a div tag, <body class="sapUiBody" role="application"> <div id="content"></div> </body> </html>
Adım 3) Parent Component'in Component.js dosyasının kaynak kodu
sap.ui.core.UIComponent.extend("PassNum.Component", { metadata: { "name": "PassNum", "dependencies": { "components": []} }, createContent: function() { var oViewData = { component: this }; // Creating Reference of a PassNum XML view var myView = sap.ui.view({ viewName: "PassNum.passnum.PassNum", type: sap.ui.core.mvc.ViewType.XML, viewData: oViewData }); return(myView); }, init: function() { // call super init (this will call function "create content") sap.ui.core.UIComponent.prototype.init.apply(this, arguments); // ensure to use absolute paths relative to own component // (running in the Fiori Launchpad, relative paths will fail) var sRootPath = jQuery.sap.getModulePath("PassNum"); }, });
Adım 4) PassNum.view.xml dosyasının kaynak kodu
<Page title="Parent Component"> <content> <VBox xmlns="sap.m" id="vboxid"> <items> <Button xmlns="sap.m" id="1" text="First" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="2" text="Second" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="3" text="Third" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton" class="sapUiSmallMarginEnd"></Button> <core:ComponentContainer id="conpcontid" name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer> </items> </VBox> </content> </Page>
Yukarıdaki kodu görünümünüzde kullandıktan sonra, görünümünüz aşağıdaki gibi olmalıdır.
Adım 5) PassNum.controller.js'nin kaynak kodu
Dosyadaki yalnızca onInit() metodu değiştirildi. Geri kalan her şey aynı kaldı.
onInit: function() { jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth"); }, clickbutton:function(oEvent) { sap.ui.getCore().getEventBus().publish("exchange", "data", oEvent.oSource.sId.split("--")[1]); }
Adım 6) Ana Bileşenin Dağıtılması SAP NetWeaver Ağ Geçidi Sunucusu
Uygulamayı ABAP ön uç sunucusuna dağıtın ve çalıştırın. Projeye sağ tıklayıp 'ABAP sunucusunda çalıştır' seçeneğine tıklayarak çalıştırabilirsiniz.
Aşağıdaki URL açılacak Eclipse tarayıcı.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
Kopya URL ve bunu gerçek tarayıcıda çalıştırın. Yukarıdaki ana bilgisayar adı (sarı renkle işaretlenmiş) ABAP ön uç sunucunuzun ana bilgisayar adıdır.
Çıktı
'İlk' düğmesine tıklayın, ardından Ocak ayı Alt Bileşen'de görüntülenecektir.
kullanarak güzel, duyarlı web uygulamaları oluşturmanın keyfini çıkarın. SAPkullanıcı arabirimi5.
