SAPบทช่วยสอน UI5 สำหรับผู้เริ่มต้น
เจสสิก้า เบลค
⚡ สรุปอย่างชาญฉลาด
SAPUI5 คือ SAPเฟรมเวิร์ก HTML5 ที่ตอบสนองต่อทุกอุปกรณ์ (Responsive HTML5) สำหรับแอปพลิเคชันเว็บระดับองค์กรบนเดสก์ท็อป มือถือ และแท็บเล็ต คู่มือนี้จะอธิบายสถาปัตยกรรม MVC รูปแบบคอมโพเนนต์ ไลบรารี และวิธีการสร้างคอมโพเนนต์หลักและคอมโพเนนต์ย่อยภายในเฟรมเวิร์กนี้ Eclipse.
ความหมายของ 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 ทำงานได้ แอปพลิเคชัน UI5 สามารถเข้าถึงได้ผ่านแอปบนมือถือหรือเบราว์เซอร์ใดก็ได้ เลเยอร์นี้เรียกว่า 'เลเยอร์การนำเสนอ'
SAPแอปพลิเคชัน UI5 และบริการ oData อยู่บน SAP เซิร์ฟเวอร์เกตเวย์เน็ตเวิร์กเวอร์ เลเยอร์นี้ของสถาปัตยกรรมเรียกว่า 'เลเยอร์แอปพลิเคชัน'
ตรรกะทางธุรกิจที่แท้จริงถูกนำมาใช้ใน SAP ระบบหลัก เช่น ECC, CRM และ BW สามารถนำตรรกะทางธุรกิจไปใช้ได้โดยใช้ระบบเหล่านี้ SAP โปรแกรมและโมดูลฟังก์ชัน SAP ข้อมูลธุรกรรมและข้อมูลหลักอาศัยอยู่ SAP ระบบต่างๆ ชั้นนี้เรียกว่า 'ชั้นฐานข้อมูล' หรือ 'ชั้นการคงอยู่ของข้อมูล'
SAPส่วนประกอบ UI5
คอมโพเนนต์คือส่วนของโค้ดที่สามารถนำมาใช้ซ้ำได้ มีคอมโพเนนต์ 2 ประเภทที่จัดเตรียมโดย SAPUI5:
- ส่วนประกอบ UI – ส่วนประกอบเหล่านี้แสดงถึงส่วนติดต่อผู้ใช้ซึ่งประกอบด้วยองค์ประกอบ UI โดยอิงตาม SAPคลาส UI5 ที่ชื่อว่า sap.ui.core.UIComponent
- ส่วนประกอบไร้หน้า – ส่วนประกอบเหล่านี้ไม่มีส่วนติดต่อผู้ใช้ โดยมีพื้นฐานมาจาก... SAPคลาส UI5 เรียกว่า sap.ui.core.Component
โดยพื้นฐานแล้ว Component คือโฟลเดอร์ เมื่อคุณสร้างใหม่ SAPแอปพลิเคชัน UI5 คุณจะเห็นโครงสร้างโฟลเดอร์ที่สร้างใน Project Explorer ของคุณดังนี้
ในแอปพลิเคชัน UI5 นี้ PassNum เป็นคอมโพเนนต์ ไฟล์ Component.js เป็นสิ่งจำเป็นสำหรับแอปพลิเคชัน UI5 เพื่อให้ทำงานได้เหมือนคอมโพเนนต์ทั่วไป
ต่อไปในนี้ SAPไอยู5 Eclipse บทช่วยสอน เราจะได้เรียนรู้วิธีการตั้งค่า SAPUI5
SAPการตั้งค่า UI5
ก่อนที่เราจะเริ่ม คุณต้องตรวจสอบให้แน่ใจว่า:
- Eclipse (เวอร์ชัน Luna) ได้รับการติดตั้งบนแล็ปท็อปของคุณแล้ว
- SAP เครื่องมือพัฒนาสำหรับ Eclipse Luna ได้รับการติดตั้งบนระบบของคุณแล้ว Eclipse (SAP เครื่องมือพัฒนาสำหรับ Eclipse ลูน่า – https://tools.hana.ondemand.com/luna/)
- SAP โปรแกรม Logon Pad ติดตั้งเรียบร้อยแล้ว และคุณสามารถเข้าถึงได้ SAP ระบบ NetWeaver Gateway สำหรับการติดตั้งและทดสอบแอปพลิเคชันที่เราจะสร้างในบล็อกนี้
หลังจากสร้างแอปพลิเคชันเสร็จสมบูรณ์แล้ว ควรมีลักษณะดังนี้:
ในการนี้ SAPในคู่มือสอนการใช้งาน UI5 นี้ เราจะสร้างคอมโพเนนต์ 2 ตัว คือ คอมโพเนนต์หลัก (Parent Component) และคอมโพเนนต์ย่อย (Child Component) โดยเริ่มจากการสร้างคอมโพเนนต์ย่อยก่อน แล้วจึงนำไปใช้งานในคอมโพเนนต์หลัก
มาเริ่มทำให้มือของเราสกปรกกันเถอะ
ส่วนที่ 1) สร้างแอปพลิเคชันย่อย
เป้าหมายของเราคือการสร้างคอมโพเนนต์ย่อยที่จะรับค่าตัวเลขตั้งแต่ 1 ถึง 12 และแสดงชื่อเดือน ตัวอย่างเช่น เมื่อได้รับค่า 3 ก็ควรแสดงคำว่า 'มีนาคม'
ขั้นตอนที่ 1) สร้างโครงการ UI
ไปที่ไฟล์ -> ใหม่ -> อื่น ๆ ->SAPการพัฒนาแอปพลิเคชัน UI5 -> โครงการแอปพลิเคชัน
สร้างโครงการแอปพลิเคชันสำหรับ SAPUI5 โดยทำตามขั้นตอนในตัวช่วยสร้าง ดูภาพหน้าจอประกอบด้านล่าง
ป้อนชื่อโครงการ และปล่อยให้ตัวเลือกอื่นๆ เป็นไปตามที่ตัวช่วยแนะนำ
ในภาพหน้าจอข้างต้น มีห้องสมุด 2 ประเภทแสดงเป็นปุ่มตัวเลือก (radio buttons):
- ทรัพย์.ม
- sap.ui.commons
เมื่อคุณเลือก sap.m คุณกำลังบอกตัวช่วยสร้างให้สร้างโปรเจ็กต์แอปพลิเคชัน UI5 ซึ่งส่วน bootstrap จะรวมไลบรารี sap.m โดยอัตโนมัติ ซึ่งมีไว้สำหรับการสร้างเว็บแอปพลิเคชันที่ตอบสนองต่ออุปกรณ์ต่างๆ
ต่อไปในนี้ SAP ในบทช่วยสอน FIORI คุณจะเห็นส่วนหนึ่งของวิซาร์ดด้านล่างที่คุณต้องสร้างมุมมองเริ่มต้น (Initial View) มุมมองเริ่มต้นคือมุมมองที่จะแสดงผลเป็นอันดับแรกเมื่อมีการเข้าถึงแอปพลิเคชัน
ตรงนี้คุณต้องระบุชื่อของมุมมองและเลือกประเภทของมุมมอง SAPUI5 รองรับมุมมอง 4 ประเภทดังที่เห็นได้จากหน้าจอด้านบน ดังนั้น UI ของ SAPสามารถสร้างแอปพลิเคชัน UI5 ได้โดยใช้ Javaสคริปต์ หรือ 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 เมื่อมีการเรียกใช้งานแอปพลิเคชัน โดยเขียนโค้ดด้านล่างลงในไฟล์ 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
ต่อไป เรามาเขียนโค้ดในวิว displaymonth เพื่อแสดงเดือนที่มีหมายเลขซึ่งได้รับมาจากคอมโพเนนต์หลักกัน
<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() เท่านั้น ดังนั้นจึงคัดลอกมาวางไว้ที่นี่เพียงส่วนเดียว ส่วนที่เหลือของไฟล์นั้นเป็นสิ่งที่เฟรมเวิร์กสร้างขึ้นมาโดยอัตโนมัติ
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 เซิร์ฟเวอร์เกตเวย์เน็ตวีเวอร์
ปรับใช้โปรเจ็กต์และตั้งชื่อทางเทคนิคให้กับแอปพลิเคชัน BSP ที่สร้างขึ้นบนเซิร์ฟเวอร์ส่วนหน้า ABAP โดยตั้งชื่อว่า... zdisplaymonthโปรเจ็กต์ของคุณควรมีลักษณะดังต่อไปนี้
ส่วนที่ 2) การสร้างองค์ประกอบหลัก
ตอนนี้ถึงเวลาสร้างคอมโพเนนต์ใหม่ (คอมโพเนนต์หลัก) ซึ่งจะใช้งานคอมโพเนนต์ที่เราสร้างไปแล้วในบทเรียนนี้
ขั้นตอนที่ 1) สร้างใหม่ SAPแอปพลิเคชัน UI5
ไปที่ไฟล์ -> ใหม่ -> อื่น ๆ ->SAPการพัฒนาแอปพลิเคชัน UI5 -> โครงการแอปพลิเคชัน จากนั้นทำตามคำแนะนำของตัวช่วยสร้างเพื่อสร้างโครงการใหม่ SAPโครงการแอปพลิเคชัน UI5 ซึ่งได้อธิบายไว้โดยละเอียดในขั้นตอนที่ 1 ของส่วนที่ 1 ในบทช่วยสอนด้านบนนี้
ชื่อของโปรเจ็กต์คอมโพเนนต์หลักคือ หมายเลขรหัสผ่านชื่อทางเทคนิคของแอปพลิเคชัน BSP ที่สร้างขึ้นหลังการติดตั้งใช้งานคือ zpassnumโครงสร้างของโครงการจะเป็นดังด้านล่างนี้
ต่อไปเรามาเขียนโค้ดในไฟล์ index.html, Component.js, PassNum.view.xml และ PassNum.controller.js กัน
ขั้นตอนที่ 2) แหล่งที่มา Code ของไฟล์ Index.html ของคอมponentหลัก
<!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>
หลังจากที่คุณใช้โค้ดข้างต้นในส่วนแสดงผล (view) แล้ว ส่วนแสดงผลของคุณควรมีลักษณะดังต่อไปนี้
ขั้นตอนที่ 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 เซิร์ฟเวอร์เกตเวย์เน็ตวีเวอร์
ติดตั้งแอปพลิเคชันบนเซิร์ฟเวอร์ ABAP frontend แล้วเรียกใช้งาน คุณควรจะสามารถเรียกใช้งานได้โดยการคลิกขวาที่โปรเจ็กต์แล้วเลือกตัวเลือก 'Run on ABAP server'
ด้านล่าง URL จะเปิดใน Eclipse เบราว์เซอร์
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html
คัดลอก URL และเรียกใช้งานในเบราว์เซอร์จริง ในตัวอย่างข้างต้น โฮสต์เนม (ที่ทำเครื่องหมายสีเหลือง) คือโฮสต์เนมของเซิร์ฟเวอร์ ABAP frontend ของคุณ
เอาท์พุต
คลิกที่ปุ่ม 'แรก' แล้วเดือนมกราคมจะปรากฏในส่วนประกอบย่อย
เพลิดเพลินกับการสร้างเว็บแอปพลิเคชันที่สวยงามและตอบสนองได้ดีโดยใช้ SAPUI5
