การใช้ AJAX ในแพลตฟอร์ม Agile OutSystems

อ่านงวดก่อนหน้าในซีรีย์: เริ่มต้นใช้งานแพลตฟอร์ม OutSystems Agile, เรียนรู้พื้นฐานของแพลตฟอร์ม OutSystems Agile Platform, อธิบายประสบการณ์สตูดิโอ OutSystems Agile Platform Service, ทำงานกับ Integration Studio ของ OutSystems Agile Platform ปรับใช้แอปพลิเคชันที่สร้างขึ้นด้วย OutSystems แพลตฟอร์ม Agile การเพิ่ม ECT ไปยัง eSpace ด้วยแพลตฟอร์ม Agile OutSystems และการทำงานกับงานที่กำหนดเวลาไว้ในแพลตฟอร์ม Agile OutSystems

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

อย่างไรก็ตามมีการใช้ AJAX ที่เหมาะสมมาก แม้จะใช้หนึ่งในไลบรารี AJAX ยอดนิยมอย่าง Dojo หรือ jQuery นักพัฒนาก็จำเป็นต้องสร้างระบบแบ็กเอนด์ที่เขียนด้วยภาษาเช่น Java หรือ C # โต้ตอบกับแอปพลิเคชันฝั่งไคลเอ็นต์ที่เขียนด้วย JavaScript ซึ่งเพิ่มความซับซ้อน (โปรดทราบว่ามีช่วงการเรียนรู้ที่จะใช้ห้องสมุดเหล่านี้)

ดังนั้นฉันจึงไม่ได้ตั้งใจที่จะใช้ AJAX ใน Rat Catcher ในตอนแรกเพราะมันไม่จำเป็นในแอปพลิเคชัน ท้ายที่สุดฉันสามารถอยู่กับ postbacks ในแอปพลิเคชันได้ถ้ามันหมายความว่าฉันไม่ต้องทำงานมากขึ้น แต่ฉันเห็นว่า AJAX ทำงานได้ดีเพียงใดในไซต์ OutSystems ดังนั้นฉันจึงตัดสินใจถ่ายมัน มันดีมากที่พบว่าการทำงานกับ AJAX ในแพลตฟอร์ม Agile นั้นต้องใช้เวลาเรียนรู้ประมาณห้านาทีการเปลี่ยนแปลงเล็กน้อยในตรรกะของคุณและการลากวางเพียงเล็กน้อย และจากสิ่งที่กล่าวมาเวอร์ชัน 5.1 จะปรับปรุงให้ดียิ่งขึ้นกว่านี้

เมื่อฉันตัดสินใจที่จะลอง AJAX ในแอปพลิเคชันมันมีฟังก์ชั่นเล็กน้อย: ฉันต้องการแทนที่ป้ายกำกับในพื้นที่เข้าสู่ระบบด้วยป้ายกำกับที่ควบคุมได้ซึ่งจะหายไปเมื่อคุณเริ่มพิมพ์ สิ่งนี้จะช่วยประหยัดพื้นที่หน้าจอแนวนอนและทำให้เค้าโครงหน้าจอสะอาดขึ้นเล็กน้อย คุณสามารถเห็นผลลัพธ์ใน รูปที่ A รูปที่

การใช้วิดเจ็ต Input_SetPrompt AJAX ในส่วนเข้าสู่ระบบ

มันเป็นของแน่นอนที่จะทำให้เกิดผลนี้ ก่อนอื่นฉันต้องเพิ่มการอ้างอิงไปยัง RichWidgets Extension ใน eSpace ของฉัน หากคุณวางแผนที่จะใช้ AJAX เป็นจำนวนมากทำให้มันง่ายสำหรับตัวคุณเองและเพียงแค่คว้าทุกสิ่งใน RichWidgets Extension ฉันพยายามเลือกและเลือกสิ่งที่ฉันจะทำการอ้างอิงถึง แต่ระบบการอ้างอิงเพิ่มไม่ทำให้ชัดเจนว่าต้องใช้เอนทิตีและการดำเนินการใดสำหรับแต่ละวิดเจ็ต เอกสารช่วย แต่สำหรับโครงการที่จะใช้วิดเจ็ตจำนวนมาก (และเมื่อคุณเริ่มต้นแล้วก็ยากที่จะต้านทานการล่อลวงให้ใช้คอลเลกชัน RichWidgets มากขึ้น) คุณอาจได้รับทั้งหมด

