Scout/HowTo/3.9/Showing tabs at bottom of page with SWT
Scout |
Wiki Home |
Website |
Download • Git |
Community |
Forums • Blog • Twitter • G+ |
Bugzilla |
Bugzilla |
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.
Contents
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).