I'd like to use the following in UIBinder, so that I can programmatically set the href of the link in my code.
<g:HTMLPanel>
<g:Anchor ui:field="link">
<g:InlineLabel ui:field="firstName"/>
<g:InlineLabel ui:field="lastName"/>
</g:Anchor>
</g:HTMLPanel>
When I try this I get:
ERROR: Found widget in an HTML context Element <g:InlineLabel ui:field='firstName'> (:7).
How can I embed widgets inside an anchor? Previously I've resorted to using:
<a id="myAnchor">
etc...
</a>
And then manipulating the DOM in my code to set the HREF, but that's ugly. Is there a better way?
The class below acts exactly like a SimplePanel (i.e., you can put an widget in it), but uses an "a" instead of a "div". If you need more widgets just put another panel in it.
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.SimplePanel;
public class Link extends SimplePanel {
public Link() {
super(DOM.createAnchor());
}
private void setHref(String href) {
getElement().setAttribute("href", href);
}
private String getHref() {
return getElement().getAttribute("href");
}
public void setTarget(String frameName) {
getElement().setAttribute("target", frameName);
}
}
It is better to use a Panel (Flow or Horizontal) and add click handlers to the panel to simulate a link. Anchor, Button and similar widgets will not allow child tags inside them.
Related
I am creating an Anchor as follows:
Anchor a = new Anchor( "Click Me" );
Then I add a click handler:
a.addClickHandler( new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
GWT.log("Anchor Clicked");
}
} );
I want to add the Anchor to a LI element. Since I don't have any Widgets for UL and LI, I use the following construct:
public class ElementPanel extends ComplexPanel {
public ElementPanel(String tagName) {
setElement(DOM.createElement(tagName));
}
#Override
public void add(Widget w) {
add(w, getElement());
}
}
I create my UL element:
ElementPanel ul = new ElementPanel(UListElement.TAG);
I create a LI element:
ElementPanel li = new ElementPanel(LIElement.TAG);
I add my Anchor to LI, then I add LI to UL (after which I add to the document):
li.add(a);
ul.add(li);
This works fine. If instead I change the previous lines as follows, I don't see a log message:
li.getElement().appendChild(a.getElement());
ul.add(li);
Similarly, if instead I try this, I also do not see a message:
li.add(a);
ul.getElement().appendChild(li.getElement());
Previously, I had the UL element in the UIBinder. But since I was not successful in adding a click handler to an Element, I have to resort to the above approach.
This is how events are handled in GWT: the widget needs to be attached, and that generally means adding it to a container chain up to a RootPanel. See https://code.google.com/p/google-web-toolkit/wiki/DomEventsAndMemoryLeaks#GWT's_Solution for the details.
The easiest way to have <ul><li> if your structure doesn't change dynamically is to use an HTMLPanel (and it's even easier with UiBinder).
If the structure is dynamic, then possibly make a ComplexPanel whose root element is a UListElement and which wraps all child widgets into a LIElement. Have a look at the internals of ComplexPanel, you'll see that it attaches and detaches the child widgets whenever they are added/removed while the panel itself is attached, or whenever the panel is attached / detached.
Edit
Since no one has responded to my original question I think it is worthwhile adding a description of what I am attempting to accomplish, in addition to the existing description of how I have attempted to achieve my goal:
My objective is to create a DataGrid that will resize according to any change in size of its container. This is not difficult to do, but I have an additional requirement, which is to have Panel widgets above and below the DataGrid; these two Panel widgets will contain widgets that are fixed in size (e.g., a row of buttons or text input widgets). My expectation was that a HeaderPanel would be perfect for this, but this doesn't seem to work (as can be seen in my original question, below). So ... an alternative to my original question ("why doesn't this work") is: what is the best way to implement this requirement?
My original question:
I have a DataGrid in the content area of a HeaderPanel, but the detail lines in the DataGrid are not being displayed (the DataGrid column headings are showing, however). Is there an issue with using a DataGrid in the content area of a HeaderPanel? Or is this a simple misuse of the widgets? I'm adding the HeaderPanel to the RootLayoutPanel, which should provide the necessary resize notification (I think). Here is my UiBinder code:
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:c='urn:import:com.google.gwt.user.cellview.client'>
<g:HeaderPanel>
<g:SimplePanel/>
<g:ResizeLayoutPanel>
<c:DataGrid ui:field='dataGrid'/>
</g:ResizeLayoutPanel>
<g:HorizontalPanel>
<g:Button
ui:field='addRecordButton'
text='Add Record'/>
<g:Label ui:field='numberOfRecordsLabel'/>
</g:HorizontalPanel>
</g:HeaderPanel>
</ui:UiBinder>
and here is the Java code:
public class TempGWT implements EntryPoint {
#UiField
Button addRecordButton;
#UiField
DataGrid<Record> dataGrid;
#UiField
Label numberOfRecordsLabel;
private ArrayList<Record> _recordList;
interface TempGWTBinder extends UiBinder<Widget, TempGWT> {
}
private static class Record {
private String _field1;
}
#Override
public void onModuleLoad() {
_recordList = new ArrayList<Record>();
TempGWTBinder binder = GWT.create(TempGWTBinder.class);
Widget widget = binder.createAndBindUi(this);
Column<Record, String> field1Column = new Column<Record, String>(new TextInputCell()) {
#Override
public String getValue(final Record record) {
return record._field1;
}
};
dataGrid.addColumn(field1Column, "Field 1");
RootLayoutPanel.get().add(widget);
}
#UiHandler("addRecordButton")
public void onAddRecordButtonClick(final ClickEvent event) {
Record record = new Record();
record._field1 = "Record " + (_recordList.size() + 1);
_recordList.add(record);
dataGrid.setRowData(_recordList);
numberOfRecordsLabel.setText("Records:" + _recordList.size());
}
}
I've attempted to trace the execution and, although I'm not certain, it looks as though the following happens when I change the size of the browser window and the "resize" request is received by the DataGrid (I've skipped some of the "unimportant" methods):
DataGrid#onResize
HeaderPanel#forceLayout
ScrollPanel#onResize
The DataGrid object contains a HeaderPanel, which contains the headings for the DataGrid and a ScrollPanel. I don't know whether this is the key to the problem, but the ScrollPanel in the DataGrid's HeaderPanel contains a DataGrid$TableWidget object, and TableWidget does not implement RequiresResize; the ScrollPanel#onResize method only sends the resize to its child if the child implements RequiresResize.
The Tables and Frames section of the GWT Developer's Guide makes it clear that I just needed to use a width/height of 100% for the DataGrid! Like so:
<c:DataGrid
ui:field='dataGrid'
width='100%'
height='100%'/>
I've been working with GWT for awhile, I can't find a way to integrate it with a preexisting website which is a real downer. My page content is already generated for me using jsp, like:
<div id='A'></div>
<div id='B'></div>
etc.
there is no way for me to do something like this though:
public void onModuleLoad() {
SimplePanel spA = new SimplePanel(
Document.getElementById("A"));
spA.add(new Label("hello"));
SimplePanel spB = new SimplePanel(
Document.getElementById("B"));
spB.setWidth("200px");
etc ..
}
seems like there's no way to just wrap a pre-existing element. Is this true, or am I missing how to do this? I need be able to wrap a bunch of elements like this, to manipulate them later on. I see TextBox, Button, a few other classes have wrap() methods, however nothing like that exists for elements,
Thanks
There is a way to wrap existing DOM elements, like Label's wrap() method. For example:
Label label = Label.wrap(DOM.getElementById("A"));
label.setText("Foo!");
Other GWT classes can wrap DOM elements too, like Button, and CheckBox using its constructor.
Use HTMLPanel:
class MyPanel extends HTMLPanel {
private SimplePanel a = new SimplePanel();
private SimplePanel b = new SimplePanel();
public MyPanel() {
super("<div id="a"></div><div id="b"></div>);
addAndReplaceElement(a, "a");
addAndReplaceElement(b, "b");
}
}
I'm writing a widget with the following markup:
<g:HTMLPanel ui:field="shortcutPanel" styleName="{style.shortcut}">
<g:Image ui:field="shortcutImage"></g:Image>
<span ui:field="shortcutLabel"></span>
</g:HTMLPanel>
So essentially a div that wraps and image and a label. Now, instead of adding the event handlers on the image/span, I'd like an onClick to be associated with the HTMLPanel. My problem however is that gwt tells me that
shortcutPanel doesn't not have an addClickHandler method associated
So I'm assuming the difference is that HTMLPanel doesn't implement HasClickHandlers or something along that line. I'm wondering then what is the standard way to attach a click handler to a Ui element such as an HTMLPanel or even better, is there such a GWT Widget that is essentially a div wrapper that I can easily attach events to with the #UiHandler annotation.
You are probably looking for FocusPanel - it has all the goodies: HasAllFocusHandlers, HasAllKeyHandlers, HasAllMouseHandlers, HasBlurHandlers, HasClickHandlers.... to name a few :) I find it to be the easiest and best way to attach click handlers to a Panel.
I haven't done this before, but you could do the following:
Create a custom class MyPanel that extends HTMLPanel and implements HasClickHandlers
Add the following method in MyPanel.java
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
Then replace HTMLPanel with MyPanel in your ui.xml and its corresponding Java implementation.
You can always look at the implementation of HTMLTable to get an understanding of how the event propagation works. It's a Panel and implements HasClickHandlers.
If you want to use the #UiHandler annotation to register event handlers for your custom widget, you need to re-implement the addXXHandler methods. The GWT compiler doesn't seem to find those in superclasses. e.g. if you want to use
#UiHandler("myCustomWidget")
public void handleWidgetSelectionChangeEvent(final SelectionEvent<CountryDts> event) {
...
}
and your CustomWidget extends a class for which this is working, you might need to add the HasSelectionHandlers interface explicitly to your class:
public class CustomComboBox<D> extends ComboBox<D> implements HasSelectionHandlers<D> {
#Override
#SuppressWarnings("pmd.UselessOverridingMethod")
public HandlerRegistration addSelectionHandler(final SelectionHandler<D> handler) {
// GWT Compile doesn't recognize method in supertype for UIHandler
return super.addSelectionHandler(handler);
}
...
}
I'm creating a composite uibinder widget with a Label and a TextBox.
The intented use is:
<x:XTextBox ui:field="fieldName" label="a caption" >
The text to be put in the box.
</x:XTextBox>
I've found how to catch the label with a custom #UiConstructor constructor, I might add another parameter to the constructor, but I would like to know how to get the text from the xml, just like the GWT tag <g:Label>a caption</g:Label> does.
Any help is greatly appreciated.
I've found a possible implementation by looking at the Label widget source code.
The key point is that the composite widget must implement the HasText interface. so in the declaration and in the body:
public class XTextBox extends Composite implements HasText ...
...
#UiField TextBox textBox;
...
public void setText(String text) {
textBox.setText(text);
}
public String getText() {
return textBox.getText();
}
...
Just put the text into another parameter of your widget and have your #UiConstructor take that parameter. That is:
<x:XTextBox ui:field="fieldName" label="a caption"
text="The text to be put in the box." />
Then your XTextBox.java will have this:
#UiField TextBox textBox;
#UiConstructor XTextBox(String label, String text) {
initWidget(uiBinder.createAndBindUi(this));
textBox.setValue(text);
}
Han is right; HasText is what you need to implement. One thing I found handy is to browse the source if you know a Google widget does something you'd like to do also. e.g.
http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/client/ui/Label.java