GXT之旅:第八章:Portal&Drag-Drop——项目使用Drag-Drop重构(1)

Drag-Drop重构

我们现在针对RSSReader项目,使用Drag-Drop的Portal布局效果。下面就开始使用GXT内建好的DragSource和DropTarget。

首相,我们要做的是允许用户可以从NavPortlet中FeedList的里面拖拽一条feed,然后可以放置到FeedPortlet,接下来其feed的内容会自动的通过ItemGrid显示出来。

  • RSSReaderConstants类,定义一个新的恒量——FEED_DD_GROUP用来作为drag-drop分组用的‘字符串组名’

public static final String FEED_DD_GROUP = "feedDDGroup";

  • 在FeedList.onRender()方法里面,在add(feedList);之前加入如下代码——新建DragSource包装feedList,并且将其选中的object传入到DNDEvent(注意选中的可能是多个)。

		DragSource source = new DragSource(feedList) {
			@Override
			protected void onDragStart(DNDEvent event) {
				event.setData(feedList.getSelection());
			}
		};
		source.setGroup(RSSReaderConstants.FEED_DD_GROUP);
		
		add(feedList);//above

  • 上面的代码中,还将source设置了group——FEED_DD_GROUP。
  • 在FeedPortlet类中,新建一个方法onFeedsDropped()——此方法,会通过DNDEvent里取出其携带的objects。然后会根据objects的size生成相同size的ItemGrid,后续的操作就类似于FeedView里面的操作了。

	private void onFeedsDropped(DNDEvent event) {
		List<BeanModel> beanModels = event.getData();
		for (BeanModel beanModel : beanModels) {
			Feed feed = beanModel.getBean();
			final ItemGrid itemGrid = new ItemGrid(feed);
			TabItem tabItem = new TabItem(feed.getTitle());
			tabItem.setId(feed.getUuid());
			tabItem.setData("feed", feed);
			tabItem.add(itemGrid);
			tabItem.addListener(Events.Select, new Listener<TabPanelEvent>() {
				@Override
				public void handleEvent(TabPanelEvent be) {
					itemGrid.resetSelection();
				}
			});
			tabItem.setClosable(true);
			feedPanel.addTab(tabItem);
		}
	}

  • 接下来是要完成DropTarget的定义部分。在FeedPortlet里面,我们在其onRender()方法里面处理,将FeedPortlet自己用DropTarget包装起来。

	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);
		DropTarget target = new DropTarget(this);
	}

  • Override DropTarget.onDragDrop(DNDEvent event)方法,将event传入到先前定义的onFeedsDropped(event)方法里去

	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);
		DropTarget target = new DropTarget(this) {
			@Override
			protected void onDragDrop(DNDEvent event) {
				super.onDragDrop(event);
				onFeedsDropped(event);
			}
		};
	}

  • target设置好了之后,设置其属性——setOperation(),因为是默认是move操作,所以要修改为copy操作。在设置target的group

	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);
		DropTarget target = new DropTarget(this) {
			@Override
			protected void onDragDrop(DNDEvent event) {
				super.onDragDrop(event);
				onFeedsDropped(event);
			}
		};
		
		target.setOperation(DND.Operation.COPY);
		target.setGroup(RSSReaderConstants.FEED_DD_GROUP);
	}

  • 开始运行程序,效果图如下~~~~











你可能感兴趣的:(object,String)