Zvaunoda Kuziva Nezve Vaadin - Iyo Bhatiri-Inosanganisirwa Server-Side AJAX Framework

Ndakanyora zvakawanda pamusoro paVaadin . Ndakanga ndine shungu zvokuti ndakanyora bhuku rekutanga pamusoro paro (kunze kweBhuku reVaadin), shanduro yaro yakagadziridzwa yeVaadin 7, uye webhusaiti inofambidzana nayo . Zvakadaro, ndinoshamiswa kuti vanhu vazhinji vari munyika yeJVM havana kumbonzwa nezvazvo.

Mune ino post, ndinoda kusuma Vaadin mumamiriro eAJAX uye SSR.

Sumo Ipfupi kuna Vaadin

Runako rweVaadin rwuri mukupfava kwayo - unongonyora backend code . Unoverenga zvakanaka. Mugadziri weVaadin anongoda kuziva Java, kana chero mutauro weJVM, uye iyo Vaadin API. Panguva yekumhanya, Vaadin ichagadzira iyo mutengi-parutivi kodhi, kureva , HTML, JavaScript, uye CSS. Iyi nzira inopa simba vanogadzira kuti vatarise pane yakakosha kushanda kwechishandiso, zvichiita kuti hurongwa hwekuvandudza huwedzere kubereka.

Vaadin inovaka pamusoro pezvikamu uye marongero, sezvakangoita desktop-yakavakirwa masisitimu anoita. Kana iwe uchiziva Swing kana JavaFX, iwe uchanzwa uri kumba chaiko.

Ndakataura CSS pamusoro: Vaadin inokubvumira kukudziridza CSS yako mune yakatsaurirwa reusable package inonzi theme . Iyo icing pakike: kugadzira dingindira rinogona kuitwa nenzira yakafanana kune backend kusimudzira uye haina kutevedzera kune yekupedzisira; iyo kodhi haidi kushandisa chaiyo template kana kuwedzera chaiwo makirasi kuHTML.

Vaadin Setup

Kumisikidza Vaadin mumamiriro eSky Boot imhepo:

 <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. Seta iyo Vaadin vhezheni pamwe nezvimwe zvivakwa.
2. Chengetedza vhezheni yezvese zvinoenderana.
3. Wedzera iyo Vaadin Spring Boot yekubatanidza raibhurari.

