GXT之旅：第二章：GXT组件(9)——Popup位置

Popup的位置

先前的程序，运行后，会发现popup会在整个屏幕的中央显示。这样一来就有些显示的不友好，最好可以让Popup可以在Link feed button的上面直接的显示出来。之前用的是show()方法，未加入任何的设置，直接显示popup。为了让让Popup可以在Link feed button的上面直接的显示出来，我们就需要在show()方法上做文章了。在作此之前，先了解一些新的概念。

1. 一个button，从根本上说，就是个元素（element）。获得一个button的元素，需要使用Button.getElement()方法。
2. Popup类中public void show(Element elem, String pos)方法的pos参数，就是来规定Popup的显示位置的。Popup.show(Button.getElement(), “bl-tl?”)的意思是说——Popup的显示位置是以Button为基准，Popup的左下角（bl）对准Button的左上角（tl），来显示的。那么如果pos字符串以“?”号为结尾，就是在“bl-tl”位置定义的基础上，保证Popup的显示不会超出整个Viewport的范围之外。“-”之前的是Popup的基准锚点，“-”之后是Button.getElement()的基准锚点。
3. 其他的的pos位置定义字符串表格如下：

下面开始修改popup的弹出位置

• 找到RssNavigationPanel类，修改Link feed button的点击监听事件处理方法。

btnLinkFeed.addSelectionListener(new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        if (btnLinkFeed.isPressed()) {
          linkFeedPopup.show(btnLinkFeed.getElement(), "bl-tl?");
        } else {
          linkFeedPopup.hide();
        }
      }
    });

• 运行之后，参照“bl-tl?” 字符串的位置设置，理解一下linkFeedPopup.show(btnLinkFeed.getElement(), "bl-tl?");到底是说明了什么意思。

KeyListener

接下来进一步完善我们的RSSReader项目：参看上面的截图，当用户输入URL之后，通过点击add button完成整个操作。但是习惯上来说，用户输入URL之后会直接敲击一下回车键，来表明完成了整个操作。这样的操作过程也很快捷方便，不需要用户就动鼠标去点击button。

TextField component支持监听（KeyListener）键盘操作的事件。回车键的key code早已经在GWT里有了定义——KeyCodes.KEY_ENTER。因此我们要在TextField 注册一个KeyListener，当TextField里有回车键传入的时候，表明URL已经录入完毕。

如下是加入KeyListener的完整代码：

package com.danielvaughan.rssreader.client.components;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.Popup;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;

public class LinkFeedPopup extends Popup {
  private final TextField<String> tfUrl = new TextField<String>();

  public LinkFeedPopup() {
    setSize(300, 55);
    setBorders(true);
    setShadow(true);
    setAutoHide(false);
  }

  @Override
  protected void onRender(Element parent, int pos) {
    super.onRender(parent, pos);
    final Text txtExplaination = new Text("Enter a feed url");
    final Button btnAdd = new Button("add");
    btnAdd.addSelectionListener(new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        addFeed(tfUrl.getValue());
      }
    });

    tfUrl.addKeyListener(new KeyListener() {
      @Override
      public void componentKeyDown(ComponentEvent event) {
        if (event.getKeyCode() == KeyCodes.KEY_ENTER) {
          addFeed(tfUrl.getValue());
        }
      }
    });

    final BorderLayout layout = new BorderLayout();
    setLayout(layout);

    final BorderLayoutData northData = new BorderLayoutData(
        LayoutRegion.NORTH, 20);
    northData.setMargins(new Margins(2));
    add(txtExplaination, northData);

    final BorderLayoutData centerData = new BorderLayoutData(
        LayoutRegion.CENTER);
    centerData.setMargins(new Margins(2));
    add(tfUrl, centerData);

    final BorderLayoutData eastData = new BorderLayoutData(
        LayoutRegion.EAST, 50);
    eastData.setMargins(new Margins(2));
    add(btnAdd, eastData);
  }

  public void addFeed(String url) {
    Window.alert("We would now attempt to add " + url + " at this point");
  }

}

第二章完毕