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位置定义字符串表格如下：

Code	Meaning
tl	The top left corner (default)
t	The center of the top edge
tr	The top right corner
l	The center of the left edge
c	In the center of the element
r	The center of the right edge
bl	The bottom left corner
b	The center of the bottom edge
br	The bottom right corner

下面开始修改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");
	}

}

第二章完毕