ตัวอย่างตารางที่กำหนดไว้ล่วงหน้า
ในแล็บนี้ เราจะเห็นตัวอย่างง่ายๆ ที่แสดงวิธีใช้องค์ประกอบ DataTable องค์ประกอบนี้ช่วยให้เราเชื่อมโยงตารางข้อมูลกับหน้าของเราได้ดังนี้:
สำหรับตัวอย่างแรกนี้ เฉพาะคอมโพเนนต์ที่เติมข้อมูลล่วงหน้าแล้วเท่านั้นที่จะเชื่อมโยงจากคลาส bean ของเรา หลังจากนั้นจะแสดงวิธีจัดการข้อมูลแบบไดนามิก
เริ่มแรก มาสร้างโปรเจ็กต์ JSF ด้วยโครงสร้างต่อไปนี้:
ดังที่เราเห็น มีการสร้างคลาสจาวา 2 คลาส คลาสหนึ่งสอดคล้องกับคลาสบุคคลที่ช่วยให้เราประมวลผลผู้คนที่เราจะแสดงในตารางของเรา และอีกคลาสหนึ่งสำหรับ bean ที่จะช่วยให้เราจัดการตารางของเราตามลำดับ คอลัมน์และบันทึก
คลาส Person.java ให้ข้อมูลพื้นฐานของบุคคลที่เรากำลังจะแสดงในตาราง ที่นี่เราได้เพิ่มเมธอด set และ get ที่สอดคล้องกัน รวมถึงตัวสร้างพร้อมพารามิเตอร์เพื่อเติมข้อมูลผู้คนโดยตรง
คลาส TablaBean.java อ้างอิงถึงตารางและการจัดการบุคคลในนั้น บันทึกที่แสดงจะถูกจัดเก็บไว้ในประเภทบุคคล ArrayList ซึ่งตามวัตถุประสงค์ของคู่มือนี้ จะถูกเติมลงในตัวสร้าง
ใน index.xhtml เราสร้างองค์ประกอบ DataTable ซึ่งเราเชื่อมโยงรายชื่อบุคคลโดยตรงในค่าและในคอลัมน์ที่เกี่ยวข้องแอตทริบิวต์ของ bean ที่อ้างอิงใน var="data" โดย data เป็นองค์ประกอบที่แสดงถึงข้อมูลของ วัตถุบุคคลในแต่ละบรรทัดจากตาราง
เมื่อเรียกใช้เราจะได้สิ่งนี้
ดังที่เราเห็น ข้อมูลจะแสดงในโหมดตาราง เนื่องจากเรายังไม่ได้เชื่อมโยงสไตล์ CSS เราจึงชื่นชมเฉพาะโครงสร้างในแถวและคอลัมน์โดยไม่มีการออกแบบใดๆ อย่างไรก็ตาม เราสามารถเพิ่มคุณสมบัติ "เส้นขอบ" ลงในตารางได้ และระยะขอบที่มีสิ่งนี้:
ในที่สุดเราก็รู้ว่าเราสามารถใช้ประโยชน์จาก
ตัวอย่างการจัดการข้อมูลใน DataTable
ในส่วนนี้ เราจะดำเนินการต่อจากตัวอย่างก่อนหน้านี้ ซึ่งเราจะดูวิธีการจัดการข้อมูลตารางเพื่อดำเนินกระบวนการทั่วไป เช่น การลงทะเบียน การแก้ไข หรือการลบข้อมูล
เพิ่มคน
ในการลงทะเบียนบุคคล เราจะแก้ไขหน้า index.xhtml ของเรา ซึ่งเราจะเชื่อมโยงแบบฟอร์มการลงทะเบียนบุคคล เราทำสิ่งนี้โดยเชื่อมโยงส่วนประกอบอินพุตและการเลือกในแผงกริดที่เกี่ยวข้องอย่างถูกต้องกับอ็อบเจ็กต์ “myPerson” ที่ส่งข้อมูลต่างๆ ไปให้ บุคคลใหม่ได้รับการลงทะเบียนในระบบของเรา
ดังที่เราเห็นองค์ประกอบใหม่เหล่านี้ถูกเพิ่มก่อนที่ DataTable จะได้รับผลลัพธ์ดังนี้:
หลังจากแก้ไขดัชนีแล้ว มาทำการเปลี่ยนแปลงที่จำเป็นในคลาส TableBean.java เนื่องจากในตัวอย่างนี้ เราจะใช้ระดับขอบเขตเริ่มต้นต่อไป ดังนั้นเรามาสร้างรายชื่อบุคคลแบบคงที่เพื่อให้สามารถจัดการได้โดยไม่มีปัญหา เราจะเพิ่มเติม กำจัดการเติมรายการเนื่องจากแนวคิดคือสามารถลงทะเบียนผู้คนผ่านแบบฟอร์มการลงทะเบียน
ดังที่เราเห็นเมื่อกำหนดรายการเป็นสแตติก เราสร้างอินสแตนซ์ในระดับคลาส เราไม่ทำเช่นนี้ในคอนสตรัคเตอร์เนื่องจาก jsf ของเราจะถูกเรียกใช้ในโอกาสต่างๆ ซึ่งจะทำให้เกิดอินสแตนซ์ใหม่ของรายการ ซึ่งจะทำให้เกิด เราจะสูญเสียข้อมูลที่อาจมี
นอกจากนี้ เราได้เพิ่มวัตถุประเภทบุคคลเพื่อให้สามารถจัดการข้อมูลการลงทะเบียน และเพิ่มเมธอด “aggregarPersona()” ที่อนุญาตให้เพิ่มองค์ประกอบใหม่ในรายการและเรียกจากปุ่ม jsf หลังจากนั้นเราสร้างอินสแตนซ์ใหม่ของ วัตถุ "minhaPersona" ซึ่งจะช่วยให้การทำความสะอาดแบบฟอร์มการลงทะเบียน
เมื่อเรียกใช้ระบบเราจะเห็นพฤติกรรมต่อไปนี้:
ในขั้นต้นแบบฟอร์มว่างเปล่าและส่วนหัวของตารางของเราก็ปรากฏขึ้นเช่นกัน แต่ไม่มีเนื้อหาใด ๆ (โปรดจำไว้ว่าเราได้ตัดการเติมในรายการออก) ดังนั้นส่วนหัวจะไม่แสดงเมื่อยังไม่มีผู้ลงทะเบียน ดังนั้นเราจึงใช้ " แสดงผล” คุณสมบัติที่เราตรวจสอบว่าความยาวของรายการมากกว่าศูนย์ มิฉะนั้นก็ไม่ควรแสดงส่วนหัว (การดำเนินการของคุณสมบัตินี้จะกล่าวถึงในรายละเอียดในภายหลัง)
ขณะที่เราเพิ่มบุคคล พวกเขาจะถูกจัดเก็บไว้ในรายการและแสดงใน DataTable
ไม่รวมผู้คน
หลังจากที่เราลงทะเบียนบุคคลในรายการของเราสำเร็จแล้ว เราสามารถลบพวกเขาออกจากรายชื่อได้ สำหรับสิ่งนี้ เราจะเพิ่มคอลัมน์การดำเนินการใหม่ใน dataTable ของเรา ซึ่งจะมีลิงก์ไปยังวิธีการ “eliminarPerson()” ที่เราจะสร้างใน bean ของเรา
สำหรับสิ่งนี้ เราแก้ไข index.xhtml โดยที่หลังจากคอลัมน์ "เพศ" เราจะเพิ่มคอลัมน์ "การกระทำ"
อย่างที่เราเห็น เราใช้ส่วนประกอบ
ต่อมาในคลาส TablaBean.java เราเพิ่มเมธอด “eliminarPersona()” ที่รับเป็นพารามิเตอร์ของวัตถุบุคคลที่เราต้องการลบ ซึ่งสอดคล้องกับ “ข้อมูล” ที่เราส่งจาก jsf และเทียบเท่ากับ บุคคลในบรรทัดที่เราต้องการลบ จึงลบออกจากรายการ
เมื่อรันระบบเราจะได้สิ่งต่อไปนี้:
และทุกครั้งที่เราลบบันทึกผ่านลิงก์ที่เกี่ยวข้อง ตารางจะได้รับการอัปเดต
แก้ไขคน
หลังจากลงทะเบียนและลบบุคคลออกจากรายการเรียบร้อยแล้ว เราสามารถแก้ไขได้ เพื่อที่เราจะแก้ไขตารางของเราทำให้สามารถแก้ไขได้เมื่อเราต้องการอัพเดทข้อมูลบางส่วน เพื่อที่เราจะใช้คุณสมบัติ "แสดงผล" อีกครั้งซึ่งจะแสดง หรือซ่อนตัวเลือกที่สามารถแก้ไขได้ขึ้นอยู่กับสิ่งที่ผู้ใช้ตัดสินใจ
ดังที่เราเห็นในแต่ละคอลัมน์ มีการเพิ่มส่วนประกอบ
ในกรณีของเรา “data.edit” ทำการเรียกตัวแปรบูลีน (แก้ไข) ที่เราเพิ่มในคลาส Person หากคุณสมบัติเป็นจริงก็จะแสดง
ต้องทำเช่นเดียวกันสำหรับคอลัมน์อาชีพ เงินเดือน และเพศตามลำดับ โดยที่แทนที่จะเพิ่ม a
ในทำนองเดียวกัน คุณสมบัติที่เรนเดอร์จะต้องแสดงคอมโบหรือแสดงป้ายกำกับแล้วแต่กรณี
ต่อจากนั้น คอลัมน์ "การดำเนินการ" ได้รับการแก้ไขโดยที่ก่อนหน้านี้เรามีเพียงลิงก์สำหรับ "ลบ" ตอนนี้เราจะเพิ่มอีก 2 ลิงก์ ลิงก์หนึ่งสำหรับ "แก้ไข" และอีกลิงก์หนึ่งสำหรับ "บันทึก" ข้อมูลหลังจากแก้ไขแล้ว
อย่างที่เราเห็น ตอนนี้มี 3 ลิงก์สำหรับการแก้ไข บันทึก และลบตามลำดับ อย่างไรก็ตาม แก้ไขและบันทึกมีคุณสมบัติการแสดงผลซึ่งทำให้มองเห็นได้เพียง 2 ใน 3 ลิงก์ต่อครั้ง (โปรดจำไว้ว่าลิงก์ที่แสดงผลมีค่าจริงหรือเท็จ ขึ้นอยู่กับเงื่อนไข ) ดังนั้นตามค่าเริ่มต้น ลิงก์ลบจะปรากฏเสมอเนื่องจากไม่มีคุณสมบัติการแสดงผล ในขณะที่แก้ไขและบันทึกจะไม่เห็นพร้อมกัน (อนุญาตให้คุณเพิ่มช่องว่างระหว่างลิงค์)
ภายในที่ระดับกราฟิก dataTable จะมีลักษณะดังนี้:
แม้ว่าคุณจะเห็นส่วนประกอบทั้งหมดในเชิงกราฟิก แต่สิ่งสำคัญคือต้องทำให้ชัดเจนว่าคุณสมบัติที่แสดงผลจะแสดงเฉพาะส่วนประกอบโดยขึ้นอยู่กับค่าจริงหรือเท็จในขณะนั้น
หลังจากแก้ไข index.xhtml แล้ว ก็ถึงเวลาแก้ไขคลาส Person.java ซึ่งเพิ่มคุณสมบัติ "แก้ไข" ที่ใช้โดยการแสดงผลที่กล่าวถึงข้างต้น
อย่างที่เราเห็น แอตทริบิวต์บูลีนใหม่เชื่อมโยงกับชุดที่เกี่ยวข้องและรับ นอกจากนี้ เพื่อให้พอดีกับโครงสร้างของแบบฝึกหัด เราได้เพิ่มคุณสมบัติให้กับตัวสร้างแบบกำหนดพารามิเตอร์ แม้ว่าจะไม่ได้ใช้งานอีกต่อไปแล้วในจุดนี้ของแบบฝึกหัด
ด้วยวิธีนี้ ทุกครั้งที่ rendered=”#{data.edit}” เสร็จใน index.xhtml ก็จะเรียกตัวแปรนี้ ซึ่งจะอนุญาตให้แสดงหรือซ่อนส่วนประกอบขึ้นอยู่กับกรณี
สุดท้าย และด้วยการแก้ไขก่อนหน้านี้ เราดำเนินการแก้ไขคลาส Bean ซึ่งเราต้องเพิ่มวิธีการที่เกี่ยวข้องสำหรับการลบและการบันทึกที่เรียกจากฟิลด์ "การดำเนินการ"
อย่างที่เราเห็น เมธอด editPersona() รับวัตถุบุคคล (จากการเรียก jsf เช่นเดียวกับที่ทำในเมธอดการลบ) และคุณสมบัติ "แก้ไข" ของเมธอดถูกแก้ไขโดยส่งค่าเป็น true ซึ่งจะทำให้บันทึกนี้ เพื่อซ่อน
ในทางกลับกัน เมธอด savePersona() จะรับผิดชอบในการเปลี่ยนคุณสมบัติ "แก้ไข" แต่ละรายการของวัตถุทั้งหมดในรายการเป็นเท็จ เพื่อให้ dataTable ได้รับการกู้คืนด้วยค่าของคน ไม่ใช่องค์ประกอบที่แก้ไขได้
เมื่อรันระบบเราจะได้สิ่งต่อไปนี้:
และเมื่อกดแก้ไขระบบจะเปลี่ยนเป็น:
อย่างที่คุณเห็น เมื่อคลิกลิงก์แก้ไข ส่วนประกอบที่แก้ไขได้จะแสดงขึ้นโดยอัตโนมัติ ในขณะที่ส่วนที่แก้ไขไม่ได้จะถูกซ่อนไว้ ลิงก์แก้ไขก็หายไปเช่นเดียวกัน เพื่อหลีกทางให้กับลิงก์บันทึกตามที่อธิบายไว้ข้างต้น
และพร้อม!!!
ในบล็อกของฉันและบนช่องของฉัน ฉันได้แบ่งปันเนื้อหาเกี่ยวกับภาษาการเขียนโปรแกรมที่ยอดเยี่ยมนี้ คุณจะพบบทความมากมายและ วิดีโอตั้งแต่ต้นฉันแสดงวิธีดาวน์โหลดเครื่องมือที่จำเป็นเพื่อเริ่มเขียนโปรแกรม เราพัฒนามากขึ้นเรื่อย ๆ ผ่านแนวคิดพื้นฐาน ผ่าน แนวคิดการเขียนโปรแกรมเชิงวัตถุมาตรฐาน หัวข้อโครงสร้างข้อมูล การเข้าถึงฐานข้อมูล และอื่น ๆ ไปจนถึงการก่อสร้าง แอปพลิเคชั่นที่มีส่วนต่อประสานกับผู้ใช้.
นอกจากนี้คุณยังสามารถหา หลักสูตรตั้งแต่เริ่มต้นที่ฉันสอนวิธีสร้างแอพมือถือบน Android ผ่านลำดับวิดีโอทีละขั้นตอนที่อัปเดตอย่างต่อเนื่อง
และตอนนี้ฉันยังจะเริ่มลำดับตั้งแต่ต้นที่เราจะเข้าสู่โลกของจาวารุ่น Enterprise แสดงวิธีตั้งค่าสภาพแวดล้อมการพัฒนาและวิธีสร้างเว็บแอปพลิเคชันแรกของคุณด้วยจาวา
นั่นเป็นเหตุผลที่ฉันเชิญคุณไปที่ codejavu.blogspot.com เพื่อเยี่ยมชม ช่องของฉัน Cristian Henao และพวกเขาตระหนักดีถึงภาคต่อใหม่
นอกจากนี้ยังอาจสนใจคุณ
มีอะไรที่คุณต้องการเพิ่มหรือแสดงความคิดเห็นเกี่ยวกับรายการนี้หรือไม่? อย่าลังเลที่จะทำ….และถ้าคุณชอบ ฉันขอเชิญคุณแบ่งปัน วาย สมัครสมาชิกโดยคลิกที่ปุ่ม "เข้าร่วมไซต์นี้" เพื่อฟังโพสต์เพิ่มเติมเช่นนี้ 😉