Are you capable of drawing the desired layout using basic HTML?
If so, you can extend the Widget class and create the necessary elements along with custom styles instead of building multiple other widgets. Adding a click handler to your new widget will allow you to detect when any content inside the widget is clicked.
Alternatively, by utilizing an encapsulating element such as HTMLPanel (within a Composite) containing both a Label and a Button, you can attach a click handler to the panel. This way, clicking on either widget triggers the event due to event bubbling - propagating from child elements to their parent elements. However, nesting widgets may lead to higher creation costs compared to straight HTML implementation, so consider your preference carefully.
In both scenarios, utilize Widget.addDomHandler(...) to add the click handler. For convenience, implement a new method that adheres to HasClickHandlers like so:
@Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
Here's a concise example of a widget (mainly comments for clarity) demonstrating the described approach:
public class ButtonWithText extends Widget implements HasClickHandlers {
public ButtonWithText(String text, String buttonLabel) {
// Create a <div></div> wrapper
setElement(Document.get().createDivElement());
// Include a <span> for the text, enabling dynamic text changes
Element textElement = Document.get().createSpanElement();
textElement.setInnerText(text);
// Add a button element
Element buttonElement = Document.get().createButtonElement();
buttonElement.setInnerText(buttonLabel);
// Append both elements to the existing div
getElement().appendChild(textElement);
getElement().appendChild(buttonElement);
}
@Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
To observe this project in action, visit . You'll notice the popup appearing as expected upon clicking either the text or the button.