streamalism.org

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

ואדין הוא א מסגרת Java בצד השרת ליצירת ממשקי משתמש ברשת.

במדריך זה נחקור כיצד להשתמש ב- ממשק משתמש מבוסס ואדין על גבי אחורי Spring Boot. להקדמה לואדין עיין במדריך זה.

2. התקנה

נתחיל בהוספה של תלות Maven ליישום אתחול אביב רגיל:

 com.vaadin vaadin-spring-boot-starter 

ואדין הוא גם תלות מוכרת על ידי אתחול האביב.

הדרכה זו משתמשת בגרסה חדשה יותר של ואדין מאשר ברירת המחדל שהובאה על ידי מודול המתנע. כדי להשתמש בגרסה החדשה יותר, פשוט הגדיר את שטר החומר של ואדין (BOM) כך:

   com.vaadin vaadin-bom 10.0.11 יבוא פום 

3. שירות Backend

נשתמש ב- עוֹבֵד ישות עם שם פרטי ו שם משפחה מאפיינים לביצוע פעולות CRUD בו:

עובד בכיתה ציבורית @Entity {@Id @GeneratedValue פרטי מזהה ארוך; פרטי מחרוזת firstName; שם משפחה פרטי מחרוזת; }

הנה המאגר הפשוט של Spring Data המתאים - לניהול פעולות ה- CRUD:

ממשק ציבורי EmployeeRepository מרחיב את JpaRepository {List findByLastNameStartsWithIgnoreCase (שם מחרוזת); }

אנו מצהירים על שיטת שאילתה findByLastNameStartsWithIgnoreCase על מאגר עובדים מִמְשָׁק. זה יחזיר את רשימת עוֹבֵדs תואם את שם משפחה.

בואו גם לאכלס מראש את ה- DB עם כמה דוגמאות עוֹבֵדs:

@Bean CommandLineRunner הציבורי loadData (מאגר עובדים-מאגר) {return (args) -> {repository.save (עובד חדש ("ביל", "גייטס")); repository.save (עובד חדש ("מארק", "צוקרברג")); repository.save (עובד חדש ("Sundar", "Pichai")); repository.save (עובד חדש ("ג'ף", "בזוס")); }; }

4. ממשק המשתמש של ואדין

4.1. MainView מעמד

ה MainView class הוא נקודת הכניסה ללוגיקה של ממשק המשתמש של ואדין. ביאור @מַסלוּל אומר ל- Spring Boot להרים אותו באופן אוטומטי ולהראות בשורש אפליקציית האינטרנט:

המחלקה הציבורית @Route MainView מרחיב את VerticalLayout {EmployeeRepository employeeRepository; עורך עובד עובד פרטי; רשת רשת; מסנן TextField; כפתור פרטי addNewBtn; }

אנו יכולים להתאים אישית את כתובת האתר שבה מוצגת התצוגה על ידי מתן פרמטר ל- @מַסלוּל ביאור:

@Route (value = "myhome")

הכיתה משתמשת ברכיבי ממשק המשתמש הבאים שיוצגו בדף:

עורך עובד עובד - מראה את ה עוֹבֵד טופס המשמש לספק מידע לעובדים ליצירה ועריכה.

רשת רשת - חגור כדי להציג את רשימת עובדים

מסנן TextField - שדה טקסט להזנת שם המשפחה שעל פיו יסונן החגור

כפתור addNewBtn - כפתור להוספת חדש עוֹבֵד. מציג את עובד עובד עוֹרֵך.

זה משתמש באופן פנימי ב- מאגר עובדים לביצוע פעולות ה- CRUD.

4.2. חיווט הרכיבים ביחד

MainView מרחיב VerticalLayout. VerticalLayout הוא מיכל רכיבים, המציג את רכיבי המשנה לפי סדר תוספתם (בֵּמְאוּנָך).

לאחר מכן אנו מאותחלים ומוסיפים את הרכיבים.

אנו מספקים תווית לכפתור עם סמל +.

this.grid = רשת חדשה (שכבת עובדים); this.filter = חדש TextField (); this.addNewBtn = כפתור חדש ("עובד חדש", VaadinIcon.PLUS.create ());

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

