Имам напишано многу за   . Бев толку ентузијаст што ја напишав   за неа (покрај Книгата на Ваадин), нејзиното   за Ваадин 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>  </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId>  <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>  </dependency> </project>  Поставете ја верзијата Vaadin заедно со другите својства.  Чувајте ја конзистентна верзијата на сите зависности.  Додадете ја библиотеката за интеграција на 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 } }  Ја поврзува компонентата со коренот   на Vaadin servlet. на потконтекст  Поставете го статичниот наслов на страницата. Во случај да ви треба динамичен наслов, можете да имплементирате   . HasDynamicTitle  Дефинирајте класа   . RootComponent    е класа што Vaadin ја прикажува како HTML  VerticalLayout div  За инјектирање на листата се грижи стартерот Vaadin Spring Boot.  Vaadin ја извршува функцијата   на првото барање на прелистувачот. init()  Следните фрагменти од кодот ќе одат таму.  Додавање на компоненти  Во горниот фрагмент, наследивме од   ,   обезбедена од Ваадин. VerticalLayout компонента  Системот за дизајн Vaadin вклучува збир на компоненти што можете да ги користите за да го изградите вашиот UI. Компонентите имаат Java API од страна на серверот како додаток на TypeScript API за развој на клиентска страна.  Вие користите компонента така што прво ја креирате, а потоа ја додавате во распоред што содржи.  --  Креирање на кориснички интерфејс во апликациите Ваадин  Некои компоненти може да содржат други, и тие знаат како да ги постават своите поткомпоненти. На пример,   ги поставува компонентите од врвот до дното во колона;   ги поставува лево-десно по ред. VerticalLayout HorizontalLayout  Додавањето компоненти во распоредот е едноставно:   add(Label("Hello")) //1 add(Label("world!"))  Во контекст на функцијата   . init()  Иако ова функционира совршено, можеме да ја подобриме ситуацијата користејќи   бидејќи користиме Kotlin. Горенаведениот фрагмент можеме да го преработиме на следниов начин: Karibu-DSL   label("Hello") //1 label("world!")    е функција за проширување на Karibu DSL на интерфејсот  label() 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 }  Иницијализирајте нова компонента   со вредност. Checkbox  Кога вредноста на полето за избор се менува, извршете ја ламбда - ја менуваме вредноста на основниот модел.  Нема потреба од JavaScript код; Ваадин самостојно управува со интеракцијата.  Заклучок  Објавата беше само краток вовед за Ваадин во контекст на АЈАКС и ССР.  Повеќето програмери кои учат програмирање на веб-апликации и затоа се навикнати на моделот на барање-одговор, лошо реагираат кога се изложени на Vaadin. Нивниот главен аргумент е отсуството на API. IMHO, тоа е придобивка: некои апликации, особено деловните апликации, не еволуираат до точка каде што ќе треба да развиете посветени мобилни клиенти.  Vaadin доаѓа со стандарден CSS сет, како што е наведено во воведот. Оваа стандардна тема гарантира дека апликациите на Vaadin изгледаат добро од самиот почеток, обезбедувајќи им на корисниците удобна и визуелно привлечна работна средина. Сепак, секогаш можете да интегрирате друг или дури и да развиете свој.  Вистинската придобивка, сепак, повторно се наоѓа на организациско ниво. Во воведниот пост, спомнав дека раздвојувањето на развојот на фронтендот и задниот дел создава проблеми при нивната интеграција. Бидејќи Ваадин нема такво раздвојување, планирањето на проектот е попредвидливо, бидејќи нема чекор за интеграција помеѓу предниот и задниот дел. Исто така, тематизацијата може да се случи паралелно со развојот.  Целосниот изворен код за оваа објава може да се најде на GitHub:   https://github.com/ajavageek/compare-frontends?embedable=true   За да продолжите понатаму:   Ваадин   Што е проток?   Повеќе Ваадин   Првично објавено во   на 13 октомври 2024 година A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Ова аудио е произведено на оригиналниот јазик на приказната!

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

About Author

КОМЕНТАРИ

ВИСЕТЕ ТАГОВИ

ОВОЈ СТАТИЈА БЕШЕ ПРЕТСТАВЕН ВО

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps