Is it safe to conclude the basic relationships among GWT panels and widgets below?
A GWT panel is translated into a parent DOM node that can contain child panels or/and child widgets.
A GWT widget is translated into a leaf DOM node that is merely self-contained.
GWT RootPanel must solely act as the root container of all other panels and widgets.
Here's GWT hierarchy:
A panel is also a widget. Panels are widgets which can contain other widgets and panels. In generally they are used for layout and only rarely have data associated with them directly - the DisclosurePanel for example, can have data in the header, and the TabPanel's tabs. Some are based on an HTML table element(e.g. HorizontalPanel) and some are based on the tag div.
RootPanel is the panel to which contains other widgets. This panel is at the top of the containment hierarchy. The default it wraps tag body of the host-page. RootPanel can contain any number of widgets, which will be laid out in their natural HTML ordering.
See docs.
Every GWT Widget instance has an element (reachable by calling getElement()), and panels are just a kind of Widget - they still have a base element. Most Widgets build more content to do their work (for example: CheckBox is a span with both an input and a label), and panels may need more than one element as well.
Widgets are appended to other widgets not just because this is how the DOM needs to be arranged, but also to track attaching and detaching widgets from the DOM. Among other things, this makes it possible to wire up event handlers only when actually attached, and unwire them when no longer part of the page.
RootPanel is a special widget that represents existing elements, either the body itself, or an element with a given ID. There may be more than one RootPanel, but they should not be nested. (That said, there may only be exactly one RootLayoutPanel, a sort of specialized RootPanel that also handles passing browser size information to child layout panels).
This may be the same idea that you were after, but I wanted to clarify that a Widget is frequently more than a single DOM node.
Related
Let say, I got a VerticalPanel that have some widgets (label, button, ...) that were added into it. How can i loop that VerticalPanel & access the widgets in it?
Well you can use iterator,As i explained in the question How get all widgets of certain type?.
Iterator<Widget> widgets= vpanel.iterator();
Point to remember:
This method only gives the widgets added to the panel.
You have to iterate over child panels also(if its contains).
Or otherwise pick #Manolo's answer from same thread,If you are using GWT third party library GQuery.
I want to put a complex layout with text-fields and operation buttons for each cell in a CellList. So I want to put a GWT panel to organize the widgets.
Is it possible to put gwt panels and widgets in CellList? I tried to extend AbstractCell and override render(). But seems only HTML can be rendered. I didn't find a way to render normal gwt panels and widgets.
CompositeCell seems going through List> automatically, you can not arrange widget as you wish. Also, I don't know whether normal widgets like PushButton can be used in CompositedCell.
Please give me a sample if you tried this before? Thanks a lot.
It is not possible to put GWT widgets or Panels in a CellWidgets.
CellWidgets are designed for rapid rendering of large amounts of data.
If you don't have that use case you can still use a FlexTable.
Otherwise you have to create a CompositeCell or AbstractCell and implement the render and event handling methods yourself.
I wanted to know how cell widgets are faster compared normal (old) GWT widgets?
I have gone through the gwt article
Developer's Guide - Cell Widgets
It says
A cell widget renders its user interface as an HTML string, using innerHTML instead of traditional DOM manipulation
Can anyone please explain the above? and How?
In a normal GWT Grid you have to add each Widget separately, which means the browser can not optimize this in any way. Each widget you add also has its own event handler.
So you will create at least one DOM Element per Widget you add and append it into the grid.
CellWidgets first render all childs into a String which is then added to the DOM, by calling setInnerHTML (the browser can optimize this call and add all childs in a batch) and the event handling is only done once by the CellWidget.
I need to embed my GWT component which is a text area which do some functionalities in the key up and key down events twice and more on the same HTML page, in fact when i try to embed it in two different DIVs it appears only one time.
can any one help figure that problem?
A widget can only have one parent in the DOM. The widget will be contained by the last parent to which it is added. If you need to have a widget type appear more than once on the page you need to create more than one instance of the widget.
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...