Elastic Path Commerce Development

Tab Folder

Tab Folder


The EPTabFolder component abstracts the Eclipse's CTabFolder UI control. The tab folder basically represents a sequence of tabs of which only one is active at a time.

How to use it

Currently the tab folder component can be created from the IEpLayoutComposite.

IEpTabFolder IEpLayoutComposite.addTabFolder(final IEpLayoutData data)

The newly created instance allows adding tab items. Those tab items are abstracted by the IEpLayoutComposite. This way the developer can directly code the UI controls for each tab using the provided instance of IEpLayoutComposite interface.

There are two methods for adding a new tab:

IEpLayoutComposite IEpTabFolder.addTabItem(String tabName, Image image, int tabIndex)
IEpLayoutComposite IEpTabFolder.addTabItem(String tabName, Image image, int tabIndex, int numColumns, boolean equalWidthColumns);

The difference between them is that the first one creates a composite that has only 1 column.


In this example the mainComposite that is of type IEpLayoutComposite is populated by a tab folder and its tab items. This is the code representing the merchandising associations tab. The tab items are the catalogs the product belongs to. The view part is responsible for the contents of the respective Catalog tab item.

final IEpLayoutData tableFolderData = mainComposite.createLayoutData(IEpLayoutData.FILL, IEpLayoutData.FILL, true, true);

PolicyActionContainer tabContainer = addPolicyActionContainer("tab"); //$NON-NLS-1$

this.tabFolder = mainComposite.addTabFolder(tableFolderData);
int index = 0;
for (Catalog catalog : getSortedCatalogs()) {
	Image image = null;
	if (catalog.isMaster()) {
		image = CatalogImageRegistry.getImage(CatalogImageRegistry.CATALOG_MASTER);
	} else {
		image = CatalogImageRegistry.getImage(CatalogImageRegistry.CATALOG_VIRTUAL);
	final IEpLayoutComposite catalogTabItem = this.tabFolder.addTabItem(catalog.getName(), image, index , 1, false);

	ProductMerchandisingAssociationsViewPart merchAssociationViewPart =
		new ProductMerchandisingAssociationsViewPart(catalog, (ProductEditor) getEditor());
	merchAssociationViewPart.createControls(catalogTabItem, tableFolderData);
	tabViewParts.put(index, merchAssociationViewPart);

this.tabFolder.getSwtTabFolder().addSelectionListener(new SelectionAdapter() {
	public void widgetSelected(final SelectionEvent event) {