จากบทความก่อนหน้านี้ (เริ่มต้นพัฒนา SAP Fiori ง่ายๆ ด้วยตนเอง) ได้กล่าวถึงวิธีการติดตั้ง และ วิธีการสร้างโปรเจคสำหรับการพัฒนา SAP Fiori ไปแล้ว ในบทความนี้ จะมาสอนวิธีการใช้งาน Component เบื้องต้น ที่ใช้ในการพัฒนา SAP Fiori สามารถทำได้ด้วยตนเองผ่านวิธีการด้านล่างนี้
รู้จัก Component Fiori เบื้องต้น
สามารถศึกษาการใช้งาน Component เบื้องต้น และตัวอย่าง Source Code ได้ตาม Link นี้ https://sapui5.hana.ondemand.com/#/controls
ตัวอย่างหน้า Component Fiori
การสร้าง View เบื้องต้น
หน้า View ใน SAPUI5 มีหน้าที่จัดการการแสดงผลที่หน้าจอ ซึ่งหน้า View นี้จะใช้ XML ในการพัฒนา โดยมีหลักการตั้งชื่อที่จะมีการลงท้ายด้วย *.view.xml และการสร้าง 1 View จะมี 1 Controller เสมอ ตามตัวอย่างด้านล่าง
ขั้นตอนที่ 1 เปิด File View1.view.xml
จอวิธีการสร้าง View เบื้องต้น
ขั้นตอนที่ 2 ใส่ Component เข้าไป ซึ่งในตัวอย่างผู้เขียนจะใส่เป็น Label และ Input เมื่อใส่แล้ว ให้กดปุ่ม Run ตามภาพตัวอย่างด้านล่างนี้
หน้าจอวิธีการสร้าง View เบื้องต้น
จะแสดงผลลัพธ์บน Web Browser ซึ่งประกอบด้วย Label และ Input ตามภาพ
หน้าจอวิธีการสร้าง View เบื้องต้น
การใช้ Controller เบื้องต้น
เป็นส่วนที่ควบคุม Logic การทำงานของหน้า View นั้นๆ หลักการตั้งชื่อ จะเป็นชื่อเดียวกันกับชื่อ View และจะลงท้ายด้วย *.controller เสมอ และจะใช้ Syntax เดียวกันกับ JavaScript สามารถอ่านรายละเอียดหลักการเขียน JavaScript เบื้องต้นได้จาก Link นี้ https://www.w3schools.com/js/js_intro.asp
โดยตัวอย่างนี้ ผู้เขียนจะให้ Message Box แสดงที่หน้าจอ หลังจากกดปุ่ม สามารถทำตามได้ดังนี้
ขั้นตอนที่ 1 เปิด File View1.view.xml และใส่ Component Button และกำหนดชื่อ Function event ตอนกดปุ่มเข้าไป ในตัวอย่างนี้ จะใช้ชื่อ Function ว่า fnOnPressButton
หน้าจอวิธีการใช้ Controller เบื้องต้น
ขั้นตอนที่ 2 เปิด File View1.controller.js และใส่ Function ที่ประกาศไว้ในหน้า View1.view.xml ซึงก็คือ fnOnPressButton และใส่คำสั่งให้เปิด Message Box ตามภาพ
หน้าจอวิธีการใช้ Controller เบื้องต้น
หน้าจอวิธีการใช้ Controller เบื้องต้น
เมื่อใส่คำสั่งเรียบร้อยแล้ว สามารถทดสอบรันด้วย Web Browser ซึ่งจะแสดงปุ่มขึ้นมาและเมื่อกดปุ่ม จะแสดง Message Box ขึ้นมาที่หน้าจอ ตามภาพด้านล่าง
หน้าจอวิธีการใช้ Controller เบื้องต้น
สำหรับบทความนี้ จะเป็นตัวอย่างเบื้องต้น เพื่อให้สามารถเริ่มต้นพัฒนา SAP Fiori ได้ และสามารถนำไปประยุกต์ใช้กับฟังก์ชันทางธุรกิจอื่นๆ โดยผู้เขียนหวังจะเป็นประโยชน์ต่อผู้ที่สนใจพัฒนา SAP Fiori ด้วยตนเอง
Author: Kantee
บทความที่เกี่ยวข้อง
เริ่มต้นพัฒนา SAP Fiori ง่ายๆ ด้วยตนเอง
http://www.amarmn.com/sapui5-programming-for-beginners/
https://www.w3schools.com/js/js_intro.asp
https://sapui5.hana.ondemand.com/#/controls