How do I show a AJAX "Message Box" in GWT? I know I can use the Window.alert() function, but that's too ugly/annoying. Is there a built-in function for?
Thank you!
Yvan
Here is simple implementation of custom alert widget (modify it to what you want):
public static DialogBox alertWidget(final String header, final String content) {
final DialogBox box = new DialogBox();
final VerticalPanel panel = new VerticalPanel();
box.setText(header);
panel.add(new Label(content));
final Button buttonClose = new Button("Close",new ClickHandler() {
#Override
public void onClick(final ClickEvent event) {
box.hide();
}
});
// few empty labels to make widget larger
final Label emptyLabel = new Label("");
emptyLabel.setSize("auto","25px");
panel.add(emptyLabel);
panel.add(emptyLabel);
buttonClose.setWidth("90px");
panel.add(buttonClose);
panel.setCellHorizontalAlignment(buttonClose, HasAlignment.ALIGN_RIGHT);
box.add(panel);
return box;
}
And use it like (note center() method at the end, it actually shows the widget):
CustomWidgets.alertWidget("Adding account failed",
"System failed to add this account. Please chceck your settings properly.").center();
You can use DialogBox instead.
Related
I want to drag a text box from vertical layout container and drop it in a flow layout container. On drop, it should appear as a Rich Text Area. Please find the code below. I tried to debug the code and it is getting entered only inside dragging. Debugging is not coming inside droptarget. Can you please help me?
final TextButton textButton = new TextButton();
textButton.setText("Text Box");
DragSource source = new DragSource(textButton) {
#Override
protected void onDragStart(DndDragStartEvent event) {
super.onDragStart(event);
}
};
DropTarget dropTarget = new DropTarget(flowLayoutContainer);
dropTarget.setOperation(Operation.COPY);
dropTarget.addDropHandler(new DndDropHandler() {
#Override
public void onDrop(DndDropEvent event) {
final RichTextArea textBox1 = new RichTextArea();
flowLayoutContainer.add(textBox1);
}
});
All the examples for DialogBox does something like
void someFn()
{
DialogBox box = new DialogBox();
box.show();
}
but I want to create it earlier like
private DialogBox box = new DialogBox();
void someFn()
{
box.show();
}
The problem is that it shows up directly without waiting for any action.
Any ideas how this can be handled?
The dialog box is created by a function called from the constructor as
private DialogBox makeMenu() {
DialogBox ret = new DialogBox(true);
FlowPanel f = new FlowPanel();
f.getElement().getStyle().setProperty("minWidth", "350px");
// Add stuff
f.add(...)
ret.setWidget(f);
return ret;
}
OK, the answer was a step up. You should never add a DialogBox to a Panel and I did that as
FlowPanel container = new FlowPanel();
container.add(menu);
Stupid mistake, but not something you look for first.
is there a way to programmatically perform a Button Press Event i.e for the TAB-Button in Vaadin? I have to write a test for a ShortCutListener, which listens to ShortCut ShortCutAction.KeyEvent.TAB.
I have tried something like that:
Button button = new Button();
button.addShortcutListener(new ShortcutListener("ShortCut", ShortcutAction.KeyCode.TAB, null) {
private static final long serialVersionUID = 1L;
#Override
public void handleAction(Object sender, Object target) {
System.out.println("Click!");
}
});
button.setClickShortcut(ShortcutAction.KeyCode.TAB, null);
button.click();
If what you want is triggering the click event when pressing the tab key, you could do the following:
Button button = new Button();
button.addClickListener(new Button.ClickListener() {
private static final long serialVersionUID = 1L;
#Override
public void buttonClick(final ClickEvent event) {
System.out.println("Click!");
}
});
button.setClickShortcut(ShortcutAction.KeyCode.TAB);
button.click();
Using a Vaadin Button to do something useful on a key press is probably not a good idea, except if the keypress is a shortcut to clicking on the button (which the setClickShortcut method lets you define).
If you want to do something specific on a keypress, something that is different from what your buttons do, you should define an action handler on your Window or Panel, as Vaadin recommends.
I am just wondering...
When I click refresh button my gwt app comes to its default UI state despite its UI was modified during client-server interactions (callbacks) etc... But sometimes it is really essential thing to "cache" UI if user clicks refresh by mistake or reopened web page which user still logged-in;
So my question is...
Is there a way to restore gwt app UI (its before-refreshed state) in some standard way? Can History tokens help for this kind of issue?
edit
Concerning the history tokens I saw this example :
History.addValueChangeHandler(new ValueChangeHandler<String>() {
public void onValueChange(ValueChangeEvent<String> event) {
String historyToken = event.getValue();
// Parse the history token
try {
if (historyToken.substring(0, 4).equals("page")) {
String tabIndexToken = historyToken.substring(4, 5);
int tabIndex = Integer.parseInt(tabIndexToken);
// Select the specified tab panel
tabPanel.selectTab(tabIndex);
} else {
tabPanel.selectTab(0);
}
} catch (IndexOutOfBoundsException e) {
tabPanel.selectTab(0);
}
}
});
... and I could notice it restores tabIndex from history; so will it help if tab panel won't be init-ed by module load (by default) but something this way:
//on button click...
getSimplePanel().setWidget(new MyTabbedPane());
edit
To be more clear here is my test code which I am trying to figure out how to restore MainUI I mean its previous UI state as if refresh button wasn't clicked.
the EntryPoint...
public class Main implements EntryPoint {
private SimplePanel simplePanel;
public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
FlowPanel flowPanel = new FlowPanel();
rootPanel.add(flowPanel, 10, 10);
flowPanel.setSize("410px", "280px");
Button setWidgetButton = new Button("Click");
setWidgetButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
getSimplePanel().setWidget(new MainUI());
}
});
flowPanel.add(setWidgetButton);
simplePanel = new SimplePanel();
flowPanel.add(simplePanel);
}
protected SimplePanel getSimplePanel() {
return simplePanel;
}
}
...and composite;
public class MainUI extends Composite {
private VerticalPanel verticalPanel;
int index;
public MainUI() {
FlowPanel flowPanel = new FlowPanel();
initWidget(flowPanel);
Button button = new Button("+");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
getVerticalPanel().add(new Label(""+(++index)+": "+Math.random()));
}
});
flowPanel.add(button);
DecoratorPanel decoratorPanel = new DecoratorPanel();
flowPanel.add(decoratorPanel);
verticalPanel = new VerticalPanel();
decoratorPanel.setWidget(verticalPanel);
}
protected VerticalPanel getVerticalPanel() {
return verticalPanel;
}
}
...and, as a result, to have "cached" ui state without regenerating it again with extracting strings from history tokens and re-instantiate objects or what so ever...
for example if I have this UI (see image) I am interested to have totally the same one after refresh button is pressed...
but I am not pretty sure which way should I look for? I haven't seen any gwt snippet in this direction; So I really need your advice what way should I dig in?
Any useful comment is appreciated
Thanks
P.S. GWT 2.3
I think you miss to store the state into the URLs-Hashtag.
You can use GWTP (as suggested in the comments)
In fact you need to read the Hashtag in your onModuleLoad and restore your state.
This may work with getHash():
String state = Window.Location.getHash();
myRestoreStateFromTokenMethod(state);
update
Here are some snippets to create a push store.
List<String> states = [...]
public void onClick(){ states.add("newState");changeHash(states); }
public void changeHash(){
String hash = states.get(0) + ";"
for(other states) hash += states.get(i);
// use a UrlBuilder to set the Hash
}
Documentation for UrlBuilder
Or you can try this: https://github.com/jbarop/gwt-pushstate
Hi is there any way to create something similar to Window.alert() in GWT?
Basically I wanted to customize the Window.alert()'s "Ok" button to say something else but
as I researched there is no way to customize the alert boxes.
Thanks.
Window.alert() is already available in GWT. It opens a native dialog box which contais OK button localized by the browser's locale. This alert box can not be changed.
Use PopupPanel or DecoratedPopupPanel.
You could use the PopupPanel.
I usually code a generic dialog box, that is created once and when I need it again the html content and title is replaced. You can also add a OK/Cancel button combination, this all is rather straightforward.
private DialogBox dialog = null;
private HTML dialogHtml = new HTML();
public void onDialog(final String title, final String html) {
if (dialog == null) {
dialog = new DialogBox();
dialog.getElement().getStyle().setZIndex(99);
dialog.setWidth("500px");
dialog.setGlassEnabled(true);
dialog.setAnimationEnabled(true);
dialog.setModal(true);
VerticalPanel vp = new VerticalPanel();
vp.add(dialogHtml);
HorizontalPanel hp = new HorizontalPanel();
hp.setWidth("100%");
Button close = new Button("close");
close.setWidth("200px");
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
dialog.hide();
}
});
hp.add(close);
hp.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_CENTER);
hp.getElement().getStyle().setMarginTop(40, Unit.PX);
vp.add(hp);
vp.setSpacing(10);
dialog.add(vp);
}
dialogHtml.setHTML(html);
dialog.setHTML(title); // the actual title
dialog.show();
dialog.center();
}
The HTML content is something very simple, i.e.
<div style="width: 500px; overflow: auto;">...</div>