SAPบทช่วยสอน UI5 สำหรับผู้เริ่มต้น

ความหมายของ SAPUI5?

SAPไอยู5 คือชุดของไลบรารีที่สร้างเว็บแอปพลิเคชันแบบตอบสนองที่ทำงานบนอุปกรณ์หลายชนิด เช่น เดสก์ท็อป มือถือ และแท็บเล็ต SAPUI5 ทำงานต่อไป แนวคิดเอ็มวีซี เพื่อเร่งวงจรการพัฒนาโดยการสร้างข้อมูล ตรรกะทางธุรกิจ และการแสดงข้อมูลแยกกันในมุมมอง ดังนั้นการพัฒนามุมมองและตัวควบคุมจึงสามารถเกิดขึ้นได้อย่างอิสระเพื่อสร้างแบบจำลอง (ที่เก็บข้อมูล)

SAPUI5 เป็นรุ่นล่าสุดในซีรีส์ของ SAP เทคโนโลยีการพัฒนา UI เพื่อที่จะจัดให้มีการบูรณาการเว็บสำหรับพื้นฐาน SAP ระบบอีอาร์พี, SAP มาพร้อมกับเทคโนโลยีการพัฒนา UI หลายอย่าง เช่น BSP (เพจเซิร์ฟเวอร์ธุรกิจ), PDK (ชุดพัฒนาพอร์ทัล), Web Dynpro Java,เว็บ Dynpro ABAP. และผู้สืบทอดของ Web Dynpro ABAP คือ SAPUI5

SAPไอยู5 Archiเทคเจอร์

SAPUI Archiแผนภาพเทคเจอร์

ในข้างต้น Archiโครงสร้าง ช่องแรก คือ 'อุปกรณ์' ระบุอุปกรณ์ที่แอปพลิเคชัน UI5 ทำงาน แอปพลิเคชัน UI5 สามารถเข้าถึงได้ผ่านแอปพลิเคชันมือถือหรือเบราว์เซอร์ใดๆ บนอุปกรณ์เหล่านี้ เลเยอร์ของสถาปัตยกรรมนี้เรียกว่า 'เลเยอร์การนำเสนอ'

SAPแอปพลิเคชัน UI5 และบริการ oData เปิดใช้งานอยู่ SAP NetWeaver Gateway Server เลเยอร์ของสถาปัตยกรรมนี้เรียกว่า 'Application Layer'

ตรรกะทางธุรกิจที่แท้จริงถูกนำมาใช้ใน SAP ระบบหลัก เช่น ECC, CRM และ BW ฯลฯ... ตรรกะทางธุรกิจสามารถนำไปใช้ได้ SAP โปรแกรมและโมดูลฟังก์ชัน SAP ข้อมูลธุรกรรมและข้อมูลหลักอาศัยอยู่ SAP ระบบ ชั้นของสถาปัตยกรรมนี้เรียกว่า 'ชั้นฐานข้อมูล' หรือ 'ชั้นความคงอยู่'

SAPส่วนประกอบ UI5

Component คือชิ้นส่วนของโค้ดที่ใช้งานได้ซึ่งสามารถนำมาใช้ซ้ำได้ทุกที่ที่ต้องการ โดย Component แบ่งออกเป็น 2 ประเภท SAPไอยู5

ส่วนประกอบ UI - สิ่งเหล่านี้แสดงถึงส่วนต่อประสานผู้ใช้ที่มีองค์ประกอบ UI สิ่งเหล่านี้ขึ้นอยู่กับคลาส SPAUI5 ที่เรียกว่า sap.ui.core.UIComponent
ส่วนประกอบที่ไม่มีใบหน้า – ส่วนประกอบเหล่านี้ไม่มีอินเทอร์เฟซผู้ใช้ ส่วนประกอบเหล่านี้ขึ้นอยู่กับ SAPคลาส UI5 เรียกว่า sap.ui.core.Component

โดยพื้นฐานแล้ว Component คือโฟลเดอร์ เมื่อคุณสร้างใหม่ SAPแอปพลิเคชัน UI5 คุณจะเห็นโครงสร้างโฟลเดอร์ที่สร้างใน Project Explorer ของคุณดังนี้

ในแอปพลิเคชัน UI5 นี้ PassNum เป็นส่วนประกอบ ไฟล์ Component.js เป็นสิ่งจำเป็นสำหรับแอปพลิเคชัน UI5 ที่จะทำงานเหมือนส่วนประกอบ ไฟล์ Component.js เป็นตัวควบคุมส่วนประกอบ

ต่อไปในนี้ SAPไอยู5 Eclipse บทช่วยสอน เราจะได้เรียนรู้วิธีการตั้งค่า SAPUI5

SAPการตั้งค่า UI5

ก่อนที่เราจะเริ่ม คุณต้องแน่ใจว่า –

