Այն, ինչ դուք պետք է իմանաք Vaadin-ի մասին. մարտկոցով ներառված սերվերի AJAX շրջանակը

Ես շատ եմ գրել Վաադինի մասին: Ես այնքան ոգևորված էի, որ ես գրեցի դրա մասին առաջին գիրքը (բացի Վաադինի գրքից), դրա թարմացված հրատարակությունը Vaadin 7-ի համար և ուղեկից կայքը : Այնուամենայնիվ, ես զարմացած եմ, որ JVM աշխարհում այդքան շատ մարդիկ երբեք չեն լսել դրա մասին:

Այս գրառման մեջ ես կցանկանայի ներկայացնել Vaadin-ը AJAX-ի և SSR-ի համատեքստում:

Կարճ ներածություն Վաադինի մասին

Վաադինի գեղեցկությունը կայանում է նրա պարզության մեջ. դուք գրում եք միայն հետնամասի կոդը : Դուք լավ կարդացիք: Vaadin-ի մշակողը պետք է իմանա միայն Java-ն կամ JVM-ի որևէ լեզու և Vaadin API-ն: Գործարկման ժամանակ Vaadin-ը կստեղծի հաճախորդի կողմի կոդը, այսինքն՝ HTML, JavaScript և CSS: Այս մոտեցումը ծրագրավորողներին հնարավորություն է տալիս կենտրոնանալ հավելվածի հիմնական ֆունկցիոնալության վրա՝ դարձնելով զարգացման գործընթացն ավելի արդյունավետ:

Vaadin-ը հիմնված է բաղադրիչների և դասավորությունների վրա, ինչպես դա անում են սովորական աշխատասեղանի վրա հիմնված շրջանակները: Եթե դուք գիտեք Swing կամ JavaFX, ապա ձեզ կզգաք ինչպես տանը:

Ես վերևում նշեցի CSS-ը. Vaadin-ը թույլ է տալիս զարգացնել ձեր CSS-ը հատուկ վերօգտագործվող փաթեթում, որը կոչվում է թեմա : Կարագը տորթի վրա. թեմայի մշակումը կարող է իրականացվել հետին պլանի մշակմանը զուգահեռ և չի հավատարիմ վերջինիս. կոդը կարիք չունի օգտագործել հատուկ ձևանմուշ կամ հատուկ դասեր ավելացնել HTML-ում:

Vaadin Setup

Vaadin-ի տեղադրումը Spring Boot-ի համատեքստում հեշտ է.

 <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId> <!--3--> </dependency> </project>

1. Սահմանեք Vaadin տարբերակը այլ հատկությունների հետ միասին:
2. Պահպանեք բոլոր կախվածությունների տարբերակը հետևողական:
3. Ավելացնել Vaadin Spring Boot ինտեգրման գրադարանը:

