SAPHướng dẫn UI5 cho người mới bắt đầu

SAPUI5 là phiên bản mới nhất trong loạt SAP Công nghệ phát triển giao diện người dùng. Để cung cấp khả năng tích hợp web cho nền tảng cơ bản SAP Hệ thống ERP, SAP đã đưa ra nhiều công nghệ phát triển giao diện người dùng như BSP (Trang máy chủ doanh nghiệp), PDK (Bộ phát triển cổng thông tin), Web Dynpro Java, Web Dynpro ABAP. Và người kế nhiệm của Web Dynpro ABAP là SAPGiao diện người dùng5.

SAPUI5 Archikiến trúc

SAPUI Archisơ đồ kiến ​​trúc

Ở trên ArchiVề mặt kiến ​​trúc, ô đầu tiên 'Thiết bị' cho biết các thiết bị mà ứng dụng UI5 chạy trên đó. Ứng dụng UI5 có thể được truy cập thông qua ứng dụng di động hoặc bất kỳ trình duyệt nào. Lớp này được gọi là 'Lớp Trình bày'.

SAPCác ứng dụng UI5 và dịch vụ oData nằm trên máy chủ này. SAP Máy chủ NetWeaver Gateway. Lớp này của kiến ​​trúc được gọi là 'Lớp ứng dụng'.

Logic kinh doanh thực tế được triển khai trong SAP Các hệ thống cốt lõi như ECC, CRM và BW. Logic nghiệp vụ có thể được triển khai bằng cách sử dụng SAP chương trình và module chức năng. SAP Dữ liệu giao dịch và Dữ liệu chủ nằm trên SAP các hệ thống. Lớp này được gọi là 'Lớp cơ sở dữ liệu' hoặc 'Lớp lưu trữ dữ liệu'.

SAPThành phần UI5

Component là một đoạn mã có thể tái sử dụng. Có 2 loại component được cung cấp bởi... SAPUI5:

1. Các thành phần giao diện người dùng (UI Components) – Chúng đại diện cho một giao diện người dùng chứa các phần tử UI. Chúng dựa trên... SAPLớp UI5 có tên là sap.ui.core.UIComponent
2. Các thành phần không có giao diện người dùng – Chúng không có giao diện người dùng. Chúng dựa trên... SAPLớp UI5 được gọi là sap.ui.core.Component

Về cơ bản, Thành phần là một thư mục. Khi bạn tạo một cái mới SAPỨng dụng UI5, bạn sẽ có thể thấy cấu trúc thư mục được tạo trong Project Explorer của mình như bên dưới.

Trong ứng dụng UI5 này, PassNum là một Component. Tệp Component.js là bắt buộc để một ứng dụng UI5 hoạt động như một Component.

Tiếp theo trong này SAPUI5 Eclipse hướng dẫn, chúng ta sẽ học cách thiết lập SAPGiao diện người dùng5.

SAPThiết lập UI5

Trước khi bắt đầu, bạn cần đảm bảo rằng:

1. Eclipse (Phiên bản Luna) được cài đặt trên máy tính xách tay của bạn
2. SAP Công cụ phát triển cho Eclipse Luna đã được cài đặt trên máy của bạn. Eclipse (SAP Công cụ phát triển cho Eclipse Ánh trăng - https://tools.hana.ondemand.com/luna/)
3. SAP Ứng dụng Logon Pad đã được cài đặt và bạn có quyền truy cập vào nó. SAP Hệ thống NetWeaver Gateway được sử dụng để triển khai và kiểm thử ứng dụng mà chúng ta sẽ xây dựng trong bài viết này.

Sau khi ứng dụng được xây dựng hoàn chỉnh, nó sẽ trông như dưới đây:

Với SAPHướng dẫn UI5 này sẽ tạo ra 2 thành phần có tên là Thành phần Cha và Thành phần Con. Đầu tiên, chúng ta sẽ tạo Thành phần Con và sau đó sử dụng nó trong Thành phần Cha.

Hãy bắt đầu làm bẩn tay chúng ta.

Phần 1) Tạo ứng dụng con

Mục tiêu của chúng ta là tạo ra một thành phần con (Child Component) nhận một số từ 1 đến 12 và hiển thị tên của tháng. Ví dụ, khi nhận được số 3, nó sẽ hiển thị 'Tháng Ba'.

Bước 1) Tạo dự án giao diện người dùng

Đi tới Tệp-> Mới-> Khác->SAPPhát triển ứng dụng UI5 -> Dự án ứng dụng.

Tạo một dự án ứng dụng cho SAPUI5 bằng cách làm theo hướng dẫn. Xem ảnh chụp màn hình bên dưới.

Nhập tên dự án, và giữ nguyên các lựa chọn còn lại theo gợi ý của trình hướng dẫn.

Trong ảnh chụp màn hình phía trên, có 2 loại thư viện được hiển thị dưới dạng nút chọn:

1. sap.m
2. sap.ui.commons

