SAPTutorial UI5 untuk Pemula

⚡ Ringkasan Cerdas

SAPUI5 adalah SAPFramework HTML5 responsif yang mendukung aplikasi web perusahaan di perangkat desktop, seluler, dan tablet. Panduan ini menjelaskan arsitektur MVC, model komponen, pustaka, dan cara membangun komponen induk dan anak di dalam framework ini. Eclipse.

📱 Antarmuka Pengguna Responsif: SAPUI5 menggunakan pustaka sap.m sehingga satu basis kode dapat beradaptasi secara otomatis dengan layar desktop, tablet, dan ponsel.
🧩 Model komponen: Komponen UI memperluas sap.ui.core.UIComponent sedangkan Komponen Tanpa Antarmuka (Faceless Components) memperluas sap.ui.core.Component untuk kode yang dapat digunakan kembali dan modular.
⚙️ Pola MVC: Model menyimpan data, View merender markup dalam format XML atau JSON, dan Controller menangani logika event secara independen.
️ Penyebaran NetWeaver: Eclipse dengan SAP Paket Alat Pengembangan SAPAplikasi UI5 sebagai aplikasi BSP yang dihosting di server frontend ABAP.
✅ Pesan bus acara: Komponen induk dan anak bertukar data melalui saluran publikasi dan berlangganan sap.ui.getCore().getEventBus().

Baca Selengkapnya

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 ArchiPada arsitektur, kotak pertama 'Perangkat' menunjukkan perangkat tempat aplikasi UI5 dijalankan. Aplikasi UI5 dapat diakses melalui aplikasi seluler atau browser apa pun. Lapisan ini disebut 'Lapisan Presentasi'.

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

Logika bisnis aktual diterapkan di SAP Sistem inti seperti ECC, CRM, dan BW. Logika bisnis dapat diimplementasikan menggunakan SAP program dan modul fungsi. SAP transaksional dan Data Master berada SAP sistem. Lapisan ini disebut 'Lapisan Basis Data' atau 'Lapisan Persistensi'.

SAPKomponen UI5

Komponen adalah bagian dari kode yang dapat digunakan kembali. Ada 2 jenis komponen yang disediakan oleh SAPUI5:

Komponen UI – Ini mewakili antarmuka pengguna yang berisi elemen UI. Komponen ini didasarkan pada... SAPKelas UI5 bernama sap.ui.core.UIComponent
Komponen Tanpa Antarmuka Pengguna – Komponen ini tidak memiliki antarmuka pengguna. Komponen ini berbasis 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 ada agar aplikasi UI5 dapat berfungsi sebagai 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 terpasang di perangkat Anda. Eclipse (SAP Alat Pengembangan untuk Eclipse Luna- https://tools.hana.ondemand.com/luna/)
SAP Logon Pad sudah terpasang, dan Anda memiliki akses ke SAP Sistem NetWeaver Gateway untuk penyebaran dan pengujian aplikasi yang akan kita bangun di blog ini.

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

Dalam SAPDalam panduan tutorial UI5 ini, kita akan membuat 2 komponen bernama Komponen Induk dan Komponen Anak. 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 akan menerima angka dari 1 hingga 12 dan menampilkan nama bulan. Misalnya, ketika menerima angka 3, komponen tersebut 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. Lihat tangkapan layar di bawah.

Masukkan nama proyek, dan biarkan pilihan lainnya tetap seperti yang disarankan oleh wizard.

Pada tangkapan layar di atas, terdapat 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 bootstrap-nya akan secara otomatis menyertakan pustaka sap.m, yang dimaksudkan untuk membuat aplikasi web responsif.

Selanjutnya dalam hal ini SAP Dalam tutorial FIORI, Anda akan melihat bagian wizard di bawah ini di mana Anda perlu membuat View awal. View awal adalah view yang akan ditampilkan pertama kali saat aplikasi diakses.

Di sini Anda perlu memberikan 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 JavaSkrip atau XML atau JSON atau HTML, bahasa mana pun yang Anda kuasai.

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 perintahkan file index.html kita untuk memuat Component.js saat aplikasi diakses. Tulis kode di bawah ini di dalam 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 tulis kode di tampilan displaymonth kita untuk menampilkan Bulan yang nomornya 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 tulis kode file Controller dari DisplayMonthView.

Kode tersebut hanya ditulis di dalam metode hook onInit(), jadi hanya itu yang disalin di sini. Bagian file lainnya sesuai dengan yang dihasilkan oleh framework.

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

Lakukan deployment proyek dan berikan nama teknis aplikasi BSP yang dihasilkan pada server frontend ABAP. Biarkan namanya menjadi zdisplaymonthProyek Anda seharusnya 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 petunjuk 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 induknya adalah Nomor SandiNama teknis aplikasi BSP yang dihasilkan setelah penyebaran adalah zpassnumStruktur proyek akan terlihat seperti di bawah ini.

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

Langkah 2) Sumber Code dari 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 pada tampilan Anda, tampilan Anda akan terlihat seperti di bawah ini.

Langkah 5) Kode sumber PassNum.controller.js

Hanya metode onInit() yang diubah. Semua hal 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 Gateway NetWeaver

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

Di bawah URL akan dibuka di Eclipse Browser.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Salin URL lalu jalankan di browser sebenarnya. Pada nama host di atas (ditandai dengan warna kuning) adalah nama host server frontend ABAP Anda.

Keluaran

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

Nikmati pembuatan aplikasi web yang indah dan responsif menggunakan SAPUI5.

Pertanyaan Umum Demo Slot

SAPUI5 adalah edisi komersial eksklusif yang dikirimkan bersama perangkat lunak. SAP Lisensi. OpenUI5 adalah subset open-source Apache 2.0, yang tidak memiliki kontrol perusahaan tertentu seperti smart form sap.ui.comp.

Fiori adalah SAPSistem desain dan katalog aplikasinya. SAPUI5 adalah JavaKerangka kerja skrip yang merender aplikasi Fiori, sehingga setiap layar Fiori dibangun di atasnya. SAPKontrol UI5.

Mulailah dengan sap.m untuk kontrol responsif, sap.ui.table untuk data bergaya grid, dan sap.viz untuk grafik. Ketiganya mencakup sebagian besar layar perusahaan yang akan Anda buat.

Ya. SAP Membangun Code dan GitHub Copilot dapat membuat kerangka tampilan XML, kerangka pengontrol, dan pengikatan JSONModel dari perintah bahasa alami, meskipun pengembang tetap meninjau kode yang dihasilkan.

Asisten AI menghasilkan kasus uji OPA5 dan QUnit, menyarankan nilai aria-label, dan menandai penanganan keyboard yang hilang, membantuping tim bertemu SAP standar aksesibilitas lebih cepat.