Eclipse (เวอร์ชัน Luna) ได้รับการติดตั้งบนแล็ปท็อปของคุณแล้ว
SAP เครื่องมือพัฒนาสำหรับ Eclipse Luna และติดตั้งบน Eclipse ของคุณ (SAP เครื่องมือพัฒนาสำหรับ Eclipse ลูน่า – https://tools.hana.ondemand.com/luna/)
SAP ติดตั้งแผ่นเข้าสู่ระบบแล้ว และคุณสามารถเข้าถึงได้ SAP ระบบ NetWeaver Gateway สำหรับการปรับใช้และทดสอบแอปพลิเคชันนี้ที่เราจะสร้างในบล็อกนี้

หลังจากสร้างแอปพลิเคชันเสร็จสมบูรณ์แล้ว ควรมีลักษณะดังนี้:

ในการนี้ SAPคู่มือบทช่วยสอน UI5 เราจะสร้าง 2 องค์ประกอบ ได้แก่ Parent Component และ Child Component ขั้นแรก เราจะสร้าง Child Component จากนั้นใช้ใน Parent Component

มาเริ่มทำให้มือของเราสกปรกกันเถอะ

ส่วนที่ 1) สร้างแอปพลิเคชันย่อย

เป้าหมายของเราคือการสร้าง Child Component ที่จะยอมรับตัวเลขตั้งแต่ 1 ถึง 12 และแสดงชื่อของเดือน เช่น ได้รับ 3; ควรแสดง 'มีนาคม'

ขั้นตอนที่ 1) สร้างโครงการ UI

ไปที่ไฟล์ -> ใหม่ -> อื่น ๆ ->SAPการพัฒนาแอปพลิเคชัน UI5 -> โครงการแอปพลิเคชัน

สร้างโครงการแอปพลิเคชันสำหรับ SAPUI5 โดยทำตามตัวช่วยที่เปิดขึ้นมา ดูภาพหน้าจอด้านล่าง

ป้อนชื่อของโครงการ ปล่อยให้ตัวเลือกอื่นๆ ยังคงเหมือนเดิมตามที่วิซาร์ดแนะนำ

ในภาพหน้าจอด้านบน มีไลบรารี 2 ประเภทที่แสดงเป็นปุ่มตัวเลือก

ทรัพย์.ม
sap.ui.commons

เมื่อคุณเลือก sap.m คุณกำลังบอกให้วิซาร์ดสร้างโปรเจ็กต์แอปพลิเคชัน UI5 ซึ่งส่วนบูทสแตรปจะรวมไลบรารี sap.m ไว้โดยอัตโนมัติซึ่งมีไว้สำหรับสร้างเว็บแอปพลิเคชันแบบตอบสนอง

ต่อไปในนี้ SAP บทช่วยสอน FIORI คุณจะเห็นส่วนด้านล่างของวิซาร์ดที่คุณต้องการสร้างมุมมองเริ่มต้น มุมมองเริ่มต้นคือมุมมองที่จะแสดงผลก่อนเมื่อมีการเข้าถึงแอปพลิเคชัน

ที่นี่คุณจะต้องตั้งชื่อมุมมองและเลือกประเภทของมุมมอง SAPUI5 รองรับมุมมอง 4 ประเภทดังที่เห็นได้จากหน้าจอด้านบน ดังนั้น UI ของ SAPสามารถสร้างแอปพลิเคชัน UI5 ได้โดยใช้ Javascript หรือ XML หรือ JSON หรือ HTML แล้วแต่ภาษาที่คุณพอใจ

เมื่อสิ้นสุดตัวช่วยสร้าง โปรเจ็กต์ใหม่จะถูกสร้างขึ้นและแสดงบนหน้าต่าง Project Explorer ของ Eclipse ชอบด้านล่าง

ขั้นตอนที่ 2) รหัส Component.js

ต่อไปให้เราสร้างไฟล์ Component.js และเขียนโค้ดด้านล่างลงไป

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

  
  },
});

ขั้นตอนที่ 3) รหัส Index.html

ต่อไป ให้เราแจ้งไฟล์ index.html ที่จะโหลด Component.js เข้ามา SAPUI5 เมื่อเข้าถึงแอปพลิเคชันจากเบราว์เซอร์ ดังนั้นเขียนโค้ดด้านล่างลงในไฟล์ 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>

ขั้นตอนที่ 4) รหัส DisplayMonthView.view.xml

ต่อไป ให้เราเขียนโค้ดในมุมมองเดือนที่แสดงซึ่งจะแสดงเดือนที่ได้รับหมายเลขเดือนจากส่วนประกอบหลัก

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

หลังจากที่คุณวางโค้ดด้านบนแล้ว มุมมองของคุณควรมีลักษณะดังนี้-

ขั้นตอนที่ 5) รหัส DisplayMonthView.controller.js

และสุดท้าย ให้เราเขียนโค้ดของไฟล์ Controller ของ DisplayMonthView

โค้ดนี้เขียนเฉพาะในเมธอด onInit() hook ของคอนโทรลเลอร์นี้ ดังนั้นจึงวางเฉพาะโค้ด onInit() ที่นี่เท่านั้น ไฟล์ส่วนที่เหลือถูกสร้างขึ้นตามกรอบงาน

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

ขั้นตอนที่ 6) การปรับใช้แอปพลิเคชันบน SAP เซิร์ฟเวอร์เกตเวย์ Netweaver

