วิธีการใช้งาน Component เพื่อพัฒนา SAP Fiori เบื้องต้น

จากบทความก่อนหน้านี้ (เริ่มต้นพัฒนา 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

ปรึกษาผู้เชี่ยวชาญ เพื่อรับคำแนะนำฟังก์ชันให้เหมาะสมกับธุรกิจของท่าน

คุณรจิตพิชญ์ (แพรว)

เบอร์ : (+66)62-859-3566

คุณหทัยชนก (แคท)

เบอร์ : (+66)86-754-5506

คุณวันทนีย์ (พิม)

เบอร์ : (+66)99-249-7651

แชร์ :
Scroll to Top