מבוא ל- GWT

1. הקדמה

GWT או ערכת הכלים של גוגל היא מסגרת לבניית יישומי אינטרנט בעלי ביצועים גבוהים בג'אווה.

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

2. SDK GWT

ה- SDK מכיל את ספריות ה- API של Java, מהדר ושרת פיתוח.

2.1. ממשק API של Java

ל- API של GWT שיעורים לבניית ממשקי משתמש, ביצוע שיחות שרת, בינאום, ביצוע בדיקות יחידה. למידע נוסף עיין בתיעוד Java כאן.

2.2. מַהְדֵר

במילים פשוטות, מהדר GWT הוא מתרגם מקור מקוד ג'אווה ל- Javascript. תוצאת האוסף היא יישום Javascript.

ההיגיון בעבודתו כולל זמירה של שיעורים שאינם בשימוש, שיטות, שדות מהקוד וקיצור שמות Javascript.

בגלל יתרון זה, אנחנו כבר לא צריכים לכלול ספריות Ajax בפרויקט Javascript שלנו. כמובן שאפשר גם להגדיר רמזים בזמן קומפילציה של הקוד.

הנה כמה שימושי מהדר GWTC פרמטרים:

  • -logLevel - להגדיר אחד מה- שגיאה, אזהרה, מידע, עקבות, ניפוי, ספאם, הכל רמות רישום
  • -workdir - מדריך העבודה של המהדר
  • -גן - הספריה לכתיבת הקבצים שנוצרו
  • -הַחוּצָה - ספריית קבצי הפלט
  • אופטימיזציה - מגדיר את רמת אופטימיזציה של המהדר בין 0 ל 9
  • -סִגְנוֹן - סגנון פלט התסריט OBF, די אוֹ מְפוֹרָט
  • -מודול [ים] - שם המודולים להרכיב

3. התקנה

ה- SDK האחרון זמין בדף ההורדה. שאר ההתקנה זמינה בדף ההתחלה.

3.1. Maven

כדי להקים את הפרויקט עם Maven, עלינו להוסיף את התלות הבאות pom.xml:

 com.google.gwt gwt-servlet runtime com.google.gwt gwt-user provided com.google.gwt gwt-dev provided 

ספריית gwt-servlet תומכת ברכיבים בצד השרת להפעלת נקודת קצה של GWT-RPC. משתמש gwt מכיל את ה- API של Java שבו נשתמש לבניית יישום האינטרנט שלנו. gwt-dev מכיל את הקוד למהדר, לפריסה או לאירוח היישום.

כדי לוודא שכל התלות משתמשות באותה גרסה, עלינו לכלול את תלות האב GWT:

 com.google.gwt gwt 2.8.2 ייבוא ​​פום 

כל החפצים זמינים להורדה ב- Maven Central.

4. יישום

בואו נבנה יישום אינטרנט פשוט. זה ישלח הודעה לשרת ויציג את התגובה.

באופן כללי, יישום GWT מורכב מהשרת ומחלקי הלקוח. צד הלקוח מגיש בקשת HTTP להתחברות לשרת. כדי לאפשר זאת, GWT משתמש בקריאת פרוצדורה מרחוק או פשוט במנגנון RPC.

5. GWT ו- RPC

אם נחזור ליישום שלנו, בואו נראה איך נוצרת תקשורת RPC. לשם כך אנו יוצרים שירות לקבלת הודעה מהשרת.

בואו ניצור תחילה ממשק:

ממשק ציבורי @RemoteServiceRelativePath ("שלום") MessageService מרחיב את RemoteService {String sendMessage (מחרוזת הודעה) זורק IllegalArgumentException; }

ה @RemoteServiceRelativePath ביאור ממפה את השירות למודולים /הוֹדָעָה כתובת אתר יחסית. MessageService צריך להאריך מ שירות Remote ממשק סמן לביצוע תקשורת RPC.

ההטמעה של MessageService נמצא בצד השרת:

