So i have a GWT cellTable with various inputs, including selectboxes, EditTextCells and some links. I would like TAB to go along each cell.
However, currently i can only get the TAB switching to go between the selectboxes(when KeyboardSelectionPolicy.DISABLED). (ie from here). But it doesnt tab to the EditTextCells or other cells.
(potentially relatedly, EditText <input>s seem like they cannot have their tabindex!=-1, or else i see the cellTable throwing errors. (and it seems to warn in EditText that you shouldnt do this).
is there another tabIndex for EditText or other generic cells that I'm missing maybe? One guy here seemed like he couldnt get it to work and opt'd out.
But according to this issue at googleCode, other people are doing this successfully.
ok so adding the tabIndex does work. for editTextCell I added a new Template for the (normally just safehtml-rendered) text like this:
interface TemplateBasic extends SafeHtmlTemplates {
#Template("<Label tabindex=\"{1}\">{0}</Label>")
SafeHtml input(String value, String index);
}
and then later in render when it sets
...
else if (value != null) {
SafeHtml html = renderer.render(value);
sb.append(html) );
}
instead i used
else if (value != null) {
SafeHtml html = renderer.render(value);
sb.append(templatebasic.input(html.asString(), Integer.toString( context.getIndex() )) );
}
this should work for the checkboxcell too; overriding the renderer not to use the static defined INPUT_CHECKED/UNCHECKED with the tabIndex=-1
but im still thinking/hoping there might be a better way....
You can create a new Cell. Or, you can add some script to the CellTable to handle TABs and SHIFT+TABs.
Extend CellTable to achieve this by adding a tab handler would work for your needs. See this link.
Related
Is there a way to make com.google.gwt.user.client.ui.HTML widget being enabled or not-enabled? I tried but there seems no setEnabled(boolean) method :S Share your experience please
Thanks
I'm not sure what you mean by enabled but I'll take a stab at it.
I assume that you mean visible or not visible.
HTMLPanel panel = new HTMLPanel();
panel.setVisible(false); // Disabled
panel.setVisible(true); // Enabled
Hopefully that's what you were looking for.
Only a few HTML elements can be enabled or disabled, like inputs. GWT has setEnabled() for elements that can get focus:
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/FocusWidget.html#setEnabled(boolean)
Only some form elements(inputs, options) can be disabled.
To disable:
widget.getElement().setAttribute("disabled","disabled");
To enable again:
widget.getElement().removeAttribute("disabled");
For other widget, you need to set their style to mimic "disabling". (e.g. set the color to grey)
Unfortunately there is no such a method in Widget.
But there is a little room to acheive .I made it work with help of google groups
public void setEnabled (boolean e)
{
Iterator<Widget> itr = grd.iterator (); // grd is a FlexTable which
contains my form controls
while (itr.hasNext ())
{
Widget w = itr.next ();
if (w instanceof TextBox)
{
TextBox t = (TextBox) w;
t.setEnabled (e);
}
if (w instanceof PasswordTextBox)
{
PasswordTextBox t = (PasswordTextBox) w;
t.setEnabled (e);
}
...
}
To Give appearance of enable and disable feature in a widget which does not inherit from FocusWidget.
You would need to override both style and event handling implementation. Keep a enableFl in your MyHTMLPanel extends HTMLPanel.
Step 1 - Provide enable and disable style. Using opacity css turn on/off greying sort of coloring. Based on state of enableFl turn on/off the enable/disable feature.
Step 2 - Disable/Enable event handling on the widget by overriding onBrowserEvent and making its execution conditional on your own enableFl state.
Step 3 - Recursively disable all widgets internal to HTMLPanel.
If your use case is simple you might opt to use com.google.gwt.user.client.ui.HTML instead of com.google.gwt.user.client.ui.HTMLPanel .
I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.
I'm creating some HTML elements on-the-fly like this:
Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());
Then I'm getting the source HTML for these elements by calling
String src = outerDiv.toString();
and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.
Is there a better way to do this?
Thanks,
Jon
~~~~EDIT~~~~
I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.
First I'm creating my div:
String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";
Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:
Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);
My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:
assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
+ "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
+ "an existing parent widget may not be added to the detach list";
I put some breakpoints in and it seems that the 2nd assertion is failing!
Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?
Your first approach is good, you just need to register onClick event for your button like this:
DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
#Override
public void onBrowserEvent(Event event) {
//implement the logic after click
}
});
I have checked this, it works 100%!
You might try something like
RootPanel.get("idOfYourMapMarker").add(popupButton);
See RootPanel.get()
Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.
SimplePanel is a DIV. Perhaps that can be used instead?
You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.
I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.
private static native void registerEvents(String buttonId, MyClass instance)/*-{
var $ = $wnd.$;
//check click
$('#'+buttonId).live('click', function(e) {
e.preventDefault();
instance.#com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
});
}-*/;
Call this registerEvents() either in your onAttach or constructor.
I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:
private MapWidget createMapWidget() {
final MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);
MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);
map = mapWidget.getMap();
return mapWidget;
}
And then add it to any panel be it vertical or horizontal.
MapWidget mapWgt = createMapWidget();
VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...
You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.
I am trying to create a ListBox using GWT. I am using UiBinder to create the field.
I would like to set a default text on the list box and when a user clicks on the box, it should show me the list items. Once again, if user has not selected any option, it should show me the default text again.
Any way to do this either using Uibinder or some ListBox methods?
If I understand correctly you want a value to show but when the user clicks on the list it disappears and shows you the list items?
As far as I know there is no option to that natively.
What you can do is add the first item to hold your default value.
You can do this grammatically by using addItem in code or using:
<g:Listbox>
<g:item value="-1">Default text</g:item>
</g:Listbox>
works with gwt 2.1+
The value can still be selected.
You can choose to ignore it or add an attribute "disabled" with value "disabled" to the option element:
listbox.getElement().getFirstChildElement().setAttribute("disabled" ,"disabled" )
hope it helps a bit :)
You can also use a renderer to control what is shown if 'Null' is selected.
(Inspired by: How do I add items to GWT ListBox in Uibinder .ui.xml template ?)
private class SimpleRenderer implements Renderer<T>{
private String emptyValue = "Select a value";
#Override
public String render(T val) {
if(val == null) {
return emptyValue;
}
return val.toString();
}
#Override
public void render(T val, Appendable appendable) throws IOException {
appendable.append(render(val));
}
public void setEmptyValue(String emptyValue) {
this.emptyValue = emptyValue;
}
}
How can i disable a tab (i.e the user cannot open the tab when he clicks on it) in the TabLayoutPanel?I searched online but was not able to find a solution
Thanks
Use a BeforeSelectionHandler:
TabLayoutPanel myPanel = new TabLayoutPanel();
// Add children...
myPanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event) {
// Simple if statement - your test for whether the tab should be disabled
// will probably be more complicated
if (event.getItem() == 1) {
// Canceling the event prevents the tab from being selected.
event.cancel();
}
}
});
If you want to style the disabled tab differently than enabled tabs, you can use TabLayoutPanel#getTabWidget to get the tab widget and add a style name to it.
For anyone who comes across this later:
As of GWT version 1.6, disabling/enabling tabs is built into GWT.
The TabBar class has a method setTabEnabled(int index, boolean enabled) that enables/disables the tab at a given index.
For example, to disable all the tabs in a TabPanel:
TabPanel myTabPanel = new TabPanel();
// Add children
TabBar tabBar = myTabPanel.getTabBar();
for(int i=0; i<tabBar.getTabCount(); i++) {
tabBar.setTabEnabled(i, false);
}
See the GWT javadoc for more info.
To style disabled tabs differently (which GWT does automatically, but if you wanted to change the style): disabled tabBarItem divs are given another CSS class: gwt-TabBarItem-disabled.
You can access tab style by casting class Tab to Widget
TabPanel tabPanel = new TabPanel();
((Widget)tabPanel().getTabBar().getTab(tabsToDisable.iterator().next())).addStyleName("disabled");
I want to click on an image and therefore want to register (e.g.) a ClickHandler. The image I get from a ClientResource. This works so far to set the image into a table cell:
MyResources.INSTANCE.css().ensureInjected();
Image colorImage = new Image( MyResources.INSTANCE.colorImage() );
Element colorImageElement = colorImage.getElement();
colorImage.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
System.out.println( event );
}
} );
TableElement table = Document.get().createTableElement();
TableRowElement headRow = table.insertRow(-1);
headRow.insertCell(-1).appendChild( colorImageElement );
RootPanel.get().getElement().appendChild( table );
How can I add a listener to the icon? I tried ClickHandler and to put the image on a PushButton and get the Element from this PushButton but all don't work.
But mind, if I add the widget (Image is a Widget) to a panel it works!
RootPanel.get().add( colorImage );
But I am not working with widgets here but with the Element. So the handler disappears and that's the point I don't get how to preserve this added handler information.
In the end I would like to build a table with different rows where I can click on the icon I get a popup menu and thereby change the colour of the row.
You should be able to just add a ClickHandler (or a MouseDownHandler if that fits your needs better).
Like this:
colorImage.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Do something....
}
});
Don't unwrap your widget and append only the DOM elements. The Widget class allows your code to refer to both elements and events at the same time, and deals with possible memory leaks, as well as grouping your code in logical ways.
This might make sense for other frameworks, but in GWT you almost always want to work with the Widgets directly, adding them together, then appending them to the RootPanel.
If you really want to use a html table to build this up, look at the com.google.gwt.user.client.ui.HTMLTable subclasses, com.google.gwt.user.client.ui.Grid and com.google.gwt.user.client.ui.FlexTable. This probably should never be necessary, unless you are adding multiple items to the table - when trying to specify layouts, use actual layout classes.
did you tried to add image.sinkEvents( Event.ONCLICK | Event.MOUSEEVENTS )?
The image has to be inside a focus widget. I don't know why that is, but somewhere the events don't get propagated right and the DOM events don't fire.