ปรับใช้โปรเจ็กต์และระบุชื่อทางเทคนิคของแอปพลิเคชัน BSP ซึ่งจะถูกสร้างขึ้นบนเซิร์ฟเวอร์ส่วนหน้า ABAP ให้ชื่อเป็น zdisplaymonth- ณ จุดนี้ โครงการใบสมัครของคุณควรมีลักษณะดังนี้

ส่วนที่ 2) การสร้างองค์ประกอบหลัก

ตอนนี้ถึงเวลาสร้างส่วนประกอบใหม่ (ส่วนประกอบหลัก) ซึ่งจะใช้ส่วนประกอบที่เราสร้างไว้ในบทช่วยสอนนี้

ขั้นตอนที่ 1) สร้างใหม่ SAPแอปพลิเคชัน UI5

ไปที่ไฟล์ -> ใหม่ -> อื่น ๆ ->SAPการพัฒนาแอปพลิเคชัน UI5 -> โครงการแอปพลิเคชัน จากนั้นทำตามคำแนะนำของวิซาร์ดเพื่อสร้างใหม่ SAPโครงการแอปพลิเคชัน UI5 ซึ่งได้อธิบายไว้โดยละเอียดในขั้นตอนที่ 1 ของส่วนที่ 1 ในบทช่วยสอนด้านบนนี้

ชื่อของโปรเจ็กต์ Component หลักคือ หมายเลขบัตร และชื่อทางเทคนิคของแอปพลิเคชัน BSP ที่สร้างขึ้นหลังจากการปรับใช้ SAPองค์ประกอบ UI5 ไปยังเซิร์ฟเวอร์ส่วนหน้า ABAP คือ zpassnum. โครงสร้างโครงการจะมีลักษณะดังนี้

ให้เราเขียนโค้ดในไฟล์ index.html, Component.js และ PassNum.view.xml และ PassNum.controller.js

ขั้นตอนที่ 2) ซอร์สโค้ดของ 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-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>

ขั้นตอนที่ 3) ซอร์สโค้ดของไฟล์ Component.js ของ Parent Component

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

ขั้นตอนที่ 4) ซอร์สโค้ดของไฟล์ 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>

หลังจากที่คุณใช้โค้ดด้านบนในมุมมองของคุณ มุมมองของคุณควรมีลักษณะดังนี้

ขั้นตอนที่ 5) ซอร์สโค้ดของ PassNum.controller.js

เฉพาะเมธอด onInit() เท่านั้นที่มีการเปลี่ยนแปลง ทุกสิ่งทุกอย่างในไฟล์นี้ยังคงเหมือนเดิม

onInit: function() {

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

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

ขั้นตอนที่ 6) การปรับใช้องค์ประกอบหลักไปที่ SAP เซิร์ฟเวอร์เกตเวย์ Netweaver

ปรับใช้แอปพลิเคชันบนเซิร์ฟเวอร์ส่วนหน้า ABAP และเรียกใช้ คุณควรจะสามารถเรียกใช้ได้โดยคลิกขวาที่โปรเจ็กต์แล้วคลิกตัวเลือก 'เรียกใช้บนเซิร์ฟเวอร์ ABAP'

URL ด้านล่างนี้จะเปิดขึ้นในเบราว์เซอร์ Eclipse
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

คัดลอก URL และเรียกใช้ในเบราว์เซอร์จริง ในชื่อโฮสต์ด้านบนที่ทำเครื่องหมายด้วยสีเหลืองคือชื่อโฮสต์ของเซิร์ฟเวอร์ส่วนหน้า ABAP ของคุณ

เอาท์พุต

คลิกที่ปุ่ม 'แรก' มกราคมควรแสดงในองค์ประกอบย่อย

เพลิดเพลินกับการสร้างเว็บแอปพลิเคชันที่สวยงามและตอบสนองได้ดีโดยใช้ SAPUI5

สรุป

ในการนี้ SAPกวดวิชา UI5 เราได้เรียนรู้:

SAPสำรวจ UI5 แล้ว: SAPUI5 เป็นรุ่นล่าสุดในซีรีส์ของ SAP เทคโนโลยีการพัฒนา UI
ความหมายของ SAP UI5: SAPUI5 คือชุดของไลบรารีที่ใช้ในการสร้างแอปพลิเคชันเว็บที่ตอบสนอง
องค์ประกอบของ SAPสถาปัตยกรรม UI5 ประกอบด้วย อุปกรณ์ ไคลเอนต์ NetWeaver Gateway และ Persistence Layer
A SAPUI5 Component คือชิ้นส่วนของโค้ดที่นำมาใช้ซ้ำเมื่อใดก็ตามที่ต้องการ
ประเภทของ SAPส่วนประกอบ UI5 ได้แก่ 1) ส่วนประกอบ UI 2) ส่วนประกอบแบบไม่มีหน้า
เราได้เรียนรู้เกี่ยวกับการใช้ส่วนประกอบ sapui5 หนึ่งไปยังส่วนประกอบ sapui5 อีกส่วนหนึ่ง และส่งข้อมูลระหว่างส่วนประกอบทั้งสอง