Question

我想创建如下对话框...

public final class ChatDialog extends DialogBox {
private TextBox txtInputMsg;
private ScrollPanel pnlScroll;
private VerticalPanel pnlMessage;
private HorizontalPanel pnlMembers;
static final Logger logger = Logger.getLogger(ChatDialog.class.getName());
private VerticalPanel pnlMain = new VerticalPanel();

private static final ChatMessageTemplate TEMPLATES = GWT.create(ChatMessageTemplate.class);
private AtmosphereRequest rpcRequest;
private AuthenticatedUser loginUser;

public ChatDialog() {
    super(false, false);
    setAnimationEnabled(true);
    setGlassEnabled(false);
    // Create anchor we want to accept click events
    final Anchor closeButton = new Anchor("x");
    closeButton.setStyleName("dialogCloseButton");

    // Add handler to anchor
    closeButton.addClickHandler(new ClickHandler() {
        public void onClick(final ClickEvent event) {
            hide();
        }
    });
    final HTML caption = ((HTML) getCaption());
    final Element title = DOM.createLabel();
    title.setInnerText("Chat");

    // Add anchor to caption
    caption.getElement().appendChild(title);
    caption.getElement().appendChild(closeButton.getElement());

    // Add click handler to caption
    caption.addClickHandler(new ClickHandler() {
        public void onClick(final ClickEvent event) {
            // Get x,y caption click relative to the anchor
            final int x = event.getRelativeX(closeButton.getElement());
            final int y = event.getRelativeY(closeButton.getElement());

            // Check click was within bounds of anchor
            if (x >= 0 && y >= 0 && x <= closeButton.getOffsetWidth()
                    && y <= closeButton.getOffsetHeight()) {
                // Raise event on anchor
                closeButton.fireEvent(event);
            }
        }
    });
    pnlMembers = new HorizontalPanel();
    pnlMembers.setWidth("400px");
    pnlMembers.add(ChatMembers.getInstance());
    pnlMessage = new VerticalPanel();
    pnlMessage.setWidth("100%");
    pnlScroll = new ScrollPanel(pnlMessage);
    pnlScroll.getElement().setAttribute("style", "border: 1px solid silver;"
            + "padding: 2px;margin-bottom: 5px;");
    pnlScroll.setSize("400px", "420px");
     pnlMain.add(pnlMembers);
    // contents panel
    pnlMain.add(pnlScroll);
    // footer control panel
    pnlMain.add(initFooterPanel());
    add(pnlMain);
}

private HorizontalPanel initFooterPanel() {
    HorizontalPanel pnlControl = new HorizontalPanel();
    pnlControl.getElement().setAttribute("style", "margin-top: 5px;");

    txtInputMsg = new TextBox();
    txtInputMsg.setWidth("400px");
    txtInputMsg.addKeyDownHandler(new KeyDownHandler() {

        public void onKeyDown(final KeyDownEvent event) {
            if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
                if (txtInputMsg.getText().trim().length() > 0) {
                    try {
                        ChatEvent e = new ChatEvent(loginUser.getUserName(), txtInputMsg.getText(), Status.ONLINE);
                        rpcRequest.push(e);
                    }
                    catch (SerializationException ex) {
                        logger.log(Level.SEVERE, "Failed to serialize message", ex);
                    }
                    txtInputMsg.setText("");
                    txtInputMsg.setFocus(true);
                }
            }
        }

    });

    pnlControl.add(txtInputMsg);
    return pnlControl;
}

public void init(final AuthenticatedUser loginUser) {
    this.loginUser = loginUser;
    ChatMembers.getChatMembers();
    initChatListener();
    setPopupPositionAndShow(new PositionCallback() {

        public void setPosition(final int offsetWidth, final int offsetHeight) {
            setPopupPosition(getParent().getOffsetWidth() - getOffsetWidth() - 20,
                    getParent().getOffsetHeight() - getOffsetHeight());
        }

    });
    show();

}

private DialogCloseHandler handler;

public void addDialogCloseHandler(final DialogCloseHandler handler) {
    this.handler = handler;
}