מחלקה ציבורית MessageServiceImpl מרחיב את RemoteServiceServlet מיישם את MessageService {public String sendMessage (הודעת מחרוזת) זורק IllegalArgumentException {if (message == null) {זרוק IllegalArgumentException חדש ("ההודעה אינה בטוחה"); } החזירו "שלום" + הודעה + "!

זמן קבלה: "+ LocalDateTime.now ();}}

מחלקת השרתים שלנו משתרעת על RemoteServiceServlet מחלקת סרבל בסיס.זה יבטל אוטומטית את עריכת הבקשות הנכנסות מהלקוח ויהיה סדר סדר של תגובות יוצאות מהשרת.

בואו נראה כיצד אנו משתמשים בו מצד הלקוח. ה MessageService היא רק גרסה סופית של השירות שלנו.

כדי לבצע בצד הלקוח, עלינו ליצור את הגרסה האסינכרונית של השירות שלנו:

ממשק ציבורי MessageServiceAsync {void sendMessage (קלט מחרוזת, התקשרות חוזרת של AsyncCallback) מעביר IllegalArgumentException; }

כאן אנו יכולים לראות ויכוח נוסף ב getMessage () שיטה. אנחנו צריכים אסינכרון להודיע ​​לממשק המשתמש כאשר השיחה האסינכרונית הושלמה. בדרך זו אנו מונעים חסימה של חוט ממשק המשתמש העובד.

6. רכיבים ומחזור חייהם

ה- SDK מציע כמה אלמנטים ופריסות ממשק משתמש לעיצוב הממשקים הגרפיים.

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

  • רכיבי widgetsתיבת טקסט, TextArea, לַחְצָן, כפתור רדיו, צ'ק בוקס, וכו…

ויש יישומוני פריסה או פאנל המרכיבים ומסדרים את המסך:

  • יישומונים בפאנלאופקי לוח, אנכי פאנל, PopupPanel, TabPanel, וכו…

בכל פעם שאנחנו מוסיפים לקוד ווידג'ט או כל רכיב אחר, GWT עובד קשה כדי לקשר את אלמנט התצוגה עם ה- DOM של הדפדפן..

הבנאי תמיד מאתחל את אלמנט ה- DOM הבסיסי. כאשר אנו מצרפים יישומון ילד לרכיב הורה, זה גם גורם לכריכה ברמת DOM. מחלקת נקודת הכניסה מכילה את פונקציית הטעינה שתיקרא תחילה. זה המקום בו אנו מגדירים את הווידג'טים שלנו.

7. נקודת כניסה

בואו נסתכל מקרוב על נקודת הכניסה הראשית של היישום:

מחלקה ציבורית Google_web_toolkit מיישמת את EntryPoint {privateServiceAsync messageServiceAsync = GWT.create (MessageService.class); חלל ציבורי onModuleLoad () {Button sendButton = כפתור חדש ("הגש"); TextBox nameField = חדש TextBox (); nameField.setText ("שלום לך"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). הוסף (nameField); RootPanel.get ("sendButtonContainer"). הוסף (sendButton); }}

כל כיתת ממשק משתמש מיישמת את com.google.gwt.core.client.EntryPoint ממשק כדי לסמן אותו כערך ראשי עבור המודול. הוא מתחבר למסמך ה- HTML המתאים, שבו קוד ה- Java פועל.

אנו יכולים להגדיר רכיבי ממשק משתמש של GWT ולהקצות לאחר מכן לתגי HTML עם אותו מזהה נתון. מחלקת נקודות כניסה עוקפת את נקודת הכניסה onModuleLoad () שיטה, אשר נקראת באופן אוטומטי בעת טעינת המודול.

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

עכשיו, בואו נראה כיצד אנו יוצרים את מופע השרת המרוחק שלנו. לשם כך אנו משתמשים GWT.create (MessageService.class) שיטה סטטית.

זה קובע את הסוג המבוקש בזמן הקומפילציה. כשרואים שיטה זו, מהדר GWT מייצר גרסאות רבות של קוד בזמן הקומפילציה, שרק אחת מהן צריכה להיטען על ידי לקוח מסוים במהלך האתחול בזמן הריצה. תכונה זו נמצאת בשימוש נרחב בשיחות RPC.

כאן אנו מגדירים גם את לַחְצָן ו תיבת טקסט יישומונים. כדי להוסיף צרף אותם לעץ DOM אנו משתמשים ב- RootPanel מעמד. זהו לוח הבסיס ומחזיר ערך סינגלטון כדי לאגד את רכיבי הווידג'ט:

RootPanel.get ("sendButtonContainer"). הוסף (sendButton);

ראשית, הוא מקבל את מיכל השורש המסומן sendButtonContainer תְעוּדַת זֶהוּת. לאחר שנצרף את sendButton למיכל.

8. HTML

בפנים / webapp תיקיה, יש לנו Google_web_toolkit.html קוֹבֶץ.

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

בבקשה הכנס את ההודעה שלך:

ה תגים עם nameFieldContainer ו sendButtonContainer מזהים ימופו ל- לַחְצָן ו תיבת טקסט רכיבים.

9. מתאר המודול הראשי

בואו נסתכל על התצורה האופיינית של ה- Google_web_toolkit.gwt.xml קובץ מתאר המודול הראשי:

אנו מנגישים את הדברים המרכזיים של GWT על ידי הכללת ה- com.google.gwt.user.User מִמְשָׁק. כמו כן, אנו יכולים לבחור גיליון סגנון ברירת מחדל ליישום שלנו. במקרה זה, כן נקי. נקי.

אפשרויות העיצוב האחרות הזמינות הן *. כהה. כהה, *. סטנדרטי. סטנדרטי, *. כרום. כרום. ה com.baeldung.client.Google_web_toolkit מסומן כאן גם עם תָג.

10. הוספת מטפלים באירועים

כדי לנהל את אירועי הקלדת העכבר או המקלדת, GWT ישתמש בכמה מטפלים. כולם משתרעים מ מנהל אירועים ממשק ויש להם שיטה עם הטיעון מסוג אירוע.

בדוגמה שלנו, אנו רושמים את מטפל האירועים בלחיצת עכבר.

זה יפטר את בלחיצה() שיטה בכל פעם שה-לחצן נלחץ:

closeButton.addClickHandler (ClickHandler חדש () {public void onClick (ClickEvent event) {vPanel.hide (); sendButton.setEnabled (true); sendButton.setFocus (true);}});

כאן אנו יכולים לשנות את מצב היישומון והתנהגותו. בדוגמה שלנו, אנו מסתירים את vPanel ולאפשר את sendButton.

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

מחלקה MyHandler מיישמת את ClickHandler, KeyUpHandler {public void onClick (ClickEvent event) {// שלח הודעה לשרת} public void onKeyUp (KeyUpEvent event) {if (event.getNativeKeyCode () == KeyCodes.KEY_ENTER) {// שלח הודעה אל השרת } } }

בנוסף ל ClickHandler, אנו כוללים גם את KeyUpHandler ממשק לתפוס את אירועי המקשים. פה, בתוך onKeyUp () שיטה בה אנו יכולים להשתמש KeyUpEvent כדי לבדוק אם המשתמש לחץ על מקש Enter.

וכאן כיצד אנו משתמשים ב- MyHandler שיעור לרישום שני מטפלי האירועים:

מטפל MyHandler = MyHandler חדש (); sendButton.addClickHandler (מטפל); nameField.addKeyUpHandler (מטפל);

11. התקשרות לשרת

כעת, אנו מוכנים לשלוח את ההודעה לשרת. נבצע שיחת הליך מרוחקת עם אסינכרוני לשלוח הודעה() שיטה.

הפרמטר השני של השיטה הוא AsyncCallback ממשק, שבו חוּט הוא סוג ההחזרה של השיטה הסינכרונית המתאימה:

messageServiceAsync.sendMessage (textToServer, AsyncCallback חדש () {public void onFailure (ניתן לזרוק) {serverResponseLabel.addStyleName ("serverResponseLabelError"); serverResponseLabel.setHTML ("אירעה שגיאת שרת"); closeButton.setFocus (נכון); (תוצאת מחרוזת) {serverResponseLabel.setHTML (תוצאה); vPanel.setVisible (נכון);}});

כפי שאנו רואים, מכשירי מקלטonSuccess (תוצאת מחרוזת)ו onFailure (ניתן לזריקה)שיטה לכל סוג תגובה.

בהתאם לתוצאת התגובה, הגדרנו הודעת שגיאה "אירעה שגיאת שרת" או נציג את ערך התוצאה במיכל.

12. סטיילינג CSS

בעת יצירת הפרויקט עם תוסף הליקוי, הוא ייצור באופן אוטומטי את Google_web_toolkit.css קובץ תחת / webapp ספריה וקשר אותה לקובץ ה- HTML הראשי.

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

sendButton.addStyleName ("sendButton");

כאן אנו מקצים סגנון CSS עם שם הכיתה sendButton שלנו sendButton רְכִיב:

.sendButton {display: block; גודל גופן: 16pt; }

13. תוצאה

כתוצאה מכך, יש לנו יישום אינטרנט פשוט זה:

כאן אנו מגישים לשרת הודעת "היי שם" ומדפיסים את "שלום, היי!" תגובה על המסך.

14. מסקנה

במאמר מהיר זה למדנו על היסודות של GWT Framework. לאחר מכן דנו בארכיטקטורה, במחזור החיים, ביכולות ובמרכיבים השונים של ה- SDK שלה.

כתוצאה מכך למדנו כיצד ליצור יישום אינטרנט פשוט.

וכמו תמיד, קוד המקור המלא של ההדרכה זמין ב- GitHub.


$config[zx-auto] not found$config[zx-overlay] not found