LayoutPanel and Custom Widget

29 views
Skip to first unread message

Cristian Rinaldi

unread,
Jan 16, 2012, 12:08:15 PM1/16/12
to google-we...@googlegroups.com
I am the following doubt:
I made a custom widget that use a LayoutPanel as container of elements:

  private Element root = Document.get().createDivElement();
  private LayoutPanel layoutBody = new LayoutPanel();
  private VerticalPanel body = new VerticalPanel();
  ....
  ....

 public MenuAccordionWidget() {
        layoutBody.add(body);

        layoutBody.setWidgetLeftWidth(body, 0, PCT, 100, PCT);  
        layoutBody.setWidgetTopHeight(body, 30, PX, 90, PCT); 

        .....
        .....

        root.appendChild(header.getElement());
        root.appendChild(layoutBody.getElement());

        setElement(root);

        sinkEvents(Event.ONCLICK);
 }

The problem is heigth, but the layoutBody is hiden, need to know the pixels to get the percentage. But, I not want express the height in pixel because the height can change.

Any idea?

Other thing, is correct make a widget in this way, because it's like mixed the composite form with the low level way.

Thanks.

Cristian Rinaldi

unread,
Jan 16, 2012, 9:49:14 PM1/16/12
to google-we...@googlegroups.com
Hello:

The real question is: I have a widget to inherits of ComplexWidget with the following declarations:

private Element root = Document.get().createDivElement();
private LayoutPanel header = new LayoutPanel();
private Image imgUp = new Image(getDefaultResources().imageUp());

header.add(label);
.....
.....
root.appendChild(header.getElement());
.....
.....
setElement(root);
sinkEvents(Event.ONCLICK);

Now I add a domHadler for image (the only event that interests me), but, sinkEvents(Event.ONCLICK) register the event at level of element root, I don't know how propagate the event at image, so that only the image, treats you, and not the other elements of the widget.

I made this:

imgUp.addDomHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                header.setWidgetTopHeight(imgUp, 0, PX, 0, PX);
                header.setWidgetTopHeight(imgDown, 0, PX, 30, PX);
                collapsed = !collapsed;
                collapseBody(collapsed);
            }
        }, ClickEvent.getType());

But entire the widget  treats the event.

Any idea?
A.U.S Cristian Rinaldi

Teléfono Móvil: (0342) 155 238 083

www.logikas.com

Lisandro de la Torre 2643 Of 5 - 3000 - Santa Fe

Teléfono Fijo: (0342) 483 5138







2012/1/16 Cristian Rinaldi <csri...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/fjfy_S3KZ0wJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Uemit

unread,
Jan 17, 2012, 4:22:35 AM1/17/12
to google-we...@googlegroups.com
Either your custom widget extends ResizeComposite or implements RequiresResize and ProvidesResize interfaces. This will ensure that the onResize event is propagated to your LayoutPanel. 

You have to make sure that you put your widget in a ResizeLayoutPanel or in a Panel which implements ProvidesResize and make sure that there is a unbroken chain of ProvesResize/RequiresResize panels up to the RootLayoutPane.
Whenever you resize your browser LayoutPanel will resize accordingly. 


Thomas Broyer

unread,
Jan 19, 2012, 10:29:16 AM1/19/12
to google-we...@googlegroups.com, cristian...@logikas.com


On Tuesday, January 17, 2012 3:49:14 AM UTC+1, Cristian Rinaldi wrote:
Hello:

The real question is: I have a widget to inherits of ComplexWidget with the following declarations:

private Element root = Document.get().createDivElement();
private LayoutPanel header = new LayoutPanel();
private Image imgUp = new Image(getDefaultResources().imageUp());

header.add(label);
.....
.....
root.appendChild(header.getElement());

Unless you know exactly what you're doing, do not by any mean append widgets using their getElement(). Always put widgets inside other (container) widgets, otherwise the child widget's onAttach/onLoad and onDetach/onUnload won't be called, the events won't work, etc.
That is, when you are compositing widgets, extend Composite (or ResizeComposite), not Widget.

.....
.....
setElement(root);
sinkEvents(Event.ONCLICK);

Now I add a domHadler for image (the only event that interests me), but, sinkEvents(Event.ONCLICK) register the event at level of element root, I don't know how propagate the event at image, so that only the image, treats you, and not the other elements of the widget.

I made this:

imgUp.addDomHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                header.setWidgetTopHeight(imgUp, 0, PX, 0, PX);
                header.setWidgetTopHeight(imgDown, 0, PX, 30, PX);
                collapsed = !collapsed;
                collapseBody(collapsed);
            }
        }, ClickEvent.getType());

But entire the widget  treats the event.

Any idea?

If you added you Image inside another widget (and not taking the image's getElement to append it to an Element), that would "just work", you wouldn't even need a sinkEvent(ONCLICK) at the container level.
Reply all
Reply to author
Forward
0 new messages