Making custom component. Understanding custom component development technic

Flow
1

Hello.
For my project I need to implement few custom components. I implement it as single vaadin addon single component for future integration simplicity. I have seen some other addons, but all of them are made with different design. I wish I could compose my own custom addon object design to keep the same design among all of the addons I will make.
At this moment I use the idea I wish to explain:

  1. Server-side component part: Java class that extends some of the Vaadin Abstract*Component. It used to represent the component at the serverside.
  2. Client-side component. It is a class, derived from one of the Vaadin Client-side component V*Connector. This is a gwt compillable class, that used to delegate all the hard work to the underliyng object (name it ComponetDelegate)
  3. Component delegate class. It takes the client-side connectors widget and composes some DOM magic, attaching the magic to the connectors widget.
  4. State class. It is derived from some of the Vaadin AbstractState class. It is used to passthrough the state of the component between client and server to both sides.
  5. ClientRpc, ServerRpc interfaces. These ones are used to force oposite side component part to make trigger some action. Here I can pass some state elements as an argument.

I have actually couple of quastions: 1) Do I need to fix that design, Is it close to design of Vaadin components, so my custom ones will work good enough being in vaadin components environment. 2) I need to understand how to handle component binding moment: I have a custom component, which sometimes can be detached from the application UI. So, when I need to attach it again, I have to notify the client-side component, that it has to draw it’s elements again. But I don’t know how.At this moment I implicitly ask my serverside component to make a rpc call to redraw the things.

2
  1. Sound like the structure you’re describing is identical to the actual Vaadin Component structure. Just to summarize and make it clear. A normal Vaadin component constist out of
  • Server-side component which extends AbstractComponent, AbstractComponentContainer, AbstractJavascriptComponent (for integrated js components) or any of their sub-classes (example: Button)
  • A Connector class which lives on the client side and extend AbstactComponentConnector, AbstactComponentContainerConnector, …similar to above. They should be in the widgetset.client package (example: ButtonConnector)
  • A client side class extending the client side (often GWT-) base class like e.g. a GWT SimplePanel. It’s also somewhere in the widgetset.client package (example: VButton)
  • Shared State and ServerRpc & ClientRPC if needed. Those are optional but are often needed. Need to be in the client package too as though i’m not 100% sure right know if this is right for all of them. RPCs are event based so e.g. react on a Button Click while ComponentStates are (surprise) state-based, so are used for example for Textfield texts that can be changed by the Server-side. State changes will not be communicated from client to Server.
  1. If set up correctly your component should be able to redraw itself without you explicitly calling a ClientRPC.
    Have a look at the Vaadin wiki for more information. especially on Custom Widgets
    https://vaadin.com/wiki