Tomas Jelinek has uploaded a new change for review. Change subject: userportal,webadmin: type ahead list box ......................................................................
userportal,webadmin: type ahead list box A new component ListModelTypeAheadListBoxEditor has been created. It looks like a regular combo box, but the behavior is as follows: - when the user clicks inside or to the left triangle (combo box) all the options are shown (like for regular combo box) - it supports type ahead - the display options are rendered using custom renderers and can even contain HTML - it is bound to the model It is based on the code from ListModelSuggestBox. The common parts has been moved to BaseListModelSuggestBox and generalized. The behavior of the original ListModelSuggestBox(Editor) is unchanged. Change-Id: I956af3c675894c850a1a104a81cec49f4bd62011 Signed-off-by: Tomas Jelinek <[email protected]> --- M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/CommonApplicationResources.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseListModelSuggestBox.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBox.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBoxEditor.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.java A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.ui.xml A frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBoxEditor.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.ui.xml A frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/comboBoxDropDownIcon.png M frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/host/HostBondPopupView.java 11 files changed, 776 insertions(+), 173 deletions(-) git pull ssh://gerrit.ovirt.org:29418/ovirt-engine refs/changes/36/14936/1 diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/CommonApplicationResources.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/CommonApplicationResources.java index 98de4d9..a48d448 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/CommonApplicationResources.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/CommonApplicationResources.java @@ -227,4 +227,6 @@ @Source("images/network/icn_network_unlinked.png") ImageResource unlinkedNetworkImage(); + @Source("images/comboBoxDropDownIcon.png") + ImageResource comboBoxDropDownIcon(); } diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseListModelSuggestBox.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseListModelSuggestBox.java new file mode 100644 index 0000000..8bfff7c --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseListModelSuggestBox.java @@ -0,0 +1,179 @@ +package org.ovirt.engine.ui.common.widget.editor; + +import com.google.gwt.event.dom.client.KeyDownHandler; +import com.google.gwt.event.dom.client.KeyPressHandler; +import com.google.gwt.event.dom.client.KeyUpHandler; +import com.google.gwt.event.logical.shared.SelectionEvent; +import com.google.gwt.event.logical.shared.SelectionHandler; +import com.google.gwt.event.logical.shared.ValueChangeEvent; +import com.google.gwt.event.logical.shared.ValueChangeHandler; +import com.google.gwt.event.shared.HandlerRegistration; +import com.google.gwt.user.client.ui.Composite; +import com.google.gwt.user.client.ui.HasConstrainedValue; +import com.google.gwt.user.client.ui.MultiWordSuggestOracle; +import com.google.gwt.user.client.ui.SuggestBox; +import com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay; +import com.google.gwt.user.client.ui.SuggestOracle.Suggestion; +import com.google.gwt.user.client.ui.TextBox; +import com.google.gwt.user.client.ui.TextBoxBase; + +/** + * Base SuggestBox widget that adapts to UiCommon list model items. + */ +public abstract class BaseListModelSuggestBox<T> extends Composite implements EditorWidget<T, TakesConstrainedValueEditor<T>>, HasConstrainedValue<T> { + + private TakesConstrainedValueEditor<T> editor; + + private T value; + + private SuggestBox suggestBox; + + private ListModelSuggestionDisplay suggestionDisplay = new ListModelSuggestionDisplay(); + + private ValueChangeHandler<T> handler; + + public BaseListModelSuggestBox(MultiWordSuggestOracle suggestOracle) { + suggestBox = new SuggestBox(suggestOracle, new TextBox(), suggestionDisplay) { + @Override + public void setText(String text) { + super.setText(text); + + postTextSet(text); + } + }; + + suggestBox.removeStyleName("gwt-SuggestBox"); //$NON-NLS-1$ + + suggestBox.addSelectionHandler(new SelectionHandler<Suggestion>() { + @Override + public void onSelection(SelectionEvent<Suggestion> event) { + ValueChangeEvent.fire(suggestBox, event.getSelectedItem().getReplacementString()); + } + }); + + } + + protected Suggestion getCurrentSelection() { + return suggestionDisplay.getCurrentSelection(); + } + + protected void hideSuggestions() { + suggestionDisplay.hide(); + } + + @Override + public TakesConstrainedValueEditor<T> asEditor() { + if (editor == null) { + editor = TakesConstrainedValueEditor.<T> of(this, this, this); + } + return editor; + } + + public SuggestBox asSuggestBox() { + return suggestBox; + } + + public TextBoxBase asTextBox() { + return asSuggestBox().getTextBox(); + } + + @Override + public HandlerRegistration addKeyUpHandler(KeyUpHandler handler) { + return asSuggestBox().addKeyUpHandler(handler); + } + + @Override + public HandlerRegistration addKeyDownHandler(KeyDownHandler handler) { + return asSuggestBox().addKeyDownHandler(handler); + } + + @Override + public HandlerRegistration addKeyPressHandler(KeyPressHandler handler) { + return asSuggestBox().addKeyPressHandler(handler); + } + + @Override + public int getTabIndex() { + return asSuggestBox().getTabIndex(); + } + + @Override + public void setAccessKey(char key) { + asSuggestBox().setAccessKey(key); + } + + @Override + public void setFocus(boolean focused) { + asSuggestBox().setFocus(focused); + } + + @Override + public void setTabIndex(int index) { + asSuggestBox().setTabIndex(index); + } + + @Override + public boolean isEnabled() { + return asTextBox().isEnabled(); + } + + @Override + public void setEnabled(boolean enabled) { + asTextBox().setEnabled(enabled); + } + + public void setValue(T value) { + if (value != null && value != getValue()) { + handler.onValueChange(new ValueChangeEvent<T>(value) { + }); + } + this.value = value; + render(value, false); + + } + + public void setValue(T value, boolean fireEvents) { + if (value != null && value != getValue()) { + handler.onValueChange(new ValueChangeEvent<T>(value) { + }); + } + this.value = value; + render(value, fireEvents); + } + + protected abstract void render(T value, boolean fireEvents); + + protected void postTextSet(String text) { + // by default do nothing + } + + @Override + public T getValue() { + return value; + } + + @Override + public HandlerRegistration addValueChangeHandler(final ValueChangeHandler<T> handler) { + this.handler = handler; + return asSuggestBox().addValueChangeHandler(new ValueChangeHandler<String>() { + @Override + public void onValueChange(ValueChangeEvent<String> event) { + handler.onValueChange(new ValueChangeEvent<T>(getValue()) { + }); + } + }); + } + + class ListModelSuggestionDisplay extends DefaultSuggestionDisplay { + + // just to make it public + @Override + public Suggestion getCurrentSelection() { + return super.getCurrentSelection(); + } + + public void hide() { + getPopupPanel().hide(); + } + } +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBox.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBox.java index 482bffc..29dc599 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBox.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBox.java @@ -6,141 +6,38 @@ import com.google.gwt.event.dom.client.FocusEvent; import com.google.gwt.event.dom.client.FocusHandler; -import com.google.gwt.event.dom.client.KeyDownHandler; -import com.google.gwt.event.dom.client.KeyPressHandler; -import com.google.gwt.event.dom.client.KeyUpHandler; -import com.google.gwt.event.logical.shared.SelectionEvent; -import com.google.gwt.event.logical.shared.SelectionHandler; -import com.google.gwt.event.logical.shared.ValueChangeEvent; -import com.google.gwt.event.logical.shared.ValueChangeHandler; -import com.google.gwt.event.shared.HandlerRegistration; -import com.google.gwt.user.client.ui.Composite; -import com.google.gwt.user.client.ui.HasConstrainedValue; import com.google.gwt.user.client.ui.MultiWordSuggestOracle; -import com.google.gwt.user.client.ui.SuggestBox; -import com.google.gwt.user.client.ui.SuggestOracle.Suggestion; -import com.google.gwt.user.client.ui.TextBoxBase; /** - * SuggestBox widget that adapts to UiCommon list model items. + * SuggestBox widget that adapts to UiCommon list model items. Expects all of it's items to be non null Strings */ -public class ListModelSuggestBox extends Composite implements EditorWidget<Object, TakesConstrainedValueEditor<Object>>, HasConstrainedValue<Object> { - - private TakesConstrainedValueEditor<Object> editor; - private final MultiWordSuggestOracle suggestOracle = new MultiWordSuggestOracle(); +public class ListModelSuggestBox<T> extends BaseListModelSuggestBox<T> { public ListModelSuggestBox() { - final SuggestBox suggestBox = new SuggestBox(suggestOracle); - suggestBox.removeStyleName("gwt-SuggestBox"); //$NON-NLS-1$ - initWidget(suggestBox); + super(new MultiWordSuggestOracle()); + initWidget(asSuggestBox()); - suggestBox.addSelectionHandler(new SelectionHandler<Suggestion>() { - @Override - public void onSelection(SelectionEvent<Suggestion> event) { - ValueChangeEvent.fire(suggestBox, event.getSelectedItem().getReplacementString()); - } - }); + asSuggestBox().getTextBox().addFocusHandler(new FocusHandler() { - suggestBox.getTextBox().addFocusHandler(new FocusHandler() { @Override public void onFocus(FocusEvent event) { - suggestBox.showSuggestionList(); + asSuggestBox().showSuggestionList(); } }); } @Override - public TakesConstrainedValueEditor<Object> asEditor() { - if (editor == null) { - editor = TakesConstrainedValueEditor.of(this, this, this); - } - return editor; - } - - public SuggestBox asSuggestBox() { - return (SuggestBox) getWidget(); - } - - public TextBoxBase asTextBox() { - return asSuggestBox().getTextBox(); - } - - @Override - public HandlerRegistration addKeyUpHandler(KeyUpHandler handler) { - return asSuggestBox().addKeyUpHandler(handler); - } - - @Override - public HandlerRegistration addKeyDownHandler(KeyDownHandler handler) { - return asSuggestBox().addKeyDownHandler(handler); - } - - @Override - public HandlerRegistration addKeyPressHandler(KeyPressHandler handler) { - return asSuggestBox().addKeyPressHandler(handler); - } - - @Override - public int getTabIndex() { - return asSuggestBox().getTabIndex(); - } - - @Override - public void setAccessKey(char key) { - asSuggestBox().setAccessKey(key); - } - - @Override - public void setFocus(boolean focused) { - asSuggestBox().setFocus(focused); - } - - @Override - public void setTabIndex(int index) { - asSuggestBox().setTabIndex(index); - } - - @Override - public boolean isEnabled() { - return asTextBox().isEnabled(); - } - - @Override - public void setEnabled(boolean enabled) { - asTextBox().setEnabled(enabled); - } - - @Override - public Object getValue() { - return asSuggestBox().getValue(); - } - - @Override - public void setValue(Object value) { - asSuggestBox().setValue((String) value); - } - - @Override - public void setValue(Object value, boolean fireEvents) { - asSuggestBox().setValue((String) value, fireEvents); - } - - @Override - public HandlerRegistration addValueChangeHandler(final ValueChangeHandler<Object> handler) { - return asSuggestBox().addValueChangeHandler(new ValueChangeHandler<String>() { - @Override - public void onValueChange(ValueChangeEvent<String> event) { - handler.onValueChange(new ValueChangeEvent<Object>(event.getValue()) {}); - } - }); - } - - @Override - public void setAcceptableValues(Collection<Object> values) { + public void setAcceptableValues(Collection<T> values) { Collection<String> stringValues = Linq.cast(values); + MultiWordSuggestOracle suggestOracle = (MultiWordSuggestOracle) asSuggestBox().getSuggestOracle(); suggestOracle.clear(); suggestOracle.addAll(stringValues); suggestOracle.setDefaultSuggestionsFromText(stringValues); } + @Override + protected void render(T value, boolean fireEvents) { + asSuggestBox().setValue((String) value, fireEvents); + } + } diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBoxEditor.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBoxEditor.java index 574e6a2..01b58c3 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBoxEditor.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelSuggestBoxEditor.java @@ -10,18 +10,18 @@ * @param <T> * SuggestBox item type. */ -public class ListModelSuggestBoxEditor extends AbstractValidatedWidgetWithLabel<Object, ListModelSuggestBox> - implements IsEditor<WidgetWithLabelEditor<Object, ListModelSuggestBoxEditor>> { +public class ListModelSuggestBoxEditor<T> extends AbstractValidatedWidgetWithLabel<T, ListModelSuggestBox<T>> + implements IsEditor<WidgetWithLabelEditor<T, ListModelSuggestBoxEditor<T>>> { - private final WidgetWithLabelEditor<Object, ListModelSuggestBoxEditor> editor; + private final WidgetWithLabelEditor<T, ListModelSuggestBoxEditor<T>> editor; public ListModelSuggestBoxEditor() { - super(new ListModelSuggestBox()); + super(new ListModelSuggestBox<T>()); this.editor = WidgetWithLabelEditor.of(getContentWidget().asEditor(), this); } @Override - public WidgetWithLabelEditor<Object, ListModelSuggestBoxEditor> asEditor() { + public WidgetWithLabelEditor<T, ListModelSuggestBoxEditor<T>> asEditor() { return editor; } diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.java new file mode 100644 index 0000000..0362413 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.java @@ -0,0 +1,335 @@ +package org.ovirt.engine.ui.common.widget.editor; + +import java.util.ArrayList; +import java.util.Collection; +import java.util.List; + +import org.ovirt.engine.ui.common.widget.editor.ListModelTypeAheadListBoxEditor.SuggestBoxRenderer; + +import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.NativeEvent; +import com.google.gwt.event.dom.client.BlurEvent; +import com.google.gwt.event.dom.client.BlurHandler; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; +import com.google.gwt.event.dom.client.FocusEvent; +import com.google.gwt.event.dom.client.FocusHandler; +import com.google.gwt.event.dom.client.KeyCodes; +import com.google.gwt.event.shared.HandlerRegistration; +import com.google.gwt.resources.client.CssResource; +import com.google.gwt.uibinder.client.UiBinder; +import com.google.gwt.uibinder.client.UiField; +import com.google.gwt.user.client.Event; +import com.google.gwt.user.client.Event.NativePreviewEvent; +import com.google.gwt.user.client.Event.NativePreviewHandler; +import com.google.gwt.user.client.ui.FlowPanel; +import com.google.gwt.user.client.ui.Image; +import com.google.gwt.user.client.ui.MultiWordSuggestOracle; +import com.google.gwt.user.client.ui.MultiWordSuggestOracle.MultiWordSuggestion; +import com.google.gwt.user.client.ui.SuggestBox; +import com.google.gwt.user.client.ui.SuggestOracle.Suggestion; + +/** + * SuggestBox widget that adapts to UiCommon list model items and looks like a list box. The suggestion content can be rich (html). + * <p> + * Accepts any objects as soon as the provided renderer can render them. + */ +public class ListModelTypeAheadListBox<T> extends BaseListModelSuggestBox<T> { + + @UiField(provided = true) + SuggestBox suggestBox; + + @UiField + Image dropDownImage; + + @UiField + FlowPanel mainPanel; + + @UiField + Style style; + + private final SuggestBoxRenderer<T> renderer; + + private Collection<T> acceptableValues = new ArrayList<T>(); + + private HandlerRegistration eventHandler; + + interface Style extends CssResource { + + String enabledMainPanel(); + + String disabledMainPanel(); + } + + interface ViewUiBinder extends UiBinder<FlowPanel, ListModelTypeAheadListBox> { + ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class); + } + + public ListModelTypeAheadListBox(SuggestBoxRenderer<T> renderer) { + super(new RenderableSuggestOracle<T>(renderer)); + this.renderer = renderer; + + suggestBox = asSuggestBox(); + initWidget(ViewUiBinder.uiBinder.createAndBindUi(this)); + + registerListeners(); + } + + private void registerListeners() { + dropDownImage.addClickHandler(new ClickHandler() { + + @Override + public void onClick(ClickEvent event) { + showAllSuggestions(); + } + }); + + // not listening to focus because it would show the suggestions also after the whole browser + // gets the focus back (after loosing it) if this was the last element with focus + suggestBox.getTextBox().addClickHandler(new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + showAllSuggestions(); + } + }); + + // make sure that after leaving the text box a valid value or empty value will be rendered in the text box + suggestBox.getTextBox().addBlurHandler(new BlurHandler() { + + @Override + public void onBlur(BlurEvent event) { + if (eventHandler != null) { + eventHandler.removeHandler(); + } + + adjustSelectedValue(); + } + + }); + + suggestBox.getTextBox().addFocusHandler(new FocusHandler() { + + @Override + public void onFocus(FocusEvent event) { + eventHandler = + Event.addNativePreviewHandler(new EnterIgnoringNativePreviewHandler<T>(ListModelTypeAheadListBox.this)); + } + }); + + } + + private void showAllSuggestions() { + if (!isEnabled()) { + return; + } + + // show all the suggestions even if there is already something filled + // otherwise it is not obvious that there are more options + suggestBox.setText(null); + suggestBox.showSuggestionList(); + setFocus(true); + } + + private void adjustSelectedValue() { + if (acceptableValues.size() == 0) { + return; + } + + // empty suggest box + String providedText = asSuggestBox().getText(); + if (providedText == null || "".equals(providedText)) { + if (getValue() != null) { + // something has been there, deleted on click inside and than hidden the box - restoring + asSuggestBox().setText(renderer.getReplacementString(getValue())); + } else { + // nothing has been there, selecting the first accpetable value + setValue(acceptableValues.iterator().next()); + } + } else { + // something has been typed inside - validate + T newData = asEntity(providedText); + if (newData != null) { + // correct provided - use it + setValue(newData); + } else { + // incorrect - return to previous one + asSuggestBox().setText(renderer.getReplacementString(getValue())); + } + } + } + + @Override + protected void postTextSet(String provided) { + T data = asEntity(provided); + if (data != null) { + setValue(data); + } + } + + private T asEntity(String provided) { + if (provided == null) { + return null; + } + + for (T data : acceptableValues) { + if (data == null) { + continue; + } + + String expected = renderer.getReplacementString(data); + if (expected == null) { + continue; + } + + if (expected.equals(provided)) { + return data; + } + } + + return null; + } + + public void setValue(T value) { + super.setValue(asValidValue(value)); + } + + public void setValue(T value, boolean fireEvents) { + super.setValue(asValidValue(value), fireEvents); + } + + @Override + public T getValue() { + if (acceptableValues.contains(super.getValue())) { + return super.getValue(); + } + + return null; + } + + private T asValidValue(T valueCandidate) { + // not yet inited - accept everything + if (acceptableValues.size() == 0) { + return valueCandidate; + } + + // it is one of the correct values + if (acceptableValues.contains(valueCandidate)) { + return valueCandidate; + } + + // not correct value - return to the previous one + return getValue(); + } + + @Override + public void setAcceptableValues(Collection<T> acceptableValues) { + this.acceptableValues = acceptableValues; + RenderableSuggestOracle<T> suggestOracle = (RenderableSuggestOracle<T>) suggestBox.getSuggestOracle(); + suggestOracle.setData(acceptableValues); + } + + @Override + protected void render(T value, boolean fireEvents) { + asSuggestBox().setValue(renderer.getReplacementString(value), fireEvents); + } + + @Override + public void setEnabled(boolean enabled) { + super.setEnabled(enabled); + + if (enabled) { + mainPanel.getElement().replaceClassName(style.disabledMainPanel(), style.enabledMainPanel()); + } else { + mainPanel.getElement().replaceClassName(style.enabledMainPanel(), style.disabledMainPanel()); + } + } +} + +class RenderableSuggestion<T> extends MultiWordSuggestion { + + public RenderableSuggestion(T row, SuggestBoxRenderer<T> renderer) { + super(renderer.getReplacementString(row), renderer.getDisplayString(row)); + } + + public boolean matches(String query) { + String replacementString = getReplacementString(); + if (replacementString == null || query == null) { + return false; + } + + return replacementString.toLowerCase().startsWith(query.toLowerCase()); + } +} + +class RenderableSuggestOracle<T> extends MultiWordSuggestOracle { + + private SuggestBoxRenderer<T> renderer; + + // inited to avoid null checks + private Collection<T> data = new ArrayList<T>(); + + public RenderableSuggestOracle(SuggestBoxRenderer<T> renderer) { + this.renderer = renderer; + } + + @Override + public void requestSuggestions(Request request, Callback callback) { + List<RenderableSuggestion<T>> suggestions = new ArrayList<RenderableSuggestion<T>>(); + + String query = request.getQuery(); + for (T row : data) { + RenderableSuggestion<T> suggestionCandidate = new RenderableSuggestion<T>(row, renderer); + if (suggestionCandidate.matches(query)) { + suggestions.add(suggestionCandidate); + } + } + + callback.onSuggestionsReady(request, new Response(suggestions)); + } + + @Override + public void requestDefaultSuggestions(Request request, Callback callback) { + List<RenderableSuggestion<T>> suggestions = new ArrayList<RenderableSuggestion<T>>(); + + for (T row : data) { + suggestions.add(new RenderableSuggestion<T>(row, renderer)); + } + + callback.onSuggestionsReady(request, new Response(suggestions)); + } + + public void setData(Collection<T> data) { + this.data = data; + } + +} + +class EnterIgnoringNativePreviewHandler<T> implements NativePreviewHandler { + + private final ListModelTypeAheadListBox<T> listModelTypeAheadListBox; + + public EnterIgnoringNativePreviewHandler(ListModelTypeAheadListBox<T> listModelTypeAheadListBox) { + this.listModelTypeAheadListBox = listModelTypeAheadListBox; + } + + @Override + public void onPreviewNativeEvent(NativePreviewEvent event) { + NativeEvent nativeEvent = event.getNativeEvent(); + if (nativeEvent.getKeyCode() == KeyCodes.KEY_ENTER) { + // swallow the enter key otherwise the whole dialog would get submitted + nativeEvent.preventDefault(); + nativeEvent.stopPropagation(); + event.cancel(); + + // process the event here directly + Suggestion currentSelection = listModelTypeAheadListBox.getCurrentSelection(); + if (currentSelection != null) { + String replacementString = currentSelection.getReplacementString(); + listModelTypeAheadListBox.asSuggestBox().setText(replacementString); + } + + listModelTypeAheadListBox.hideSuggestions(); + } + } + +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.ui.xml new file mode 100644 index 0000000..6a32dd5 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBox.ui.xml @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";> +<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> + + <ui:with field='resources' type='org.ovirt.engine.ui.common.CommonApplicationResources' /> + + <ui:style type="org.ovirt.engine.ui.common.widget.editor.ListModelTypeAheadListBox.Style"> + .mainStyle,.enabledMainPanel,.disabledMainPanel { + display: inline-block; + height: 17px; + border: 1px solid black; + vertical-align: middle; + } + + .suggestBoxStyle { + border-width: 0px; + vertical-align: top; + height: 15px; + } + + .imagesWrapper { + float: right; + } + + .dropDownStyle { + vertical-align: top; + } + + .suggestBoxWrapperStyle { + float: left; + height: 17px; + } + + .enabledMainPanel { + background-color: white; + } + + .disabledMainPanel { + background-color: #f6f6f5; + } + </ui:style> + + <g:FlowPanel ui:field="mainPanel" addStyleNames="{style.enabledMainPanel}"> + <g:FlowPanel addStyleNames="{style.suggestBoxWrapperStyle}"> + <g:SuggestBox addStyleNames="{style.suggestBoxStyle}" ui:field="suggestBox" /> + </g:FlowPanel> + <g:FlowPanel addStyleNames="{style.imagesWrapper}"> + <g:Image ui:field="dropDownImage" addStyleNames="{style.dropDownStyle}" resource='{resources.comboBoxDropDownIcon}' /> + </g:FlowPanel> + </g:FlowPanel> + +</ui:UiBinder> diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBoxEditor.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBoxEditor.java new file mode 100644 index 0000000..92c0f47 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/ListModelTypeAheadListBoxEditor.java @@ -0,0 +1,72 @@ +package org.ovirt.engine.ui.common.widget.editor; + +import org.ovirt.engine.ui.common.widget.AbstractValidatedWidgetWithLabel; +import org.ovirt.engine.ui.common.widget.VisibilityRenderer; + +import com.google.gwt.editor.client.IsEditor; + +/** + * Composite Editor that uses {@link ListModelTypeAheadListBox}. + * @param <T> + * SuggestBox item type. + */ +public class ListModelTypeAheadListBoxEditor<T> extends AbstractValidatedWidgetWithLabel<T, ListModelTypeAheadListBox<T>> + implements IsEditor<WidgetWithLabelEditor<T, ListModelTypeAheadListBoxEditor<T>>> { + + private final WidgetWithLabelEditor<T, ListModelTypeAheadListBoxEditor<T>> editor; + + public ListModelTypeAheadListBoxEditor(SuggestBoxRenderer<T> renderer) { + this(renderer, new VisibilityRenderer.SimpleVisibilityRenderer()); + } + + public ListModelTypeAheadListBoxEditor(SuggestBoxRenderer<T> renderer, VisibilityRenderer visibilityRenderer) { + super(new ListModelTypeAheadListBox<T>(renderer), visibilityRenderer); + this.editor = WidgetWithLabelEditor.of(getContentWidget().asEditor(), this); + } + + @Override + public WidgetWithLabelEditor<T, ListModelTypeAheadListBoxEditor<T>> asEditor() { + return editor; + } + + /** + * A renderer for the suggest box. Receives an instance of the EntityModel and returns two kinds of the rendering. + */ + public static interface SuggestBoxRenderer<T> { + /** + * Returns the string that will be shown in the text box (not the suggestions list). Can be only clean string. + * <p> + * invariant: if data1 != data2 <=> getReplacementString(data1) != getReplacementString(data2) + */ + String getReplacementString(T data); + + /** + * The string which is displayed as a suggestion. Can be rich - can contain html. There are no invariants - can + * return anything. + */ + String getDisplayString(T data); + + } + + public static abstract class NullSafeSuggestBoxRenderer<T> implements SuggestBoxRenderer<T> { + + @Override + public String getReplacementString(T data) { + return emptyOr(data == null ? "" : getReplacementStringNullSafe(data)); + } + + @Override + public String getDisplayString(T data) { + return emptyOr(data == null ? "" : getDisplayStringNullSafe(data)); + } + + private String emptyOr(String string) { + return string == null ? "" : string; + } + + public abstract String getReplacementStringNullSafe(T data); + + public abstract String getDisplayStringNullSafe(T data); + + } +} diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.java index 5266955..59e502b 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.java @@ -35,6 +35,7 @@ import org.ovirt.engine.ui.common.widget.editor.EntityModelTextBoxEditor; import org.ovirt.engine.ui.common.widget.editor.EntityModelTextBoxOnlyEditor; import org.ovirt.engine.ui.common.widget.editor.ListModelListBoxEditor; +import org.ovirt.engine.ui.common.widget.editor.ListModelTypeAheadListBoxEditor; import org.ovirt.engine.ui.common.widget.form.key_value.KeyValueWidget; import org.ovirt.engine.ui.common.widget.parser.MemorySizeParser; import org.ovirt.engine.ui.common.widget.renderer.EnumRenderer; @@ -62,6 +63,8 @@ import com.google.gwt.event.logical.shared.ValueChangeEvent; import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.resources.client.CssResource; +import com.google.gwt.safehtml.client.SafeHtmlTemplates; +import com.google.gwt.safehtml.shared.SafeHtml; import com.google.gwt.text.shared.AbstractRenderer; import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; @@ -101,6 +104,14 @@ String generalTabExtendedRightWidgetWidth(); } + interface TypeAheadNameDescriptionTemplate extends SafeHtmlTemplates { + @Template("<div style='width: 600px'><div style='width: 30%; display: inline-block; border-right: 1px solid black; font-weight:bold; padding-right: 25px; float: left'>{0}</div><div style='display: inline-block; margin-left: 25px;'>{1}</div></div>") + SafeHtml input(String name, String description); + } + + private static TypeAheadNameDescriptionTemplate typeAheadNameDescriptionTemplate = + GWT.create(TypeAheadNameDescriptionTemplate.class); + @UiField protected Style style; @@ -111,23 +122,23 @@ @UiField(provided = true) @Path(value = "dataCenter.selectedItem") @WithElementId("dataCenter") - public ListModelListBoxEditor<Object> dataCenterEditor; + public ListModelTypeAheadListBoxEditor<Object> dataCenterEditor; @UiField(provided = true) @Path(value = "cluster.selectedItem") @WithElementId("cluster") - public ListModelListBoxEditor<Object> clusterEditor; + public ListModelTypeAheadListBoxEditor<Object> clusterEditor; @UiField(provided = true) @Path(value = "quota.selectedItem") @WithElementId("quota") - public ListModelListBoxEditor<Object> quotaEditor; + public ListModelTypeAheadListBoxEditor<Object> quotaEditor; @UiField @Ignore public Label nameLabel; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "name.entity") @WithElementId("name") public EntityModelTextBoxOnlyEditor nameEditor; @@ -136,7 +147,7 @@ @Ignore public InfoIcon poolNameIcon; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "description.entity") @WithElementId("description") public EntityModelTextBoxEditor descriptionEditor; @@ -144,7 +155,7 @@ @UiField(provided = true) @Path(value = "template.selectedItem") @WithElementId("template") - public ListModelListBoxEditor<Object> templateEditor; + public ListModelTypeAheadListBoxEditor<Object> templateEditor; @UiField(provided = true) @Path(value = "memSize.entity") @@ -155,17 +166,17 @@ @Ignore HTML cpuPinningLabel; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "totalCPUCores.entity") @WithElementId("totalCPUCores") public EntityModelTextBoxEditor totalvCPUsEditor; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "numOfSockets.selectedItem") @WithElementId("numOfSockets") public ListModelListBoxEditor<Object> numOfSocketsEditor; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "coresPerSocket.selectedItem") @WithElementId("coresPerSocket") public ListModelListBoxEditor<Object> corePerSocketEditor; @@ -201,7 +212,7 @@ @Ignore public InfoIcon editPoolPrestartedVmsIcon; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "prestartedVms.entity") @WithElementId("prestartedVms") public EntityModelTextBoxOnlyEditor prestartedVmsEditor; @@ -236,7 +247,7 @@ @Ignore public Label editPrestartedVmsLabel; - @UiField(provided=true) + @UiField(provided = true) @Path("prestartedVms.entity") @WithElementId("editPrestartedVms") public EntityModelTextBoxOnlyEditor editPrestartedVmsEditor; @@ -341,7 +352,7 @@ @WithElementId("isAutoAssign") public EntityModelRadioButtonEditor isAutoAssignEditor; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "cpuPinning.entity") @WithElementId("cpuPinning") public EntityModelTextBoxEditor cpuPinning; @@ -430,17 +441,17 @@ @UiField protected FlowPanel linuxBootOptionsPanel; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "kernel_path.entity") @WithElementId("kernelPath") public EntityModelTextBoxEditor kernel_pathEditor; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "initrd_path.entity") @WithElementId("initrdPath") public EntityModelTextBoxEditor initrd_pathEditor; - @UiField(provided=true) + @UiField(provided = true) @Path(value = "kernel_parameters.entity") @WithElementId("kernelParameters") public EntityModelTextBoxEditor kernel_parametersEditor; @@ -479,12 +490,15 @@ private final CommonApplicationTemplates applicationTemplates; + private final CommonApplicationResources resources; + @SuppressWarnings({ "unchecked", "rawtypes" }) public AbstractVmPopupWidget(CommonApplicationConstants constants, CommonApplicationResources resources, final CommonApplicationMessages messages, CommonApplicationTemplates applicationTemplates) { + this.resources = resources; this.messages = messages; this.applicationTemplates = applicationTemplates; @@ -591,33 +605,81 @@ @SuppressWarnings({ "rawtypes", "unchecked" }) private void initListBoxEditors() { // General tab - dataCenterEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { - @Override - public String renderNullSafe(Object object) { - return ((StoragePool) object).getname(); - } - }, new ModeSwitchingVisibilityRenderer()); + dataCenterEditor = new ListModelTypeAheadListBoxEditor<Object>( + new ListModelTypeAheadListBoxEditor.NullSafeSuggestBoxRenderer<Object>() { - clusterEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { - @Override - public String renderNullSafe(Object object) { - return ((VDSGroup) object).getname(); - } - }, new ModeSwitchingVisibilityRenderer()); + @Override + public String getReplacementStringNullSafe(Object data) { + return ((StoragePool) data).getname(); + } - quotaEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { - @Override - public String renderNullSafe(Object object) { - return ((Quota) object).getQuotaName(); - } - }, new ModeSwitchingVisibilityRenderer()); + @Override + public String getDisplayStringNullSafe(Object data) { + return typeAheadNameDescriptionTemplate.input( + ((StoragePool) data).getname(), + ((StoragePool) data).getdescription()) + .asString(); + } - templateEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { - @Override - public String renderNullSafe(Object object) { - return ((VmTemplate) object).getName(); - } - }, new ModeSwitchingVisibilityRenderer()); + }, + new ModeSwitchingVisibilityRenderer()); + + clusterEditor = new ListModelTypeAheadListBoxEditor<Object>( + new ListModelTypeAheadListBoxEditor.NullSafeSuggestBoxRenderer<Object>() { + + @Override + public String getReplacementStringNullSafe(Object data) { + return ((VDSGroup) data).getname(); + } + + @Override + public String getDisplayStringNullSafe(Object data) { + return typeAheadNameDescriptionTemplate.input( + ((VDSGroup) data).getname(), + ((VDSGroup) data).getdescription()) + .asString(); + } + + }, + new ModeSwitchingVisibilityRenderer()); + + quotaEditor = new ListModelTypeAheadListBoxEditor<Object>( + new ListModelTypeAheadListBoxEditor.NullSafeSuggestBoxRenderer<Object>() { + + @Override + public String getReplacementStringNullSafe(Object data) { + return ((Quota) data).getQuotaName(); + } + + @Override + public String getDisplayStringNullSafe(Object data) { + return typeAheadNameDescriptionTemplate.input( + ((Quota) data).getQuotaName(), + ((Quota) data).getDescription()) + .asString(); + } + + }, + new ModeSwitchingVisibilityRenderer()); + + templateEditor = new ListModelTypeAheadListBoxEditor<Object>( + new ListModelTypeAheadListBoxEditor.NullSafeSuggestBoxRenderer<Object>() { + + @Override + public String getReplacementStringNullSafe(Object data) { + return ((VmTemplate) data).getName(); + } + + @Override + public String getDisplayStringNullSafe(Object data) { + return typeAheadNameDescriptionTemplate.input( + ((VmTemplate) data).getName(), + ((VmTemplate) data).getDescription() != null ? ((VmTemplate) data).getDescription() + : "") + .asString(); + } + }, + new ModeSwitchingVisibilityRenderer()); oSTypeEditor = new ListModelListBoxEditor<Object>(new EnumRenderer(), new ModeSwitchingVisibilityRenderer()); @@ -655,7 +717,8 @@ } }, new ModeSwitchingVisibilityRenderer()); - usbSupportEditor = new ListModelListBoxEditor<Object>(new EnumRenderer(), new ModeSwitchingVisibilityRenderer()); + usbSupportEditor = + new ListModelListBoxEditor<Object>(new EnumRenderer(), new ModeSwitchingVisibilityRenderer()); numOfMonitorsEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { @Override public String renderNullSafe(Object object) { @@ -675,13 +738,13 @@ } else { return object.toString(); } - } - + }; }, new ModeSwitchingVisibilityRenderer()); // Host Tab specificHost = new RadioButton("runVmOnHostGroup"); //$NON-NLS-1$ - isAutoAssignEditor = new EntityModelRadioButtonEditor("runVmOnHostGroup", new ModeSwitchingVisibilityRenderer()); //$NON-NLS-1$ + isAutoAssignEditor = + new EntityModelRadioButtonEditor("runVmOnHostGroup", new ModeSwitchingVisibilityRenderer()); //$NON-NLS-1$ defaultHostEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { @Override public String renderNullSafe(Object object) { @@ -689,11 +752,14 @@ } }, new ModeSwitchingVisibilityRenderer()); - migrationModeEditor = new ListModelListBoxEditor<Object>(new EnumRenderer(), new ModeSwitchingVisibilityRenderer()); + migrationModeEditor = + new ListModelListBoxEditor<Object>(new EnumRenderer(), new ModeSwitchingVisibilityRenderer()); // Resource Allocation - provisioningThinEditor = new EntityModelRadioButtonEditor("provisioningGroup", new ModeSwitchingVisibilityRenderer()); //$NON-NLS-1$ - provisioningCloneEditor = new EntityModelRadioButtonEditor("provisioningGroup", new ModeSwitchingVisibilityRenderer()); //$NON-NLS-1$ + provisioningThinEditor = + new EntityModelRadioButtonEditor("provisioningGroup", new ModeSwitchingVisibilityRenderer()); //$NON-NLS-1$ + provisioningCloneEditor = + new EntityModelRadioButtonEditor("provisioningGroup", new ModeSwitchingVisibilityRenderer()); //$NON-NLS-1$ // Boot Options Tab firstBootDeviceEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.ui.xml b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.ui.xml index 2a9b5ae..c59f057 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.ui.xml +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/uicommon/popup/AbstractVmPopupWidget.ui.xml @@ -210,9 +210,9 @@ <t:DialogTabPanel width="100%" height="100%"> <t:header> <g:FlowPanel addStyleNames="{style.headerPanel}"> - <e:ListModelListBoxEditor ui:field="dataCenterEditor" /> - <e:ListModelListBoxEditor ui:field="clusterEditor" /> - <e:ListModelListBoxEditor ui:field="quotaEditor" /> + <e:ListModelTypeAheadListBoxEditor ui:field="dataCenterEditor" /> + <e:ListModelTypeAheadListBoxEditor ui:field="clusterEditor" /> + <e:ListModelTypeAheadListBoxEditor ui:field="quotaEditor" /> </g:FlowPanel> </t:header> <t:tab> @@ -258,7 +258,7 @@ <g:Label text="{constants.vms}" addStyleNames="{style.increaseVmsInPoolVms}" /> </g:FlowPanel> </g:FlowPanel> - <e:ListModelListBoxEditor ui:field="templateEditor"/> + <e:ListModelTypeAheadListBoxEditor ui:field="templateEditor"/> </g:FlowPanel> <g:FlowPanel addStyleNames="{style.sectionPanel}"> <e:EntityModelTextBoxEditor ui:field="memSizeEditor"/> diff --git a/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/comboBoxDropDownIcon.png b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/comboBoxDropDownIcon.png new file mode 100644 index 0000000..0faa549 --- /dev/null +++ b/frontend/webadmin/modules/gwt-common/src/main/resources/org/ovirt/engine/ui/common/images/comboBoxDropDownIcon.png Binary files differ diff --git a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/host/HostBondPopupView.java b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/host/HostBondPopupView.java index 2d8d0cb..3fce0f9 100644 --- a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/host/HostBondPopupView.java +++ b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/host/HostBondPopupView.java @@ -49,7 +49,7 @@ @UiField(provided = true) @Path(value = "bond.selectedItem") - ListModelSuggestBoxEditor bondSuggestEditor; + ListModelSuggestBoxEditor<Object> bondSuggestEditor; @UiField(provided = true) @Path(value = "bond.selectedItem") @@ -123,7 +123,7 @@ public HostBondPopupView(EventBus eventBus, ApplicationResources resources, final ApplicationConstants constants) { super(eventBus, resources); - bondSuggestEditor = new ListModelSuggestBoxEditor(); + bondSuggestEditor = new ListModelSuggestBoxEditor<Object>(); bondEditor = new ListModelListBoxEditor<Object>(); networkEditor = new ListModelListBoxEditor<Object>(new NullSafeRenderer<Object>() { @Override -- To view, visit http://gerrit.ovirt.org/14936 To unsubscribe, visit http://gerrit.ovirt.org/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I956af3c675894c850a1a104a81cec49f4bd62011 Gerrit-PatchSet: 1 Gerrit-Project: ovirt-engine Gerrit-Branch: master Gerrit-Owner: Tomas Jelinek <[email protected]> _______________________________________________ Engine-patches mailing list [email protected] http://lists.ovirt.org/mailman/listinfo/engine-patches
