Wrap a widget to add another widget next to it

[ChristopheF]

Hello everyone !

I'm facing a problem.

I want to turn this (in the .ui.xml file, it's a widget) :

<b:SomeWidget ui:field="someName" />

Into this :

<a:HelpWrapper text="...">
   <b:SomeWidget  ui:field="someName" />
</a:HelpWrapper>

So that another widget (HelpWidget) is added on the right side of my first widget.

In order to do it, I wrote a little class called "HelpWrapper" :

public class HelpWrapper extends Composite implements HasWidgets.ForIsWidget {
    
    /**
     * The container
     */
    private final HorizontalLayoutContainer container;
    
    /**
     * The help icon widget
     */
    private HelpWidget helpWidget;
    
    /**
     * The wrapped widget
     */
    private Widget wrappedWidget = null;

    /**
     * The constructor
     */
    public HelpWrapper() {
        // We create & initialize the container
        container = new HorizontalLayoutContainer();

        // We create & add a spacing between the widget and the quick help
        container.add(new LabelToolItem("   "));
        
        // We create & add the quick help widget
        helpWidget = new HelpWidget();
        container.add(helpWidget);
        
        initWidget(container);
    }
    
    /**
     * @param text
     *            The tooltip text
     */
    public void setText(String text) {
        if (helpWidget != null) {
            helpWidget.setTooltipHTML(text);
        }
    }

    /**
     * @param size
     *            The size of the icon
     */
    public void setSize(IconSize size) {
        helpWidget.resizeIcon(size);
    }

    @Override
    public void add(Widget w) {
        // We add the widget and the help widget
        if (wrappedWidget == null) {
            wrappedWidget = w;
            container.insert(wrappedWidget, 0);
            container.add(new LabelToolItem("   "));
            container.add(helpWidget);
        }
    }

    @Override
    public void clear() {
        // We clear the container
        container.clear();
    }

    @Override
    public Iterator<Widget> iterator() {
        return container.iterator();
    }
    
    @Override
    public boolean remove(Widget w) {
        boolean ok = container.remove(w);
        if (ok) {
            wrappedWidget = null;
        }
        return ok;
    }

    @Override
    public void add(IsWidget w) {
        add(w.asWidget());
    }

    @Override
    public boolean remove(IsWidget w) {
        return remove(w.asWidget());
    }
}

But for some reason, the height of the original widget is not preserved :-(

From this :

base.png

I get this :
fail.png

But what I wanted is this :

win.png


What did I do wrong :-( ?

Thank you in advance !

[Colin Alworth]

I haven't run your code, but it appears that you are wrapping up a child that needs size to work correctly in a new parent (HelpWrapper) that does not properly pass along sizing information from its parent.

Without knowing more details about your situation, is there a reason you aren't using the HorizontalLayoutContainer or HBoxLayoutContainer? HLC would be good if you are using a parent to size the children, whereas HBoxLC would be better if the children already have sizes. CssFloatLayoutContainer is another option, which will behave much like HBoxLC.

Html tags can have display as 'inline' or 'block' - this would be another way to think about solving this. However, setting sizes on an inline element needs to be done carefully. GXT almost always favors using block elements with sizing an positioning - these are the basis for most layout container classes. FlowLayoutContainer, as opposed to the others mentioned earlier, do not do any of this sizing, but leaves it to the html elements and their styling to position and size themselves. If you set two children to be display:inline in it, they will line up, one after the other, but I'm not sure that is what you mean by inline in this case.

Try out HLC (remember to use layout data!), HBoxLC, and CssFloatLC, see if one of those might make sense instead of crafting your own. If it doesn't, consider posting enough code to allow others to run it - we can run the container you made, but not the other things it lives in or that go in it.