Vaadin inovaka pane yakajairwa Java Servlet, iyo inomepu kumudzi nekukasira. Iyo Vaadin Spring Boot yekubatanidza inobvumira kudarika iyo default. Nekuti yedu codebase inosanganisa akawanda masisitimu, tinoimepu kune /vaadin kuburikidza neyakakodzera chivakwa:

 vaadin.url-mapping=/vaadin/*

Pachikumbiro chekutanga kubva kumutengi, Vaadin anodzosa kodhi yejini yeJavaScript. Injini ichaita zvikumbiro zvinotevera kuti idzore iyo UI yakagadziriswa uye scaffold iyo yekupedzisira mutengi wedivi. Kubva ipapo zvichienda mberi, injini inobata zvese zvemushandisi zvekushandisa uye inovandudza UI kana zvichidikanwa.

Matanho ekutanga naVaadin

Kana tangomisa purojekiti, tinofanira kugadzirisa chikamu chipi icho Vaadin chinoratidza kana inogamuchira chikumbiro.

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

1. Inobatanidza chikamu kune iyo Vaadin servlet subcontext midzi.
2. Seta iyo static peji musoro. Kana iwe uchida zita rine simba, unogona kushandisa HasDynamicTitle .
3. Tsanangura kirasi RootComponent .
4. VerticalLayout ikirasi iyo Vaadin inoshandura seHTML div
5. Iyo Vaadin Spring Boot starter inotarisira kupinza rondedzero.
6. Vaadin anoita iyo init() basa pachikumbiro chekutanga chebrowser.
7. Iyo inotevera kodhi snippets ichaenda ikoko.

Kuwedzera Zvikamu

Mune snippet iri pamusoro, isu takagara nhaka kubva VerticalLayout , chikamu chakapihwa naVaadin.

Iyo Vaadin Dhizaini System inosanganisira seti yezvikamu zvaunogona kushandisa kuvaka UI yako. Izvo zvikamu zvine server-side Java API kuwedzera kune TypeScript API yevatengi-parutivi kusimudzira.

Iwe unoshandisa chikamu nekutanga kuchigadzira uye wozochiwedzera kune chine marongero.

-- Kugadzira UI muVaadin Application

Zvimwe zvikamu zvinogona kuve nezvimwe, uye ivo vanoziva nzira yekuisa zvikamu zvavo kunze. Semuenzaniso, VerticalLayout inoisa zvikamu kubva kumusoro-kusvika-pasi mukoramu; HorizontalLayout inovaisa kuruboshwe-ku-kurudyi mumutsara.

Kuwedzera zvikamu kune dhizaini iri nyore:

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

1. init() basa.

Kunyange izvi zvichishanda zvakakwana, tinogona kuvandudza mamiriro ezvinhu tichishandisa Karibu-DSL sezvo isu tichishandisa Kotlin. Tinogona kunyora zvakare snippet iri pamusoro seinotevera:

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

1. label() ndeye Karibu DSL yekuwedzera basa pane iyo HasComponent interface

Karibu yakanaka, asi ine zvishoma pasi: haipe ekuwedzera mabasa eiyo API yese. Semuenzaniso, iwe unofanirwa kudonha kumashure kune yakajairwa API kuti uwedzere tsoka kune Grid chikamu:

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

Kudivi rekuwedzera, Karibu yakavhurika-sosi, uye iwe unogona kugara uchipa kana uine chimwe chinhu chekuwedzera.

Zvimwe zvinhu zvine chekuita neUI hazvina kukosha pakunzwisisa kwakawanda. Kana uchifarira, unogona kugara uchitarisa kunobva kodhi .

Kudyidzana Kwemushandisi

Kana mainframes aive madzimambo ekombuta, waiwana kuburikidza nematerminals. Iyo UI yaive yakaganhurirwa, uye kupa kwakaitika pane "mbeveve" terminal. Makomputa ega ega akafambisa mashandiro ekupa kubva pasevha kuenda kumutengi. Panguva ino, vagadziri vakabatanidza maitiro kune chikamu kuburikidza ne trigger. Semuenzaniso, unogona kusunga kudhinda Hello world! kana mushandisi adzvanya bhatani.

Mawebhusaiti akachinja paradigm iyi. Sezvakaratidzwa nezvinyorwa zvedu zvakapfuura, mepu yese yekudyidzana ikozvino kune yekukumbira-mhinduro kuyerera, inopindirana kana asynchronous. Vaadin inotidzosera kune yekutanga paradigm.

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

1. Tanga chinhu chitsva Checkbox chine kukosha.

   
   

2. Kana kukosha kwebhokisi rekutarisa kuchichinja, ita lambda - isu tinoshandura kukosha kweiyo modhi.

Hapana chikonzero cheJavaScript kodhi; Vaadin anotarisira kupindirana akazvimiririra.

Mhedziso

Iyo posvo yaingove sumo pfupi kuna Vaadin mumamiriro eAJAX neSSR.

Vazhinji vanogadzira vanodzidza hurongwa pawebhu maapplication uye nekudaro vanoshandiswa kune yekukumbira-mhinduro modhi vanoita zvisina kunaka kana vakafumurwa kuVaadin. Nharo yavo huru ndeyekusavapo kweAPI. IMHO, ibhenefiti: mamwe maapplication, kunyanya bhizinesi maapplication, haashanduke kusvika padanho rauchazoda kuvandudza vakazvitsaurira nharembozha.

Vaadin inouya neiyo default CSS set, sezvakataurwa munhanganyaya. Iyi tema yakasarudzika inoita kuti Vaadin zvikumbiro zvinotaridzika zvakanaka kubva pakutanga, zvichipa vashandisi nzvimbo yakasununguka uye inotaridzika inoyevedza yebasa. Nekudaro, iwe unogona kugara uchibatanidza imwe kana kutogadzira yako.

Kubatsira chaiko, zvisinei, kunowanikwa zvakare pamwero wesangano. Muchikamu chekutanga, ndakataura kuti kupatsanura frontend uye backend kusimudzira kunogadzira nyaya panguva yekubatanidzwa kwavo. Nemhaka yokuti Vaadin haina kuparadzana kwakadaro, kuronga kweprojekti kunonyanya kufarirwa, sezvo pasina danho rekubatanidza pakati pekupedzisira uye kumashure. Saizvozvo, theming inogona kuitika mukufambirana nebudiriro.

Iyo yakazara sosi kodhi yeiyi positi inogona kuwanikwa paGitHub:

Kuti uenderere mberi:

• Vaadin
• Chii chinonzi Flow?
• More Vaadin

Yakatanga kuburitswa paA Java Geek musi waGumiguru 13, 2024