פעולות HorizontalLayout = HorizontalLayout חדש (filter, addNewBtn); הוסף (פעולות, רשת, עורך);

ספק את גובה החג ואת שמות העמודות. אנו מוסיפים גם טקסט עזרה בשדה הטקסט:

grid.setHeight ("200 פיקסלים"); grid.setColumns ("id", "firstName", "lastName"); grid.getColumnByKey ("id"). setWidth ("50px"). setFlexGrow (0); filter.setPlaceholder ("סנן לפי שם משפחה");

בעת הפעלת היישום UI יראה כך:

4.3. הוספת לוגיקה לרכיבים

נקבע ValueChangeMode.EAGER אל ה לְסַנֵן שדה טקסט. זה מסנכרן את הערך לשרת בכל פעם שהוא משתנה בלקוח.

קבענו גם מאזין לאירוע שינוי הערך, המחזיר את רשימת העובדים המסוננת על סמך הטקסט המופיע ב- לְסַנֵן:

filter.setValueChangeMode (ValueChangeMode.EAGER); filter.addValueChangeListener (e -> listEmployees (e.getValue ()));

בבחירת שורה בתוך החגורה היינו מראים את עוֹבֵד טופס, המאפשר למשתמש לערוך את השם הפרטי ואת שם המשפחה:

grid.asSingleSelect (). addValueChangeListener (e -> {editor.editEmployee (e.getValue ());});

בלחיצה על כפתור הוסף עובד חדש, נראה את הריק עוֹבֵד טופס:

addNewBtn.addClickListener (e -> editor.editEmployee (עובד חדש ("", ""));

לבסוף, אנו מקשיבים לשינויים שביצע העורך ומרעננים את הרשת עם נתונים מה- backend:

editor.setChangeHandler (() -> {editor.setVisible (false); listEmployees (filter.getValue ());});

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

void listEmployees (String filterText) {if (StringUtils.isEmpty (filterText)) {grid.setItems (employeeRepository.findAll ()); } אחר {grid.setItems (employeeRepository.findByLastNameStartsWithIgnoreCase (filterText)); }}

4.4. בניית הטופס

נשתמש בטופס פשוט למשתמש כדי להוסיף / לערוך עובד:

@SpringComponent @UIScope מחלקה ציבורית EmployeeEditor מרחיב את VerticalLayout מיישם את KeyNotifier {מאגר פרטי EmployeeRepository; עובד שכיר פרטי; TextField firstName = new TextField ("שם פרטי"); TextField lastName = new TextField ("שם משפחה"); לחצן שמירה = לחצן חדש ("שמור", VaadinIcon.CHECK.create ()); לחצן ביטול = לחצן חדש ("ביטול"); כפתור מחיקה = כפתור חדש ("מחק", VaadinIcon.TRASH.create ()); פעולות HorizontalLayout = HorizontalLayout חדש (שמור, בטל, מחק); קלסר קלסר = קלסר חדש (שכיר עובד); ChangeHandler פרטי ChangeHandler; }

ה @ SpringComponent הוא רק כינוי לספרינגס @רְכִיב ביאור כדי למנוע סכסוכים עם ואדינים רְכִיב מעמד.

ה @UIScope קושר את השעועית לממשק המשתמש הנוכחי של ואדין.

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

לטופס יש שלושה כפתורים - לשמור, לְבַטֵל ו לִמְחוֹק.

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

אנו משתמשים ב- כּוֹרֵך הקושר את שדות הטופס עם עוֹבֵד מאפיינים המשתמשים במוסך השמות:

binder.bindInstanceFields (זה);

אנו קוראים לשיטת EmployeeRepositor המתאימה על סמך פעולות המשתמש:

מחיקה בטלה () {repository.delete (עובד); changeHandler.onChange (); } בטל שמירה () {repository.save (עובד); changeHandler.onChange (); }

5. מסקנה

במאמר זה, כתבנו יישום CRUD UI עם תכונות מלאות באמצעות Spring Boot ו- Spring Data JPA לצורך התמדה.

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