|
|
| Line 1: |
Line 1: |
| − | 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.
| + | The Scout documentation has been moved to https://eclipsescout.github.io/. |
| − | | + | |
| − | = Steps =
| + | |
| − | | + | |
| − | == Interface ==
| + | |
| − | | + | |
| − | First, we create an interface '''ITabBoxBottomAligned''' in the client:
| + | |
| − | <pre>package org.eclipsescout.demo.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.eclipsescout.demo.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.eclipsescout.demo.minicrm.ui.swt.form.fields.ext;
| + | |
| − | | + | |
| − | import org.eclipsescout.demo.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();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | == Registering the extension ==
| + | |
| − | | + | |
| − | Finally, in the SWT '''plugin.xml''' we add an entry to the extension point '''formfields''':
| + | |
| − | <pre> <formField
| + | |
| − | active="true"
| + | |
| − | modelClass="org.eclipsescout.demo.minicrm.client.ui.form.fields.ext.AbstractTabBoxBottomAligned"
| + | |
| − | name="Bottom Aligned Tab Box"
| + | |
| − | scope="default">
| + | |
| − | <uiClass
| + | |
| − | class="org.eclipsescout.demo.minicrm.ui.swt.form.fields.ext.SwtScoutTabBoxBottomAligned">
| + | |
| − | </uiClass>
| + | |
| − | </formField>
| + | |
| − | </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).
| + | |
