How to implement business logic on the client side (GWT) with Vaadin?

Vaadin 6 / 7 / 8 Framework UI
1

Hello vaadin users,

first of all: Vaadin is indeed one awesome framework for developing user friendly web applications. Thanks for that!

Sorry for my bad english and I have the following question:

I want to outsource some of my business logic from server side to client side (GWT stuff). This is a necessary step, because the action has to be fast (without calling the server):

Let’s consider a very simple example that is similar to my problem:

Let’s say there are just 2 Vaadin Panels on the screen. Now I want to change the style of one panel by clicking on the other panel. Implementig the logic on the server side is no problem: it’s done with a listener. But calling server for such purposes is absolutely overkill and very slow (0,5 sec. just to change color of the panel???). In this case I would like to do this directy on the client side.

Problem:
At the client side (GWT) I can implement a ClickHandler, but how can I reach the other panel? I have no knowledge (no reference) about the object?


public class VMyPanel1 extends VPanel implements ClickHandler {

      public void onClick(ClickEvent event) {
              //where do I get the reference to the panel2 ????
              //to do something like this:
             //panel2.setStyleName("some_colored_style");
	}

I’d be deeply gratefull, if somebody could complete my code example.

2

Hi Sascha,

A good question, I think this will be useful for many others as well.

You can pass the reference to the other component from the server to the client. It seem you’ve already extended the default Panel, so you need to override the paintContent(PaintTarget target) method in that (MyPanel1?).

@Override
public void paintContent(PaintTarget target) throws PaintException {
    super.paintContent(target);
    // Adds a PID (string id for the component) to the UIDL that will be sent to client
    target.addAttribute("panel2", panel2Object);
}

This will pass the reference (ID) of panel2 in the UIDL to the client. So you can use that reference in your VMyPanel1.updateFromUIDL.

public void updateFromUIDL(ApplicationConnection client, UIDL uidl) {
    super.updateFromUIDL(client, uidl);
    // The following returns a reference to the Widget for panel2 (Paintable extends Widget)
    Paintable p = client.getPaintable(uidl.getAttribute("panel2"));
}

HTH