SAPTutorial UI5 untuk Pemula: Apa itu Fiori Beserta Contohnya

Apa itu SAPUI5?

SAPUI5 adalah sekumpulan perpustakaan untuk membangun aplikasi web responsif yang berjalan di banyak perangkat seperti Desktop, Seluler, dan Tablet. SAPUI5 berfungsi Konsep MVC untuk mempercepat siklus pengembangan dengan membuat data, logika bisnis, dan representasi data secara terpisah pada tampilan. Sehingga pengembangan view dan controller dapat berlangsung secara mandiri untuk membuat model (wadah data).

SAPUI5 adalah seri terbaru SAP Teknologi pengembangan UI. Untuk menyediakan integrasi web untuk yang mendasarinya SAP sistem ERP, SAP hadir dengan beberapa teknologi pengembangan UI seperti BSP (Halaman server bisnis), PDK (Kit pengembangan portal), Web Dynpro Java, Web Dynpro ABAP. Dan penerus dari Web Dynpro ABAP adalah SAPUI5.

SAPUI5 Architekstur

SAPUI Archidiagram tekstur

Di atas Architektur, kotak pertama, yaitu 'Perangkat' menunjukkan perangkat tempat aplikasi UI5 berjalan. Aplikasi UI5 dapat diakses melalui aplikasi Seluler atau peramban apa pun di perangkat ini. Lapisan arsitektur ini disebut 'Lapisan Presentasi'.

SAPAplikasi UI5 dan layanan oData tetap aktif SAP Server Gateway NetWeaver. Lapisan arsitektur ini disebut 'Lapisan Aplikasi'.

Logika bisnis aktual diterapkan di SAP sistem inti seperti ECC, CRM, dan BW, dll.… Logika bisnis dapat diimplementasikan menggunakan SAP program dan modul fungsi. SAP transaksional dan Data Master berada SAP sistem. Lapisan arsitektur ini disebut 'Database Layer' atau 'Persistence Layer'.

SAPKomponen UI5

Komponen adalah bagian kode kerja yang digunakan kembali di mana pun diperlukan. Ada 2 jenis komponen yang disediakan oleh SAPUI5

Komponen UI – Ini mewakili antarmuka pengguna yang berisi elemen UI. Ini didasarkan pada Kelas SPAUI5 yang disebut sap.ui.core.UIComponent
Komponen Tanpa Wajah – Komponen ini tidak memiliki antarmuka pengguna. Komponen ini didasarkan pada SAPKelas UI5 disebut sap.ui.core.Component

Pada dasarnya, Komponen adalah sebuah folder. Saat Anda membuat yang baru SAPAplikasi UI5, Anda akan dapat melihat struktur folder yang dibuat di project explorer Anda seperti di bawah ini.

Dalam aplikasi UI5 ini, PassNum adalah sebuah Komponen. File Component.js wajib agar aplikasi UI5 berperilaku seperti Komponen. File Component.js adalah pengontrol komponen.

Selanjutnya dalam hal ini SAPUI5 Eclipse tutorialnya, kita akan belajar cara setupnya SAPUI5.

SAPPengaturan UI5

Sebelum kita mulai, Anda perlu memastikan bahwa –

Eclipse (Versi Luna) terinstal di laptop Anda
SAP Alat Pengembangan untuk Eclipse Luna dan diinstal pada gerhana Anda (SAP Alat Pengembangan untuk Eclipse Luna- https://tools.hana.ondemand.com/luna/)
SAP Logon pad telah terinstal, dan Anda memiliki akses ke sana SAP Sistem NetWeaver Gateway untuk penerapan dan pengujian pada aplikasi yang akan kami bangun di blog ini.

Setelah aplikasi selesai dibangun, tampilannya akan seperti di bawah ini:

Dalam SAPPanduan tutorial UI5, kita akan membuat 2 komponen yaitu Parent Component dan Child Component. Pertama, kita akan membuat Komponen Anak dan kemudian menggunakannya di komponen Induk.

Mari kita mulai mengotori tangan kita.

Bagian 1) Membuat Aplikasi Anak

Tujuan kami adalah membuat Komponen Anak yang menerima angka dari 1 hingga 12 dan menampilkan nama bulannya. Misalnya, ia menerima 3; itu harus menampilkan 'Maret'.

Langkah 1) Buat Proyek UI

Buka File->Baru->Lainnya->SAPPengembangan Aplikasi UI5->Proyek aplikasi.

Buat proyek aplikasi untuk SAPUI5 dengan mengikuti panduan yang terbuka. Lihat cuplikan layar di bawah.

Masukkan Nama proyek, biarkan pilihan lainnya tetap sama seperti yang disarankan oleh wizard.

Pada gambar di atas, ada 2 jenis perpustakaan yang ditampilkan sebagai tombol radio

sap.m
sap.ui.commons

Saat Anda memilih sap.m, Anda memberi tahu wizard untuk membuat proyek aplikasi UI5 yang bagian bootstrapnya akan secara otomatis menyertakan perpustakaan sap.m yang dimaksudkan untuk membuat aplikasi web responsif.

Selanjutnya dalam hal ini SAP Tutorial FIORI, Anda akan melihat bagian bawah wizard di mana Anda perlu membuat Tampilan awal. Tampilan awal merupakan tampilan yang akan dirender pertama kali saat aplikasi diakses.

