JBStrap component interfaces

Interfaces affecting component building

If you create a custom component from scratch, you will have a little more work to do. In addition to how the component works, you also need to determine what sort of events your new component handles, whether it can be animated, etc. In JBStrap, you simply do this by listing the relevant interfaces in the component implementation class. In all of these interfaces, the methods for each functionality are implemented in a default method. Placing the interface in the class alone implements the functionality.

In this chapter, we will look at which interfaces exist in JBStrap, and which functionalities and events these interfaces implement.

Animatable

You need to place this interface on the components you want to make animatable. If a component has this interface assigned to it, you can set the animation for that component. The interface automatically performs the animation. You can also add event handlers related to animations to the component. The events related to animation are as follows:

  • Animation End : The event occurs when the component animation stops.
  • Animation Start : The event occurs when the component animation starts.

Click

Place it on components that you want to be able to handle click events. Click event handlers can be added to components implementing this interface. The click events are as follows:

  • Click : The event occurs when the user clicks on the component with the left mouse button.
  • Double click : The event occurs when the user double-clicks one the component with the left mouse button.

CanDrop

A component with this interface handles the event when a user drags and drops another component onto it. If the interface is not attached to the component, no other component can be added to it.

Draggable

A component with this interface can be dragged over the interface. The user will be able to drag the component over the interface using drag and drop. It is possible to drag it to another component if the CanDrop interface is assigned to the other component. Besides, events handling drag and drop can be added to the component with this interface. These events are:

  • Drag start: This event occurs when the user starts dragging the component.
  • Drag end: This event occurs when the user has finished dragging the component. The event will occur before the drop event, regardless of whether a drop event occurs. This event also occurs if the user drops the component in an invalid location on the screen, i.e., not on a component on which the CanDrop interface is placed.

Editable

A component with this interface handles editing-related events. Such components can usually be form items, the content of which can be edited by the user on the interface . The following event handlers can be added to components with this interface:

  • Input : The event occurs when the user types into the component and its contents change
  • Copy: The event occurs when the user copies the contents of the component to the clipboard.
  • Cut: The event occurs when the user cuts the contents of the component to the clipboard.
  • Paste: The event occurs when the user inserts content from the clipboard into the component.
  • Enter pressed: The event occurs when the user presses ENTER while editing the contents of the component.

FetchingData

The component to which this interface is assigned supports automatic data query from a data descriptor. The interface requires the component to implement a parameter-free version of the fetchData method using which the developer queries the data. During automatic data queries, this method is called after the component is displayed. The interface requires the implementation of the setAutoFetchData and isAutoFetchData methods. The first one enables/disables automatic data queries. The second one sets whether the automatic data query function is enabled for the component.

The interface allows the fetch done event handler to be added to the component. This event occurs when the component has completed querying the data and processing the returned results.

Focusable

This interface is assigned to components that can handle input focus. Components implementing this interface can be used to add focus handling events. Component focus can be programmatically set on the interface. The focus-related events that can be added to the component are:

  • Loses focus: The event occurs when the component loses input focus.
  • Focus: The event occurs when the component receives the input focus.
  • Focus in: The event occurs when the input focus is applied to the component.
  • Focus out: The event occurs when the input focus is lost by the browser from the component.

HandleHotKey

It is possible to assign a hotkey (a unique key combination) to components with this interface.

HandleKeyboardEvents

The components to which this interface is added handle keyboard events, that is, you can add keyboard handling events to them. These events are:

  • Key press: The event occurs when the user presses a key on the keyboard.
  • Key up: The event occurs when the user releases one of the keys on the keyboard.
  • Key down: The event occurs when the user presses a key on the keyboard.

HandleMouseEvents

Components to which this interface is added support mouse-related events. Such events include:

  • Mouse down: The event occurs when the user presses one of the mouse buttons over the component area.
  • Mouse enter: The event occurs when the mouse cursor on the interface enters the component area.
  • Mouse leave: The event occurs when the mouse cursor exits the component area on the interface.
  • Mouse move: The event occurs when the mouse cursor moves over the component area on the surface.
  • Mouse over: The event occurs when the mouse cursor hovers over the component area.
  • Mouse out: The event occurs when the mouse cursor exits the component area.
  • Mouse up: The event occurs when the user releases one of the mouse buttons over the area of the component.
  • Mouse wheel: The event occurs when the user scrolls the mouse wheel over the component area.

Scrollable

This interface must be assigned to components whose contents can be scrolled by the user. Once the interface has been added, it will be possible to handle the scrolling event on the component. A scrolling event occurs when the user scrolls the content of the component on the interface.

Touchable

The components with this interface support the handling of touch-related events. These events are:

  • Touch cancel: The event occurs when the component is lost.
  • Touch end: The event occurs when the user releases touch from the component.
  • Touch move: The event occurs when the user moves the touch to the component area.
  • Touch start: The event occurs when the user touches the component.