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