מבוא למסגרת וויקט
1. סקירה כללית
Wicket היא מסגרת מוכוונת לרכיבי אינטרנט בצד שרת Java שמטרתה לפשט בניית ממשקי אינטרנט על ידי הצגת דפוסים המוכרים מפיתוח ממשק משתמש שולחני.
עם Wicket ניתן לבנות יישום אינטרנט המשתמש רק בקוד Java ובדפי HTML תואמי XHTML. אין צורך ב- Javascript, ולא בקבצי תצורה של XML.
הוא מספק שכבה על פני מחזור התגובה לבקשות, ומגן מפני עבודה ברמה נמוכה ומאפשר למפתחים להתמקד בלוגיקה העסקית.
במאמר זה נציג את היסודות על ידי בניית ה- HelloWorld W.יישום icket, ואחריו דוגמה מלאה המשתמשת בשני רכיבים מובנים המתקשרים זה עם זה.
2. התקנה
להפעלת פרויקט Wicket, בואו נוסיף את התלות הבאה:
org.apache.wicket ליבת הליבה 7.4.0 ייתכן שתרצה לבדוק את הגרסה האחרונה של וויקט במאגר Maven Central, אשר בזמן קריאתך עלול שלא לחפוף לזו המשמשת כאן.
כעת אנו מוכנים לבנות את יישום ה- Wicket הראשון שלנו.
3. שלום עולם פִּשׁפָּשׁ
נתחיל בסיווג משנה של וויקט אפליקציית רשת בכיתה, אשר, לכל הפחות, דורשת לעקוף את כיתה getHomePage () שיטה.
וויקט ישתמש בכיתה זו כנקודת הכניסה הראשית של האפליקציה. בתוך השיטה, פשוט החזירו א מעמד אובייקט של כיתה בשם שלום עולם:
מחלקה ציבורית HelloWorldApplication מרחיבה WebApplication {@Override Class Class getHomePage () {החזירו HelloWorld.class; }}Wicket מעדיף כינוס על פני תצורה. הוספת דף אינטרנט חדש ליישום מחייבת יצירת שני קבצים: קובץ Java וקובץ HTML עם אותו שם (אך עם סיומת שונה) באותה ספריה. יש צורך בתצורה נוספת רק אם ברצונכם לשנות את התנהגות ברירת המחדל.
בספריית החבילות של קוד המקור, הוסף תחילה את ה- HelloWorld.java:
מחלקה ציבורית HelloWorld מרחיבה את דף האינטרנט {public HelloWorld () {add (תווית חדשה ("שלום", "שלום עולם!")); }}לאחר מכן HelloWorld.html:
כשלב אחרון, הוסף את הגדרת המסנן בתוך ה- web.xml:
wicket.examples org.apache.wicket.protocol.http.WicketFilter applicationClassName com.baeldung.wicket.examples.HelloWorldApplication זהו זה. זה עתה קידדנו את יישום האינטרנט הראשון שלנו Wicket.
הפעל את הפרויקט על ידי בניית א מִלחָמָה קובץ, (חבילת mvn משורת הפקודה) ופרס אותו על מיכל סרוולט כגון מזח או טומקט.
בואו ניגש // localhost: 8080 / HelloWorld / בדפדפן. דף ריק עם ההודעה שלום עולם! יופיע.
4. רכיבי וויקט
הרכיבים ב- Wicket הם משולשים המורכבים ממעמד Java, סימון HTML ומודל. מודלים הם חזית בה משתמשים רכיבים לגישה לנתונים.
מבנה זה מספק הפרדה נחמדה של חששות ועל ידי ניתוק הרכיב מפעולות ממוקדות נתונים, מגביר שימוש חוזר בקוד.
הדוגמה הבאה מדגים כיצד להוסיף התנהגות Ajax לרכיב. הוא מורכב מדף עם שני אלמנטים: תפריט נפתח ותווית. כאשר הבחירה הנפתחת משתנה, התווית (ורק התווית) תעודכן.
גוף קובץ ה- HTML CafeSelector.html יהיה מינימלי, עם שני אלמנטים בלבד, תפריט נפתח ותווית:
כתובת כתובת
בצד Java, בואו ניצור את התווית:
תווית addressLabel = תווית חדשה ("כתובת", PropertyModel חדש (כתובת זו, "כתובת")); addressLabel.setOutputMarkupId (נכון);הטיעון הראשון ב תווית בנאי התואם את wicket: id מוקצה בקובץ ה- HTML. הטיעון השני הוא מודל הרכיב, עטיפה לנתונים הבסיסיים המוצגים ברכיב.
ה setOutputMarkupId השיטה הופכת את הרכיב כשיר לשינוי באמצעות Ajax. בואו ניצור כעת את הרשימה הנפתחת ונוסיף אליה התנהגות של Ajax:
DropDownChoice cafeDropdown = DropDownChoice חדש ("בתי קפה", PropertyModel חדש (זה, "selectedCafe"), cafeNames); cafeDropdown.add (חדש AjaxFormComponentUpdatingBehavior ("onchange") {@Override מוגן חלל onUpdate (AjaxRequestTarget יעד) {שם מחרוזת = (מחרוזת) cafeDropdown.getDefaultModel (). getObject (); address.setAddress (שם .Adress. ()); target.add (addressLabel);}});היצירה דומה לזו של התווית, הקבלן מקבל את מזהה הכניסה, מודל ורשימת שמות בתי קפה.
לאחר מכן AjaxFormComponentUpdatingBehavior מתווסף עם onUpdate שיטת התקשרות חוזרת המעדכנת את דגם התווית לאחר הוצאת בקשת ajax. לבסוף, רכיב התווית מוגדר כיעד לרענון.
לבסוף, רכיב התווית מוגדר כיעד לרענון.
כפי שאתה יכול לראות הכל Java, לא הייתה צורך בשורה אחת של Javascript. על מנת לשנות את הצגת התווית שינינו פשוט POJO. המנגנון שבו שינוי אובייקט Java מתורגם לשינוי בדף האינטרנט קורה מאחורי הווילונות ואינו רלוונטי למפתח.
Wicket מציע סט גדול של רכיבים המותאמים ל- AJAX מחוץ לקופסה. קטלוג הרכיבים עם דוגמאות חיות זמין כאן.
5. מסקנה
במאמר ההקדמה הזה סקרנו את היסודות של Wicket את מסגרת האינטרנט מבוססת הרכיבים בג'אווה.
וויקט מספקת שכבת הפשטה שמטרתה לחסל לחלוטין את קוד האינסטלציה.
כללנו שתי דוגמאות פשוטות, שנמצאות ב- GitHub, כדי לתת לך טעימה כיצד נראית התפתחות עם מסגרת זו.