ต่อไปฉันต้องมีฟิลด์บนหน้าจอ สิ่งนี้สำคัญมาก: คุณต้องระบุแอตทริบิวต์ชื่อสำหรับฟิลด์ จากนั้นฉันลาก Input_SetPrompt Web Block ไปที่หน้าจอเว็บหรือบล็อกจาก RichWidgets Screen Flow ทางด้านขวา (เพื่อประโยชน์ขององค์กรขอแนะนำ แต่ไม่บังคับว่านักพัฒนาวางรายการไว้ถัดจากวิดเจ็ตที่มันจะส่งผลกระทบ) ในที่สุดฉันต้องบอก Input_SetPrompt ว่าจะแสดงข้อความอะไรและระบุ ID ของวิดเจ็ต ฉันอยากให้มันทำตาม (นี่คือเหตุผลว่าทำไมมันถึงต้องการชื่อ) ( รูปที่ B ) รูปที่ B

วิดเจ็ต Input_SetPrompt และคุณสมบัติใน Service Studio

เมื่อฉันเห็นว่าสิ่งนี้ทำได้ง่ายฉันก็ใช้การควบคุม Popup_Editor ร่วมกับ Feedback_Message และ AjaxRefresh เพื่อให้สามารถแก้ไขข้อมูลผู้ใช้ได้ในหน้าต่างซ้อนทับที่ดี ฉันต้องการทำเช่นนี้เพราะเครื่องมือแก้ไขข้อมูลผู้ใช้จะไม่มีฟิลด์เพียงพอสำหรับหน้าจอเว็บแยกต่างหากให้รู้สึกถูกต้อง ใน Rat Catcher ผู้ใช้จะเชื่อมโยงกับบัญชี สิ่งนี้ทำให้ลูกค้าแต่ละราย (แสดงโดยบัญชี) มีผู้ใช้ระบบมากเท่าที่พวกเขาต้องการโดยไม่ต้องจ่ายเงินเพิ่ม ฉันไม่สนใจจำนวนผู้ใช้ที่มีเพราะมันเป็นจำนวนของเอกสารที่ใส่ลงในระบบที่ทำให้โหลดบนเซิร์ฟเวอร์ ในความเป็นจริงจากที่ฉันนั่งผู้ใช้มากขึ้นต่อบัญชีทำให้ง่ายขึ้นสำหรับลูกค้าที่จะต้องมีบัญชีที่มีราคาแพง! แต่นี่หมายความว่าฉันต้องการวิธีสำหรับผู้ดูแลบัญชีในการแก้ไขข้อมูลผู้ใช้รีเซ็ตรหัสผ่านและสร้างผู้ใช้ใหม่ ท้ายที่สุดฉันอยากให้ผู้ใช้โทรหาใครบางคนใน บริษัท เพื่อขอความช่วยเหลือไม่ใช่ฉัน

ในการสร้างโปรแกรมแก้ไขผู้ใช้สิ่งที่ฉันต้องทำก็คือสร้างหน้าจอเว็บที่ทำหน้าที่การทำงานที่จำเป็น ฉันทำให้หน้าจอ EditUser ดูธรรมดาเพราะได้รับการออกแบบให้เป็นหน้าต่างป๊อปอัพเหนือหน้าจอที่เหลือ ( รูปที่ C ) ฉันให้พารามิเตอร์อินพุตเสริมกับ ID ผู้ใช้ หากไม่มีการระบุ ID ผู้ใช้ระบบจะสร้างผู้ใช้ใหม่ หากระบุ ID ผู้ใช้หน้าจอจะมีตัวเลือกในการลบผู้ใช้ รูปที่ C

หน้าจอ EditUser Web ซึ่งธรรมดามากโดยไม่มีส่วนหัวหรือส่วนท้าย
ไม่มีอะไรพิเศษเป็นพิเศษเกี่ยวกับตรรกะในหน้าจอนี้จนกว่าคุณจะดูที่ SaveUser หรือ DeleteUser Actions เพื่อดูว่าเกิดอะไรขึ้นเมื่องานเสร็จ ( รูปที่ D ) การเรียกใช้ Popup_Editor_Notify ทำให้หน้าจอที่สร้างป๊อปอัปรู้ว่างานเสร็จสิ้นและสามารถให้พารามิเตอร์ส่งคืนได้ ฉันให้รหัสผู้ใช้ซึ่งถูกทิ้ง แต่ฉันอาจต้องการมันในอนาคต การเรียกไปที่ Popup_Editor_Close จะปิดหน้าต่างและควรเป็น Action ขั้นสุดท้ายบนหน้าจอ ( รูปที่ D ) รูป D

