Search code examples
javagwttransparencygwtquery

gwt / gwt-query - make a transparent some inner areas inside a panel

I've been looking forward something that enables me to transparent some inner areas inside a panel but not the rest. Say, if I have a panel which dimensions are 500x300, I would like to transparent only the area which left and top (relative to its parent) are 30 and 40 respectively and which width and height are 100 and 200 respectively.

Thanks in advance!

PS: perhaps the solution would be some js stuff inside a native method, but not sure.

Solution

  • I don't think there's a straightforward way to "cut out" a part of a panel. I would work around it like:

    Panel:
+---------+--------------------------------+----------------+
|         |             B                  |                |
|         |                                |                |
|         +--------------------------------+                |
|         |                                |                |
|   A     |             T                  |      D         |
|         |                                |                |
|         |                                |                |
|         +--------------------------------+                |
|         |             C                  |                |
|         |                                |                |
+---------+--------------------------------+----------------+

    Let the whole panel background be transparent[*]. Then add A, B, C and D with white backgrounds. This will leave T transparent.

    This arrangement can be achieved easily with a DockLayoutPanel!

    [*] Tip: If you're using a GWT theme, it may already set a background on the panel. If that's the case, use myPanel.addStyleName("transparent"), and define a CSS rule 

    div.transparent {
  background: none;
}