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

{{ScoutPage|cat=HowTo 3.8}} 

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: 
<pre>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);

}
</pre> 
== Abstract class  ==

Next we create an abstract class '''AbstractTabBoxBottomAligned''' in the client: 
<pre>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()));
  }

}
</pre> 
== SWT implementation  ==

Next we create the Swt implementation '''SwtScoutTabBoxBottomAligned''': 
<pre>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()&nbsp;? SWT.BOTTOM&nbsp;: 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();
    }
  }
}
</pre> 
== Registering the extension  ==

Finally, in the SWT '''plugin.xml''' we add an entry to the extension point '''formfields''': 
<pre>     &lt;formField
           active="true"
           modelClass="org.eclipse.minicrm.client.ui.form.fields.ext.AbstractTabBoxBottomAligned"
           name="Bottom Aligned Tab Box"
           scope="default"&gt;
        &lt;uiClass
              class="org.eclipse.minicrm.ui.swt.form.fields.ext.SwtScoutTabBoxBottomAligned"&gt;
        &lt;/uiClass&gt;
     &lt;/formField&gt;
</pre> 
= Result  =

== SDK  ==

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

[[Image:TabBoxBottomAlignedProperty.png]] 

== SWT application  ==

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

[[Image:TabBoxBottomAlignedTabs.png]] 

If we were adventurous, we could even swap the position of the tabs at runtime by calling 
<pre>setTabBottomAligned(!isTabBottomAligned());</pre> 
== 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).