ตรรกะใต้หน้าจอ EditUser Web ของฉัน - Popup_Editor_Notify และ Popup_Editor_Close Actions - เป็นสิ่งจำเป็นสำหรับการทำงานของ AJAX
ฉันต้องการที่จะผูกป๊อปอัพลงในหน้าจอบัญชีหลัก สิ่งแรกที่ฉันต้องทำคือให้วิธีในการทำให้เครื่องมือแก้ไขแสดงผลดังนั้นฉันจึงเพิ่มลิงก์ไปยังหน้า ลิงก์ชี้ไปที่หน้าจอ EditUser Web ( รูป E ) ต่อไปฉันลากตัวบล็อก Popup_Editor จาก RichWidgets ถัดจากลิงค์ (อีกครั้งการวางตำแหน่งนั้นมีไว้เพื่อเหตุผลด้านองค์กรเท่านั้น) วิดเจ็ตต้องเติมแอตทริบิวต์จำนวนหนึ่ง ที่สำคัญที่สุดคือ ID ของวิดเจ็ตลิงก์ เนื่องจากข้อกำหนดนี้จำเป็นต้องให้แอตทริบิวต์ชื่อสำหรับลิงก์ของคุณ (เช่นเดียวกับ Input_SetPrompt) เนื่องจากจะไม่อนุญาตให้คุณเลือก ID ในตัวแก้ไขนิพจน์ คุณยังสามารถระบุหัวเรื่องและความกว้างและความสูงได้ หากคุณไม่ได้เลือกความกว้างหรือความสูงก็จะใช้การปรับขนาดอัตโนมัติ ฉันไม่พอใจ 100% กับการปรับขนาดอัตโนมัติเนื่องจากการปรับขนาดขึ้นอยู่กับการควบคุมและไม่คำนึงถึงเครื่องหมายดอกจันที่ใช้ทำเครื่องหมายฟิลด์บังคับดังนั้นขนาดอัตโนมัติมีขนาดเล็กเกินไปถ้าคุณมีฟิลด์บังคับ สุดท้ายคุณต้องระบุชื่อของการดำเนินการที่จะดำเนินการเมื่อมีการเรียกใช้เหตุการณ์แจ้งเตือนเมื่อมีการตัดคำแก้ไขและเรียกใช้ Popup_Editor_Notify รูปที่ E

หน้าจอการตั้งค่าบัญชีและที่โต้ตอบกับหน้าจอ EditUser

งาน AJAX ทั้งหมดนี้ทำให้ฉันรู้สึกผูกพัน: ฉันกำลังแก้ไขข้อมูลที่แสดงต่อผู้ใช้ แต่เนื่องจากฉันไม่ได้ใช้ postbacks เพื่อทำสำเนาข้อมูลบนหน้าจอจึงไม่ได้รับการปรับปรุง นี่คือสิ่งที่มีเล่ห์เหลี่ยมเล็กน้อย แต่คอลเลกชัน RichWidgets ยังคงเป็นตั๋วไปยังทางออกที่ดี

เดิมทีฉันได้ตั้งค่าตารางของฉันให้เชื่อมโยงโดยตรงกับคิวรีที่ทำงานในการเตรียมการของหน้าจอ นี่เป็นสิ่งที่ดีและสวยงาม แต่ไม่ได้ทำงานกับวิธีการทำสิ่งต่างๆของ AJAX ปัญหาคือฉันไม่มีวิธีการเตรียมการซ้ำอีกครั้ง แทนที่จะผูกตารางกับแบบสอบถามโดยตรงฉันต้องการสร้างตัวแปรท้องถิ่นของชนิดรายการบันทึกจากนั้นใช้เครื่องมือแก้ไขระเบียนเพื่อให้หน่วยงานเดียวกันกับที่เลือกแบบสอบถาม ต่อไปฉันผูกแหล่งข้อมูลของตารางกับตัวแปรนั้นจากนั้นฉันก็เข้าสู่การเตรียมการและใช้วิดเจ็ต Assign เพื่อตั้งค่าตัวแปรนั้นให้เท่ากับผลลัพธ์ของแบบสอบถาม สิ่งนี้ทำให้สิ่งต่างๆราบรื่น

