【原創】Draw2D版本的標籤控件TabFolder實現

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);
	}


}

 效果見下圖：