I am trying to create an "Open" button which will open a new website.
Unfortunately, I don't understand how to create an event that opens a new website.
How can I register the Hyperlink widget to this ClickEvent :
Button button = new Button("Open");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Hyperlink widget = new Hyperlink("Home Page", "Home");
}
});
rootPanel.add(button, 568, 275);
thanks in advance !
This code will open the link in the current window when the button is clicked:
Button button = new Button("Open");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.Location.assign("http://www.someurl.com");
}
});
rootPanel.add(button);
You can't do it with hyperlink. You should do it with anchor or window assign or just simple native javascript methods like that
Button button = new Button("Open");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.Location.assign("new url");
or
getURL("new url");
or add anchor to the panel
Anchor a = new Anchor("new page", "new url");
RootPanel.get().add(a);
}
});
rootPanel.add(button, 568, 275);
public static native String getURL(String url)/*-{
return $wnd.open(url, 'target=_blank')
}-*/;
You need to have your event handler request a URL change, not have it add a new widget.
Do you want to open it in a new window or in the same window?
Generally speaking, you would probably want to have your click handler code use the History class or the Window class to open a different URL and/or to manipulate the browser history.
Related
I have following handler
textArea.addKeyDownHandler(new KeyDownHandler() {
#Override
public void onKeyDown(KeyDownEvent event) {
//here
}
});
I need to enable save button with id "idsave", but I am not able to refer the button.
I am new to GWT, any help would be appreciated.
Typically, you do not use element ids in GWT. If you created a button, you can simply use it:
private Button saveButton;
...
saveButton = new Button("Save");
textArea.addKeyDownHandler(new KeyDownHandler() {
#Override
public void onKeyDown(KeyDownEvent event) {
saveButton.setEnabled(true);
}
});
If you don't have the reference of the button then try with the id.
// get element by id
Element saveButtonElement = RootPanel.get("idsave").getElement();
// remove disabled attribute to make it enable
saveButtonElement.removeAttribute("disabled");
I want to implement this function, when I click on the button, the value of the button changes. But I know I cannot call the button object itself in its clickHandler. So, How can I do this?
button.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event){
button.getButtonElement().setValue("X");
}
});
2 ways:
((Button)event.getSource()).setValue("x");
Or
Outside the handler, use
final Button btn = button;
Then you will be able to use btn as reference to the button inside the handler .
It's a very easy problem to solve:
final Button b = new Button("Old text here", new ClickHandler() {
public void onClick(ClickEvent event) {
b.setText("new text here");
}
});
I am building an application in GWT. I have a decorated tabpanel in
my application.Where in am adding panels to it dynamically.Now i want
to achieve the closing of these tabs. I want to add a close image to
the tab bar and event to that image for closing. I am using UIbinder.
the working code is like that;
private Widget getTabTitle(final Widget widget, final String title) {
final HorizontalPanel hPanel = new HorizontalPanel();
final Label label = new Label(title);
DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");
ImageAnchor closeBtn = new ImageAnchor();
closeBtn.setResource(images.cross());
closeBtn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int widgetIndex = tabs.getWidgetIndex(widget);
if (widgetIndex == tabs.getSelectedIndex()) {
tabs.selectTab(widgetIndex - 1);
}
tabs.remove(widgetIndex);
}
});
hPanel.add(label);
hPanel.add(new HTML("   "));
hPanel.add(closeBtn);
hPanel.setStyleName("gwt-TabLayoutPanelTab");
return hPanel;
}
In order to add tab,
public void addTab() {
TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
tabs.add(tw, getTabTitle(tw, "Writing"));
tabs.selectTab(tw);
}
You'll going to need, ImageAnchorClass
public class ImageAnchor extends Anchor {
public ImageAnchor() {
}
public void setResource(ImageResource imageResource) {
Image img = new Image(imageResource);
img.setStyleName("navbarimg");
DOM.insertBefore(getElement(), img.getElement(), DOM
.getFirstChild(getElement()));
}}
It isn't supported natively in GWT.
You can manually try to add it.
Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1
I haven't tried it personally, but look at the solution by gregor (last one).
You kinda need to do something along the lines of this
GWT Close button in title bar of DialogBox
First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works
public void loadTab(final Widget widget, String headingText, String tooltip) {
HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("tabHeader");
panel.setTitle(tooltip);
Label text = new Label();
text.setText(headingText);
text.setStyleDependentName("text", true);
Label close = new Label();
close.setText("X");
close.setTitle(closeText_ + headingText);
text.setStyleDependentName("close", true);
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("close this tab");
ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
}
});
panel.add(text);
panel.add(close);
panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);
tabPanel_.add(widget, panel);
tabPanel_.getTabWidget(widget).setTitle(tooltip);
tabPanel_.selectTab(widget);
}
I'm new to GWT programming. So far I have a DialogBox which is supposed to collect a login and a password, which can if required launch another DialogBox that allows someone to create a new account.
The first of these two DialogBoxes always appears at the top left of the browser screen, and can't be dragged, although part of the definition of a DialogBox is that it can be dragged. However, the second DialogBox can be dragged about the screen without any problem.
What I'd really like is for the first DialogBox to appear in the middle of the screen & be draggable, both of which I thought would happen automatically, but there's not.
So, what things can stop a DialogBox from being draggable? There is nothing on the RootPanel yet. Does that make a difference?
Code fragments available if they help, but perhaps this general outline is enough for some pointers.
Thanks
Neil
Use dialogBox.center() This will center your DialogBox in the middle of the screen. Normally a DialogBox is by default draggable.
Just tried it out and it doens't matter if your RootPanel is empty our not. When I just show the DialogBox on ModuleLoad it is draggable and it is centered. Probably the problem is situated somewhere else.
This is the example of google itself:
public class DialogBoxExample implements EntryPoint, ClickListener {
private static class MyDialog extends DialogBox {
public MyDialog() {
// Set the dialog box's caption.
setText("My First Dialog");
// DialogBox is a SimplePanel, so you have to set its widget property to
// whatever you want its contents to be.
Button ok = new Button("OK");
ok.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
MyDialog.this.hide();
}
});
setWidget(ok);
}
}
public void onModuleLoad() {
Button b = new Button("Click me");
b.addClickListener(this);
RootPanel.get().add(b);
}
public void onClick(Widget sender) {
// Instantiate the dialog box and show it.
new MyDialog().show();
}
}
Here more information about the DialogBox.
Without seeing any of your code it's hard to tell what's going wrong. The following code works for me (ignore the missing styling...):
public void onModuleLoad() {
FlowPanel login = new FlowPanel();
Button create = new Button("create");
login.add(new TextBox());
login.add(new TextBox());
login.add(create);
create.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DialogBox box = new DialogBox();
FlowPanel panel = new FlowPanel();
Button close = new Button("close");
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
box.hide();
}
});
panel.add(new Label("some content"));
panel.add(close);
box.setWidget(panel);
box.center();
}
});
DialogBox firstBox = new DialogBox(false, true);
firstBox.setWidget(login);
firstBox.center();
}
Both boxes are draggable and shown in the center of your browser window.
Looks like you're overriding this method in Widget:
public void fireEvent(GwtEvent<?> event) {
if (handlerManager != null) {
handlerManager.fireEvent(event);
}
}
In Widget, handlerManager refers to a private HandlerManager.
Either add super.fireEvent(event) to your method or as you have done rename it.
Well, with vast amounts of trial and error I have found the problem, which was just this: I had a method in an object I'd based on DialogBox called fireEvent, which looked like this:
public void fireEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
Then, when a button was clicked on the DialogBox, an event would be created and sent off to the handlerManager to be fired properly.
And it turns out that if I change it to this (LoginEvent is a custom-built event):
public void fireEvent(LoginEvent event)
{
handlerManager.fireEvent(event);
}
... or to this ....
public void fireAnEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
the DialogBox is draggable. However, if the method begins with the line
public void fireEvent(GwtEvent<?> event)
then the result is a DialogBox which can't be dragged.
I'm a bit unsettled by this, because I can't fathom a reason why my choice of name of a method should affect the draggability of a DialogBox, or why using a base class (GwtEvent) instead of a custom class that extends it should affect the draggability. And I suspect there are dozens of similar pitfalls for a naive novice like me.
(Expecting the DialogBox to centre itself was simply my mistake.)
i need to register a cross platform and version independent click event to the document.
that means i have a two text box and submit button but when i click outside of the two text box and submit button then
alert will be displayed .how can i achive this by gwt
document.get().addMouseClick ???
The easiest way that comes to mind is to wrap everything in a FocusPanel:
ClickHandler clickHandler = new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("TextBox/Button clickHandler.");
event.stopPropagation(); // The important line - We stop the event
// propagation here so that the FocusPanel
// doesn't get the event
}
};
TextBox textBox = new TextBox();
textBox.addClickHandler(clickHandler);
Button button = new Button("Test");
button.addClickHandler(clickHandler);
// Since FocusPanel is a SimplePanel, it can only have one child, so we are
// wrapping everything additionally in a HorizontalPanel
HorizontalPanel hPanel = new HorizontalPanel();
hPanel.add(textBox);
hPanel.add(button);
FocusPanel focusPanel = new FocusPanel(hPanel);
focusPanel.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("Outside."); // Clicked outside of the TextBox/Button
}
});
RootPanel.get().add(focusPanel);
The downside is that you need to assign ClickHandlers to every element you don't want an alert for (you can use the same ClickHandler for that to save memory - like I did above). Other than that, the FocusPanel implementation should ensure that the onclick behavior stays cross-browser.