שימוש בטבלת הנתונים ב-JSF.

דוגמה לטבלה מוגדרת מראש.
במעבדה זו נראה דוגמה פשוטה שמראה כיצד להשתמש ברכיב DataTable, אלמנט זה מאפשר לנו לקשר טבלת נתונים לעמוד שלנו כך:

עבור הדוגמה הראשונה הזו, רק הרכיב שאוכלס קודם לכן יהיה מקושר ממחלקת השעועית שלנו, בהמשך יראה כיצד לתפעל את המידע שלו באופן דינמי.

בתחילה ניצור פרויקט JSF עם המבנה הבא:

כפי שאנו יכולים לראות, נוצרות 2 מחלקות ג'אווה, האחת מתאימה למחלקת האדם המאפשרת לנו לעבד את האנשים שאנו הולכים להציג בטבלה שלנו והשניה לשעועית שתאפשר לנו לנהל את השולחן שלנו עם עמודות ורשומות.
המחלקה Person.java מספקת לנו את הנתונים הבסיסיים של האדם שאנו הולכים להציג בטבלה, כאן אנו מוסיפים את הסט המתאים ומקבלים מתודות, כמו גם בנאי עם פרמטרים למילוי אנשים ישירות.

המחלקה TablaBean.java מתייחסת לטבלה ולניהול האנשים בה, הרשומות המוצגות מאוחסנות בסוג האדם ArrayList אשר למטרות מדריך זה ממולא בקונסטרוקטור.

ב-index.xhtml אנו יוצרים את רכיב ה-DataTable אליו אנו מקשרים את רשימת האנשים ישירות בערך ובעמודות המתאימות את התכונות של השעועית שאליו מתייחסים ב-var=”data”, כאשר נתונים הם האלמנט שמייצג את הנתונים של אובייקט האדם בכל שורה בטבלה.

כשמריצים אותו יהיה לנו משהו כזה

כפי שאנו יכולים לראות, המידע מוצג במצב טבלה, מכיוון שעדיין לא קישרנו סגנונות CSS, אנו מעריכים את המבנה רק בשורות ובעמודות ללא כל סוג של עיצוב, אולם אנו יכולים להוסיף מאפיין "גבול" לטבלה. שוליים עם משהו כזה:

סוף סוף אנחנו יודעים שאנחנו יכולים לעשות שימוש להציג מידע בצורה מובנית יותר.

דוגמה לניהול נתונים ב-DataTable.
בחלק זה נמשיך עם הדוגמה הקודמת שבה נראה כיצד לתפעל את נתוני הטבלה כדי לבצע תהליכים נפוצים כגון רישום, שינוי או מחיקת מידע.

הוסף אנשים.
כדי לרשום אנשים, נשנה את דף ה-index.xhtml שלנו שאליו נקשר את טופס הרישום של האנשים. אנו עושים זאת ע"י קישור רכיבי הקלט והבחירה בלוח רשת המשויך כהלכה לאובייקט "myPerson" שאליו נשלחים הנתונים השונים. רישום תכונות, לאחר מכן משויך כפתור הקורא לשיטת "addPerson()" שתאפשר אדם חדש נרשם במערכת שלנו.

כפי שאנו רואים האלמנטים החדשים הללו מתווספים לפני ש-DataTable משיג תוצאה כזו:

לאחר שינוי האינדקס, נבצע את השינויים הנדרשים במחלקה TableBean.java, שכן בדוגמה זו נמשיך להשתמש ברמת ברירת המחדל של ה-scope, כך שנהפוך את רשימת האנשים לסטטית כך שניתן יהיה לתפעל אותה ללא בעיות, בנוסף, נבטל את ריפוד הרשימה מכיוון שהרעיון הוא להיות מסוגל לרשום אנשים באמצעות טופס הרשמה.

כפי שאנו יכולים לראות, כאשר מגדירים את הרשימה כסטטית אנו יוצרים את המופע שלה ברמת המחלקה, אנו לא עושים זאת בקונסטרוקטור מכיוון שזה ייקרא בהזדמנויות שונות על ידי ה-jsf שלנו, מה שיגרום למופע חדש של הרשימה אשר יקרא בהזדמנויות שונות. לגרום לנו לאבד את המידע שהוא יכול להכיל.

