带按钮的GWT PopupPanel

时间:2011-03-22 10:11:27

标签: java css gwt smartgwt

我有一个扩展smartgwt ImgButton的类。按下按钮时,应显示包含更多按钮的弹出窗口。这个弹出窗口中的按钮不应该像普通按钮一样呈现,而是像文本链接一样 - 所以我应用了一个自定义的CSS类。到目前为止一切正常。但是当我按下弹出窗口中的任何按钮时,按钮的背景变得透明,弹出窗口后面的文字会闪烁。这很难看,但我找不到解决这个问题的方法。

有人知道如何在按下按钮时保持背景颜色吗?

以下是代码:

import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;

public class MultiButton extends ImgButton {

    private PopupPanel popup;
    private VerticalPanel content;

    public MultiButton() {
        super();
        popup = new PopupPanel();
        popup.setAnimationEnabled(true);
        popup.setAutoHideEnabled(true);

        content = new VerticalPanel();
        popup.add(content);

        this.setWidth(18);
        this.setHeight(18);
        this.setShowRollOver(false);
        this.setShowDown(false);
        this.setSrc("person.png");
        this.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(final ClickEvent event) {
                popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {

                    @Override
                    public void setPosition(int offsetWidth, int offsetHeight) {
                        int left = event.getX() + 7;
                        int top = event.getY() + 7;

                        popup.setPopupPosition(left, top);
                    }
                });
            }
        });
    }

    public void addMultiButtonEntry(String name, ClickHandler handler) {        
        Button b = new Button(popup.getStyleName());
        b.addClickHandler(handler);

        b.setShowHover(false);
        b.setShowRollOver(false);

        b.setBaseStyle("nt-multibutton-button");

        b.setAlign(Alignment.LEFT);

        content.add(b);
    }
}

这是CSS定义:

.nt-multibutton-button {
    border: 0px !important;
    color: #657380;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    width:90%;
    background-color: white;    
}

感谢您的每一个提示!

PS:我知道混合SmartGWT和GWT组件并不是一种好的风格,但是我没有在SmartGWT中找到一个PopUp而且我不想自己编写代码。

1 个答案:

答案 0 :(得分:3)

我刚刚发现了如何做到这一点。

我在按钮中添加了样式主名称和样式名称,现在它可以正常工作:)

因此弹出窗口的按钮现在创建如下:

    Button b = new Button(name);
    b.addClickHandler(handler);

    b.setShowHover(false);
    b.setShowRollOver(false);

    String css = "nt-multibutton-button";
    b.setStylePrimaryName(css);
    b.setBaseStyle(css);
    b.setStyleName(css);

    b.setAlign(Alignment.LEFT);

    content.add(b);