Clever Geek Handbook

Popuppanel appears under widgets

I am new to GWT and web stuff.

I am developing 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 are always displayed behind the widgets. I keep searching googling and the most interesting I found is http://groups.google.com/group/gwt-google-apis/browse_thread/thread/40db4fcbe10d2060 which does not provide an answer. Anyway, I have a third party library, bst-player 1.3, which uses flash. So I turned it off (I delete it later too), the popup just won't appear on top! It is still hiding behind the widgets.

I found out that popuppanel / dialogpanel alikes doesn't need to be added to another widget . Another way to say it is not a normal widget in a sense, which it cannot attach to the parent element, but it attaches to the dom to ensure it sits on top (from a combo GWT widget )

I'm on my end and I'm 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();
    }
}

This is how I call

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();

  }
});

This is what the popup below looks like . enter image description here

+3


source to share


4 answers


The source of the problem is rather elusive as I am still not familiar with webapp, but finally I am solving it myself. The culprit is CSS. It defines the z-index for all of this to be quite high, as you can see from the next line of code 1333.

http://code.google.com/p/cloud-tasks-io/source/browse/trunk/CloudTasks-AppEngine/war/CloudTasks.css#1333

I used to doubt the z-index and tried it with a negligible value of 3 as seen in the commented code segment of the Popup class. I have to uncomment it and set it to 101.



DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 101);

I was, you know, # $% # @ # $ *.

+3


source


z-index decides which widget should show on top. the popup widget under benath can have a high z-index.



set z-index for popup css (recommended) or DOM will work for you

+1


source


My feeling is using static methods on your "PopUp" object is a bit weird ... So I think things are relative to the top, not the caller object.

Perhaps you could consider having your "Popup" class extend "popupanel" and in your codebase just do

new PopUp(msg,left,top).show() ;
0


source


I recently wrote my own solution for a popup bar that needs to be aligned with its caller. The solution consists of a PopupPanel extension and a Button extension.

The button extension has an instance of the panel extension, and the moment it is clicked gives its coordinates, width and height of the 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 that I could use to wrap the coordinates; write your own class or 4 methods for that matter)

The main work is done in the onLoad () override of PopupPanel, which uses the button coordinates 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);
        }
    }

(the borders are the coordinates of the button; getMaxY () == the bottom coordinate of the button)

0


source






More articles:


All Articles