© Keren Kalif JSF + Facelets קרן כליף.

Slides:



Advertisements
Similar presentations
Completeness and Expressiveness. תזכורת למערכת ההוכחה של לוגיקה מסדר ראשון : אקסיומות 1. ) ) (( 2. )) ) (( )) ( ) ((( 3. ))) F( F( ( 4. ) v) ( ) v ((
Advertisements

ממיבחניםC שאלות ++.
מבוא למדעי המחשב לתעשייה וניהול
1 Formal Specifications for Complex Systems (236368) Tutorial #4 Refinement in Z: data refinement; operations refinement; their combinations.
תכנות מונחה עצמים Object Oriented Programming (OOP) אתגר מחזור ב'
דוד שוורץ, עידן זק, נטע צור וחיה כהן. הפונקציונאליות : המשתמש יבחר קובץ שעליו הוא רוצה לבצע את האנליזה, וילחץ עליו עם כפתור ימני בעכבר. יפתח תפריט ובו.
חורף - תשס " ג DBMS, Design1 שימור תלויות אינטואיציה : כל תלות פונקציונלית שהתקיימה בסכמה המקורית מתקיימת גם בסכמה המפורקת. מטרה : כאשר מעדכנים.
שאלות חזרה לבחינה. שאלה דיסקים אופטיים מסוג WORM (write-once-read-many) משמשים חברות לצורך איחסון כמויות גדולות של מידע באופן קבוע ומבלי שניתן לשנותו.
1 Formal Specifications for Complex Systems (236368) Tutorial #5 Refinement in Z: data refinement; operations refinement; their combinations.
חלון הפקודות מיועד לבצע פעולה אחת בכל פעם. כיצד אפשר לבצע רשימת פקודות או אפליקציות מורכבות ?
תכנות תרגול 6 שבוע : תרגיל שורש של מספר מחושב לפי הסדרה הבאה : root 0 = 1 root n = root n-1 + a / root n-1 2 כאשר האיבר ה n של הסדרה הוא קירוב.
דוד שוורץ, עידן זק, נטע צור וחיה כהן. הפונקציונאליות:  המשתמש בוחר קובץ שעליו הוא רוצה לבצע את האנליזה, ולוחץ עליו עם כפתור ימני בעכבר.  נפתח תפריט.
מערכים עד היום כדי לייצג 20 סטודנטים נאלצנו להגדיר עד היום כדי לייצג 20 סטודנטים נאלצנו להגדיר int grade1, grade2, …, grade20; int grade1, grade2, …, grade20;
עקרון ההכלה וההדחה.
תכנות מונחה עצמים Object Oriented Programming (OOP) אתגר מחזור ב' Templates תבניות.
Markov Decision Processes (MDP) תומר באום Based on ch. 14 in “Probabilistic Robotics” By Thrun et al. ב"הב"ה.
1 Spring Semester 2007, Dept. of Computer Science, Technion Internet Networking recitation #3 Internet Control Message Protocol (ICMP)
מה היום ? - - חזרה מהירה. - קריאה וכתיבה לקבצים. - בניית תוכנית כתיבה low-level - בניית ערוץ גלובלי והדגמה מול חומרה - low-level DAQ, פולימורפיזם וטריגר.
1 מבוא למדעי המחשב סיבוכיות. 2 סיבוכיות - מוטיבציה סידרת פיבונאצ'י: long fibonacci (int n) { if (n == 1 || n == 2) return 1; else return (fibonacci(n-1)
Safari On-line books. מה זה ספארי ספארי זו ספריה וירטואלית בנושא מחשבים היא כוללת יותר מ כותרים כל הספרים הם בטקסט מלא ניתן לחפש ספר בנושא מסוים.
Text to speech In Mobile Phones איתי לוי. הקדמה שימוש בהודעות טקסט על המכשירים הסלולארים היא דרך תקשורת מאוד פופולארית בימינו אשר משתמשים בה למטרות רבות,
11 Introduction to Programming in C - Fall 2010 – Erez Sharvit, Amir Menczel 1 Introduction to Programming in C תרגול
Methods public class Demonstrate { public static void main (String argv[]) { public static void main (String argv[]) { int script = 6, acting = 9, directing.
Practice session 3 תחביר ממשי ( קונקרטי ) ותחביר מופשט ( אבסטרקטי ) שיטות חישוב : Applicative & Normal Evaluation Partial Evaluation.
תכנות אסינכרוני, תקשורת ופיתוח אפליקציות ל- Windows 8.1 ואפליקציות ל- Windows Phone 8 Control (Part II)
מבוא למדעי המחשב לתעשייה וניהול הרצאה 7. סברוטינות subroutines.
Practice session 3.  תחביר ממשי ( קונקרטי ) ותחביר מופשט ( אבסטרקטי )  שיטות חישוב : Applicative & Normal Evaluation.
 Client, Supplier ומה שביניהם ( ADT!).  שאלה 1: יצירת ADT עבור מעגל במישור נניח שלקוח מעוניין בפעולות הבאות : הזזת מעגל וחישוב שטח מעגל. הספק יספק ללקוח.
Contents Building Web Services כתב אקת'ם חאג' יחיא BuildingWeb Services Building Web Services
תכנות מכוון עצמים ושפת ++C וויסאם חלילי. TODAY TOPICS: 1. Function Overloading & Default Parameters 2. Arguments By Reference 3. Multiple #include’s 4.
1 חלק XQuery :IV XML Query. 2 ביבליוגרפיה - DTD 3 ביבליוגרפיה – books.xml TCP/IP Illustrated Stevens W. Addison-Wesley Advanced Programming in.
מבנים קרן כליף. ביחידה זו נלמד :  מהו מבנה (struct)  איתחול מבנה  השמת מבנים  השוואת מבנים  העברת מבנה לפונקציה  מבנה בתוך מבנה  מערך של מבנים.
מבוא למדעי המחשב לתעשייה וניהול הרצאה 6. מפעל השעווה – לולאות  עד עכשיו  טיפלנו בייצור נרות מסוג אחד, במחיר אחיד  למדנו להתמודד עם טיפול במקרים שונים.
1 תרגול 11: Design Patterns ומחלקות פנימיות אסף זריצקי ומתי שמרת 1 תוכנה 1.
1 Formal Specifications for Complex Systems (236368) Tutorial #1 Course site:
Combo Box שלושה סוגים של Combo Box: Style 0 (default) - drop-down combo box המשתמש יכול להוסיף אפשרויות לרשימה או ללחוץ על החץ לבחירה מרשימת האפשרויות.
פיתוח אפליקציות אסינכרוניות Windows 10 Layout controls 2 ארז קלר.
קצת היסטוריה 1981דיווח ראשון על תסמונת כשל חיסוני נרכש בקרב מספר הומוסקסואלים. 1981דיווח על ביטויים שונים של איידס בקרב מזריקי סמים, חולי המופיליה, מקבלי.
© Keren Kalif JDBC קרן כליף.
מספרים אקראיים ניתן לייצר מספרים אקראיים ע"י הפונקציה int rand(void);
Web DevelopmEnt Bootstrap
Object Oriented Programming
Tirgul 12 Trees 1.
Object Oriented Programming
Operators Overloading
Formal Specifications for Complex Systems (236368) Tutorial #1
XML מבוא כללי MCSD Doron Amir
מבוא למדעי המחשב סיבוכיות.
XML מבוא כללי פרק ג' MCSD Doron Amir
מצביעים קרן כליף.
SQL בסיסי – הגדרה אינדוקטיבית
תכנות מכוון עצמים ושפת JAVA
Static and enum קרן כליף.
תכנות מכוון עצמים ושפת JAVA
עבודה עם נתונים באמצעות ADO.NET
תכנות מכוון עצמים בשפת JAVA
פרוקטוז, C6H12O6 , חד-סוכר מיוחד
מבוא ל Maven אליהו חלסצ'י תכנות מתקדם תרגול מספר 3
ממשקים - interfaces איך לאפשר "הורשה מרובה".
© Keren Kalif Servlet קרן כליף.
מבוא לתכנות בWINDOWS ב#C
ניתוח מערכות מידע תכנות ב C#
תכנות מכוון עצמים ושפת JAVA
תכנות מכוון עצמים ושפת JAVA
סוגי משתנים קרן כליף.
תזכורת על מה דיברנו שיעור שעבר? בנינו אתר אינטרנט עם כותרות
Shell Scripts בסביבת UNIX
תוכנה 1 תרגול 13 – סיכום.
תכנות מכוון עצמים ו- C++ יחידה 02 העמסת פונקציות, ערכי ברירת מחדל, enum, קימפול מותנה קרן כליף.
מחסנית ותור Stacks and Queues.
Presentation transcript:

© Keren Kalif JSF + Facelets קרן כליף

ביחידה זו נלמד: מהו JSF Validations Converter Page Navigation קבצי משאבים Internationalization JSF Life Cycle Facelets Template Component

מהו JSF? JavaServer Faces: אוסף תגיות לשימוש ב- JSP לצרכי UI המאפשרים להכניס לתוכן לוגיקה כמו ולידציות והמרות לכן הפיתוח הגרפי הופך לפשוט יחסית לעומת html מאחר ואין צורך ב- JavaScript  ולידציות מובנות בתגיות

יצירת פרוייקט JSF ב- NetBeans נייצר פרויקט חדש ובמסך בחירת ה- Framework נבחר:

קובץ הקונפיגורציה faces-config.xml תחת WEB-INF יש לייצר את הקובץ faces-config.xml יש לבחור באופציה JSF Faces Configuration בקובץ זה יוגדרו בהמשך: מחלקות ה- bean איתן נעבוד קונפיגורצית navigation בין דפים תמיכה בעבודה עם קבצי משאבים, למשל לצורך תמיכה בשפות

דוגמא – מחלקת ה- bean איתה נעבוד

דוגמא - יצירת ה- bean בקונפיגורציה ציון היכן ישמרו הנתונים. כמובן שניתן גם על ה- session / page / application

הגדרת ה- bean במחלקה במקום בקונפיגורציה הגדרת ה- bean ב- faces-config לחילופין, ניתן להגדירו ע"י annotation. כב"מ שמו יהיה כשם המחלקה כאשר האות הראשונה קטנה. ניתן להגדיר באופן מפורש את שם ה- bean

דוגמא – שימוש ב- bean ב- JSP הספריה המיוצגת ע"י f מייבאת את התגיות הנוספות של ה- JSF עבור בניית התצוגה, ולידציות והמרות הספריה המיוצגת ע"י h מייבאת את התגיות המכילות את הפקדים שיכולים להשתמש בתוספים מהספריה f תגית JSF שבתוכה נבנה את היררכית הפקדים בתצוגה יצירת פקד input שנתוניו ישמרו בתכונה name שב- bean פורמט הנתונים הדרוש הפעלת המתודה submitDetails שב- bean הערך יוצג רק אם ערך הביטוי שבתכונה rendered יהיה true

לאחר הקלדת הנתונים ולחיצה על Send הפלט לאחר הקלדת הנתונים ולחיצה על Send

הפלט כאשר יש טעות בפורמט הנתונים מאחר ופורמט הנתון בתאריך אינו תקין, בעקבות לחיצה על הכפתור Send לא הופעלה המתודה submitDetails. (ההוכחה לכך היא שאין הדפסה בקונסול של השרת) לכן ערך השדה hasDetails נשאר false ולא מוצגת ההודעה בתחתית הדף.

התכונות required ו- requiredMessage וכמובן לא הופעלה המתודה submitDetails פה יופיעו הודעות השגיאה

בדיקות התקינות פשוטות ונמצאות ברמת פיתוח ממשק המשתמש. שדה validation בדיקות התקינות פשוטות ונמצאות ברמת פיתוח ממשק המשתמש.

שדה converterMessage

Page Navigation ראינו שכאשר לוחצים על כפתור, מופעלת הפעולה המוגדרת בתכונה action ראינו ששיטה זו מחזירה מחרוזת אך התעלמנו ממנה החזרת מחרוזת היא הדרך לקבל תשובה, ובפרט להחליט מהו הדף אליו נעבור ע"י קונפיגורציה ב- faces-config תזכורת למתודה המופעלת באובייקט עם לחיצת הכפתור:

קינפוג ה- navigation ב- faces-config לכל navigation rule ניתן להגדיר navigation case רבים ובכך לשלוט על הזרימה. המחלקה מגדירה את התשובה והקונפיגורציה (ברמת ה- UI) מגדירה כיצד תראה התשובה. הפרדה מעולה בין BL ל- UI! הדף ממנו רוצים לעבור הגדרת הדף אליו נעבור בהינתן תשובה מסויימת

ניתן לראות את הקונפיגורציה גם כך

הערכים המתקבלים מה- bean הדף אליו נעבור הערכים המתקבלים מה- bean

דוגמת פלט נשים לב לפורמט

Event Handaling ראינו כי לחיצה על פקד מקושרת לפעולה המקונפגת בתכונה action בפקד Button, כלומר, הפעלת פעולה בשרת ב- backing- bean דרך נוספת היא מימוש event listener ב- backing bean ישנם 3 סוגים של EventListener: ActionEvent – יופעל בלחיצה על כפתור או קישור ValueChangedEvent – יופעל בשינוי ערך של פקד DataModelEvent – יופעלו בעת שינוי במודל

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

ValueChangedEvent מימוש ב- bean המתודה תהייה: public תחזיר void תקבל ValueChangedEvent

ValueChangedEvent- דוגמת פלט

מימוש listener ע"י ממשק במחלקת ה- bean: ב- JSF:

ניתן לראות כי ה- event לא רץ שוב! נשים לב: ה- event יופעל רק אם היה שינוי בערכים לעומת הפעם הקודמת: ניתן לראות כי ה- event לא רץ שוב!

עבודה עם קבצי משאבים (Resource Bundle) עד כה הטקסט שרצינו להציג הוגדר בקובץ ה- JSP במערכות רציניות, הטקסט אמור לעבור ביקורת אצל כתבים טכניים כתבים טכניים אינם אמורים לדעת לקרוא קוד לכן עובדים עם קבצי משאבים ובהם המגדירים זוגות key ו- value הכתבים הטכניים יכתבו את הערכים והמפתחים ישתמשו בקובץ זה במקום לכתוב את הטקסט ותוכן ההודעות בעצמם שינוי בטקסט לא יגרור שינוי בקוד ניתן להחליף את שפת התצוגה בקלות  הפרדה נוספת בין שכבות הפרוייקט

עבודה עם קבצי משאבים (2) קובץ משאבים צריך לשבת תחת תיקיית ה- src וסיומו יהיה properties דוגמא לקובץ משאבים:

השם באמצעותו ניגש למפתחות שבקובץ מתוך ה- JSF עבודה עם קבצי משאבים (3) כדי שהאפליקציה תדע לעבוד איתו צריך להוסיף ל- faces-config את הבלוק הבא: שם קובץ המשאבים השם באמצעותו ניגש למפתחות שבקובץ מתוך ה- JSF

שימוש בקובץ המשאבים ב- JSF

Internationalization ראינו כי באמצעות קבצי properties ניתן לקבוע את הטקסט שיופיע בתוכנה בהתבסס על תשתית זו ניתן לכתוב תוכנה שתוצג בקלות בשפות שונות המושג נקרא I18N (מתחיל באות i, 18 תווים ובסוף n) כמו כן, ניתן יהיה להציג מידע נוסף באופן שונה, למשל תאריך

כדי להוסיף תמיכה בשפה נוספת: properties  Add  Locale המנגנון אפליקציה התומכת בשפות שונות מורכבת מ- 2 חלקים: Internationalization: הקוד שתומך בריבוי שפות והחלפתן. מתבסס על עבודה עם קבצי משאבים Localization: הצגת המידע בפורמט המקומי: תרבות, צבעים מקובלים, סגנון הצגת תאריכים, מספרים וכד' בפרקטיקה: נגדיר קובץ properties לכל שפה בה נתמוך כך שהמפתחות יהיו זהים אך הערכים שונים כדי להוסיף תמיכה בשפה נוספת: לעמוד על אחד מקבצי ה- properties  Add  Locale

הגדרת ה- locale ב- faces-config יש להוסיף ב- faces-config לאילו locale יש תמיכה:

שימוש ב- locale המוגדר נוסיף למחלקת ה- bean שיטה שיודעת לקרוא את ה- locale של ה- request (נקבע ע"י ה- browser): נידע את ה- JSF מהו ה- locale:

דוגמאות

מעגל החיים של בקשת JSF ((JSF Request Life Cycle Client Server בשרת נבנה ה- view עבור הדף ונשמר ב- FacesContext בקשת הדף ללא נתונים Initial Request ה- response הוא דף המכיל את ה- view ללא ערכים 1- Restore View 2- Apply Request Values postback: שליחת הדף עם ערכים הפעלת validations ו- conversions בהתאם למצויין ב- JSF. אם שניהם עברו בהצלחה יופעלו ה- events. כל עוד התקבלה דף עם שגיאות לאחר ה- validations, conversions ו- events 3- Process Validations postback: שליחת הדף עם ערכים תקינים לאחר קבלת דף ללא שגיאות שמירת הנתונים ב- bean, הפעלת ה- BL ויצירת התשובה שתוחזר ללקוח (תוך שימוש ב- navigation שב- faces-config) 4- Update Model 5- Invoke Application 6- Render Response התקבל דף התשובה

Facelets - מוטיבציה JSF ממומש בתוך JSP בעוד שמעגל החיים שלהם שונה, מה שעלול לגרום להתנגשויות ולתוצאות בלתי צפויות ה- JSF בונה את עץ הרכיבים בעוד שה- JSP בונה אותם לפי הסדר הכלים הסטנדרטים של מעצבי האתרים אינם מאפשרים להם לצפות בקלות בדפי JSF טכנולוגיית ה- facelets באה להחליף את ה- JSF: מממשת כ- JSF ViewHandler מאפשרת קינפוג פקדים פעם אחת ושימוש חוזר JSP אינה תומכת בתגיות חדשות של JSF

שימוש ב- Templates ע"י Facelets למשל נייצר דף מסגרת לאתר שלנו (כותרת עליונה ותפריט) ובאמצע יהיה התוכן כל דף האתר יתבסס על התבנית שהכנו ויוסיף רק את החלק האמצעי של הדף שקול להורשת טפסים ב- C#

הכנסת איזור לתוך ה- template ומתן שם זיהוי נוסיף קובץ מטיפוס Facelets Template שם העיצוב ב- css הכנסת איזור לתוך ה- template ומתן שם זיהוי

שימוש בדף ה- template הגדרת ה- template עליו אנו מתבססים בדף זה שתילת התוכן באיזור הנקרא title

סיכום התגיות: בשימוש ב- template: בשימוש ב- template client: ui:insert – להכנסת איזור בדף ה- template בשימוש ב- template client: ui:composition – הגדרת שף המתבסס על דף template ui:define – הכנסת ערכים לאיזור מסויים ב- template צריכה להיות התאמה בשם בין השימוש ב- ui:insert ב- template לבין השם בשימוש ה- ui:define ב- template client

המחשה http://jsflessons.blogspot.com/2009/03/templating-in-facelets.htmlהתמונה לקוחה מ:

שימוש ב- XHTML אחר באחד האיזורים

שימוש ב- XHTML אחר באחד האיזורים במקום ui:insert משתמשים ב- ui:include

הוראות מחוץ לתג ui:composition

מתייחס להגדרות שמחוץ לתג ui:decorate התגיות ui:composition ו- ui:decorate זהות בשימושן פרט לכך שהראשונה מתעלמת מתוכן שמחוץ לה והשניה לא מתייחס להגדרות שמחוץ לתג ui:decorate

יצירת component מותאם אישית - הגדרת html ללא body - הרכיב אותו אנו מגדירים נמצא בתגית ui:component

שימוש ב- component מותאם אישית

ui:fragment משמש כמו ui:component ההבדל: בדיוק כמו ui:composition ו- ui:decorate בהתאמה

ui:param – להעברת נתונים בין facelets שם הפרמטר

ui:param – העברת פרמטרים

תרגיל יש לכתוב אפליקציה ובה 3 דפים בעלי עיצוב זהה: הדף מחולק ל- 3 חלקים: עליון, שמאלי ומרכז בחלק העליון תהיה כותרת שתורכב מ- Hello ושם שיקרא מקובץ משאבים בחלק השמאלי תהייה אפשרות להקליד גובה ומשקל וכפתור לחישוב התוצאה תופיע בחלק המרכזי בדף התוצאה תכלול את ערך ה- BMI שהוזנו וכן הודעה בפורמט הבא: אם ה- BMI מתחת ל- 25 הרקע יהיה ירוק והודעה כי המשקל תקין אחרת, הרקע יהיה אדום והודעה כי המשקל אינו תקין יש לוודא כי הגובה הוא בין 1.50-2.10 מ' יש לוודא כי המשקל בין 30-250 ק"ג במידה ואחד הנתונים שהוזנו חסר או אינו תקין, יש להציג הודעה מתאימה יש לתמוך באפליקציה גם באנגלית וגם בעברית ע"י לחיצה על כפתור

ביחידה זו למדנו: מהו JSF Validations Converter Page Navigation קבצי משאבים Internationalization JSF Life Cycle Facelets Template Component