Khi bạn chọn sap.m, bạn đang yêu cầu trình hướng dẫn tạo một dự án ứng dụng UI5, trong đó phần khởi tạo sẽ tự động bao gồm thư viện sap.m, được thiết kế để tạo các ứng dụng web đáp ứng.

Tiếp theo trong này SAP Hướng dẫn FIORI, bạn sẽ thấy phần trình hướng dẫn bên dưới nơi bạn cần tạo Chế độ xem ban đầu. Chế độ xem ban đầu là chế độ xem sẽ được hiển thị đầu tiên khi ứng dụng được truy cập.

Tại đây, bạn cần nhập tên cho khung nhìn và chọn loại khung nhìn. SAPUI5 hỗ trợ 4 loại chế độ xem như hiển thị trên màn hình trên. Vì vậy giao diện người dùng của một SAPỨng dụng UI5 có thể được xây dựng bằng cách sử dụng JavaTập lệnh hoặc XML hoặc JSON hoặc HTML, bất kỳ ngôn ngữ nào bạn cảm thấy thoải mái nhất.

Khi hoàn tất trình hướng dẫn, một dự án mới sẽ được tạo và hiển thị trong cửa sổ Trình khám phá dự án. Eclipse như bên dưới.

Bước 2) Mã Component.js

Tiếp theo, chúng ta hãy tạo một tệp Component.js và viết đoạn mã bên dưới vào đó.

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


  },
});

Bước 3) Mã Index.html

Tiếp theo, chúng ta hãy cho file index.html biết rằng nó sẽ tải Component.js khi ứng dụng được truy cập. Viết đoạn mã sau vào 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>

Bước 4) Mã DisplayMonthView.view.xml

Tiếp theo, chúng ta hãy viết mã trong view displaymonth để hiển thị tháng có số nhận được từ component cha.

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

Sau khi bạn dán đoạn mã trên, giao diện của bạn sẽ trông như hình bên dưới.

Bước 5) Mã DisplayMonthView.controller.js

Cuối cùng, chúng ta hãy viết mã cho tệp Controller của DisplayMonthView.

Đoạn mã chỉ được viết trong phương thức hook onInit(), vì vậy chỉ phần đó được dán vào đây. Phần còn lại của tệp được tạo tự động bởi 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);
	},

Bước 6) Triển khai ứng dụng trên SAP Máy chủ cổng NetWeaver

Triển khai dự án và đặt tên kỹ thuật cho ứng dụng BSP được tạo trên máy chủ giao diện ABAP. Hãy đặt tên là... zdisplaythángDự án của bạn sẽ trông giống như hình bên dưới.

PHẦN 2) Tạo thành phần gốc

Giờ là lúc tạo một Component mới (Parent Component) sẽ sử dụng Component mà chúng ta đã tạo trong hướng dẫn này.

Bước 1) Tạo mới SAPứng dụng UI5

Đi tới Tệp-> Mới-> Khác->SAPPhát triển ứng dụng UI5 -> Dự án ứng dụng. Sau đó làm theo hướng dẫn của trình hướng dẫn để tạo dự án mới. SAPDự án ứng dụng UI5. Điều này đã được mô tả chi tiết ở Bước 1 của Phần 1 trong hướng dẫn ở trên.

Tên của dự án thành phần cha là Mật khẩuTên kỹ thuật của ứng dụng BSP được tạo ra sau khi triển khai là... số mật khẩuCấu trúc dự án sẽ như sau.

Bây giờ chúng ta hãy viết mã vào các tệp index.html, Component.js, PassNum.view.xml và PassNum.controller.js.

Bước 2) Nguồn Code của Index.html của Thành phần cha

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

Bước 3) Source code file Component.js của Component gốc

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

  },
});

Bước 4) Mã nguồn của 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>

Sau khi bạn sử dụng đoạn mã trên trong view của mình, view của bạn sẽ trông như hình bên dưới.

Bước 5) Mã nguồn của PassNum.controller.js

Chỉ có phương thức onInit() được thay đổi. Mọi thứ khác trong tập tin này vẫn giữ nguyên.

onInit: function() {

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

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


	}

Bước 6) Triển khai Thành phần gốc tới SAP Máy chủ cổng NetWeaver

Triển khai ứng dụng trên máy chủ giao diện người dùng ABAP và chạy nó. Bạn có thể chạy ứng dụng bằng cách nhấp chuột phải vào dự án và chọn tùy chọn 'Chạy trên máy chủ ABAP'.

Dưới đây URL sẽ mở cửa vào Eclipse trình duyệt.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Sao chép URL và chạy nó trong trình duyệt thực tế. Tên máy chủ ở trên (được đánh dấu màu vàng) là tên máy chủ của máy chủ giao diện người dùng ABAP của bạn.

Đầu ra

Nhấp vào nút 'Đầu tiên', và tháng Giêng sẽ hiển thị trong Thành phần con.

Tận hưởng việc tạo các ứng dụng web đẹp, đáp ứng bằng cách sử dụng SAPGiao diện người dùng5.

Câu Hỏi Thường Gặp