Puno sam pisao o   . Bio sam toliko oduševljen da sam napisao   o tome (osim Vaadinove knjige), njeno   za Vaadin 7 i   . Ipak, začuđen sam da toliko ljudi u JVM svijetu nikada nije čulo za to. Vaadinu prvu knjigu ažurirano izdanje prateću web stranicu  U ovom postu, želio bih predstaviti Vaadin u kontekstu AJAX-a i SSR-a.  Kratki uvod u Vaadin  Ljepota Vaadina leži u njegovoj jednostavnosti -   . Dobro ste pročitali. Vaadin programer treba samo da poznaje Javu ili bilo koji JVM jezik i Vaadin API. U toku izvođenja, Vaadin će kreirati kod na strani klijenta,   . HTML, JavaScript i CSS. Ovaj pristup omogućava programerima da se fokusiraju na osnovnu funkcionalnost aplikacije, čineći proces razvoja produktivnijim. pišete samo pozadinski kod tj  Vaadin se nadograđuje na komponente i rasporede, baš kao što to rade obični okviri zasnovani na desktopu. Ako poznajete Swing ili JavaFX, osjećat ćete se kao kod kuće.  Spomenuo sam CSS gore: Vaadin vam omogućava da razvijete svoj CSS u namjenskom paketu za višekratnu upotrebu koji se zove   . Šlag na torti: razvoj teme se može raditi paralelno sa razvojem pozadinske mreže i nema pridržavanja ovog drugog; kod ne mora da koristi određeni šablon ili da dodaje određene klase u HTML. tema  Vaadin Setup  Postavljanje Vaadina u kontekstu Spring Boot-a je lako:   <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>  Postavite Vaadin verziju zajedno sa drugim svojstvima.  Održavajte verziju svih ovisnosti dosljednom.  Dodajte Vaadin Spring Boot integracijsku biblioteku.  Vaadin se nadograđuje na regularni Java servlet, koji se podrazumevano mapira na root. Integracija Vaadin Spring Boot-a omogućava zaobilaženje zadanog. Budući da naša kodna baza integrira više okvira, mapiramo je u   preko relevantnog svojstva: /vaadin   vaadin.url-mapping=/vaadin/*  Na prvi zahtjev klijenta, Vaadin će vratiti kod JavaScript motora. Mašina će izvršiti naknadne zahtjeve za preuzimanje konfiguriranog korisničkog sučelja i skele na drugoj strani klijenta. Od tada, motor upravlja svim interakcijama korisnika i ažurira korisničko sučelje ako je potrebno.  Prvi koraci sa Vaadinom  Nakon što postavimo projekat, moramo konfigurirati koju komponentu Vaadin prikazuje kada primi zahtjev.   @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }  Povezuje komponentu s korijenom   Vaadin servleta. podkonteksta  Postavite statički naslov stranice. U slučaju da vam je potreban dinamički naslov, možete implementirati   . HasDynamicTitle  Definirajte klasu   . RootComponent    je klasa koju Vaadin prikazuje kao HTML  VerticalLayout div  Vaadin Spring Boot starter se brine za ubrizgavanje liste.  Vaadin izvršava funkciju   na prvi zahtjev pretraživača. init()  Sljedeći isječci koda će ići tamo.  Dodavanje komponenti  U gornjem isječku smo naslijedili od   ,   koju je obezbijedio Vaadin. VerticalLayout komponente  Vaadin Design System uključuje skup komponenti koje možete koristiti za izgradnju korisničkog sučelja. Komponente imaju Java API na strani servera uz TypeScript API za razvoj na strani klijenta.  Komponentu koristite tako da je prvo kreirate, a zatim dodate u raspored koji sadrži.  --  Kreiranje korisničkog sučelja u Vaadin aplikacijama  Neke komponente mogu sadržavati druge, a one znaju kako rasporediti svoje podkomponente. Na primjer,   postavlja komponente od vrha do dna u koloni;   ih postavlja slijeva nadesno u nizu. VerticalLayout HorizontalLayout  Dodavanje komponenti u izgled je jednostavno:   add(Label("Hello")) //1 add(Label("world!"))  U kontekstu   funkcije. init()  Iako ovo savršeno funkcionira, možemo poboljšati situaciju koristeći   budući da koristimo Kotlin. Gornji isječak možemo prepisati na sljedeći način: Karibu-DSL   label("Hello") //1 label("world!")    je funkcija proširenja Karibu DSL-a na sučelju  label() HasComponent  Karibu je odličan, ali s malom nedostatkom: ne nudi funkcije proširenja za cijeli API. Na primjer, morate se vratiti na regularni API da dodate podnožje u   komponentu: Grid   appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }  S druge strane, Karibu je otvorenog koda i uvijek možete doprinijeti ako imate nešto da dodate.  Specifične komponente koje se odnose na korisničko sučelje nisu važne za opšte razumijevanje. Ako ste zainteresovani, uvijek možete provjeriti   . izvorni kod  Korisničke interakcije  Kada su glavni računari bili kraljevi računarstva, pristupali ste im preko terminala. Korisničko sučelje je bilo prilično ograničeno, a renderiranje se dogodilo na "glupom" terminalu. Personalni računari su premjestili funkcionalnost renderiranja sa servera na klijenta. U ovom trenutku, programeri su priložili ponašanje komponenti putem okidača. Na primjer, možete vezati ispis   kada korisnik klikne na dugme. Hello world!  Web aplikacije su promijenile ovu paradigmu. Kao što su naši prethodni članci pokazali, svaka interakcija se sada mapira na tok zahtjev-odgovor, sinhroni ili asinhroni. Vaadin nas vraća na prvobitnu paradigmu.   Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }  Inicijalizirajte novu komponentu   sa vrijednošću. Checkbox  Kada se vrijednost polja za potvrdu promijeni, izvršite lambda - mijenjamo vrijednost osnovnog modela.  Nema potrebe za JavaScript kodom; Vaadin samostalno upravlja interakcijom.  Zaključak  Post je bio samo kratak uvod u Vaadin u kontekstu AJAX-a i SSR-a.  Većina programera koji uče programiranje na web aplikacijama i stoga su navikli na model zahtjev-odgovor slabo reagiraju kada su izloženi Vaadinu. Njihov glavni argument je odsustvo API-ja. IMHO, to je prednost: neke aplikacije, posebno poslovne aplikacije, ne evoluiraju do tačke u kojoj ćete morati da razvijete namenske mobilne klijente.  Vaadin dolazi sa zadanim CSS skupom, kao što je navedeno u uvodu. Ova zadana tema osigurava da Vaadin aplikacije izgledaju dobro od samog početka, pružajući korisnicima udobno i vizualno privlačno radno okruženje. Međutim, uvijek možete integrirati drugu ili čak razviti svoju.  Prava korist se, međutim, ponovo nalazi na nivou organizacije. U uvodnom postu spomenuo sam da razdvajanje frontenda i backend razvoja stvara probleme tokom njihove integracije. Budući da Vaadin nema takvo razdvajanje, planiranje projekta je predvidljivije, jer ne postoji korak integracije između prednjeg i pozadinskog dijela. Isto tako, tematizacija se može odvijati paralelno sa razvojem.  Kompletan izvorni kod za ovaj post možete pronaći na GitHubu:   https://github.com/ajavageek/compare-frontends?embedable=true   Da idemo dalje:   Vaadin   Šta je Flow?   Više Vaadin   Originalno objavljeno u   13. oktobra 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Ovaj audio je proizveden na originalnom jeziku priče!

Predugo; Citati

Get Free Unlimited IP Geo Data With IPinfo Lite

Šta trebate znati o Vaadinu - AJAX okvir na strani servera sa baterijom

About Author

KOMENTARI

HANG TAGS

OVAJ ČLANAK JE PREDSTAVLJEN U

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps