Making a custom GWT component/widget behave properly

I developed a custom widget/component for my current project.
The component is designed to display/edit a specialized data type.
Under the hood, it is a GWT Canvas widget with some fancy handlers and drawing code.

I created a Vaadin widgetset using instructions from the Book. I have two Vaadin component classes - one for editor and one for viewer. Both of these extend AbstractField. The widget works - I can set values, read values, edit and display data.

However, there are two major shortcomings that still need a fix.

  1. setEnabled(false) does not work as expected. The component grays out and does not send anything to the server. Unfortunately, it still responds to mouse events, so it is still possible to draw/input data when it is disabled. This behavior will be very confusing to the users. What is the best way (if any) to implement the enabled/disabled behavior? Is there any method I should add to my VWidget, GWTWidget or Component classes? Is there any “disable” magic string that is being sent over the wire?

  2. When I display the widget in a Table, the background color is not updated as expected and remains white. I would like the background to be set to the current background color of a table cell. How would I go about making the component behave in the same way as built-in Vaadin components like Label? Is there something that needs to be done to the table, or do I need to change my component?

Many thanks in advance.

A boolean ‘disabled’ is sent if the component is disabled, you can check for that in
updateFromUIDL()
:

boolean enabled = !uidl.getBooleanAttribute("disabled");

Or, if your widget is a FocusWidget,
setEnabled()
will be called automatically (from
ApplicationConnection.updateComponent()
that you’re calling in the beginning of
updateFromUIDL()
).

You could take a look at for instance
VLink
(which handles disabling itself) or
VButton
(which is a FocusWidget).

…and please do show us what you are making! :slight_smile:

Best Regards,
Marc

This is most likely due to your component, and usually fixed with CSS - you’ll want your component to have a transparent background, but it’s hard to say exactly what you should do without knowing more about your component.

Best Regards,
Marc

I quickly glanzed at the GWTCanvas docs, so if that’s what you’re using I guess you should do
canvas.setBackgroundCanvas(GWTCanvas.TRANSPARENT)

// Marc

Thanks a lot for this information. This looks like just what I was looking for.
My widget is a Composite, which, as far as I understand, not a FocusWidget, so I will have to listen for “disabled”.

In the meantime, I did partially solve the background issue. It had to do with a shortcoming in my rendering code (I filled the canvas with background color instead of calling clearRect() on my context2d).
My solution is only partial since my widget does not actually know what the background color in the underlying Div is. This makes it impossible to change the color of the lines being drawn on canvas to the proper readable color. I tried to use a native javascript function to read the computed color from DOM, but this solution works only intermittently, and I abandoned it.
A partial screenshot of the widget in action is attached.
11783.png

Oooh, looking good! :slight_smile:

// Marc