I use gwt popup to show some messages, but it is not displayed in the
center
of the display event if i call popup.center(). Actually it is not centered
only the first time, if i close it and open it again every thing is ok,
but not the first time. How to fix that?
GWT.runAsync(new RunAsyncCallback() {
#Override
public void onSuccess() {
Image fullImage = new Image(optionImageName);
fullImage.setAltText("Loading image ...");
imagePopup.setWidget(fullImage);
imagePopup.center();
}
});
I found this question on http://www.devcomments.com/gwt-Popup-is-not-centered-at107182.htm, and today I have had this problem too. I found the answer and i will post it here for future reference.
I found that the problem is that the image is not loaded completed when you center the popup. This happens the first time only because the second time the image is somehow cashed by the browser.
The solution is to center it on the onLoad event as well.
GWT.runAsync(new RunAsyncCallback() {
#Override
public void onSuccess() {
Image fullImage = new Image(optionImageName);
fullImage.setAltText("Loading image ...");
fullImage.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
imagePopup.center();
}
});
imagePopup.setWidget(fullImage);
imagePopup.center();
}
});
I had this problem as well. The reason that you have to call center twice is because the popup container is actually removed from the DOM when the popup is "hidden". This is problematic because your popup has to now "show" the contents of the popup before you can check that the image is loaded.
The issue with the implementation recommended is that the first call to center() will be done incorrectly if the image is not cached. The second call to center will correct it. On the browser, this causes a shift of the popup dialog box (which looks pretty bad).
I would recommend the following:
1. Put a waiting spinner in the same display and show that initially.
2. One the loadHandler is called, display the image, hide the spinner, and recenter.
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
final ADPopup popup = new ADPopup();
popup.setHeight("300px");
popup.setWidth("500px");
popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
public void setPosition(int offsetWidth, int offsetHeight) {
// TODO Auto-generated method stub
int left = (Window.getClientWidth() - offsetWidth) / 3;
int top = (Window.getClientHeight() - offsetHeight) / 3;
popup.setPopupPosition(left, top);
}
});
popup.show();
}
Hope this Help.
Related
I'm trying to create a loading screen (in this case a PopUp Panel) everytime I click on a button and to hide the screen when the processing is done.
But the problem is that the loading screen never appears.
If I delete the line that hides the loading screen:
//HIDES THE LOADING POPUP
closeLoadingFilter();
The loading screen appears but only until everything finished processing. (not inmediately after I click the button).
I think all the processing in the button handler must be completed before anything appears on the screen. So when the processing is complete the popup is hidden before it was ever showed on the screen.
How can I solve this problem. By the way there is no Async call in the processing, everything is in-memory processing and the drawing of google visualizations with the in-memory information
Thank you all
Here is the code:
buttonFilter.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
//SHOWS THE LOADING POPUP
showLoadingFilter();
//ALL THIS TAKES AROUND 4 SECONDS
//THERE IS NO ASYNC CALL
//EVERYTHING IS IN-MEMORY PROCESSING
//AND DRAWING OF GOOGLE VISUALIZATION
listValues.clear();
listFields.clear();
CreateListFiltersSingle();
GetFilterSingleOptions();
RunFilter(dashboardProductos);
DrawVisualizations2();
//HIDES THE LOADING POPUP
closeLoadingFilter();
}
})
public void showLoadingFilter() {
popupFilterLoading.clear();
popupFilterLoading.add(new Label("Please wait"));
popupFilterLoading.setGlassEnabled(true);
popupFilterLoading.center();
isFilterLoading = true;
popupFilterLoading.show();
}
public void closeLoadingFilter() {
if (isFilterLoading) {
popupFilterLoading.hide();
isFilterLoading = false;
}
}
You can call methods asynchronously using a scheduler. The code below might solve your problem.
submit.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
showLoadingFilter();
// Waits for the loading pop-up to be displayed before starting anything
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
listValues.clear();
listFields.clear();
CreateListFiltersSingle();
GetFilterSingleOptions();
RunFilter(dashboardProductos);
DrawVisualizations2();
closeLoadingFilter();
}
});
}
I`m using GWT-Popup-Panel with the following code:
private static class MyPopup extends PopupPanel {
public MyPopup() {
// PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
// If this is set, the panel closes itself automatically when the user
// clicks outside of it.
super(true);
// PopupPanel is a SimplePanel, so you have to set it's widget property to
// whatever you want its contents to be.
setWidget(new Label("Click outside of this popup to close it"));
}
}
public void onModuleLoad() {
final Button b1 = new Button("About");
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
final MyPopup g = new MyPopup();
g.setWidget(RootPanel.get("rightagekeyPanel"));
g.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
public void setPosition(int offsetWidth, int offsetHeight) {
g.setPopupPosition(b1.getAbsoluteLeft(), b1.getAbsoluteTop());
g.setAutoHideEnabled(true);
}
});
g.setVisible(true);
g.setWidth("500px");
g.setHeight("500px");
g.show();
}
});
It does appear when clicking Button b1, but not when clicking it the second time. What is wrong?
Make one popup, outside of your ClickHandler, at the same level as your Button. You also don't need that PositionCallback to center your popup. You can just call g.center() to show it and center it. It's a known issue on the GWT support pages that it won't center properly if you don't set a width to it. It will center properly if you give your popup a proper width.
The reason it doesn't show again is because you remove the widget inside RootPanel.get("rightagekeyPanel") and put it into your popup. It is no longer there the next time you try to do it.
A widget can only be in one place at a time, so if you remove it from its parent, keep track of it with a variable or something, so you can re-use it. Otherwise, you must re-instantiate the widget.
public void onModuleLoad() {
final Button b1 = new Button("About");
final MyPopup g = new MyPopup(); //create only one instance and reuse it.
g.setAutoHideEnabled(true);
g.setSize("500px", "500px"); //sets width AND height
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
g.setWidget(RootPanel.get("rightagekeyPanel"));//DON'T DO THIS.
g.center();//will show it and center it.
}
});
}
Just say in my case I had to add some widget to make the PopUpPanel appear. Try using a label to make sure the Popup is showing.
PopupPanel popup = new PopupPanel();
popup.setVisible(true);
popup.center();
popup.show();
popup.setWidth("500px");
popup.setHeight("500px");
popup.add(new Label("Test"));
I have a window resizeHandler, it is working fine. Except that I'm just interested in the final dimension of the window, in other words, I'm interested in the dimension of the window when the mouse button is released. Is there a way I can listen to window mouse events?
I've written a piece of code that accomplishes my goal but I'd prefer something more obvious. resizeRequestId is a field:
private void processResize() {
final Timer timer = new Timer() {
final Size windowSize = getWindowDimention();
final int requestId = ++resizeRequestId;
#Override
public void run() {
final boolean isLatestRequest = requestId == resizeRequestId;
if (isLatestRequest) {
//DO SOMETHING WITH windowSize
}
}
};
timer.schedule(100);
}
The browser doesn't pass along events that happen outside of the page, and the window resize counts as outside the page. That said, you still get a hook for resize actions of the entire browser window:
Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
//get, process window resize behavior
}
});
For some browsers and some resizes, you'll get lots of events as the mouse moves, and for others, you'll only get the complete one. In firefox, for example, the resize handle in the corner sends every change that is made, while the side handles each send only once the user releases the mouse. Minimizing and maximizing the window also result in a single event.
Colin is right.
Moreover, if you do a lot of calculations "on resize" (e.g. forceLayout), it is a good idea to add a Timer. This way the calculations will be fired once every...10th of second?
final Timer resizeTimer = new Timer() {
#Override
public void run() {
mainPanel.forceLayout();
}
};
Window.addResizeHandler(new ResizeHandler() {
public void onResize(ResizeEvent event) {
int height = event.getHeight();
mainPanel.setHeight(height + "px");
resizeTimer.cancel();
resizeTimer.schedule(100);
}
});
That's it
I am new to GWT and the web stuff.
I am working out my own project based on
http://code.google.com/p/cloud-tasks-io/source/browse/#svn%2Ftrunk%2FCloudTasks-AppEngine%2Fsrc%2Fcom%2Fcloudtasks%2Fclient
I am trying to use popup/dialog. The popup and dialog always show behind the widget. I keep googling around and the most relevant I found is this
http://groups.google.com/group/gwt-google-apis/browse_thread/thread/40db4fcbe10d2060 which does not provide any answer. Anyway, I have 3rd party library, bst-player 1.3, which uses flash. So I disabled it(later remove it too), the popup just won't come to the top! It is still hiding behind the widget.
I have learned that popuppanel/dialogpanel alikes do not need to get added to another widget. A different way of saying is that it is not a normal widget in a sense that it cannot attach to a parent but it attaches itself to the dom to guarantee being on top (from GWT composite widget )
I am at my wit end and I am here at SO ...
UPDATE
Here is my Popup class
public class PopUp {
static PopupPanel simplePopup;
public static void init() {
simplePopup = new PopupPanel(true);
simplePopup.hide();
simplePopup.setVisible(false);
// DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 3);
}
public static void showpopupmsg(String msg, int left, int top) {
if (simplePopup == null) {
init();
}
if (msg != null && !msg.equalsIgnoreCase("")) {
simplePopup.ensureDebugId("cwBasicPopup-simplePopup");
simplePopup.setWidget(new HTML(msg));
simplePopup.setVisible(true);
simplePopup.setPopupPosition(left, top);
simplePopup.setWidth("475px"); //575
simplePopup.setGlassEnabled(true);
simplePopup.show();
}
}
public static void show(String message){
if (simplePopup == null) {
init();
}
simplePopup.setGlassEnabled(true);
simplePopup.setTitle(message);
simplePopup.center();
}
}
Here is how I am calling
tasksTable.doneColumn.setFieldUpdater(new FieldUpdater<TaskProxy, Boolean>() {
public void update(int index, TaskProxy task, Boolean value) {
String msg = "Here is the popup. All the way underneath";
Widget source = tasksTable;
int left = source.getAbsoluteLeft() - 50;
// source.getAbsoluteLeft() + 25;
int top = source.getAbsoluteTop() - 25;
PopUp.showpopupmsg(msg, left, top); //Here is the calling method
TaskRequest request = requestFactory.taskRequest();
TaskProxy updatedTask = request.edit(task);
updatedTask.setDone(value);
request.updateTask(updatedTask).fire();
}
});
Here is how the Popup is beneath the widget.
The source of the problem has been quite elusive since I am still new to the webapp, yet, I finally solve it myself. The culprit is the CSS. It is defining the z-index for the whole thing to quite high as seen in the following code line 1333.
http://code.google.com/p/cloud-tasks-io/source/browse/trunk/CloudTasks-AppEngine/war/CloudTasks.css#1333
I have doubted about the z-index before and try it out with a paltry value 3 as seen in the commented out code segment of Popup class in question. I have to uncomment it and set it to 101.
DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 101);
I was , you know, #$%###$*.
z-index is only decides which widget should show on top..
the widget popup is under benath might be having z-index value high.
set the z-index for popup thru css (recomended) or DOM will work for you
According to my feeling, using static methods of your "PopUp" object is a bit strange...
In that way, I think things a relative to the top rather than caller object.
Maybe you could consider make your class 'Popup' extending 'popupanel'
and in your calling code, just make
new PopUp(msg,left,top).show() ;
I recently wrote my own solution for a popup panel that needs to be aligned with its caller. The solution consists out of an PopupPanel extension and a Button extension.
The button extension has an instance of the panel extension, and the moment it is clicked it gives its coordinates and width and height to its panel.
#Override
public void onClick(ClickEvent event) {
if (optionsPanel.isShowing()) {
optionsPanel.hide();
} else {
optionsPanel.setButtonBounds(new Bbox(
getAbsoluteLeft(), getAbsoluteTop(), getOffsetWidth(), getOffsetHeight()));
optionsPanel.show();
}
}
(The Bbox class is just a convenience class I could use for wrapping coordinates; write your own class or 4 methods for that matter)
The main work is then done in the onLoad() override of the PopupPanel, in which the coordinates of the button are used to position the panel;
#Override
protected void onLoad() {
super.onLoad();
if (null == bounds) {
super.hide();
} else {
left = (int) bounds.getX();
top = (int) bounds.getMaxY();
setPopupPosition(left, top);
}
}
(bounds are the coordinates of the button; getMaxY() == bottom coordinate of button)
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.)