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)
Related
as per the material guidelines on transitions, I want to establish a certain look and feel on app screens to convey a hierarchy for these. Meaning, everything that transitions left to right is on same level or importance. Smaller forms or brief user inputs will transition in and out as simple popups, not horizontally but vertically.
Expected behaviour:
The slide form uses the default transition. Show() will slide the source to the left and the destination slides in from the right. showback() will slide the source in from the left and the destination leaves to the right.
The popup form uses a custom transition: show() will cause the source to remaining in place (not slide or transition in any other way) and the destination (the popup) will slide in from below. Showback() will cause the source (the popup) to slide out towards the bottom, revealing the destination (the main window) underneath.
Actual Behaviour
slide form works as expected in my scenario.
show() causes the popup form to slide into the screen from the bottom, while the source form stays in place, being covered up (as expected). BUT the showback() causes the main window to slide in from the top, covering the popup screen.
Full code sample to show actual behavior
public class MyApplication {
private Form current;
private Resources theme;
private Transition defaultInTrans = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, true, 300);
private Transition defaultOutTrans = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, true, 300);
private Transition popupInTrans = CommonTransitions.createCover(CommonTransitions.SLIDE_VERTICAL, false, 300);
private Transition popupOutTrans = CommonTransitions.createSlide(CommonTransitions.SLIDE_VERTICAL, false, 300);
public void init(Object context) {
theme = UIManager.initFirstTheme("/theme");
Toolbar.setGlobalToolbar(true);
}
public void start() {
if (current != null) {
current.show();
return;
}
new MainForm().show();
}
public void stop() {
current = getCurrentForm();
if (current instanceof Dialog) {
((Dialog) current).dispose();
current = getCurrentForm();
}
}
public void destroy() {
}
class MainForm extends Form {
public MainForm() {
setLayout(BoxLayout.y());
Button slideBut = new Button("Slide Form");
Button popBut = new Button("Popup Form");
add(slideBut).add(popBut);
slideBut.addActionListener(e -> {
new SlideForm().show();
});
popBut.addActionListener(e -> {
new PopupForm(this).show();
});
}
}
class SlideForm extends Form {
public SlideForm() {
Style bg = getContentPane().getUnselectedStyle();
bg.setBgTransparency(255);
bg.setBgColor(0x00ff00);
getToolbar().setBackCommand("", e -> {
new MainForm().showBack();
});
add(new Label("Slide Form content"));
}
}
class PopupForm extends Form {
public PopupForm(Form orig) {
Style bg = getContentPane().getUnselectedStyle();
bg.setBgTransparency(255);
bg.setBgColor(0xff0000);
getToolbar().setBackCommand("", e -> {
new MainForm().showBack();
orig.setTransitionInAnimator(defaultInTrans);
orig.setTransitionOutAnimator(defaultOutTrans);
});
add(new Label("This is a popup!"));
// remove source animation to remain in place
orig.setTransitionInAnimator(null);
orig.setTransitionOutAnimator(null);
// add transition for target popup to appear and vanish from/to the bottom
setTransitionInAnimator(popupInTrans);
setTransitionOutAnimator(popupOutTrans);
}
}
}
Having different CommonTransition types, the in transition vs the out transition, the transition direction parameterand on top of that the direction of show() vs showback() is quite confusing.
how can I achieve the expected behaviour for the popup form to slide OUT correctly?
is there a better way or less code required to achieve this?
Thank you.
Cover has an in/out effect where slide only has an out effect. When you slide from form A to form B there is one motion including both forms that works exactly the same in reverse. However, with cover it slides on top of form A while the latter stays in place then slides off of it making it look like form A has been under it all along.
That means both transition in and out are used to convey both cover modes. However this can collide with the transition out of form A so we need to temporarily disable it.
E.g.:
removeTransitionsTemporarily(backTo);
f.setTransitionInAnimator(CommonTransitions.createCover(CommonTransitions.SLIDE_VERTICAL, false, 300));
f.setTransitionOutAnimator(CommonTransitions.createUncover(CommonTransitions.SLIDE_VERTICAL, true, 300));
public static void removeTransitionsTemporarily(final Form f) {
final Transition originalOut = f.getTransitionOutAnimator();
final Transition originalIn = f.getTransitionInAnimator();
f.setTransitionOutAnimator(CommonTransitions.createEmpty());
f.setTransitionInAnimator(CommonTransitions.createEmpty());
f.addShowListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent evt) {
f.setTransitionOutAnimator(originalOut);
f.setTransitionInAnimator(originalIn);
f.removeShowListener(this);
}
});
}
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"));
calling .center() makes the panel center on the entire page.. I'd like to have it dead center of the current view port... additionally I'd like to prevent scrolling.. but maybe I'll come back to that one.
Dead center is left for an exercise for the user, but the key component is Window.getScrollTop() and Window.getScrollLeft()
The standard center() method does not do what you want. So you have to calculate the position yourself. There is one big problem that is your popup does not have a size before it is actually shown. The size of any DOM element can not be queried until it is fully attached to the DOM. You have to inherit the GWT popup class and overriding the onLoad() method to get the size of the popup. Try something like this:
public class CenteredDialogBox extends DialogBox {
private Widget _parent;
public CenteredDialogBox(Widget parent) {
_parent = parent;
}
#Override
public void onLoad() {
super.onLoad();
int parentMiddle = _parent.getAbsoluteLeft() + _parent.getOffsetWidth() / 2;
int popupLeft = parentMiddle - getOffsetWidth() / 2;
int parentCenter = _parent.getAbsoluteTop() + _parent.getOffsetHeight() / 2;
int popupTop = parentCenter - getOffsetHeight() / 2;
setPopupPosition(popupLeft, popupTop);
}
}
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 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.