Шта треба да знате о Ваадин-у - АЈАКС оквир на страни сервера са батеријом

Много сам писао о Ваадину . Био сам толико одушевљен да сам написао прву књигу о томе (поред Ваадинове књиге), њено ажурирано издање за Ваадин 7 и пратећу веб страницу . Ипак, зачуђен сам што толико људи у ЈВМ свету никада није чуло за то.

У овом посту, желео бих да представим Ваадин у контексту АЈАКС-а и ССР-а.

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

Лепота Ваадина лежи у његовој једноставности - пишете само позадински код . Добро сте то прочитали. Ваадин програмер треба да зна само Јаву или било који ЈВМ језик и Ваадин АПИ. Током извршавања, Ваадин ће креирати код на страни клијента, тј . ХТМЛ, ЈаваСцрипт и ЦСС. Овај приступ омогућава програмерима да се фокусирају на основну функционалност апликације, чинећи процес развоја продуктивнијим.

Ваадин се надограђује на компоненте и распореде, баш као што то раде обични оквири засновани на десктопу. Ако познајете Свинг или ЈаваФКС, осећаћете се као код куће.

Горе сам поменуо ЦСС: Ваадин вам омогућава да развијете свој ЦСС у наменском пакету за вишекратну употребу који се зове тема . Шлаг на торти: развијање теме може да се ради паралелно са развојем позадинског дела и нема приврженост овом последњем; код не мора да користи одређени шаблон или да додаје одређене класе у ХТМЛ.

Ваадин Сетуп

Постављање Ваадина у контексту Спринг Боот-а је лако:

 <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. Поставите Ваадин верзију заједно са другим својствима.
2. Нека верзија свих зависности буде доследна.
3. Додајте Ваадин Спринг Боот интеграцијску библиотеку.

Ваадин се гради на обичном Јава сервлету, који се подразумевано пресликава на корен. Интеграција Ваадин Спринг Боот-а омогућава заобилажење подразумеваног. Пошто наша кодна база интегрише више оквира, мапирамо је у /vaadin преко релевантног својства:

 vaadin.url-mapping=/vaadin/*

На први захтев клијента, Ваадин ће вратити код ЈаваСцрипт механизма. Машина ће извршити накнадне захтеве за преузимање конфигурисаног корисничког интерфејса и скеле на другој страни клијента. Од тада, мотор управља свим интеракцијама корисника и ажурира кориснички интерфејс ако је потребно.

Први кораци са Ваадином

Када поставимо пројекат, морамо да конфигуришемо коју компоненту Ваадин приказује када прими захтев.

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

1. Повезује компоненту са кореном подконтекста Ваадин сервлета.
2. Подесите статички наслов странице. У случају да вам је потребан динамички наслов, можете имплементирати ХасДинамицТитле .
3. Дефинишите класу RootComponent .
4. VerticalLayout је класа коју Ваадин приказује као ХТМЛ div
5. Ваадин Спринг Боот стартер се брине за убризгавање листе.
6. Ваадин извршава функцију init() на први захтев претраживача.
7. Следећи исечци кода ће ићи тамо.

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

У горњем фрагменту, наследили смо VerticalLayout , компоненту коју обезбеђује Ваадин.

Ваадин Десигн Систем укључује скуп компоненти које можете користити да направите свој кориснички интерфејс. Компоненте имају Јава АПИ на страни сервера поред ТипеСцрипт АПИ-ја за развој на страни клијента.

Компоненту користите тако што је прво креирате, а затим додате у распоред.

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

Неке компоненте могу садржати друге и оне знају како да изложе своје подкомпоненте. На пример, VerticalLayout поставља компоненте од врха до дна у колони; HorizontalLayout их поставља с лева на десно у низу.

Додавање компоненти у изглед је једноставно:

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

1. У контексту функције init() .

Иако ово функционише савршено, можемо побољшати ситуацију користећи Карибу-ДСЛ пошто користимо Котлин. Можемо да препишемо горњи исечак на следећи начин:

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

1. label() је функција проширења Карибу ДСЛ-а на интерфејсу HasComponent

Карибу је одличан, али са малом недостатком: не нуди функције проширења за цео АПИ. На пример, потребно је да се вратите на уобичајени АПИ да бисте додали подножје у Grid компоненту:

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

Са позитивне стране, Карибу је отвореног кода и увек можете допринети ако имате нешто да додате.

Специфичне компоненте које се односе на кориснички интерфејс нису важне за опште разумевање. Ако сте заинтересовани, увек можете да проверите изворни код .

Корисничке интеракције

Када су мејнфрејмови били краљеви рачунарства, приступали сте им преко терминала. Корисничко сучеље је било прилично ограничено, а рендеровање се дешавало на „глупом“ терминалу. Лични рачунари су преместили функционалност рендеровања са сервера на клијента. У овом тренутку, програмери су приложили понашање компоненти преко окидача. На пример, можете да повежете штампање Hello world! када корисник кликне на дугме.

Веб апликације су промениле ову парадигму. Као што су наши претходни чланци показали, свака интеракција се сада мапира у ток захтев-одговор, синхрони или асинхрони. Ваадин нас враћа на првобитну парадигму.

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

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

   
   

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

Нема потребе за ЈаваСцрипт кодом; Ваадин самостално управља интеракцијом.

Закључак

Пост је био само кратак увод у Ваадин у контексту АЈАКС-а и ССР-а.

Већина програмера који уче програмирање на веб апликацијама и стога су навикли на модел захтев-одговор слабо реагују када су изложени Ваадин-у. Њихов главни аргумент је одсуство АПИ-ја. ИМХО, то је предност: неке апликације, посебно пословне апликације, не еволуирају до тачке у којој ћете морати да развијете наменске мобилне клијенте.

Ваадин долази са подразумеваним ЦСС скупом, као што је наведено у уводу. Ова подразумевана тема обезбеђује да Ваадин апликације изгледају добро од самог почетка, пружајући корисницима удобно и визуелно привлачно радно окружење. Међутим, увек можете интегрисати другу или чак развити своју.

Права корист се, међутим, поново налази на нивоу организације. У уводном посту споменуо сам да раздвајање фронтенда и бацкенд развоја ствара проблеме током њихове интеграције. Пошто Ваадин нема такво раздвајање, планирање пројекта је предвидљивије, јер не постоји корак интеграције између предњег и позадинског дела. Исто тако, тематика се може десити паралелно са развојем.

Комплетан изворни код за овај пост се може наћи на ГитХуб-у:

Да идемо даље:

• Ваадин
• Шта је Флов?
• Више Ваадин

Првобитно објављено у А Јава Геек 13. октобра 2024