streamalism.org

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

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

2. Maven תלות והתקנה

נתחיל בהוספת התלות הבאות שלנו pom.xml:

 com.vaadin vaadin-server com.vaadin vaadin-client-compiled com.vaadin vaadin-themes 

הגרסאות העדכניות ביותר של התלות נמצאות כאן: vaadin-server, vaadin-client-compiled, vaadin-themes.

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

כדי להרכיב את יישומוני Vaadin שלנו, עלינו להגדיר את התוסף maven-war-plug, vaadin-maven-plugin ואת התוסף maven-clean. לקבלת ה- pom המלא, דאג לבדוק את קובץ ה- pom בקוד המקור - בסוף ההדרכה.

כמו כן, עלינו להוסיף את מאגר Vaadin ואת ניהול התלות:

  vaadin-addons //maven.vaadin.com/vaadin-addons com.vaadin vaadin-bom 13.0.9 יבוא pom 

ה תלות ניהול תג שולט בגירסאות של כל ואדין תלות.

כדי להריץ את היישום במהירות, נשתמש בתוסף Jetty:

 org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517 2 נכון 

הגרסה האחרונה של התוסף נמצאת כאן: jetty-maven-plugin.

בעזרת תוסף זה אנו יכולים להריץ את הפרויקט שלנו באמצעות הפקודה:

מזח mvn: לרוץ

3. מהו ואדין?

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

המסגרת אכן מכסה את צד השרת כמו כן, כלומר כל שינוי שתבצע בממשק המשתמש נשלח מיד לשרת - כך שבכל רגע יישום ה- backend יודע מה קורה בממשק הקצה.

Vaadin מורכב מצד לקוח ושרת - כאשר צד הלקוח בנוי על גבי מסגרת הכלים הידועה של Google Widget Toolkit, וצד השרת מטופל על ידי ואדין סרוולט.

4. הסרוולט

בדרך כלל, יישום Vaadin אינו משתמש ב- web.xml קוֹבֶץ; במקום זאת, הוא מגדיר את סרוולט באמצעות הערות:

@WebServlet (urlPatterns = "/ VAADIN / *", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration (ui = VaadinUI.class, productionMode = false) מחלקה סטטית ציבורית MyUIServlet מרחיבה את VaadinServlet {}

במקרה זה, סרוולט זה מגיש תוכן מה- / VAADIN נָתִיב.

5. המחלקה העיקרית

ה VaadinUI מחלקה שמופנית בסרוולט חייבת להרחיב את מחלקת ממשק המשתמש מהמסגרת ועליה לעקוף את ה- init שיטה להשלמת האתחול של היישום עם הפעלת Vaadin.

השלב הבא הוא ליצור פריסה ולהוסיף אותה לפריסה הראשית של היישום:

מחלקה ציבורית VaadinUI מרחיב את ממשק המשתמש {@Override מוגן בטל init (VaadinRequest vaadinRequest) {VerticalLayout verticalLayout = חדש VerticalLayout (); verticalLayout.setSpacing (true); verticalLayout.setMargin (נכון); setContent (verticalLayout); }

6. מנהלי מערכי ואדין

המסגרת מגיעה עם מספר מנהלי פריסות מוגדרים מראש.

6.1. VerticalLayout

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

VerticalLayout verticalLayout = VerticalLayout חדש (); verticalLayout.setSpacing (true); verticalLayout.setMargin (נכון); setContent (verticalLayout);

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

6.2. HorizontalLayout

פריסה זו מציבה כל רכיב זה לצד זה משמאל לימין דומה לפריסה האנכית:

HorizontalLayout horizontalLayout = חדש HorizontalLayout ();

6.3. GridLayout

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

GridLayout gridLayout = GridLayout חדש (3, 2);

6.4. FormLayout

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

FormLayout formLayout = FormLayout חדש ();

7. רכיבי ואדין

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

7.1. תווית

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

תווית תווית = תווית חדשה (); label.setId ("LabelID"); label.setValue ("ערך תווית"); label.setCaption ("תווית"); gridLayout.addComponent (תווית);

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

7.2. קישור

ה קישור יישומון הוא למעשה היפר-קישור בסיסי:

קישור קישור = קישור חדש ("Baeldung", ExternalResource חדש ("// www.baeldung.com/")); link.setTargetName ("_ ריק");

שימו לב כיצד ערכי ה- HTML האופייניים של אלמנט כולם כאן.

7.3. שדה טקסט

יישומון זה משמש להזנת טקסט:

TextField textField = חדש TextField (); textField.setIcon (VaadinIcons.USER);

אנו יכולים להתאים אישית את האלמנטים נוספים; לדוגמא, אנו יכולים להוסיף תמונות במהירות לווידג'טים באמצעות setIcon () ממשק API.

כמו כן, שים לב לכך Font Awesome נשלח מהקופסה עם המסגרת; זה מוגדר כ- Enum, ואנחנו יכולים בקלות להשתמש בו.

7.4. TextArea

כפי שהיית מצפה, TextArea זמין לצד שאר רכיבי ה- HTML המסורתיים:

TextArea textArea = TextArea חדש ();

7.5. DateField ו InlineDateField

רכיב חזק זה משמש לבחירת תאריכים; פרמטר התאריך הוא התאריך הנוכחי שיש לבחור ביישומון:

DateField dateField = DateField חדש ("DateField", LocalDate.ofEpochDay (0));

אנחנו יכולים ללכת רחוק יותר ולקנן אותו בתוך א תיבת משולבת שליטה לחיסכון במקום:

InlineDateField inlineDateField = InlineDateField חדש ();

7.6. PasswordField

זהו קלט הסיסמה המסתווה הרגיל:

PasswordField passwordField = PasswordField חדש ();

7.7. RichTextArea

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

RichTextArea richTextArea = RichTextArea חדש (); richTextArea.setCaption ("אזור טקסט עשיר"); richTextArea.setValue (""); richTextArea.setSizeFull (); פאנל richTextPanel = פאנל חדש (); richTextPanel.setContent (richTextArea);

7.8. לַחְצָן

הכפתורים משמשים ללכידת קלט המשתמשים ומגיעים במגוון גדלים וצבעים.

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

כפתור normalButton = כפתור חדש ("כפתור רגיל");

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

tinyButton.addStyleName ("זעיר"); smallButton.addStyleName ("קטן"); largeButton.addStyleName ("גדול"); hugeButton.addStyleName ("ענק"); dangerButton.addStyleName ("סכנה"); friendlyButton.addStyleName ("ידידותי"); primaryButton.addStyleName ("ראשוני"); borderlessButton.addStyleName ("ללא גבולות"); linkButton.addStyleName ("קישור"); quietButton.addStyleName ("שקט");

אנו יכולים ליצור כפתור מושבת:

כפתור מושבת Button = כפתור חדש ("כפתור מושבת"); disabledButton.setDescription ("אי אפשר ללחוץ על כפתור זה"); disabledButton.setEnabled (false); buttonLayout.addComponent (disabledButton);

כפתור מקורי המשתמש במראה הדפדפן:

NativeButton nativeButton = חדש NativeButton ("כפתור מקורי"); buttonLayout.addComponent (nativeButton);

וכפתור עם סמל:

כפתור iconButton = כפתור חדש ("כפתור אייקון"); iconButton.setIcon (VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent (iconButton);

7.9. צ'ק בוקס

תיבת הסימון היא אלמנט מצב שינוי, מסומנת או אינה מסומנת:

תיבת סימון תיבת סימון = תיבת צ'ק חדשה ("צ'ק בוקס"); תיבת סימון. setValue (נכון); checkbox.addValueChangeListener (e -> checkbox.setValue (! checkbox.getValue ())); formLayout.addComponent (תיבת סימון);

7.10. רשימות

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

ראשית, אנו יוצרים רשימה של הפריטים שלנו שיונחו ביישומון:

מספרי רשימה = ArrayList חדש (); numbers.add ("אחד"); numbers.add ("עשר"); numbers.add ("אחת עשרה");

ה קומבו בוקס היא רשימה נפתחת:

ComboBox comboBox = ComboBox חדש ("ComboBox"); comboBox.addItems (מספרים); formLayout.addComponent (comboBox);

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

ListSelect listSelect = ListSelect חדש ("ListSelect"); listSelect.addItems (מספרים); listSelect.setRows (2); formLayout.addComponent (listSelect);

ה NativeSelect הוא כמו קומבו בוקס אבל יש לדפדפן להיראות ולהרגיש:

NativeSelect nativeSelect = חדש NativeSelect ("NativeSelect"); nativeSelect.addItems (מספרים); formLayout.addComponent (nativeSelect);

ה TwinColSelect היא רשימה כפולה שבה נוכל לשנות את הפריטים בין שני החלונות הללו; כל פריט יכול לחיות רק באחת החלונות בכל פעם:

TwinColSelect twinColSelect = TwinColSelect חדש ("TwinColSelect"); twinColSelect.addItems (מספרים);

7.11. רֶשֶׁת

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

רשת רשת = רשת חדשה (שורה.קלאס); grid.setColumns ("column1", "column2", "column3"); שורה שורה 1 = שורה חדשה ("פריט 1", "פריט 2", "פריט 3"); שורה שורה 2 = שורה חדשה ("פריט 4", "פריט 5", "פריט 6"); רשימת שורות = ArrayList חדש (); rows.add (שורה 1); rows.add (שורה 2); grid.setItems (שורות);

ה שׁוּרָה הכיתה לעיל היא POJO פשוט שהוספנו כדי לייצג שורה:

כיתה ציבורית שורה {טור מחרוזת פרטי 1; טור מחרוזת פרטי 2; טור מחרוזת פרטי 3; // בונים, גטרים, סטרים}

8. דחיפת שרתים

תכונה מעניינת נוספת היא יכולת לשלוח הודעות מהשרת לממשק המשתמש.

כדי להשתמש בדחיפת שרת, עלינו להוסיף את התלות הבאה שלנו pom.xml:

 com.vaadin vaadin-push 8.8.5 

הגרסה האחרונה של התלות תמצאו כאן: vaadin-push.

כמו כן, עלינו להוסיף את ה- @לִדחוֹף הערה לכיתה שלנו המייצגת ממשק משתמש:

@Push @Theme ("mytheme") מעמד ציבורי VaadinUI מרחיב את ממשק המשתמש {...}

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

תווית פרטית currentTime;

לאחר מכן אנו יוצרים a ScheduledExecutorService ששולח את הזמן מהשרת אל ה- תווית:

ScheduledExecutorService planningExecutor = Executors.newScheduledThreadPool (1); משימה ניתנת להפעלה = () -> {currentTime.setValue ("זמן נוכחי:" + Instant.now ()); }; scheduleExecutor.scheduleWithFixedDelay (משימה, 0, 1, TimeUnit.SECONDS);

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

9. קשירת נתונים

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

ראשית, אנו יוצרים מחלקת Java:

מחלקה ציבורית BindData {private String bindName; ציבורי BindData (מחרוזת bindName) {this.bindName = bindName; } // getter & setter}

ואז אנו קושרים את הכיתה שלנו שיש לה שדה יחיד ל- a שדה טקסט בממשק המשתמש שלנו:

קלסר קלסר = קלסר חדש (); BindData bindData = BindData חדש ("BindData"); binder.readBean (bindData); TextField bindedTextField = TextField חדש (); binder.forField (bindedTextField) .bind (BindData :: getBindName, BindData :: setBindName);

ראשית, אנו יוצרים a BindData אובייקט באמצעות המחלקה שיצרנו קודם, ואז כּוֹרֵך קושר את השדה ל שדה טקסט.

10. מאמתים

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

BindData stringValidatorBindData = BindData חדש (""); TextField stringValidator = חדש TextField (); Binder stringValidatorBinder = קלסר חדש (); stringValidatorBinder.setBean (stringValidatorBindData); stringValidatorBinder.forField (stringValidator) .withValidator (חדש StringLengthValidator ("המחרוזת חייבת להיות באורך 2-5 תווים", 2, 5)). bind (BindData :: getBindName, BindData :: setBindName);

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

Button buttonStringValidator = לחצן חדש ("אמת מחרוזת"); buttonStringValidator.addClickListener (e -> stringValidatorBinder.validate ());

במקרה זה אנו משתמשים ב- StringLengthValidator המאמת את אורכו של א חוּט אך Vaadin מספק מאמתים שימושיים אחרים ומאפשר לנו גם ליצור מאמתים מותאמים אישית שלנו.

11. סיכום

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

וכמו תמיד, ניתן למצוא את הקוד ב- Github.