streamalism.org

1. הקדמה

ראשוני פנים הוא חבילת רכיב ממשק משתמש של קוד פתוח עבור פנים שרת Java (JSF) יישומים.

במדריך זה אנו נותנים מבוא ל- Primefaces ונדגים כיצד להגדיר אותו ולהשתמש בכמה מהתכונות העיקריות שלו.

2. סקירה כללית

2.1. פנים שרת Java

פנים שרת Java הוא מסגרת מוכוונת רכיבים לבניית ממשקי משתמש ליישומי אינטרנט של Java. המפרט של JSF הוא רשמי באמצעות תהליך הקהילה של Java והיא טכנולוגיית תצוגה סטנדרטית.

מידע נוסף על JSF בסביבת אביב ניתן למצוא כאן.

2.2. פנים ראשוניות

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

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

3. הגדרת יישום

לצורך הדגמת כמה רכיבי Primefaces, בואו ניצור אפליקציית אינטרנט פשוטה באמצעות Maven.

3.1. תצורת Maven

ל- Primefaces יש תצורה קלה עם צנצנת אחת בלבד, כדי להתחיל, בואו להוסיף את התלות שלנו pom.xml:

 org.primefaces ראשיים 6.2 

הגרסה האחרונה תוכל למצוא כאן.

3.2. בקר - שעועית מנוהלת

לאחר מכן, בואו ניצור את המעמד שעועית לרכיב שלנו:

@ManagedBean (name = "helloPFBean") מחלקה ציבורית HelloPFBean {}

עלינו לספק א @ManagedBean ביאור כדי לאגד את הבקר שלנו לרכיב תצוגה.

3.3. נוף

לבסוף, בואו נכריז על מרחב השמות Primefaces במרחב שלנו.xhtml קוֹבֶץ:

4. רכיבים לדוגמא

להפעלת הדף, הפעל את השרת ונווט אל:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

בואו נשתמש PanelGrid כמו הרחבה ל- JSF רגיל panelGrid:

הנה, הגדרנו א panelGrid עם שתי עמודות והגדר את outputText מהצדדים של JSF להצגת נתונים מהשעועית המנוהלת.

הערכים המוצהרים בכל אחד מהם outputText מתאים ל שם פרטי ו שם משפחה נכסים שהוכרזו שלנו @ManagedBean:

פרטי מחרוזת firstName; שם משפחה פרטי מחרוזת; 

בואו נסתכל על המרכיב הראשון והפשוט שלנו:

4.2. בחרOneRadio

אנחנו יכולים להשתמש בחר OneRadio רכיב כדי לספק פונקציונליות של לחצן בחירה:

עלינו להכריז על משתנה הערך בשעועית הגיבוי כדי להחזיק את ערך כפתור הבחירה:

component String componentSuite; 

התקנה זו תביא לכפתור בחירה באופציה שתי אפשרויות הקשור לבסיס חוּט תכונה componentSuite:

4.3. טבלת נתונים

הבא, בואו להשתמש ב טבלת נתונים רכיב להצגת נתונים בפריסת טבלה:

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

טכנולוגיות רשימה פרטיות; 

כאן יש לנו רשימה של טכנולוגיות שונות ומספרי הגרסאות שלהן:

4.4. אייאקס עם הקלד טקסט

אנחנו יכולים גם להשתמש p: אייאקס לספק תכונות Ajax לרכיבים שלנו.

לדוגמה, בואו נשתמש ברכיב זה כדי להחיל אירוע טשטוש:

בהתאם, נצטרך לספק נכסים בשעועית:

פרטי מחרוזת inputText; פרטי מחרוזת פלט טקסט; 

בנוסף, עלינו לספק שיטת מאזין בשעועית שלנו לאירוע הטשטוש AJAX שלנו:

חלל ציבורי onBlurEvent () {outputText = inputText.toUpperCase (); }

כאן פשוט הפכנו את הטקסט לאותיות רישיות כדי להדגים את המנגנון:

4.5. לַחְצָן

חוץ מזה, אנחנו יכולים גם להשתמש p: commandButton כפי ש הרחבה לתקן h: commandButton רְכִיב.

לדוגמה:

כתוצאה מכך, בתצורה זו, יש לנו את הכפתור בו נשתמש לפתיחת דו-שיח (באמצעות בלחיצה תְכוּנָה):

4.6. דיאלוג

יתר על כן, כדי לספק את הפונקציונליות של הדיאלוג, נוכל להשתמש p: שיח רְכִיב.

בואו נשתמש גם בכפתור מהדוגמה האחרונה כדי לפתוח דיאלוג בלחיצה:

במקרה זה, יש לנו דו-שיח עם התצורה הבסיסית שניתן להפעיל באמצעות ה- commandButton המתואר בסעיף הקודם:

5. Primefaces Mobile

Primefaces Mobile (PFM) מספק ערכת ממשק משתמש ליצירת יישומי Primefaces למכשירים ניידים.

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

5.1. תְצוּרָה

ראשית, עלינו לאפשר תמיכה בניווט סלולרי בתוך שלנו faces-config.xml:

 org.primefaces.mobile.application.MobileNavigationHandler 

5.2. מרחב שמות

ואז, כדי להשתמש ברכיבי PFM, עלינו לכלול את מרחב השמות PFM במרחב שלנו .xhtml קוֹבֶץ:

xmlns: pm = "// primefaces.org/mobile"

מלבד צנצנת ה- Primefaces הסטנדרטית, אין צורך בשום ספריה נוספת בתצורה שלנו.

5.3. RenderKit

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

במקרה של דף PFM יחיד בתוך יישום, אנו יכולים להגדיר a RenderKit בתוך העמוד שלנו:

בעזרת יישום PFM מלא נוכל להגדיר את שלנו RenderKit בהיקף היישום בפנים faces-config.xml:

PRIMEFACES_MOBILE 

5.4. דף לדוגמא

עכשיו, בואו נעשה דף PFM לדוגמה:

כפי שניתן לראות, השתמשנו ראש הדף ו תוֹכֶן רכיב מ- PFM לבניית טופס פשוט עם כותרת:

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

מחרוזת ציבורית go () {if (this.magicWord! = null && this.magicWord.toUpperCase (). שווה ("BAELDUNG")) {return "pm: success"; } להחזיר "pm: כישלון"; }

במקרה של מילה נכונה, נעבור לדף הבא:

תצורה זו מביאה לפריסה זו:

במקרה של מילה שגויה, נעבור לדף הבא:

תצורה זו תביא לפריסה זו:

שים לב ש- PFM הוצא משימוש בגרסה 6.2 ויוסר בגרסה 6.3 לטובת ערכה סטנדרטית רספונסיבית.

6. מסקנה

במדריך זה הסברנו את היתרונות של שימוש בחבילת הרכיבים JSF של Primefaces והדגמנו כיצד להגדיר ולהשתמש ב- Primefaces בפרויקט מבוסס Maven.

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

כמו תמיד, דוגמאות הקוד ממדריך זה ניתנות ב- GitHub.