欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【原创】Draw2D版本的标签控件TabFolder实现

程序员文章站 2024-03-24 11:24:46
...

TabFolder是一个很有用的控件,尤其在进行单界面内的多页布局时。使用Draw2D开发的时候却会发现它本身没有实现TabFolder,在网上搜索一番未果,索性自己实现好了。

 

这里给出一个简单的实现,原理很简单,使用了Draw2d的GridLayout和StackLayout布局。

 

首先需要一个Folder容器,这里扩展Panel实现,直接上代码好了,

 

TabFolderFigure.java

 

/*******************************************************************************
 * Copyright (c) 2005-2011, Chinese Eclipse Community(CEC) All rights reserved. 
 * This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 *  http://www.ceclipse.org
 *
 * Contributors:
 *   [email protected] - initial API and implementation 
 *******************************************************************************/
package org.eclipse.gef.examples.shapes.figures;

import java.util.ArrayList;
import java.util.List;

import org.eclipse.draw2d.ColorConstants;
import org.eclipse.draw2d.Figure;
import org.eclipse.draw2d.FlowLayout;
import org.eclipse.draw2d.GridData;
import org.eclipse.draw2d.GridLayout;
import org.eclipse.draw2d.LineBorder;
import org.eclipse.draw2d.Panel;
import org.eclipse.draw2d.StackLayout;

/**
 * 便签页容器
 * 
 * @author [email protected]
 * 
 */
public class TabFolderFigure extends Panel {

	/**
	 * @return the items
	 */
	public List<TabItemFigure> getItems() {
		return items;
	}

	public static final int TAB_ITEM_HEIGHT = 25;

	/**
	 * 标题部分
	 */
	private Figure itemPanel;

	/**
	 * 控件区域部分
	 */
	private Panel contentPanel;

	private StackLayout stackLayout;

	private List<TabItemFigure> items;

	public TabFolderFigure() {
		super();
		init();
	}

	private void init() {

		items = new ArrayList<TabItemFigure>();
		GridLayout gridLayout;
		gridLayout = new GridLayout();
		gridLayout.verticalSpacing = 0;
		stackLayout = new StackLayout();
		contentPanel = new Panel();
		contentPanel.setBackgroundColor(ColorConstants.white);

		itemPanel = new Figure();

		this.setLayoutManager(gridLayout);
		this.add(itemPanel);
		this.add(contentPanel);
		this.setBorder(new LineBorder());

		GridData item_gd = new GridData(GridData.FILL_HORIZONTAL);
		item_gd.heightHint = TAB_ITEM_HEIGHT;
		gridLayout.setConstraint(itemPanel, item_gd);
		FlowLayout flowlayout = new FlowLayout();
		flowlayout.setMajorSpacing(0);//填充无间隔
		flowlayout.setMinorSpacing(0);//填充无间隔
		itemPanel.setLayoutManager(flowlayout);

		GridData content_gd = new GridData(GridData.FILL_BOTH);
		gridLayout.setConstraint(contentPanel, content_gd);
		contentPanel.setLayoutManager(stackLayout);
	}

	/**
	 * 添加TabItem
	 * 
	 * @param item
	 */
	public void addItem(TabItemFigure item) {
		itemPanel.add(item.getItem());
		contentPanel.add(item.getContentArea());
		item.getContentArea().setVisible(true);
		items.add(item);
	}

	/**
	 * 选中某个便签项
	 * @param item
	 */
	public void select(TabItemFigure item) {
		for (TabItemFigure tif : items) {
			if (tif.equals(item)) {
				tif.onTop();
			} else {
				tif.disOnTop();
			}
		}
	}
}

 很简单,将一个完整的Panel分成了上下两部分,分别用于安放标签额度标题和具体内容。

 

下面是TabItem实现,这里使用Button表示标签的标题,Panel作为主组件区域。

TabItemFigure.java

/*******************************************************************************
 * Copyright (c) 2005-2011, Chinese Eclipse Community(CEC) All rights reserved. 
 * This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 *  http://www.ceclipse.org
 *
 * Contributors:
 *   [email protected] - initial API and implementation 
 *******************************************************************************/
package org.eclipse.gef.examples.shapes.figures;

import org.eclipse.draw2d.ActionEvent;
import org.eclipse.draw2d.ActionListener;
import org.eclipse.draw2d.Button;
import org.eclipse.draw2d.ButtonModel;
import org.eclipse.draw2d.ColorConstants;
import org.eclipse.draw2d.Figure;
import org.eclipse.draw2d.FigureUtilities;
import org.eclipse.draw2d.GridData;
import org.eclipse.draw2d.GridLayout;
import org.eclipse.draw2d.Panel;
import org.eclipse.jface.resource.JFaceResources;

/**
 * 便签页
 * 
 * @author [email protected]
 * 
 */
public class TabItemFigure {

	private static final int WIDTH_DIFF = 10;

	private Button item;

	private Panel contentArea;

	private GridLayout gridLayout;

	private TabFolderFigure tabFolder;

	private boolean onTop;

