GWT DisclosurePanel with Arrow Icon and Widget Header? - gwt

I need to have a DisclosurePanel with a FlexTable widget as the header and include the arrow icon with animation.
When adding a Widget to a DisclosurePanel, the arrow icon is disabled/replaced by the widget.
I've decided I need to either create a new class that extends FlexTable and has a cell with the arrow icon & the appropriate click handler to animate the icon, or create a wrapper class for DisclosurePanel (as it is a final class). Do either of these seem like a viable solution?

I would create a more generic Composite widget called HeaderWidgetWithArrow that contains
The down arrow image
Any arbitrary widget (such as a FlexTable)
The way if you want to include the arrow for a disclosure panel and say, a HorizontalPanel, you could just re-use the HeaderWidgetWithArrow for that.
Either way, I would not recommend extending FlexTable or DisclosurePanel. You should favor composition over inheritance.

Related

Adding a ClickHandler to the background of a FlowPanel in GWT

I'm new to GWT, and my search queries didn't turn up what I'm looking for, but I'm afraid I'm not phrasing them correctly, so I apologize if this is a simple/duplicate question.
I'm currently trying to figure out how to add a ClickHandler to the area of a FlowPanel that is not occupied by a specific Widget. I know that I can simply add a ClickHandler by wrapping the entire FlowPanel inside a FocusPanel, but that then triggers when any of the widgets inside the flow panel are clicked on. The widgets are typically composite widgets with complicated structures themselves.
My ultimate goal here is to process a click when a user clicks in empty space, but allow the individual widgets to have their own unique click handlers if the user clicks on a specific widget.
Any suggestions?
Thanks!
You have two options.
(A) Add the same click handler to all of your widgets, and then inside onClick perform different actions based on which widget was the source of a click.
(B) Get the mouse position (from ClickEvent), and then iterate through child widgets to see if this mouse position falls inside one of them.

Draggable popup in GWT?

I'm using a PopupPanel but by default it cannot be dragged on the screen. Is the way to make id draggable or I should use whole another component?
The DialogBox class is draggable, by its title bar (which a PopupPanel doesn't have; also note that DialogBox extends DecoratedPopupPanel, not just PopupPanel, and sizing works differently than for PopupPanel).

GWT DisclourePanel

I have got a DisclourePanel with a button on it. But when I call button.getParent()
I always get a SimplePanel. With other Panel like VerticalPanel it works.
Does Anyone know why?
DisclosurePanel extends type Composite meaning it is a widget that can be composed of many widgets. It consists of a header and a SimplePanel both stacked in a VerticalPanel. Any content you give it, is placed in this SimplePanel, in your case a button, thus SimplePanel is returned by getParent()

How do you get GWT 2.0 to accept clicks on two different Widgets added to a LayoutPanel?

Using GWT 2.0 I have an entry point that adds two Widgets to a LayoutPanel which in turn is added to the RootLayoutPanel. The Widgets both handle click events and have click events registered to them. The problem is that only the last widget added to the LayoutPanel can actually be clicked. Switch the order in which the widgets are added switches the widget that works. Add mroe widgets and still the only you can click is the last one added to the LayoutPanel.
Any idea why this is? Is there any reasoning behind the behaviour, or have I missunderstood what is happening under the covers? How do I gat all widgets in the LayoutPanel to accept events? Should I be using another panel class?
I'm not too bothered if the LayoutPanel prevents anything below it from being clicked, but want all Widgets added to it to be clickable.
Stupid Boy! (said in the voice of Captain Mainwaring)
There is no problem having two Widgets on a LayoutPanel accepting clicks. But if you adjust the Widgets' size by manipulating their elements' styles directly then the containing element created by the LayoutPanel will still cover the whole screen. In effect the last Widget added always covered everything else.
GWT school: D- Must try harder. Easily distracted...

ImageButton in gwt

I have to create a image button in gwt which uses three images(left side image,center stretch image and right image).Left side images and right images having rounded corners.Center Image wants to be stretched depends on button title size.Created ImageButton should have all the functionalities of Button.
Can anyone help me in how to achieve this.
If you need a button with rounded corners then there are a number of options:
Create a new widget that extends the DecoratorPanel to create the rounded corners. The DecoratorPanel will result in a table (HTML). You'll probably want to replace the standard images. Look at the standard.css that GWT provides to find the styles that define those images, then override those styles in your custom stylesheet (look for the CSS class ".gwt-DecoratorPanel"). In the widget, add a Label widget to display the button text and provide get and set methods on your widget to get and set text to the internal label. The label will resize automatically forcing the table cell to grow bigger.
Create a new widget that extends Composite. The widget should wrap a FlexTable. Use 3 cells on the same row. Add a Label to the center cell and provide get and set methods on your widget to get and set text to the internal label. The label will resize automatically forcing the table cell to grow bigger. Add the appropriate handlers to the FlexTable widget. I suggest you use those events to add or remove styles to the appropriate cells and define the background images in a stylesheet.
You could create your own widget. This requires that you generate your own HTML etc. which may not immediately work in every browser. I recommend trying option 1 or 2 first.
You might be able to get away with using only one sprite image if you can limit the maximum width of your buttons. We wrote a CssButton class (extends Button) as part of the GWT Portlets framework that uses a single background image sprite to create rounded buttons. The code uses CSS clipping to select the correct background image from the sprite based on the width of the button.
The main advantages are that it extends the normal GWT Button and uses only a single BUTTON element in the DOM (lightweight). The disadvantage is that the maximum width of the button is limited to the widest button image in the sprite.
It also handles rollover and click effects all using the same sprite.
The code is in the GWT Portlets repository if you want to look further.