รูป F

การแก้ไขผู้ใช้ในการดำเนินการ

ในการรับตารางที่อัปเดตเมื่อฉันทำการแก้ไขผู้ใช้เสร็จแล้วฉันได้ดำเนินการใหม่ที่ชื่อว่า RefreshUserList ฉันคัดลอกแบบสอบถามจากการเตรียมไปยังการกระทำนี้เช่นเดียวกับการกำหนดให้กับตัวแปรท้องถิ่น จากนั้นฉันเพิ่มวิดเจ็ต AjaxRefresh ลงใน Action ชี้ไปที่แอตทริบิวต์ Widget ของตารางและเลือกเอฟเฟกต์พิเศษที่ฉันต้องการให้ตารางแสดงเมื่อการอัพเดตเกิดขึ้น และฉันก็ทำเสร็จแล้ว! สิ่งหนึ่งที่ฉันค้นพบในภายหลังคือการใช้วิดเจ็ต List_LateLoad ฉันสามารถกำจัดแบบสอบถามในการเตรียมการซึ่งจะมีประโยชน์ในการให้ฉันที่เดียวเท่านั้นในการรักษาแบบสอบถาม

ตอนนี้ฉันมีการรีเฟรชตาราง AJAX-y ฉันตัดสินใจว่ามันจะเป็นการดีที่จะใช้ส่วนที่เหลือของแอปพลิเคชันและทำแบบเดียวกัน ในหน้าการตั้งค่าบัญชีฉันใช้ตัวแก้ไขป๊อปอัพสำหรับที่อยู่ทางไปรษณีย์และเรียกเก็บเงินและรายการโดเมนเริ่มต้นเพื่อข้ามไป ต่อไปฉันเพิ่มการตั้งค่าผู้ใช้ของฉันเป็นตัวแก้ไขป๊อปอัพจากบล็อกส่วนหัว ฉันยังใช้วิดเจ็ตคำติชมเพื่อส่งข้อความที่ดีสำหรับการเปลี่ยนรหัสผ่านและฟังก์ชั่นย่อยอื่น ๆ อีกสองสามตัวที่ไม่ต้องการหน้ายืนยันการเป่าเต็ม ฉันยังประเมินจำนวนของตารางและตัดสินใจที่จะเพิ่มวิดเจ็ต List_LateLoad ให้กับหลาย ๆ คน (ซึ่งทำให้เนื้อหาของรายการที่จะโหลดเป็นเหตุการณ์ AJAX หลังจากที่โหลดหน้าแทนที่จะโหลดด้วยการดึงหน้าจอเริ่มต้น) เช่นเดียวกับ List_Navigation องค์ประกอบที่อนุญาตให้ใช้สำหรับเพจจิ้ง / การนำทาง AJAX

ข้อสรุป

เมื่อฉันได้หยุดการเปลี่ยนแปลงที่จำเป็นในการย้ายจากวิธีการ postback ไปเป็นวิธี AJAX ฉันใช้เวลาน้อยกว่าหนึ่งชั่วโมงในการปรับปรุงแอปพลิเคชัน นอกจากนี้ตอนนี้ฉันคุ้นเคยกับรูปแบบที่จำเป็นในการใช้ AJAX ในแพลตฟอร์ม Agile

ฉันหวังว่าจะมีการเปลี่ยนแปลงในเวอร์ชัน 5.1 แต่แม้จะอยู่ในสถานะปัจจุบัน AJAX นั้นใช้งานง่ายเกินไปไม่ทำ

J.Ja

การเปิดเผยข้อมูลเกี่ยวกับความผูกพันของอุตสาหกรรมของจัสติน: จัสตินเจมส์ได้ทำสัญญากับ Spiceworks เพื่อเขียนคู่มือการซื้อผลิตภัณฑ์ เขามีสัญญากับ OpenAmplify ซึ่งเป็นเจ้าของโดย Hapax เพื่อเขียนชุดบล็อกการสอนและบทความต่างๆ และเขามีสัญญากับ OutSystems เพื่อเขียนบทความโค้ดตัวอย่าง ฯลฯ

© Copyright 2020 | mobilegn.com