eu.webtoolkit.jwt
Class WSuggestionPopup

java.lang.Object
  eu.webtoolkit.jwt.WObject
      eu.webtoolkit.jwt.WWidget
          eu.webtoolkit.jwt.WCompositeWidget
              eu.webtoolkit.jwt.WSuggestionPopup

public class WSuggestionPopup
extends WCompositeWidget

A widget which popups to assist in editing a textarea or lineedit.

This widget may be associated with one or more WFormWidgets (typically a WLineEdit or a WTextArea).

The popup provides the user with suggestions to enter input. The popup can be used by one or more editors, using forEdit(). The popup will show when the user starts editing the edit field, or when the user opens the suggestions explicitly using a drop down icon or with the down key. The popup positions itself intelligently just below or just on top of the edit field. It offers a list of suggestions that match in some way with the current edit field, and dynamically adjusts this list. The implementation for matching individual suggestions with the current text is provided through a JavaScript function. This function may also highlight part(s) of the suggestions to provide feed-back on how they match.

WSuggestionPopup is an MVC view class, using a simple WStringListModel by default. You can set a custom model using setModel(). The model can provide different text for the suggestion text ( ItemDataRole.DisplayRole) and value (ItemDataRole.UserRole). The member methods clearSuggestions() and addSuggestion() manipulate this model. Note that a WStringListModel does not support ItemDataRole.UserRole data, so you may need to use a WStandardItemModel instead.

By default, the popup implements all filtering client-side. To support large datasets, you may enable server-side filtering of suggestions based on the input. The server-side filtering may provide a coarse filtering using a fixed size prefix of the entered text, and complement the client-side filtering. To enable server-side filtering, use setFilterLength() and listen to filter notification using the modelFilter() signal. Whenever a filter event is generated you can adjust the model's content according to the filter (e.g. using a WSortFilterProxyModel). By using setMaximumSize() you can also limit the maximum height of the popup, in which case scrolling is supported (similar to a combo-box).

The class is initialized with an WSuggestionPopup.Options struct which configures how suggestion filtering and result editing is done. Alternatively, you can provide two JavaScript functions, one for filtering the suggestions, and one for editing the value of the textarea when a suggestion is selected.

The matcherJS function must have the following JavaScript signature:

 function (editElement) {
    // fetch the location of cursor and current text in the editElement.
 
    // return a function that matches a given suggestion with the current value of the editElement.
    return function(suggestion) {
 
      // 1) if suggestion is null, simply return the current text 'value'
      // 2) check suggestion if it matches
      // 3) add highlighting markup to suggestion if necessary
 
      return { match : ...,      // does the suggestion match ? (boolean)
               suggestion : ...  // modified suggestion with highlighting
              };
    }
  }
 
 

The replacerJS function that edits the value has the following JavaScript signature.

 function (editElement, suggestionText, suggestionValue) {
    // editElement is the form element which must be edited.
    // suggestionText is the displayed text for the matched suggestion.
    // suggestionValue is the stored value for the matched suggestion.
 
    // computed modifiedEditValue and modifiedPos ...
 
    editElement.value = modifiedEditValue;
    editElement.selectionStart = edit.selectionEnd = modifiedPos;
  }
 
 

To style the suggestions, you should style the <span> element inside this widget, and the <span>."sel" element to style the current selection.

Usage example:

 {
        @code
        // options for email address suggestions
        WSuggestionPopup.Options contactOptions = new WSuggestionPopup.Options();
        contactOptions.highlightBeginTag = "<b>";
        contactOptions.highlightEndTag = "</b>";
        contactOptions.listSeparator = ','; //for multiple addresses)
        contactOptions.whitespace = " \\n";
        contactOptions.wordSeparators = "-., \"@\\n;"; //within an address
        contactOptions.appendReplacedText = ", "; //prepare next email address
 
        WSuggestionPopup popup = new WSuggestionPopup(contactOptions, this);
 
        WTextArea textEdit = new WTextArea(this);
        popup.forEdit(textEdit);
 
        // load popup data
        for (int i = 0; i < contacts.size(); ++i)
                popup.addSuggestion(contacts.get(i).formatted(), contacts.get(i)
                                .formatted());
 }
 

A screenshot of this example:

An example WSuggestionPopup (default)

An example WSuggestionPopup (polished)

CSS

The suggestion popup is styled by the current CSS theme. The look can be overridden using the Wt-suggest CSS class and the following selectors:

 .Wt-suggest .content div : A suggestion element
 .Wt-suggest .sel :         A selected suggestion element
 

When using the DropDownIcon trigger, an additional style class is provided for the edit field: Wt-suggest-dropdown, which renders the icon to the right inside the edit field. This class may be used to customize how the drop down icon is rendered.

Note: This widget requires JavaScript support.

Nested Class Summary

static class	WSuggestionPopup.Options A configuration object to generate a matcher and replacer JavaScript function.
static class	WSuggestionPopup.PopupTrigger Enumeration that defines a trigger for showing the popup.

Constructor Summary

WSuggestionPopup(java.lang.String matcherJS, java.lang.String replacerJS)
Creates a suggestion popup with given matcherJS and replacerJS.

WSuggestionPopup(java.lang.String matcherJS, java.lang.String replacerJS, WContainerWidget parent)
Creates a suggestion popup with given matcherJS and replacerJS.

WSuggestionPopup(WSuggestionPopup.Options options)
Creates a suggestion popup.

WSuggestionPopup(WSuggestionPopup.Options options, WContainerWidget parent)
Creates a suggestion popup.

Method Summary

Signal2<java.lang.Integer,WFormWidget>	activated() Signal emitted when a suggestion was selected.
void	addSuggestion(java.lang.CharSequence suggestionText, java.lang.CharSequence suggestionValue) Adds a new suggestion.
void	clearSuggestions() Clears the list of suggestions.
Signal1<java.lang.String>	filterModel() Signal that indicates that the model should be filtered.
void	forEdit(WFormWidget edit) Lets this suggestion popup assist in editing an edit field.
void	forEdit(WFormWidget edit, java.util.EnumSet<WSuggestionPopup.PopupTrigger> triggers) Lets this suggestion popup assist in editing an edit field.
void	forEdit(WFormWidget edit, WSuggestionPopup.PopupTrigger trigger, WSuggestionPopup.PopupTrigger... triggers) Lets this suggestion popup assist in editing an edit field.
static java.lang.String	generateMatcherJS(WSuggestionPopup.Options options) Creates a standard matcher JavaScript function.
static java.lang.String	generateReplacerJS(WSuggestionPopup.Options options) Creates a standard replacer JavaScript function.
int	getDefaultIndex() Returns the default value.
int	getFilterLength() Returns the filter length.
WAbstractItemModel	getModel() Returns the data model.
void	removeEdit(WFormWidget edit) Removes the edit field from the list of assisted editors.
void	setDefaultIndex(int row) Sets a default selected value.
void	setFilterLength(int length) Sets the minimum input length before showing the popup.
void	setGlobalPopup(boolean global) Controls how the suggestion popup is positioned.
void	setMaximumSize(WLength width, WLength height) Sets a maximum size.
void	setMinimumSize(WLength width, WLength height) Sets a minimum size.
void	setModel(WAbstractItemModel model) Sets the model to be used for the suggestions.
void	setModelColumn(int modelColumn) Sets the column in the model to be used for the items.
void	showAt(WFormWidget edit) Shows the suggestion popup at an edit field.

Methods inherited from class eu.webtoolkit.jwt.WCompositeWidget

addStyleClass, boxBorder, boxPadding, callJavaScriptMember, doJavaScript, enableAjax, find, getAttributeValue, getClearSides, getDecorationStyle, getFloatSide, getHeight, getId, getImplementation, getJavaScriptMember, getLineHeight, getMargin, getMaximumHeight, getMaximumWidth, getMinimumHeight, getMinimumWidth, getOffset, getPositionScheme, getStyleClass, getTabIndex, getToolTip, getVerticalAlignment, getVerticalAlignmentLength, getWidth, isDisabled, isEnabled, isHidden, isHiddenKeepsGeometry, isInline, isLoaded, isPopup, isVisible, load, propagateSetEnabled, refresh, remove, removeStyleClass, resize, setAttributeValue, setClearSides, setDecorationStyle, setDisabled, setFloatSide, setHidden, setHiddenKeepsGeometry, setId, setImplementation, setInline, setJavaScriptMember, setLineHeight, setMargin, setOffsets, setPopup, setPositionScheme, setSelectable, setStyleClass, setTabIndex, setToolTip, setVerticalAlignment