בנוסף, הוספנו אובייקט מסוג Person כדי להיות מסוגל לנהל את נתוני הרישום והוספנו את שיטת "aggregarPersona()" המאפשרת הוספת אלמנט חדש לרשימה ונקראת מכפתור jsf, מאוחר יותר ניצור מופע חדש של חפץ "minhaPessoa" שיאפשר ניקוי של טופס הרישום.


בעת הפעלת המערכת אנו רואים את ההתנהגות הבאה:

בתחילה הטופס ריק וגם הכותרת של הטבלה שלנו מוצגת אך ללא כל תוכן (זכור שביטלנו את מילוי הרשימה), ולכן היא לא מציגה את הכותרת כאשר אין אנשים רשומים עדיין, אז אנו משתמשים ב- מאפיין "עיבוד" שבו אנו מאמתים שגודל הרשימה גדול מאפס, אחרת הוא לא אמור להציג את הכותרות. (הפעולה של נכס זה תידון בפירוט בהמשך)

כאשר אנו מוסיפים אנשים, הם מאוחסנים ברשימה ומוצגים ב-DataTable

מחק אנשים.
לאחר שרשמנו בהצלחה אנשים ברשימה שלנו, נוכל להסיר אותם ממנה, לשם כך נוסיף עמודת פעולות חדשה ב-dataTable שלנו שתכיל קישור לשיטת "eliminatePerson()" שניצור ב-bean שלנו

לשם כך, אנו משנים את index.xhtml כאשר לאחר העמודה "סקס" נוסיף את העמודה "פעולות"

כפי שאנו יכולים לראות, אנו משתמשים ברכיב ובפעולה אנו קוראים לשיטת "eliminarPersona()" אליה נשלח את הערך "data" כפרמטר, תוך נזכור שהנתונים שוות ערך לאובייקט הרשימה שמוצג בשורה מסוימת.

מאוחר יותר, במחלקה TablaBean.java, הוספנו את שיטת "eliminarPersona()" שמקבלת כפרמטר את אובייקט האדם שברצוננו למחוק, זה מתאים ל"נתונים" שאנו שולחים מ-jsf, ושווה לאדם ב- את השורה שברצוננו למחוק, כדי להסיר אותה מהרשימה.

בעת הפעלת המערכת יהיו לנו את הדברים הבאים:

ובכל פעם שנמחק רשומה דרך הקישור המתאים, הטבלה תתעדכן

ערוך אנשים.
לאחר שרשמנו ומחקנו בהצלחה אנשים מהרשימה שלנו, נוכל לשנות אותם, לשם כך נשנה את הטבלה שלנו כך שהיא ניתנת לעריכה כאשר נרצה לעדכן חלק מהנתונים, לשם כך נשתמש שוב במאפיין "מעובד" שיראה או הסתר את האפשרויות הניתנות לעריכה בהתאם למה שהמשתמש מחליט.

כפי שאנו יכולים לראות בכל אחת מהעמודות, נוסף רכיב אשר יוסתר כברירת מחדל הודות למאפיין "rendered" המאפשר לאחסן נתונים אמיתיים או שקריים כדי להציג או להסתיר את הרכיב הנלווה.

במקרה שלנו "data.edit" עושה את הקריאה למשתנה בוליאני (עריכה) שהוספנו למחלקה Person, אם המאפיין הוא true אז הוא יראה את כדי לאפשר עריכה, אבל אם המאפיין הוא true false (לא נכון) אז הוא יציג את

כך יש לעשות לגבי עמודות המקצוע, השכר והמגדר בהתאמה, כאשר במקום להוסיף א לאחרונים, א מכיוון שבטופס אנו משתמשים בשילוב בחירה של הנתיב הבא:

באופן דומה, המאפיין המעובד חייב להציג את המשולבת או להציג את התווית בהתאם למקרה.

לאחר מכן, העמודה "פעולות" משתנה כאשר בעבר היה לנו רק קישור ל"מחק", כעת נוסיף עוד 2 קישורים, אחד ל"עריכה" ואחר ל"שמירה" של המידע לאחר עריכתו.

כפי שאנו יכולים לראות, כעת ישנם 3 קישורים עבור שיטות העריכה, השמירה והמחיקה בהתאמה, אולם לעריכה ולשמירה יש את המאפיין המעובד שהופך רק 2 מתוך 3 הקישורים לגלויים בכל פעם (זכור כי המעובד מכיל true או false בהתאם על תנאי ) אז כברירת מחדל, קישור המחיקה יופיע תמיד מכיוון שאין לו את המאפיין המעובד, בעוד עריכה ושמירה לעולם לא יראו יחד. (מאפשר לך להוסיף רווח בין קישורים)