Vaadin-ը հիմնված է սովորական Java Servlet-ի վրա, որը լռելյայն կերպով քարտեզագրվում է արմատին: Vaadin Spring Boot-ի ինտեգրումը թույլ է տալիս վերացնել լռելյայնը: Քանի որ մեր կոդերի բազան միավորում է բազմաթիվ շրջանակներ, մենք այն քարտեզագրում ենք /vaadin ին՝ համապատասխան հատկության միջոցով.

 vaadin.url-mapping=/vaadin/*

Հաճախորդի առաջին խնդրանքով Vaadin-ը կվերադարձնի JavaScript շարժիչի կոդը: Շարժիչը հաջորդ հարցումներ կկատարի կազմաձևված միջերեսը ստանալու և վերջին հաճախորդի կողմը լաստակելու համար: Այդուհետ շարժիչը կարգավորում է օգտատիրոջ բոլոր փոխազդեցությունները և անհրաժեշտության դեպքում թարմացնում է միջերեսը:

Առաջին քայլերը Վաադինի հետ

Երբ մենք ստեղծեցինք նախագիծը, մենք պետք է կազմաձևենք, թե որ բաղադրիչն է ցուցադրում Vaadin-ը, երբ այն ստանում է հարցում:

 @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }

1. Բաղադրիչը կապում է Vaadin servlet ենթահամատեքստի արմատին:
2. Սահմանեք ստատիկ էջի անվանումը: Այն դեպքում, երբ ձեզ դինամիկ վերնագիր է անհրաժեշտ, կարող եք իրականացնել HasDynamicTitle :
3. Սահմանեք RootComponent դասը:
4. VerticalLayout դաս է, որը Vaadin-ը ներկայացնում է որպես HTML div
5. Vaadin Spring Boot starter-ը հոգ է տանում ցուցակի ներարկման մասին:
6. Vaadin-ը կատարում է init() ֆունկցիան բրաուզերի առաջին խնդրանքով:
7. Կոդի հաջորդ հատվածները կգնան այնտեղ:

Բաղադրիչների ավելացում

Վերոնշյալ հատվածում մենք ժառանգել ենք VerticalLayout ից՝ Vaadin-ի կողմից տրամադրված բաղադրիչից :

Vaadin Design System-ը ներառում է մի շարք բաղադրիչներ, որոնք կարող եք օգտագործել ձեր միջերեսը կառուցելու համար: Բաղադրիչները ունեն սերվերի կողմից Java API, բացի TypeScript API-ից՝ հաճախորդի կողմից մշակման համար:

Դուք օգտագործում եք բաղադրիչ՝ նախ ստեղծելով այն, այնուհետև ավելացնելով այն պարունակող դասավորության մեջ:

- UI-ի ստեղծում Vaadin հավելվածներում

Որոշ բաղադրիչներ կարող են պարունակել ուրիշներ, և նրանք գիտեն, թե ինչպես պետք է դասավորել իրենց ենթաբաղադրիչները: Օրինակ, VerticalLayout բաղադրիչները վերևից ներքև տեղադրում է սյունակում; HorizontalLayout դրանք անընդմեջ դնում է ձախից աջ:

Հատակագծին բաղադրիչներ ավելացնելը պարզ է.

 add(Label("Hello")) //1 add(Label("world!"))

1. init() ֆունկցիայի համատեքստում։

Թեև սա հիանալի է աշխատում, մենք կարող ենք բարելավել իրավիճակը՝ օգտագործելով Karibu-DSL, քանի որ մենք օգտագործում ենք Kotlin-ը: Վերոհիշյալ հատվածը կարող ենք վերաշարադրել հետևյալ կերպ.

 label("Hello") //1 label("world!")

1. label() Karibu DSL ընդլայնման ֆունկցիա է HasComponent ինտերֆեյսի վրա

Karibu-ն հիանալի է, բայց մի փոքր բացասական կողմով. այն չի առաջարկում ընդլայնման գործառույթներ ամբողջ API-ի համար: Օրինակ, դուք պետք է վերադառնաք սովորական API-ին՝ Grid բաղադրիչին ստորագիր ավելացնելու համար.

 appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }

Դրական կողմն այն է, որ Karibu-ն բաց կոդով է, և դուք միշտ կարող եք նպաստել, եթե ավելացնելու բան ունեք:

UI-ի հետ կապված հատուկ բաղադրիչները կարևոր չեն ընդհանուր ընկալման համար: Եթե հետաքրքրված եք, միշտ կարող եք ստուգել սկզբնաղբյուրը :

Օգտագործողի փոխազդեցություններ

Երբ հիմնական սարքերը հաշվողական համակարգերի արքաներն էին, դուք մուտք եք գործել դրանք տերմինալների միջոցով: UI-ը բավականին սահմանափակ էր, և մատուցումը տեղի ունեցավ «համր» տերմինալում: Անհատական համակարգիչները փոխանցման գործառույթը սերվերից տեղափոխեցին հաճախորդ: Այս պահին մշակողները կցել են վարքագիծը բաղադրիչի միջոցով ձգանով: Օրինակ, դուք կարող եք կապել տպագրությունը Hello world! երբ օգտագործողը սեղմում է կոճակը:

Վեբ հավելվածները փոխեցին այս պարադիգմը: Ինչպես ցույց տվեցին մեր նախորդ հոդվածները, յուրաքանչյուր փոխազդեցություն այժմ քարտեզագրվում է հարցում-պատասխան հոսքով, համաժամանակյա կամ ասինխրոն: Վաադինը մեզ հետ է բերում սկզբնական պարադիգմային:

 Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }

1. Նախաձեռնեք նոր Checkbox բաղադրիչը արժեքով:

   
   

2. Երբ վանդակի արժեքը փոխվում է, գործարկեք լամբդա - մենք փոխում ենք հիմքում ընկած մոդելի արժեքը:

JavaScript կոդի կարիք չկա. Վաադինը ինքնուրույն է ղեկավարում փոխազդեցությունը:

Եզրակացություն

Գրառումը ընդամենը կարճ ներածություն էր Vaadin-ի մասին AJAX-ի և SSR-ի համատեքստում:

Ծրագրավորողների մեծ մասը, ովքեր սովորում են ծրագրավորում վեբ հավելվածներում և այդպիսով սովոր են հարցում-պատասխան մոդելին, վատ են արձագանքում, երբ ենթարկվում են Vaadin-ին: Նրանց հիմնական փաստարկը API-ի բացակայությունն է։ IMHO, դա օգուտ է. որոշ հավելվածներ, հատկապես բիզնես հավելվածներ, չեն զարգանում այն աստիճան, որ դուք պետք է զարգացնեք հատուկ բջջային հաճախորդներ:

Vaadin-ը գալիս է լռելյայն CSS հավաքածուով, ինչպես նշված է ներածության մեջ: Այս լռելյայն թեման ապահովում է Vaadin հավելվածների լավ տեսքը սկզբից՝ օգտվողներին տրամադրելով հարմարավետ և տեսողականորեն գրավիչ աշխատանքային միջավայր: Այնուամենայնիվ, դուք միշտ կարող եք ինտեգրել մեկ ուրիշին կամ նույնիսկ զարգացնել ձեր սեփականը:

Իրական օգուտը, սակայն, կրկին հայտնաբերվում է կազմակերպչական մակարդակում։ Ներածական գրառման մեջ ես նշեցի, որ frontend-ի և backend-ի մշակումն առանձնացնելը խնդիրներ է ստեղծում դրանց ինտեգրման ընթացքում։ Քանի որ Vaadin-ը նման տարանջատում չունի, նախագծի պլանավորումն ավելի կանխատեսելի է, քանի որ չկա ինտեգրման քայլ առջևի և հետևի միջև: Նմանապես, թեմատիկան կարող է տեղի ունենալ զարգացմանը զուգահեռ:

Այս գրառման ամբողջական սկզբնական կոդը կարելի է գտնել GitHub-ում.

Ավելին գնալու համար.

• Վաադին
• Ի՞նչ է Flow-ը:
• Ավելին Վաադին

Սկզբնապես հրապարակվել է A Java Geek- ում 2024 թվականի հոկտեմբերի 13-ին