Methods inherited from class eu.webtoolkit.jwt.WWidget

acceptDrops, acceptDrops, addCssRule, addCssRule, addStyleClass, animateHide, animateShow, containsExposed, disable, dropEvent, enable, getDrop, getJsRef, getParent, hide, htmlText, isLayoutSizeAware, isRendered, layoutSizeChanged, positionAt, positionAt, removeStyleClass, resize, setClearSides, setHeight, setHidden, setLayoutSizeAware, setMargin, setMargin, setMargin, setMargin, setMargin, setOffsets, setOffsets, setOffsets, setOffsets, setOffsets, setToolTip, setVerticalAlignment, setWidth, show, stopAcceptDrops, toggleStyleClass, toggleStyleClass, tr

Methods inherited from class eu.webtoolkit.jwt.WObject

addChild, getObjectName, setObjectName

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Constructor Detail

WSuggestionPopup

public WSuggestionPopup(WSuggestionPopup.Options options,
                        WContainerWidget parent)

Creates a suggestion popup.

The popup using a standard matcher and replacer implementation that is configured using the provided options.

See Also:

generateMatcherJS(WSuggestionPopup.Options options), generateReplacerJS(WSuggestionPopup.Options options)

WSuggestionPopup

public WSuggestionPopup(WSuggestionPopup.Options options)

Creates a suggestion popup.

Calls this(options, (WContainerWidget)null)

WSuggestionPopup

public WSuggestionPopup(java.lang.String matcherJS,
                        java.lang.String replacerJS,
                        WContainerWidget parent)

Creates a suggestion popup with given matcherJS and replacerJS.

See supra for the expected signature of the matcher and replace JavaScript functions.

WSuggestionPopup

public WSuggestionPopup(java.lang.String matcherJS,
                        java.lang.String replacerJS)

Creates a suggestion popup with given matcherJS and replacerJS.

Calls this(matcherJS, replacerJS, (WContainerWidget)null)

Method Detail

forEdit

public void forEdit(WFormWidget edit,
                    java.util.EnumSet<WSuggestionPopup.PopupTrigger> triggers)

Lets this suggestion popup assist in editing an edit field.

A single suggestion popup may assist in several edits by repeated calls of this method.

The popupTriggers control how editing is triggered (either by the user editing the field by entering keys or by an explicit drop down menu that is shown inside the edit).

See Also:

removeEdit(WFormWidget edit)

forEdit

public final void forEdit(WFormWidget edit,
                          WSuggestionPopup.PopupTrigger trigger,
                          WSuggestionPopup.PopupTrigger... triggers)

Lets this suggestion popup assist in editing an edit field.

Calls forEdit(edit, EnumSet.of(trigger, triggers))

forEdit

public final void forEdit(WFormWidget edit)

Lets this suggestion popup assist in editing an edit field.

Calls forEdit(edit, EnumSet.of(WSuggestionPopup.PopupTrigger.Editing))

removeEdit

public void removeEdit(WFormWidget edit)

Removes the edit field from the list of assisted editors.

The editor will no longer be assisted by this popup widget.

See Also:

forEdit(WFormWidget edit, EnumSet triggers)

showAt

public void showAt(WFormWidget edit)

Shows the suggestion popup at an edit field.

This is equivalent to the user triggering the suggestion popup to be shown.

clearSuggestions

public void clearSuggestions()

Clears the list of suggestions.

This clears the underlying model.

See Also:

addSuggestion(CharSequence suggestionText, CharSequence suggestionValue)

addSuggestion

public void addSuggestion(java.lang.CharSequence suggestionText,
                          java.lang.CharSequence suggestionValue)

Adds a new suggestion.

This adds an entry to the underlying model. The suggestionText is set as ItemDataRole.DisplayRole and the suggestionValue (which is inserted into the edit field on selection) is set as ItemDataRole.UserRole.

