Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
how to create a custom vaadin select component from scratch
I would like to create my custom select component with both client and server side code
Basically it would work like a Vaadin ComboBox( you can add elements/items to it , and then select one more element from it, and optionally add new elements/items to the component )
What I have in my mind is a gantt-chart like component, where I can display my tasks , and select one or more of them and do things with the selected tasks ( for example adjust duration , or status)
I have done some classes so far
- a server side component, which extends Vaadin's abstract component
- a client side component which extends GWT-s composite, and implements Vaadin's paintable interface
What I would like to do is:
- programatically select task(s)/items on the server side, and show that it is selected on the client side
I tried to look at some existing vaadin components source code (for example the table component) to see how the selection/selection change is comunicated from the server to the client and from the client to the server, but I wasn't able to find it exactly
is there a common way (uidl attribute/variable/event whatever) to look for, and is it documented somewhere, or there is no such documentation/convension, and it is totally up to me?
For example table component extends vaadin's AbstractSelect class on the server-side, and extends composite GWT class on the client side and also implements vaadin's Paintable interface ( which is responsible for the communication beetween the client and server)
So in my case would it be enough if my server side class extend AbstractSelect instead of AbstractComponnent then I would get the needed functionality on the server side ?
( I can add items to the component, and I can add properties to thoose items for example tasks startdate, starttime, duration , status, etc)
But how can I get back those information on theCLIENT-SIDE is there a standardized/documented way ( what strings , variables to look for on the client side) or it is once again totally up to me ( or in other words there is no documented/offical way and should look at the source code once again)
according to my past experience:
- on the SERVER-SIDE there is: paintContent and similar methods ( which are usually broken down into smaller , and more specific functions) to send data TO the client ( by the way is it xml or json?)
- and on the CLIENT-SIDE there is updateFromUIDL method (which is once again is broken down to smaller and more specific functions)
- and on the CLIENT-SIDE there client.updateVariable method which I can use to send data/variable changes to the SERVER-SIDE
am I right ?
And what about events how events are comunicated from server to client and back?
Is it posible in the create new vaadin widget wizard in eclipse that if I select the abstractComponent class as my components parent-class then I also get its client side counterpart with a minimal client-server comunication code?
So maybe my question is more about client-server communication in vaadin but all these things are needed to create a really interactive component ( and user experience) where you can not just view something but you can interact with it
I know its a lot of question , but maybe these questions also help others , and the vaadin guys to improve the documentation and the tutorials
thanks for your answer and help in advance:)
Ps: CLIENT-SIDE and SERVER-SIDE are meant in the traditional web develepment way (at first it was confusing for me that the server-side of the component in the client side code is usually referenced as a variable named client. Is it from the terminal design pattern maybe? :))