Што треба да знаете за Vaadin - Рамката AJAX на серверот со вклучена батерија

Имам напишано многу за Ваадин . Бев толку ентузијаст што ја напишав првата книга за неа (покрај Книгата на Ваадин), нејзиното ажурирано издание за Ваадин 7 и придружната веб-страница . Сепак, јас сум изненаден што толку многу луѓе во светот на JVM никогаш не слушнале за тоа.

Во овој пост, би сакал да го претставам Ваадин во контекст на AJAX и SSR.

Краток вовед во Ваадин

Убавината на Ваадин лежи во неговата едноставност - пишувате само код за заднина . Добро го прочитавте. Програмерите на Vaadin треба само да знаат Java, или кој било јазик на JVM, и Vaadin API. За време на извршувањето, Vaadin ќе го креира кодот од клиентската страна, т.е. HTML, JavaScript и CSS. Овој пристап ги овластува програмерите да се фокусираат на основната функционалност на апликацијата, правејќи го процесот на развој попродуктивен.

Vaadin се надоврзува на компоненти и распореди, исто како што прават редовните рамки базирани на работна површина. Ако знаете Swing или JavaFX, ќе се чувствувате како дома.

Го споменав CSS погоре: Vaadin ви овозможува да го развиете вашиот CSS во посветен пакет за повеќекратна употреба наречена тема . Шлагот на тортата: развивањето тема може да се направи паралелно со развојот на заднината и нема придржување кон последното; кодот не треба да користи специфичен шаблон или да додава одредени класи во HTML.

Поставување Ваадин

Поставувањето на 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.
6. Vaadin ја извршува функцијата init() на првото барање на прелистувачот.
7. Следните фрагменти од кодот ќе одат таму.

Додавање на компоненти

Во горниот фрагмент, наследивме од VerticalLayout , компонента обезбедена од Ваадин.

Системот за дизајн Vaadin вклучува збир на компоненти што можете да ги користите за да го изградите вашиот UI. Компонентите имаат Java API од страна на серверот како додаток на TypeScript API за развој на клиентска страна.

Вие користите компонента така што прво ја креирате, а потоа ја додавате во распоред што содржи.

-- Креирање на кориснички интерфејс во апликациите Ваадин

Некои компоненти може да содржат други, и тие знаат како да ги постават своите поткомпоненти. На пример, 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 беше прилично ограничен, а рендерирањето се случи на „глупавиот“ терминал. Персоналните компјутери ја преместија функционалноста за рендерирање од серверот на клиентот. Во тоа време, програмерите го прикачија однесувањето на компонентата преку активирач. На пример, можете да врзете печатење Hello world! кога корисникот ќе кликне на копче.

Веб-апликациите ја сменија оваа парадигма. Како што покажаа нашите претходни написи, секоја интеракција сега се мапира на проток на барање-одговор, синхрони или асинхрони. Ваадин нè враќа на првобитната парадигма.

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

1. Иницијализирајте нова компонента Checkbox со вредност.

   
   

2. Кога вредноста на полето за избор се менува, извршете ја ламбда - ја менуваме вредноста на основниот модел.

Нема потреба од JavaScript код; Ваадин самостојно управува со интеракцијата.

Заклучок

Објавата беше само краток вовед за Ваадин во контекст на АЈАКС и ССР.

Повеќето програмери кои учат програмирање на веб-апликации и затоа се навикнати на моделот на барање-одговор, лошо реагираат кога се изложени на Vaadin. Нивниот главен аргумент е отсуството на API. IMHO, тоа е придобивка: некои апликации, особено деловните апликации, не еволуираат до точка каде што ќе треба да развиете посветени мобилни клиенти.

Vaadin доаѓа со стандарден CSS сет, како што е наведено во воведот. Оваа стандардна тема гарантира дека апликациите на Vaadin изгледаат добро од самиот почеток, обезбедувајќи им на корисниците удобна и визуелно привлечна работна средина. Сепак, секогаш можете да интегрирате друг или дури и да развиете свој.

Вистинската придобивка, сепак, повторно се наоѓа на организациско ниво. Во воведниот пост, спомнав дека раздвојувањето на развојот на фронтендот и задниот дел создава проблеми при нивната интеграција. Бидејќи Ваадин нема такво раздвојување, планирањето на проектот е попредвидливо, бидејќи нема чекор за интеграција помеѓу предниот и задниот дел. Исто така, тематизацијата може да се случи паралелно со развојот.

Целосниот изворен код за оваа објава може да се најде на GitHub:

За да продолжите понатаму:

• Ваадин
• Што е проток?
• Повеќе Ваадин

Првично објавено во A Java Geek на 13 октомври 2024 година