|
|
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).
| + | |