Много сам писао о   . Био сам толико одушевљен да сам написао   о томе (поред Ваадинове књиге), њено   за Ваадин 7 и   . Ипак, зачуђен сам што толико људи у ЈВМ свету никада није чуло за то. Ваадину прву књигу ажурирано издање пратећу веб страницу  У овом посту, желео бих да представим Ваадин у контексту АЈАКС-а и ССР-а.  Кратак увод у Ваадин  Лепота Ваадина лежи у његовој једноставности -   . Добро сте то прочитали. Ваадин програмер треба да зна само Јаву или било који ЈВМ језик и Ваадин АПИ. Током извршавања, Ваадин ће креирати код на страни клијента,   . ХТМЛ, ЈаваСцрипт и ЦСС. Овај приступ омогућава програмерима да се фокусирају на основну функционалност апликације, чинећи процес развоја продуктивнијим. пишете само позадински код тј  Ваадин се надограђује на компоненте и распореде, баш као што то раде обични оквири засновани на десктопу. Ако познајете Свинг или ЈаваФКС, осећаћете се као код куће.  Горе сам поменуо ЦСС: Ваадин вам омогућава да развијете свој ЦСС у наменском пакету за вишекратну употребу који се зове   . Шлаг на торти: развијање теме може да се ради паралелно са развојем позадинског дела и нема приврженост овом последњем; код не мора да користи одређени шаблон или да додаје одређене класе у ХТМЛ. тема  Ваадин Сетуп  Постављање Ваадина у контексту Спринг Боот-а је лако:   <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.url-mapping=/vaadin/*  На први захтев клијента, Ваадин ће вратити код ЈаваСцрипт механизма. Машина ће извршити накнадне захтеве за преузимање конфигурисаног корисничког интерфејса и скеле на другој страни клијента. Од тада, мотор управља свим интеракцијама корисника и ажурира кориснички интерфејс ако је потребно.  Први кораци са Ваадином  Када поставимо пројекат, морамо да конфигуришемо коју компоненту Ваадин приказује када прими захтев.   @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }  Повезује компоненту са кореном   Ваадин сервлета. подконтекста  Подесите статички наслов странице. У случају да вам је потребан динамички наслов, можете имплементирати   . ХасДинамицТитле  Дефинишите класу   . RootComponent    је класа коју Ваадин приказује као ХТМЛ  VerticalLayout div  Ваадин Спринг Боот стартер се брине за убризгавање листе.  Ваадин извршава функцију   на први захтев претраживача. init()  Следећи исечци кода ће ићи тамо.  Додавање компоненти  У горњем фрагменту, наследили смо   ,   коју обезбеђује Ваадин. VerticalLayout компоненту  Ваадин Десигн Систем укључује скуп компоненти које можете користити да направите свој кориснички интерфејс. Компоненте имају Јава АПИ на страни сервера поред ТипеСцрипт АПИ-ја за развој на страни клијента.  Компоненту користите тако што је прво креирате, а затим додате у распоред.  --  Креирање корисничког интерфејса у Ваадин апликацијама  Неке компоненте могу садржати друге и оне знају како да изложе своје подкомпоненте. На пример,   поставља компоненте од врха до дна у колони;   их поставља с лева на десно у низу. VerticalLayout HorizontalLayout  Додавање компоненти у изглед је једноставно:   add(Label("Hello")) //1 add(Label("world!"))  У контексту функције   . init()  Иако ово функционише савршено, можемо побољшати ситуацију користећи   пошто користимо Котлин. Можемо да препишемо горњи исечак на следећи начин: Карибу-ДСЛ   label("Hello") //1 label("world!")    је функција проширења Карибу ДСЛ-а на интерфејсу  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 }  Иницијализујте нову компоненту   са вредношћу. Checkbox  Када се вредност поља за потврду промени, извршите ламбда - мењамо вредност основног модела.  Нема потребе за ЈаваСцрипт кодом; Ваадин самостално управља интеракцијом.  Закључак  Пост је био само кратак увод у Ваадин у контексту АЈАКС-а и ССР-а.  Већина програмера који уче програмирање на веб апликацијама и стога су навикли на модел захтев-одговор слабо реагују када су изложени Ваадин-у. Њихов главни аргумент је одсуство АПИ-ја. ИМХО, то је предност: неке апликације, посебно пословне апликације, не еволуирају до тачке у којој ћете морати да развијете наменске мобилне клијенте.  Ваадин долази са подразумеваним ЦСС скупом, као што је наведено у уводу. Ова подразумевана тема обезбеђује да Ваадин апликације изгледају добро од самог почетка, пружајући корисницима удобно и визуелно привлачно радно окружење. Међутим, увек можете интегрисати другу или чак развити своју.  Права корист се, међутим, поново налази на нивоу организације. У уводном посту споменуо сам да раздвајање фронтенда и бацкенд развоја ствара проблеме током њихове интеграције. Пошто Ваадин нема такво раздвајање, планирање пројекта је предвидљивије, јер не постоји корак интеграције између предњег и позадинског дела. Исто тако, тематика се може десити паралелно са развојем.  Комплетан изворни код за овај пост се може наћи на ГитХуб-у:   хттпс://гитхуб.цом/ајавагеек/цомпаре-фронтендс?ембедабле=труе   Да идемо даље:   Ваадин   Шта је Флов?   Више Ваадин   Првобитно објављено у   13. октобра 2024 А Јава Геек

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

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

Предуго; Читати

Get Free Unlimited IP Geo Data With IPinfo Lite

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

About Author

КОМЕНТАРИ

ХАНГ ТАГС

ОВАЈ ЧЛАНАК ЈЕ ПРЕДСТАВЉЕН У

Related Stories

Scaling Web Testing with Automation: Srikanth Srinivas’s Digital Strategy Breakthrough

Sravana Kumar Reddy Yeruva’s Fusion Transformation Sets a New Standard in ERP Excellence

Building the Cloud Future: Sreedevi Velagala's Trek in AWS Architecture

Leadership Success Story: Srinath Muralinathan's Transformative Projects at Amazon

Scaling Web Testing with Automation: Srikanth Srinivas’s Digital Strategy Breakthrough

Sravana Kumar Reddy Yeruva’s Fusion Transformation Sets a New Standard in ERP Excellence

Building the Cloud Future: Sreedevi Velagala's Trek in AWS Architecture

Leadership Success Story: Srinath Muralinathan's Transformative Projects at Amazon

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps