Utilizing Touch Inputs to Resize Panels in GWT

Question

Utilizing Touch Inputs to Resize Panels in GWT

Recently, I encountered a challenge with the size of my Panel while loading numerous widgets inside it. To address this issue, I opted to utilize a Resizable Panel in GWT, which initially proved to be effective.

However, my current dilemma lies in adapting this functionality for Touch Enabled Devices such as Android Tablets and iPads. Since the Resize Panel relies on Mouse Drag Events, I am uncertain about how to integrate Touch Events instead.

I came across the GWT-DND API, which offers Resizable Panels that are compatible with touch interfaces. While this seems like a viable solution, I'm hesitant to take on the additional complexity it may entail.

If anyone has experience or insight into this matter, I would greatly appreciate any help or guidance you can provide.

java html css gwt

Answer 1

Answer №1

I finally found the solution. It turned out to be quite simple - I just added touch handlers similar to mouse events that I had previously used.

ONTOUCHSTART = ONMOUSEDOWN
ONTOUCHMOVE = ONMOUSEMOVE
ONTOUCHEND = ONMOUSEUP
ONTOUCHCANCEL = ONLOSECAPTURE

ResizePanel.java

/**
 * Abstract base class for {@link VerticalResizePanel}.
 */
abstract class ResizePanel extends Panel implements HasResizeHandlers {

    /* **************************************** */
    // Private Static Fields
    /* **************************************** */
    /**
     * The element that masks the screen so we can catch mouse events over
     * iframes.
     */
    private static Element glassElem = null;

    /** The handler manager for our events. */

    /* **************************************** */
    // Private Fields
    /* **************************************** */
    // The elements containing the widgets.
    /** The elements. */
    private final Element[] elements = new Element[1];

    /** The handler manager for our events. */

    private final EventBus resizeHandlerManager = new SimpleEventBus();

    // Indicates whether drag resizing is active.
    /** The is resizing. */
    private boolean isResizing = false;

    // The element that acts as the splitter.
    /** The split elem. */
    private final Element splitElem;

    // The enclosed widgets.
    /** The widgets. */
    private final Widget[] widgets = new Widget[2];
    
    // More code...

}

In addition, here are my custom Event and Event Handlers:

ResizeEvent.java

/**
 * This event adjusts positions when panels (e.g. VerticalSplitPanel) are resized.
 */
public class ResizeEvent extends GwtEvent<ResizeEventHandler> {

    /* **************************************** */
    // Public Static Fields
    /* **************************************** */
    /** The Constant TYPE. */
    public static final Type<ResizeEventHandler> TYPE = new Type<ResizeEventHandler>();

    /* **************************************** */
    // Private Fields
    /* **************************************** */
    /** The split size. */
    private final int splitSize;

    // More code...

}

ResizeEventHandler.java

/**
 * Interface for handling resize events.
 */
public interface ResizeEventHandler extends EventHandler {

    /**
     * Handles the resize event.
     * 
     * @param event
     *            The resize event.
     */
    void onResize(ResizeEvent event);
}

Answer 2

I finally found the solution. It turned out to be quite simple - I just added touch handlers similar to mouse events that I had previously used.

ONTOUCHSTART = ONMOUSEDOWN
ONTOUCHMOVE = ONMOUSEMOVE
ONTOUCHEND = ONMOUSEUP
ONTOUCHCANCEL = ONLOSECAPTURE

ResizePanel.java

/**
 * Abstract base class for {@link VerticalResizePanel}.
 */
abstract class ResizePanel extends Panel implements HasResizeHandlers {

    /* **************************************** */
    // Private Static Fields
    /* **************************************** */
    /**
     * The element that masks the screen so we can catch mouse events over
     * iframes.
     */
    private static Element glassElem = null;

    /** The handler manager for our events. */

    /* **************************************** */
    // Private Fields
    /* **************************************** */
    // The elements containing the widgets.
    /** The elements. */
    private final Element[] elements = new Element[1];

    /** The handler manager for our events. */

    private final EventBus resizeHandlerManager = new SimpleEventBus();

    // Indicates whether drag resizing is active.
    /** The is resizing. */
    private boolean isResizing = false;

    // The element that acts as the splitter.
    /** The split elem. */
    private final Element splitElem;

    // The enclosed widgets.
    /** The widgets. */
    private final Widget[] widgets = new Widget[2];
    
    // More code...

}

In addition, here are my custom Event and Event Handlers:

ResizeEvent.java

/**
 * This event adjusts positions when panels (e.g. VerticalSplitPanel) are resized.
 */
public class ResizeEvent extends GwtEvent<ResizeEventHandler> {

    /* **************************************** */
    // Public Static Fields
    /* **************************************** */
    /** The Constant TYPE. */
    public static final Type<ResizeEventHandler> TYPE = new Type<ResizeEventHandler>();

    /* **************************************** */
    // Private Fields
    /* **************************************** */
    /** The split size. */
    private final int splitSize;

    // More code...

}

ResizeEventHandler.java

/**
 * Interface for handling resize events.
 */
public interface ResizeEventHandler extends EventHandler {

    /**
     * Handles the resize event.
     * 
     * @param event
     *            The resize event.
     */
    void onResize(ResizeEvent event);
}

Utilizing Touch Inputs to Resize Panels in GWT

Answer №1

Similar questions

iOS Safari enlarges frameset beyond viewport limits

Can an animation be created that transforms an SVG line into a flawless circle?

Switching JSON data when clicked in Angular 2

Using Java and Cucumber, extract @CucumberOptions from an external source such as a property file

The layout in Next.js production builds appears to be distinct from the layout in the

Updating an Excel file with Apache POI for both reading and writing operations

default radio option with pre-selected value

Is it possible to maintain line breaks when using ".text" or ".textContent"? Any other options or solutions available? Workarounds to consider?

What is the best method for checking for JavaScript errors when using Selenium WebDriver in conjunction with NodeJS?

Constrained and Proportional Resizing with KineticJS

What is the best way to access a model attribute in every template?

Using the Petite-vue Initialization attribute within an HTML script tag

jQuery-powered unique serial numbers for tables

What to do when trying to click an element without a tag present

Tips for finding an unstable table element with Selenium?

Eliminate the margin for the toolbar title in ActionMode

Animate an image to the right when clicked, then return it to the left with a second click

Does the WeakReference object get garbage collected together with the referenced object?

Showing an array in tabular form using Angular

Tips for utilizing the jQuery selectbox plugin on multiple elements within a single page