Scout/HowTo/3.8/Showing tabs at bottom of page with SWT

The Scout documentation has been moved to https://eclipsescout.github.io/.

This how-to describes how to add a new abstract class for a TabBox which can be configured to show the tabs either at the top (default) or bottom.

Steps

Interface

First, we create an interface ITabBoxBottomAligned in the client:

package org.eclipse.minicrm.client.ui.form.fields.ext;

import org.eclipse.scout.rt.client.ui.form.fields.tabbox.ITabBox;

public interface ITabBoxBottomAligned extends ITabBox {
  static String PROP_TAB_ALIGNED_BOTTOM = "alignedBottom";

  boolean isTabBottomAligned();

  void setTabBottomAligned(boolean tabBottomAligned);

}

Abstract class

Next we create an abstract class AbstractTabBoxBottomAligned in the client:

package org.eclipse.minicrm.client.ui.form.fields.ext;

import org.eclipse.scout.commons.annotations.ConfigProperty;
import org.eclipse.scout.commons.annotations.Order;
import org.eclipse.scout.rt.client.ui.form.fields.tabbox.AbstractTabBox;

public abstract class AbstractTabBoxBottomAligned extends AbstractTabBox implements ITabBoxBottomAligned {

  @Override
  public boolean isTabBottomAligned() {
    return propertySupport.getPropertyBool(PROP_TAB_ALIGNED_BOTTOM);
  }

  @Override
  public void setTabBottomAligned(boolean tabAtBottomAligned) {
    propertySupport.setPropertyBool(PROP_TAB_ALIGNED_BOTTOM, tabAtBottomAligned);
  }

  @ConfigProperty(ConfigProperty.BOOLEAN)
  @Order(1000)
  protected boolean getConfiguredTabBottomAligned() {
    return false;
  }

  @Override
  protected void initConfig() {
    super.initConfig();
    setTabBottomAligned((getConfiguredTabBottomAligned()));
  }

}

SWT implementation

Next we create the Swt implementation SwtScoutTabBoxBottomAligned:

package org.eclipse.minicrm.ui.swt.form.fields.ext;

import org.eclipse.minicrm.client.ui.form.fields.ext.ITabBoxBottomAligned;
import org.eclipse.scout.rt.ui.swt.form.fields.tabbox.SwtScoutTabBox;
import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Composite;


public class SwtScoutTabBoxBottomAligned extends SwtScoutTabBox {

  @Override
  protected void attachScout() {
    super.attachScout();
    updateAlignmentFromScout();
  }

  @Override
  public ITabBoxBottomAligned getScoutObject() {
    return (ITabBoxBottomAligned) super.getScoutObject();
  }

  protected void updateAlignmentFromScout() {
    getSwtField().setTabPosition(getScoutObject().isTabBottomAligned() ? SWT.BOTTOM : SWT.TOP);
    getSwtContainer().layout(true);
  }

  @Override
  protected void initializeSwt(Composite parent) {
    super.initializeSwt(parent);
    updateAlignmentFromScout();
  }

  /**
   * scout property observer
   */
  @Override
  protected void handleScoutPropertyChange(String name, Object newValue) {
    super.handleScoutPropertyChange(name, newValue);
    if (name.equals(ITabBoxBottomAligned.PROP_TAB_ALIGNED_BOTTOM)) {
      updateAlignmentFromScout();
    }
  }
}

Registering the extension

Finally, in the SWT plugin.xml we add an entry to the extension point formfields:

     <formField
           active="true"
           modelClass="org.eclipse.minicrm.client.ui.form.fields.ext.AbstractTabBoxBottomAligned"
           name="Bottom Aligned Tab Box"
           scope="default">
        <uiClass
              class="org.eclipse.minicrm.ui.swt.form.fields.ext.SwtScoutTabBoxBottomAligned">
        </uiClass>
     </formField>

Result

SDK

In the SDK, we now have the option to select if the tabs are shown at the top (unchecked) or bottom (checked).

SWT application

In our application, having the tabs at the bottom looks like this:

If we were adventurous, we could even swap the position of the tabs at runtime by calling

setTabBottomAligned(!isTabBottomAligned());

Swing application

Even though we did not implement anything for our extension for Swing clients, they still work with our extended class except that it behaves exactly like a TabBox element (i.e. the bottom alignment configuration is ignored).