Transcript facelets

© Keren Kalif
JSF + Facelets
‫קרן כליף‬
© Keren Kalif
2
:‫ביחידה זו נלמד‬
JSF ‫מהו‬
Validations
Converter
Page Navigation
‫קבצי משאבים‬
Internationalization
JSF Life Cycle
Facelets
Template
Component










‫מהו ‪?JSF‬‬
‫‪© Keren Kalif‬‬
‫‪:JavaServer Faces ‬‬
‫‪ ‬אוסף תגיות לשימוש ב‪ JSP -‬לצרכי ‪ UI‬המאפשרים להכניס לתוכן‬
‫לוגיקה כמו ולידציות והמרות‬
‫‪ ‬לכן הפיתוח הגרפי הופך לפשוט יחסית לעומת ‪ html‬מאחר ואין צורך‬
‫ב‪  JavaScript -‬ולידציות מובנות בתגיות‬
‫‪3‬‬
‫יצירת פרוייקט ‪ JSF‬ב‪NetBeans -‬‬
‫‪© Keren Kalif‬‬
‫‪ ‬נייצר פרויקט חדש ובמסך בחירת ה‪ Framework -‬נבחר‪:‬‬
‫‪4‬‬
‫‪© Keren Kalif‬‬
‫קובץ הקונפיגורציה ‪faces-config.xml‬‬
‫‪ ‬תחת ‪ WEB-INF‬יש לייצר את הקובץ ‪faces-config.xml‬‬
‫‪ ‬יש לבחור באופציה ‪JSF Faces Configuration‬‬
‫‪ ‬בקובץ זה יוגדרו בהמשך‪:‬‬
‫‪ ‬מחלקות ה‪ bean -‬איתן נעבוד‬
‫‪ ‬קונפיגורצית ‪ navigation‬בין דפים‬
‫‪ ‬תמיכה בעבודה עם קבצי משאבים‪ ,‬למשל לצורך תמיכה בשפות‬
‫‪5‬‬
‫‪© Keren Kalif‬‬
‫‪6‬‬
‫דוגמא – מחלקת ה‪-‬‬
‫‪ bean‬איתה נעבוד‬
‫דוגמא‬
‫‪© Keren Kalif‬‬
‫‪ -‬יצירת ה‪ bean -‬בקונפיגורציה‬
‫שם המשתנה (‪)bean‬‬
‫ציון היכן ישמרו הנתונים‪ .‬כמובן שניתן גם על‬
‫ה‪session / page / application -‬‬
‫‪7‬‬
‫‪© Keren Kalif‬‬
‫הגדרת ה‪ bean -‬במחלקה במקום בקונפיגורציה‬
‫הגדרת ה‪ bean -‬ב‪-‬‬
‫‪faces-config‬‬
‫לחילופין‪ ,‬ניתן להגדירו ע"י ‪.annotation‬‬
‫כב"מ שמו יהיה כשם המחלקה כאשר האות הראשונה קטנה‪.‬‬
‫ניתן להגדיר באופן‬
‫מפורש את שם ה‪bean -‬‬
‫‪8‬‬
‫דוגמא – שימוש ב‪-‬‬
‫‪ bean‬ב‪JSP -‬‬
‫הספריה המיוצגת ע"י ‪ f‬מייבאת את‬
‫התגיות הנוספות של ה‪ JSF -‬עבור‬
‫בניית התצוגה‪ ,‬ולידציות והמרות‬
‫הספריה המיוצגת ע"י ‪ h‬מייבאת את‬
‫התגיות המכילות את הפקדים שיכולים‬
‫להשתמש בתוספים מהספריה ‪f‬‬
‫יצירת פקד ‪input‬‬
‫שנתוניו ישמרו בתכונה‬
‫‪ name‬שב‪bean -‬‬
‫פורמט הנתונים הדרוש‬
‫הפעלת המתודה‬
‫‪ submitDetails‬שב‪bean -‬‬
‫הערך יוצג רק אם ערך הביטוי‬
‫שבתכונה ‪ rendered‬יהיה ‪true‬‬
‫‪9‬‬
‫‪© Keren Kalif‬‬
‫תגית ‪ JSF‬שבתוכה נבנה את‬
‫היררכית הפקדים בתצוגה‬
‫‪© Keren Kalif‬‬
‫הפלט‬
‫‪10‬‬
‫לאחר הקלדת הנתונים‬
‫ולחיצה על ‪Send‬‬
‫‪© Keren Kalif‬‬
‫הפלט כאשר יש טעות בפורמט הנתונים‬
‫מאחר ופורמט הנתון בתאריך אינו תקין‪ ,‬בעקבות לחיצה על הכפתור ‪ Send‬לא‬
‫הופעלה המתודה ‪.submitDetails‬‬
‫(ההוכחה לכך היא שאין הדפסה בקונסול של השרת)‬
‫לכן ערך השדה ‪ hasDetails‬נשאר ‪ false‬ולא מוצגת ההודעה בתחתית הדף‪.‬‬
‫‪11‬‬
‫‪© Keren Kalif‬‬
‫התכונות ‪ required‬ו‪requiredMessage -‬‬
‫וכמובן לא הופעלה המתודה‬
‫‪submitDetails‬‬
‫פה יופיעו הודעות השגיאה‬
‫‪12‬‬
‫שדה ‪validation‬‬
‫בדיקות התקינות פשוטות ונמצאות‬
‫ברמת פיתוח ממשק המשתמש‪.‬‬
‫‪© Keren Kalif‬‬
‫‪13‬‬
© Keren Kalif
14
converterMessage ‫שדה‬
‫‪© Keren Kalif‬‬
‫‪Page Navigation‬‬
‫‪ ‬ראינו שכאשר לוחצים על כפתור‪ ,‬מופעלת הפעולה המוגדרת‬
‫בתכונה ‪action‬‬
‫‪ ‬ראינו ששיטה זו מחזירה מחרוזת אך התעלמנו ממנה‬
‫‪ ‬החזרת מחרוזת היא הדרך לקבל תשובה‪ ,‬ובפרט להחליט מהו‬
‫הדף אליו נעבור ע"י קונפיגורציה ב‪faces-config -‬‬
‫‪ ‬תזכורת למתודה המופעלת באובייקט עם לחיצת הכפתור‪:‬‬
‫‪15‬‬
‫‪© Keren Kalif‬‬
‫קינפוג ה‪ navigation -‬ב‪faces-config -‬‬
‫לכל ‪ navigation rule‬ניתן‬
‫להגדיר ‪ navigation case‬רבים‬
‫ובכך לשלוט על הזרימה‪.‬‬
‫המחלקה מגדירה את התשובה והקונפיגורציה‬
‫(ברמת ה‪ )UI -‬מגדירה כיצד תראה התשובה‪.‬‬
‫הפרדה מעולה בין ‪BL‬ל‪!UI -‬‬
‫הדף ממנו רוצים לעבור‬
‫הגדרת הדף אליו נעבור‬
‫בהינתן תשובה מסויימת‬
‫‪16‬‬
‫ניתן לראות את הקונפיגורציה גם כך‬
‫‪© Keren Kalif‬‬
‫‪17‬‬
‫הדף אליו נעבור‬
‫הערכים המתקבלים‬
‫מה‪bean -‬‬
‫‪18‬‬
‫‪© Keren Kalif‬‬
‫דוגמת פלט‬
‫‪19‬‬
‫נשים לב לפורמט‬
‫‪© Keren Kalif‬‬
‫‪Event Handaling‬‬
‫‪ ‬ראינו כי לחיצה על פקד מקושרת לפעולה המקונפגת בתכונה‬
‫‪ action‬בפקד ‪ ,Button‬כלומר‪ ,‬הפעלת פעולה בשרת ב‪backing- -‬‬
‫‪bean‬‬
‫‪ ‬דרך נוספת היא מימוש ‪ event listener‬ב‪backing bean -‬‬
‫‪ ‬ישנם ‪ 3‬סוגים של ‪:EventListener‬‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪20‬‬
‫‪ – ActionEvent‬יופעל בלחיצה על כפתור או קישור‬
‫‪ – ValueChangedEvent‬יופעל בשינוי ערך של פקד‬
‫‪ – DataModelEvent‬יופעלו בעת שינוי במודל‬
‫‪© Keren Kalif‬‬
‫‪© Keren Kalif‬‬
‫‪ - ValueChangedEvent‬שימוש ב‪JSF -‬‬
‫ובאופן דומה ניתן להגדיר את התכונה‬
‫‪ actionListener‬שתקושר לכפתור או לקישור‬
‫שינוי בערך הפקד יפעיל בעת לחיצה‬
‫על הכפתור גם את המתודה הזו‪.‬‬
‫הגדרת מיקום הצגת הודעת השגיאה‪,‬‬
‫המקושרת למשתנה ב‪bean -‬‬
‫‪21‬‬
ValueChangedEvent
bean -‫מימוש ב‬
:‫המתודה תהייה‬
public .1
void ‫ תחזיר‬.2
ValueChangedEvent ‫ תקבל‬.3
© Keren Kalif
22
© Keren Kalif
23
‫ דוגמת פלט‬- ValueChangedEvent
© Keren Kalif
24
‫ ע"י ממשק‬listener ‫מימוש‬
:bean -‫ במחלקת ה‬
:JSF -‫ ב‬
‫נשים לב‪:‬‬
‫‪© Keren Kalif‬‬
‫‪25‬‬
‫‪ ‬ה‪ event -‬יופעל רק אם היה שינוי בערכים לעומת הפעם הקודמת‪:‬‬
‫ניתן לראות כי ה‪ event -‬לא רץ שוב!‬
‫עבודה עם קבצי משאבים‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪26‬‬
‫(‪)Resource Bundle‬‬
‫עד כה הטקסט שרצינו להציג הוגדר בקובץ ה‪JSP -‬‬
‫במערכות רציניות‪ ,‬הטקסט אמור לעבור ביקורת אצל כתבים‬
‫טכניים‬
‫כתבים טכניים אינם אמורים לדעת לקרוא קוד‬
‫לכן עובדים עם קבצי משאבים ובהם המגדירים זוגות ‪ key‬ו‪value-‬‬
‫הכתבים הטכניים יכתבו את הערכים והמפתחים ישתמשו בקובץ‬
‫זה במקום לכתוב את הטקסט ותוכן ההודעות בעצמם‬
‫שינוי בטקסט לא יגרור שינוי בקוד‬
‫ניתן להחליף את שפת התצוגה בקלות‬
‫‪ ‬הפרדה נוספת בין שכבות הפרוייקט‬
‫‪© Keren Kalif‬‬
‫עבודה עם קבצי משאבים‬
‫(‪)2‬‬
‫‪ ‬קובץ משאבים צריך לשבת תחת תיקיית ה‪ src -‬וסיומו יהיה‬
‫‪properties‬‬
‫‪ ‬דוגמא לקובץ משאבים‪:‬‬
‫‪27‬‬
‫‪© Keren Kalif‬‬
‫עבודה עם קבצי משאבים‬
‫‪© Keren Kalif‬‬
‫(‪)3‬‬
‫‪28‬‬
‫‪ ‬כדי שהאפליקציה תדע לעבוד איתו צריך להוסיף ל‪faces-config -‬‬
‫את הבלוק הבא‪:‬‬
‫שם קובץ המשאבים‬
‫השם באמצעותו ניגש למפתחות‬
‫שבקובץ מתוך ה‪JSF -‬‬
‫שימוש בקובץ המשאבים ב‪JSF -‬‬
‫‪29‬‬
‫‪© Keren Kalif‬‬
‫‪Internationalization‬‬
‫‪ ‬ראינו כי באמצעות קבצי ‪ properties‬ניתן לקבוע את הטקסט‬
‫שיופיע בתוכנה‬
‫‪ ‬בהתבסס על תשתית זו ניתן לכתוב תוכנה שתוצג בקלות בשפות‬
‫שונות‬
‫‪ ‬המושג נקרא ‪( I18N‬מתחיל באות ‪ 18 ,i‬תווים ובסוף ‪)n‬‬
‫‪ ‬כמו כן‪ ,‬ניתן יהיה להציג מידע נוסף באופן שונה‪ ,‬למשל תאריך‬
‫‪30‬‬
‫‪© Keren Kalif‬‬
‫המנגנון‬
‫‪ ‬אפליקציה התומכת בשפות שונות מורכבת מ‪ 2 -‬חלקים‪:‬‬
‫‪ :Internationalization .1‬הקוד שתומך בריבוי שפות והחלפתן‪.‬‬
‫מתבסס על עבודה עם קבצי משאבים‬
‫‪ :Localization .2‬הצגת המידע בפורמט המקומי‪ :‬תרבות‪ ,‬צבעים‬
‫מקובלים‪ ,‬סגנון הצגת תאריכים‪ ,‬מספרים וכד'‬
‫‪ ‬בפרקטיקה‪ :‬נגדיר קובץ ‪ properties‬לכל שפה בה נתמוך כך‬
‫שהמפתחות יהיו זהים אך הערכים שונים‬
‫כדי להוסיף תמיכה בשפה נוספת‪:‬‬
‫לעמוד על אחד מקבצי ה‪-‬‬
‫‪Locale  Add  properties‬‬
‫‪31‬‬
‫‪© Keren Kalif‬‬
© Keren Kalif
32
faces-config -‫ ב‬locale -‫הגדרת ה‬
:‫ יש תמיכה‬locale ‫ לאילו‬faces-config -‫ יש להוסיף ב‬
‫שימוש ב‪ locale -‬המוגדר‬
‫‪ ‬נוסיף למחלקת ה‪ bean -‬שיטה שיודעת לקרוא את ה‪ locale -‬של‬
‫ה‪( request -‬נקבע ע"י ה‪:)browser -‬‬
‫‪ ‬נידע את ה‪ JSF -‬מהו ה‪:locale -‬‬
‫‪33‬‬
‫‪© Keren Kalif‬‬
‫דוגמאות‬
© Keren Kalif
34
© Keren Kalif
35
JSF ‫מעגל החיים של בקשת‬
(JSF Request Life Cycle(
Client
Server
view -‫בשרת נבנה ה‬
‫בקשת הדף ללא נתונים‬
-‫עבור הדף ונשמר ב‬
Initial Request
FacesContext
‫ הוא דף המכיל‬response -‫ה‬
‫ ללא ערכים‬view -‫את ה‬
2- Apply Request Values
1- Restore View
‫ שליחת הדף‬:postback
‫עם ערכים‬
-‫ ו‬validations ‫הפעלת‬
‫כל עוד התקבלה דף עם‬
‫ בהתאם‬conversions
-‫שגיאות לאחר ה‬
‫ אם‬.JSF -‫למצויין ב‬
3- Process Validations
validations,
‫שניהם עברו בהצלחה‬
events -‫ ו‬conversions
.events -‫יופעלו ה‬
‫ שליחת הדף‬:postback
‫עם ערכים תקינים לאחר קבלת דף ללא‬
,bean -‫ שמירת הנתונים ב‬4- Update Model
‫שגיאות‬
‫ ויצירת‬BL -‫הפעלת ה‬
5- Invoke Application
‫ללקוח‬
‫שתוחזר‬
‫התשובה‬
6- Render Response
navigation -‫(תוך שימוש ב‬
‫התקבל דף התשובה‬
)faces-config -‫שב‬
‫‪ - Facelets‬מוטיבציה‬
‫‪© Keren Kalif‬‬
‫‪36‬‬
‫‪ JSF ‬ממומש בתוך ‪ JSP‬בעוד שמעגל החיים שלהם שונה‪ ,‬מה‬
‫שעלול לגרום להתנגשויות ולתוצאות בלתי צפויות‬
‫‪ ‬ה‪ JSF -‬בונה את עץ הרכיבים בעוד שה‪ JSP -‬בונה אותם לפי הסדר‬
‫‪ ‬הכלים הסטנדרטים של מעצבי האתרים אינם מאפשרים להם‬
‫לצפות בקלות בדפי ‪JSF‬‬
‫‪ ‬טכנולוגיית ה‪ facelets -‬באה להחליף את ה‪:JSF -‬‬
‫‪ ‬מממשת כ‪JSF ViewHandler -‬‬
‫‪ ‬מאפשרת קינפוג פקדים פעם אחת ושימוש חוזר‬
‫‪ JSP ‬אינה תומכת בתגיות חדשות של ‪JSF‬‬
‫שימוש ב‪ Templates -‬ע"י ‪Facelets‬‬
‫‪© Keren Kalif‬‬
‫‪ ‬כאשר נרצה שדפים באפליקציה שלנו יראו זהים נשתמש במנגנון‬
‫ה‪template -‬‬
‫‪ ‬למשל נייצר דף מסגרת לאתר שלנו (כותרת עליונה ותפריט)‬
‫ובאמצע יהיה התוכן‬
‫‪ ‬כל דף האתר יתבסס על התבנית שהכנו ויוסיף רק את החלק‬
‫האמצעי של הדף‬
‫‪ ‬שקול להורשת טפסים ב‪#C -‬‬
‫‪37‬‬
‫דוגמא לדף ‪template‬‬
‫‪ ‬נוסיף קובץ‬
‫מטיפוס‬
‫‪Facelets‬‬
‫‪Template‬‬
‫שם העיצוב ב‪css -‬‬
‫הכנסת איזור לתוך ה‪-‬‬
‫‪ template‬ומתן שם זיהוי‬
‫‪© Keren Kalif‬‬
‫‪38‬‬
‫שימוש בדף ה‪template -‬‬
‫הגדרת ה‪ template -‬עליו‬
‫אנו מתבססים בדף זה‬
‫שתילת התוכן באיזור‬
‫הנקרא ‪title‬‬
‫‪© Keren Kalif‬‬
‫‪39‬‬
© Keren Kalif
40
:‫סיכום התגיות‬
:template -‫ בשימוש ב‬
template -‫ – להכנסת איזור בדף ה‬ui:insert 
:template client -‫ בשימוש ב‬
template ‫ – הגדרת שף המתבסס על דף‬ui:composition 
template -‫ – הכנסת ערכים לאיזור מסויים ב‬ui:define 
-‫ ב‬ui:insert -‫ צריכה להיות התאמה בשם בין השימוש ב‬
template client -‫ ב‬ui:define -‫ לבין השם בשימוש ה‬template
© Keren Kalif
41
‫המחשה‬
http://jsflessons.blogspot.com/2009/03/templating-in-facelets.html :‫התמונה לקוחה מ‬
‫‪© Keren Kalif‬‬
‫שימוש ב‪ XHTML -‬אחר באחד האיזורים‬
‫‪ ‬נגדיר קובץ ‪:xhtml‬‬
‫‪42‬‬
‫‪© Keren Kalif‬‬
‫שימוש ב‪ XHTML -‬אחר באחד האיזורים‬
‫במקום ‪ui:insert‬‬
‫משתמשים ב‪ui:include -‬‬
‫‪43‬‬
© Keren Kalif
44
ui:composition ‫הוראות מחוץ לתג‬
‫מתעלם מהגדרות שמחוץ‬
ui:composition ‫לתג‬
‫התג ‪ui:decorate‬‬
‫התגיות ‪ ui:composition‬ו‪-‬‬
‫‪ ui:decorate‬זהות בשימושן פרט‬
‫לכך שהראשונה מתעלמת מתוכן‬
‫שמחוץ לה והשניה לא‬
‫מתייחס להגדרות שמחוץ‬
‫לתג ‪ui:decorate‬‬
‫‪© Keren Kalif‬‬
‫‪45‬‬
‫יצירת ‪ component‬מותאם אישית‬
‫ הגדרת ‪ html‬ללא ‪body‬‬‫ הרכיב אותו אנו מגדירים נמצא‬‫בתגית ‪ui:component‬‬
‫‪© Keren Kalif‬‬
‫‪46‬‬
© Keren Kalif
47
‫ מותאם אישית‬component -‫שימוש ב‬
© Keren Kalif
48
ui:fragment
ui:component ‫ משמש כמו‬
:‫ ההבדל‬
‫ מתעלם מהתוכן שמחוץ לו‬ui:component 
‫ מתייחס לתוכן שמחוץ לו‬ui:fragment 
‫ בהתאמה‬ui:decorate -‫ ו‬ui:composition ‫ בדיוק כמו‬
© Keren Kalif
49
facelets ‫ – להעברת נתונים בין‬ui:param
‫שם הפרמטר‬
© Keren Kalif
50
‫ – העברת פרמטרים‬ui:param
‫תרגיל‬
‫‪© Keren Kalif‬‬
‫‪51‬‬
‫‪ ‬יש לכתוב אפליקציה ובה ‪ 3‬דפים בעלי עיצוב זהה‪:‬‬
‫‪ ‬הדף מחולק ל‪ 3 -‬חלקים‪ :‬עליון‪ ,‬שמאלי ומרכז‬
‫‪ ‬בחלק העליון תהיה כותרת שתורכב מ‪ Hello -‬ושם שיקרא מקובץ‬
‫משאבים‬
‫‪ ‬בחלק השמאלי תהייה אפשרות להקליד גובה ומשקל וכפתור לחישוב‬
‫‪ ‬התוצאה תופיע בחלק המרכזי בדף‬
‫‪ ‬התוצאה תכלול את ערך ה‪ BMI -‬שהוזנו וכן הודעה בפורמט הבא‪:‬‬
‫‪ ‬אם ה‪ BMI -‬מתחת ל‪ 25 -‬הרקע יהיה ירוק והודעה כי המשקל תקין‬
‫‪ ‬אחרת‪ ,‬הרקע יהיה אדום והודעה כי המשקל אינו תקין‬
‫‪ ‬יש לוודא כי הגובה הוא בין ‪ 1.50-2.10‬מ'‬
‫‪ ‬יש לוודא כי המשקל בין ‪ 30-250‬ק"ג‬
‫‪ ‬במידה ואחד הנתונים שהוזנו חסר או אינו תקין‪ ,‬יש להציג הודעה‬
‫מתאימה‬
‫‪ ‬יש לתמוך באפליקציה גם באנגלית וגם בעברית ע"י לחיצה על כפתור‬
© Keren Kalif
52
:‫ביחידה זו למדנו‬
JSF ‫מהו‬
Validations
Converter
Page Navigation
‫קבצי משאבים‬
Internationalization
JSF Life Cycle
Facelets
Template
Component