	/**
	 * 
	 * @param tabFolder
	 * @param name
	 */
	public TabItemFigure(TabFolderFigure tabFolder, String name) {
		this.tabFolder = tabFolder;
		item = new Button(name);
		item.setPreferredSize(FigureUtilities.getTextWidth(name, JFaceResources
				.getDefaultFont())
				+ WIDTH_DIFF, TabFolderFigure.TAB_ITEM_HEIGHT);
		contentArea = new Panel();
		gridLayout = new GridLayout();
		gridLayout.marginHeight = 0;
		gridLayout.marginWidth = 0;
		contentArea.setLayoutManager(gridLayout);
		onTop = false;
		init();

	}

	private void init() {
		ButtonModel model = new ButtonModel();
		model.addActionListener(new ActionListener() {
			@Override
			public void actionPerformed(ActionEvent event) {
				tabFolder.select(TabItemFigure.this);
			}
		});
		item.setModel(model);

	}

	/**
	 * 刷新组件状态
	 */
	protected void refreshState() {
		if (onTop) {
			getItem().setBackgroundColor(ColorConstants.white);
			getContentArea().setVisible(true);
		} else {
			getItem().setBackgroundColor(ColorConstants.button);
			getContentArea().setVisible(false);
		}
	}

	/**
	 * @return the item
	 */
	public Button getItem() {
		return item;
	}

	/**
	 * @return the contantArea
	 */
	public Panel getContentArea() {
		return contentArea;
	}

	/**
	 * 设置主控件
	 * 
	 * @param figure
	 */
	public void setContent(Figure figure) {
		contentArea.add(figure);
		GridData gd = new GridData(GridData.FILL_BOTH);
		gridLayout.setConstraint(figure, gd);
	}

	/**
	 * 最前
	 */
	public void onTop() {
		onTop = true;
		refreshState();
	}

	/**
	 * 取消最前
	 */
	public void disOnTop() {
		onTop = false;
		refreshState();
	}
}

 

下面测试一下,

/*******************************************************************************
 * Copyright (c) 2005-2011, Chinese Eclipse Community(CEC) All rights reserved. 
 * This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 *  http://www.ceclipse.org
 *
 * Contributors:
 *   [email protected] - initial API and implementation 
 *******************************************************************************/
package org.eclipse.gef.examples.shapes.figures;

import org.eclipse.draw2d.Button;
import org.eclipse.draw2d.ColorConstants;
import org.eclipse.draw2d.Ellipse;
import org.eclipse.draw2d.Figure;
import org.eclipse.draw2d.FigureCanvas;
import org.eclipse.draw2d.GridData;
import org.eclipse.draw2d.GridLayout;
import org.eclipse.draw2d.Label;
import org.eclipse.draw2d.LineBorder;
import org.eclipse.draw2d.Panel;
import org.eclipse.draw2d.XYLayout;
import org.eclipse.draw2d.geometry.Rectangle;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;

/**
 * TODO 此处填写 class 信息
 * 
 * @author 
 * @date 2011-4-19
 */
public class Test {
	

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		Display display = new Display();
		Shell shell = new Shell(display);

		Test app = new Test(shell);

		shell.open();

		while (!shell.isDisposed()) {
			if (!display.readAndDispatch()) {
				display.sleep();
			}
		}
		display.dispose();
	}

	public Test(Shell shell) {
		shell.setText("Tab folder demo");
		shell.setBounds(100, 100, 500, 500);
		shell.setLayout(new FillLayout(SWT.VERTICAL));
		FigureCanvas canvas = new FigureCanvas(shell);
		
		Figure root = new Figure();
		GridLayout layout = new GridLayout();
		root.setLayoutManager(layout);
		
		TabFolderFigure tabFolder = new TabFolderFigure();
		TabItemFigure item1 = new TabItemFigure(tabFolder,"item1");
		
		Figure ic1= new Panel();
		ic1.setBackgroundColor(ColorConstants.lightBlue);
		ic1.setLayoutManager(new XYLayout());
		Label label = new Label("AAAAAAAAAAA");
		label.setBounds(new Rectangle(10,10,100,50));
		label.setBorder(new LineBorder());
		ic1.add(label);
		label.setBackgroundColor(ColorConstants.red);
		item1.setContent(ic1);
		tabFolder.addItem(item1);
		
		item1 = new TabItemFigure(tabFolder, "item2222222221");
		ic1= new Panel();
		ic1.setBackgroundColor(ColorConstants.lightGreen);
		Button button = new Button("Button");
		button.setBounds(new Rectangle(10,10,100,20));
		ic1.add(button);
		label.setBackgroundColor(ColorConstants.red);
		item1.setContent(ic1);
		tabFolder.addItem(item1);
		
		item1 = new TabItemFigure(tabFolder, "item23331");
		ic1= new Panel();
		Ellipse shape = new Ellipse();
		shape.setBounds(new Rectangle(10,10,300,300));
		ic1.add(shape);
		ic1.setBackgroundColor(ColorConstants.white);
		item1.setContent(ic1);
		tabFolder.addItem(item1);
		
		
		root.add(tabFolder);
		
		GridData gd = new GridData(GridData.FILL_BOTH);
		layout.setConstraint(tabFolder, gd);
		
		canvas.setContents(root);
	}


}

 效果见下图:

【原创】Draw2D版本的标签控件TabFolder实现

 

【原创】Draw2D版本的标签控件TabFolder实现

 

【原创】Draw2D版本的标签控件TabFolder实现