Di sini Anda perlu memberi nama tampilan dan memilih jenis tampilan. SAPUI5 mendukung 4 jenis tampilan seperti terlihat pada layar di atas. Jadi UI dari a SAPAplikasi UI5 dapat dibangun menggunakan Javascript atau XML atau JSON atau HTML bahasa apa pun yang Anda sukai.

Di akhir wizard, proyek baru akan dibuat dan ditampilkan di jendela Project Explorer Eclipse seperti di bawah ini.

Langkah 2) Kode Component.js

Selanjutnya, mari kita buat file Component.js dan tulis kode di bawah ini di dalamnya.

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");

  
  },
});

Langkah 3) Kode Index.html

Selanjutnya, mari kita beri tahu file index.html untuk memuat Component.js SAPUI5 saat aplikasi diakses dari browser. Jadi tulis kode di bawah ini di file index.html.

<!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>

Langkah 4) Kode DisplayMonthView.view.xml

Selanjutnya, mari kita tuliskan kode pada tampilan displaymonth yang akan menampilkan Bulan yang nomor bulannya diterima dari Komponen induk.

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

Setelah Anda menempelkan kode di atas, tampilan Anda akan terlihat seperti di bawah ini-

Langkah 5) Kode DisplayMonthView.controller.js

Dan terakhir, mari kita menulis kode file Controller DisplayMonthView.

Kode ini ditulis hanya dalam metode kait onInit() pada pengontrol ini sehingga hanya menempelkan kode onInit() di sini. Sisa file adalah seperti yang dihasilkan oleh kerangka kerja.

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);
	},

Langkah 6) Penerapan aplikasi pada SAP Server Gerbang Netweaver

Deploy proyek dan berikan nama teknis aplikasi BSP yang akan dihasilkan di server frontend ABAP. Biarlah namanya zdisplaymonth. Pada titik ini, proyek aplikasi Anda akan terlihat seperti di bawah ini.

BAGIAN 2) Membuat Komponen Induk

Sekarang saatnya membuat Komponen baru (Komponen Induk) yang akan menggunakan Komponen yang telah kita buat sejauh ini dalam tutorial ini.

Langkah 1) Buat yang baru SAPaplikasi UI5

Buka File->Baru->Lainnya->SAPPengembangan Aplikasi UI5->Proyek aplikasi. Kemudian ikuti instruksi wizard untuk membuat yang baru SAPProyek aplikasi UI5. Ini telah dijelaskan secara rinci pada Langkah 1 Bagian 1 dalam tutorial di atas.

Nama proyek Komponen induk adalah Nomor Tiket. Dan nama teknis aplikasi BSP yang dihasilkan setelah penerapan SAPKomponen UI5 ke server frontend ABAP adalah zpassnum. Struktur proyek akan terlihat seperti di bawah ini

Sekarang mari kita menulis kode dalam file index.html, Component.js dan PassNum.view.xml dan PassNum.controller.js

Langkah 2) Kode Sumber Index.html Komponen Induk

<!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>

Langkah 3) Kode sumber file Component.js dari Komponen Induk

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");
 
  },
});

Langkah 4) Kode sumber file PassNum.view.xml

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

Setelah Anda menggunakan kode di atas dalam tampilan Anda, tampilan Anda akan terlihat seperti di bawah ini

Langkah 5) Kode sumber PassNum.controller.js

Hanya metode onInit() yang diubah. Segala sesuatu yang lain dalam file ini tetap sama

onInit: function() {

	jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
	},

	clickbutton:function(oEvent)
	{			
		sap.ui.getCore().getEventBus().publish("exchange", 
				"data", oEvent.oSource.sId.split("--")[1]);
		
		
	}

Langkah 6) Penerapan Komponen Induk ke SAP Server Gerbang Netweaver

Terapkan aplikasi pada server frontend ABAP dan jalankan. Anda seharusnya dapat menjalankannya dengan mengklik kanan proyek dan mengklik opsi 'Jalankan di server ABAP'.

URL di bawah ini akan terbuka di peramban Eclipse.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Salin URL dan jalankan di browser sebenarnya. Pada hostname di atas yang ditandai dengan warna kuning adalah hostname server frontend ABAP Anda.

Keluaran

Klik tombol 'Pertama', Januari akan ditampilkan di Komponen Anak.

Nikmati pembuatan aplikasi web yang indah dan responsif menggunakan SAPUI5.

Kesimpulan

Dalam SAPTutorial UI5, yang telah kita pelajari:

SAPUI5 dieksplorasi: SAPUI5 adalah seri terbaru SAP Teknologi pengembangan UI.
Apa itu SAP UI5: SAPUI5 adalah sekumpulan perpustakaan yang digunakan untuk membangun aplikasi web Responsif
Komponen dari SAPArsitektur UI5 adalah Perangkat, Klien, Gateway NetWeaver, Lapisan Persistensi
A SAPKomponen UI5 adalah bagian kode kerja yang digunakan kembali di mana pun diperlukan
Jenis dari SAPKomponen UI5 adalah 1) Komponen UI, 2) Komponen Tanpa Wajah
Kita belajar tentang menggunakan satu komponen sapui5 ke komponen sapui5 lainnya dan meneruskan data di antara kedua komponen tersebut