public interface DialogCloseHandler {
    void onUpdate();
    void onCancel();
}

public void onSave() {
}

public void onEscape() {
    hide();
    handler.onCancel();
}

private void initChatListener() {
    RPCSerializer rpcSerializer = GWT.create(RPCSerializer.class);

    AtmosphereRequestConfig rpcRequestConfig = AtmosphereRequestConfig.create(rpcSerializer);
    rpcRequestConfig.setUrl(GWT.getModuleBaseURL() + "atmosphere/rpc");
    rpcRequestConfig.setTransport(AtmosphereRequestConfig.Transport.STREAMING);
    rpcRequestConfig.setFallbackTransport(AtmosphereRequestConfig.Transport.LONG_POLLING);
    final AtmosphereMessageHandler messageHandler = new AtmosphereMessageHandler() {

        public void onMessage(final AtmosphereResponse response) {
            List<ChatEvent> messages = response.getMessages();
            for (ChatEvent event : messages) {
                if (event.getStatus() == Status.LOGIN) {
                    if (!event.getUserName().equals(loginUser.getUserName())) {
                        pnlMessage.add(new HTML(TEMPLATES.notifyLoginUser(event.getUserName())));
                    }
                    ChatMembers.getChatMembers();
                }
                else if (event.getStatus() == Status.ONLINE) {
                    logger.info("received message through RPC: " + event.toString());
                    if (event.getUserName().equals(loginUser.getUserName())) {
                        pnlMessage.add(new HTML(TEMPLATES.getFormattedMessage(event.getUserName(),
                                SafeHtmlUtils.fromTrustedString(event.getMessage()), "myMessage")
                                .asString()));
                    }
                    else {
                        pnlMessage.add(new HTML(TEMPLATES.getFormattedMessage(event.getUserName(),
                                SafeHtmlUtils.fromTrustedString(event.getMessage()), "receivedMessage")
                                .asString()));
                    }
                }
                else if (event.getStatus() == Status.OFFLINE) {
                    pnlMessage.add(new HTML(TEMPLATES.notifyLogoutUser(event.getUserName())));
                    ChatMembers.getChatMembers();
                }

            }
            pnlScroll.scrollToBottom();
        }
    };

    rpcRequestConfig.setOpenHandler(new AtmosphereOpenHandler() {
        public void onOpen(final AtmosphereResponse response) {
            logger.info("RPC Connection opened");
            try {
                ChatEvent e = new ChatEvent(loginUser.getUserName(), txtInputMsg.getText(), Status.LOGIN);
                rpcRequest.push(e);
            }
            catch (SerializationException ex) {
                logger.log(Level.SEVERE, "Failed to serialize message", ex);
            }
        }
    });

    rpcRequestConfig.setCloseHandler(new AtmosphereCloseHandler() {
        public void onClose(final AtmosphereResponse response) {
            logger.info("RPC Connection closed");
            try {
                ChatEvent e = new ChatEvent(loginUser.getUserName(), txtInputMsg.getText(), Status.OFFLINE);
                rpcRequest.push(e);
            }
            catch (SerializationException ex) {
                logger.log(Level.SEVERE, "Failed to serialize message", ex);
            }
        }
    });

    rpcRequestConfig.setMessageHandler(messageHandler);
    Atmosphere atmosphere = Atmosphere.create();
    rpcRequest = atmosphere.subscribe(rpcRequestConfig);
}

已编辑：显示完整代码，但可能包含实际问题的非必要代码。

但是我的 pnlMessage 溢出了，我无法达到预期的效果（应滚动）。我使用Atmosphere-GWT作为聊天程序。

enter image description here

我错了什么？我该如何解决？非常感谢。

Answer 1

我的问题是由于我的CSS

pnlScroll.getElement().setAttribute("style", "border: 1px solid silver;"
        + "padding: 2px;margin-bottom: 5px;");
pnlScroll.setSize("400px", "420px");

我不知道为什么我会失去overflow: auto;。添加这个CSS后，我的问题很好。

GET ScrollPanel在对话框中无法正常工作

1 个答案: