Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. This Developer Center contains the guides for Commerce 6.13.0 through 7.4.1.Visit new site

This version of Elastic Path Commerce is no longer supported or maintained. To upgrade to the latest version, contact your Elastic Path representative.

Tab Folder

Tab Folder

Overview

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.

Example

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.

            com.elasticpath.cmclient.catalog/src/main/java/com/elasticpath/cmclient/catalog/editors/product/ProductMerchandisingAssociationsPage.java
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);
	catalogTabItem.getSwtComposite().setLayoutData(tableFolderData.getSwtLayoutData());

	ProductMerchandisingAssociationsViewPart merchAssociationViewPart =
		new ProductMerchandisingAssociationsViewPart(catalog, (ProductEditor) getEditor());
	
	tabContainer.addDelegate(merchAssociationViewPart);
	merchAssociationViewPart.createControls(catalogTabItem, tableFolderData);
	tabViewParts.put(index, merchAssociationViewPart);
	
	getEditor().addPropertyListener(merchAssociationViewPart);
	
	index++;
}

this.tabFolder.getSwtTabFolder().addSelectionListener(new SelectionAdapter() {
	@Override
	public void widgetSelected(final SelectionEvent event) {
		tabViewParts.get(tabFolder.getSelectedTabIndex()).populateControls();
	}
});

this.tabFolder.setSelection(0);