See Also:

clearSuggestions(), setModel(WAbstractItemModel model)

setModel

public void setModel(WAbstractItemModel model)

Sets the model to be used for the suggestions.

The model may not be null, and ownership of the model is not transferred.

The default value is a WStringListModel that is owned by the suggestion popup.

The ItemDataRole.DisplayRole is used for the suggestion text. The ItemDataRole.UserRole is used for the suggestion value, unless empty, in which case the suggestion text is used as value.

Note that since the default WStringListModel does not support UserRole data, you will want to change it to a more general model (e.g. WStandardItemModel) if you want suggestion values that are different from display values.

See Also:

setModelColumn(int modelColumn)

getModel

public WAbstractItemModel getModel()

Returns the data model.

See Also:

setModel(WAbstractItemModel model)

setModelColumn

public void setModelColumn(int modelColumn)

Sets the column in the model to be used for the items.

The column index in the model will be used to retrieve data.

The default value is 0.

See Also:

setModel(WAbstractItemModel model)

setDefaultIndex

public void setDefaultIndex(int row)

Sets a default selected value.

row is the model row that is selected by default (only if it matches the current input).

The default value is -1, indicating no default.

getDefaultIndex

public int getDefaultIndex()

Returns the default value.

generateMatcherJS

public static java.lang.String generateMatcherJS(WSuggestionPopup.Options options)

Creates a standard matcher JavaScript function.

This returns a JavaScript function that provides a standard implementation for the matching input, based on the given options.

generateReplacerJS

public static java.lang.String generateReplacerJS(WSuggestionPopup.Options options)

Creates a standard replacer JavaScript function.

This returns a JavaScript function that provides a standard implementation for the matching input, based on the given options.

setFilterLength

public void setFilterLength(int length)

Sets the minimum input length before showing the popup.

When the user has typed this much characters, filterModel() is emitted which allows you to filter the model based on the initial input.

The default value is 0, which has the effect of always showing the entire model.

A value of -1 indicates that server-side filtering is continuously applied, no matter the length of the text input.

See Also:

filterModel()

getFilterLength

public int getFilterLength()

Returns the filter length.

See Also:

setFilterLength(int length)

filterModel

public Signal1<java.lang.String> filterModel()

Signal that indicates that the model should be filtered.

The argument is the initial input. When Editing is used as edit trigger, its length will always equal the getFilterLength(). When DropDownIcon is used as edit trigger, the input length may be less than getFilterLength(), and the the signal will be called repeatedly as the user provides more input.

For example, if you are using a WSortFilterProxyModel, you could react to this signal with:

 public filterSuggestions(String filter) {
      proxyModel.setFilterRegExp(filter + ".*");
    }
   
 

activated

public Signal2<java.lang.Integer,WFormWidget> activated()

Signal emitted when a suggestion was selected.

The selected item is passed as the first argument and the editor as the second.

setGlobalPopup

public void setGlobalPopup(boolean global)

Controls how the suggestion popup is positioned.

When global is true, then the popup will position itself globally. This avoids that the popup is affected by enclosing parents with overflow settings that clip the popup. This makes the popup however no longer follow the popup line edit when this line edit moves.

The default is false.

setMaximumSize

public void setMaximumSize(WLength width,
                           WLength height)

Description copied from class: WWidget

Sets a maximum size.

Specifies a maximum size for this widget.

The default maximum width and height are WLength.Auto, indicating no maximum size.

Overrides:

setMaximumSize in class WCompositeWidget

See Also:

WWidget.resize(WLength width, WLength height), WWidget.setMinimumSize(WLength width, WLength height)

setMinimumSize

public void setMinimumSize(WLength width,
                           WLength height)

Description copied from class: WWidget

Sets a minimum size.

Specify a minimum size for this widget.

The default minimum width and height is 0. The special value WLength.Auto indicates that the initial width is used as minimum size.

When the widget size is actively managed (using e.g. a layout manager), these sizes are taken into account.

Overrides:

setMinimumSize in class WCompositeWidget

See Also:

WWidget.resize(WLength width, WLength height), WWidget.getMinimumWidth(), WWidget.getMinimumHeight()