מבחינה פנימית, ברמה הגרפית, טבלת הנתונים תיראה כך:

למרות שמבחינה גרפית ניתן לראות את כל הרכיבים יחד, חשוב להיות מאוד ברור שהמאפיין המעובד יציג רק את הרכיבים בהתאם לערך האמיתי או השקר באותו זמן.

לאחר שינוי index.xhtml, עכשיו הגיע הזמן לשנות את המחלקה Person.java שאליה מתווסף המאפיין "edit" המשמש את המעבד שהוזכר לעיל.

כפי שאנו יכולים לראות, תכונה בוליאנית חדשה מקושרת לסט שלה ול-get המתאים. בנוסף, כדי להתאים את מבנה התרגיל, הוספנו את המאפיין לבנאי בעל הפרמטרים, למרות שהוא אינו בשימוש עוד בשלב זה של התרגיל.

בדרך זו, בכל פעם ש-rendered=”#{data.edit}” נעשה ב-index.xhtml, זה יקרא למשתנה הזה, מה שיאפשר הצגה או הסתרה של רכיבים בהתאם למקרה.

לבסוף, ועם השינויים הקודמים, התחלנו לשנות את המחלקה Bean שבה עלינו להוסיף את השיטות המתאימות בעת מחיקה ושמירה שנקראות מהשדה "פעולות".

כפי שאנו יכולים לראות, שיטת editPersona() מקבלת אובייקט אדם (מהקריאה ל-jsf, כפי שנעשה בשיטת המחיקה) ומאפיין ה-"edit" שלו משתנה על ידי שליחת הערך true, מה שיאפשר לרשומה זו להסתיר ה ולהראות את וה כדי לבצע את השינוי הרצוי.

מצד שני, שיטת savePersona() תהיה אחראית על שינוי כל מאפיין "עריכה" של כל האובייקטים ברשימה ל-false כך שה-dataTable ישוחזר עם הערכים של האנשים ולא עם האלמנטים הניתנים לעריכה.

בעת הפעלת המערכת יהיו לנו את הדברים הבאים:

וכאשר אתה לוחץ על ערוך המערכת משתנה ל:

כפי שניתן לראות, כאשר לוחצים על קישור העריכה, הרכיבים הניתנים לעריכה מוצגים אוטומטית בעוד אלו שאינם ניתנים לעריכה מוסתרים, באופן דומה קישור העריכה נעלם כדי לפנות מקום לקישור השמירה כפי שהוסבר לעיל.

ומוכן!!!

בבלוג שלי ובערוץ שלי שיתפתי חומר על שפת התכנות הנהדרת הזו, אתה יכול למצוא מאמרים רבים ו סרטונים מאפסאני מראה לך איך להוריד את הכלים הדרושים כדי להתחיל לתכנת, אנחנו עולים יותר ויותר דרך המושגים הבסיסיים, עוברים על מושגי תכנות מונחה עצמיםתקנים, נושאיםמבני נתונים, גישה למאגרי מידע בין היתר, לבנייה יישומים עם ממשקי משתמש.

כמו כן אתה יכול למצוא א קורס מאפס שבו אני מלמד איך ליצור אפליקציות לנייד באנדרואיד דרך רצף וידאו שלב אחר שלב שמתעדכן כל הזמן.

ועכשיו אתחיל גם את הרצף מאפס בו ניכנס לעולם של Java Enterprise edition, נראה לכם איך להגדיר את סביבת הפיתוח ואיך ליצור את יישומי האינטרנט הראשונים שלכם עם java.

לכן אני מזמין אותך לבקר ב-codejavu.blogspot.com, כדי לבקר הערוץ שלי כריסטיאן הנאו ושהם מודעים מאוד לסרטי ההמשך החדשים

זה עשוי לעניין אותך גם.

האם יש משהו שאתה רוצה להוסיף או להגיב לגבי הערך הזה? תרגיש חופשי לעשות….ואם אהבתם, אני מזמין אתכם לשתף y הירשם על ידי לחיצה על כפתור "הצטרף לאתר זה" כדי לשמוע עוד פוסטים כמו זה 😉