Custom Widgets & Composites

package com.example.bookshelf.client.widget;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class OptionalTextBox extends Composite implements ClickHandler {
  private final TextBox textBox = new TextBox();
  private final CheckBox checkBox = new CheckBox();

  public OptionalTextBox(String caption) {
    VerticalPanel panel = new VerticalPanel();
    panel.add(checkBox);
    panel.add(textBox);
    checkBox.setText(caption);
    checkBox.setValue(true);
    checkBox.addClickHandler(this);
    initWidget(panel);               // every composite must call this exactly once
    setStyleName("bk-OptionalTextBox");
  }

  @Override
  public void onClick(ClickEvent event) {
    textBox.setEnabled(checkBox.getValue());
  }

  public String getCaption() {
    return checkBox.getText();
  }

  public void setCaption(String caption) {
    checkBox.setText(caption);
  }
}

public class EditableLabel extends Composite implements HasText, HasValue<String> {
  private static final int VIEW = 0;
  private static final int EDIT = 1;

  private final DeckPanel deck = new DeckPanel();
  private final Label label = new Label();
  private final TextBox box = new TextBox();
  private String value = "";

  public EditableLabel(String text) {
    deck.add(label);
    deck.add(box);
    initWidget(deck);
    setStyleName("bk-EditableLabel");
    label.addClickHandler((ClickEvent e) -> edit());
    box.addBlurHandler((BlurEvent e) -> commit());
    box.addKeyDownHandler((KeyDownEvent e) -> {
      int key = e.getNativeKeyCode();
      if (key == KeyCodes.KEY_ENTER) {
        commit();
      } else if (key == KeyCodes.KEY_ESCAPE) {
        cancel();
      }
    });
    setValue(text);
  }

  private void edit() {
    box.setText(value);
    deck.showWidget(EDIT);
    box.setFocus(true);
    box.selectAll();
  }

  private void commit() {
    if (deck.getVisibleWidget() == EDIT) {
      deck.showWidget(VIEW);
      setValue(box.getText(), true);
    }
  }

  private void cancel() {
    deck.showWidget(VIEW);
  }

  @Override public String getText() { return getValue(); }
  @Override public void setText(String text) { setValue(text); }
  @Override public String getValue() { return value; }
  @Override public void setValue(String v) { setValue(v, false); }

  @Override
  public void setValue(String v, boolean fireEvents) {
    String old = value;
    value = v == null ? "" : v;
    label.setText(value);                 // setText, never setHTML, for user data
    deck.showWidget(VIEW);
    if (fireEvents) {
      ValueChangeEvent.fireIfNotEqual(this, old, value);
    }
  }

  @Override
  public HandlerRegistration addValueChangeHandler(ValueChangeHandler<String> handler) {
    return addHandler(handler, ValueChangeEvent.getType());
  }
}

public class RatingWidget extends Composite
    implements HasValue<Integer>, HasEnabled, Focusable, IsEditor<LeafValueEditor<Integer>> {

  public static final int MAX = 5;

  private final FocusPanel focus = new FocusPanel();
  private final InlineLabel[] stars = new InlineLabel[MAX];
  private int value;
  private boolean enabled = true;
  private LeafValueEditor<Integer> editor;

  public RatingWidget() {
    FlowPanel row = new FlowPanel();
    for (int i = 0; i < MAX; i++) {
      final int rating = i + 1;
      InlineLabel star = new InlineLabel();
      star.setStyleName("bk-star");
      star.addClickHandler(e -> {
        if (enabled) {
          setValue(rating, true);
        }
      });
      stars[i] = star;
      row.add(star);
    }
    focus.setWidget(row);
    focus.addKeyDownHandler(e -> {
      if (!enabled) {
        return;
      }
      int key = e.getNativeKeyCode();
      if (key == KeyCodes.KEY_RIGHT || key == KeyCodes.KEY_UP) {
        setValue(value + 1, true);
        e.preventDefault();
      } else if (key == KeyCodes.KEY_LEFT || key == KeyCodes.KEY_DOWN) {
        setValue(value - 1, true);
        e.preventDefault();
      }
    });
    initWidget(focus);
    setStyleName("bk-Rating");
    Roles.getSliderRole().set(getElement());
    Roles.getSliderRole().setAriaValueminProperty(getElement(), 0);
    Roles.getSliderRole().setAriaValuemaxProperty(getElement(), MAX);
    render();
  }

  private void render() {
    for (int i = 0; i < MAX; i++) {
      stars[i].setText(i < value ? "★" : "☆");
    }
    Roles.getSliderRole().setAriaValuenowProperty(getElement(), value);
  }

  @Override public Integer getValue() { return value; }
  @Override public void setValue(Integer v) { setValue(v, false); }

  @Override
  public void setValue(Integer v, boolean fireEvents) {
    Integer old = value;
    value = v == null ? 0 : Math.max(0, Math.min(MAX, v));
    render();
    if (fireEvents) {
      ValueChangeEvent.fireIfNotEqual(this, old, value);
    }
  }

  @Override
  public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Integer> handler) {
    return addHandler(handler, ValueChangeEvent.getType());
  }

  @Override public boolean isEnabled() { return enabled; }

  @Override
  public void setEnabled(boolean enabled) {
    this.enabled = enabled;
    setStyleDependentName("disabled", !enabled);
    Roles.getSliderRole().setAriaDisabledState(getElement(), !enabled);
  }

  @Override public int getTabIndex() { return focus.getTabIndex(); }
  @Override public void setAccessKey(char key) { focus.setAccessKey(key); }
  @Override public void setFocus(boolean focused) { focus.setFocus(focused); }
  @Override public void setTabIndex(int index) { focus.setTabIndex(index); }

  @Override
  public LeafValueEditor<Integer> asEditor() {
    if (editor == null) {
      editor = TakesValueEditor.of(this);
    }
    return editor;
  }
}

RatingWidget value=5 events=3 4 5 text=★★★★★
RatingWidget disabled click -> value=5 class=bk-Rating bk-Rating-disabled
RatingWidget setValue(99) clamps to 5
RatingWidget aria: role=slider now=5 min=0 max=5 disabled=true tabindex=0
RatingWidget editor value=5
RatingWidget after editor.setValue(2): 2

<div tabindex="0" class="bk-Rating bk-Rating-disabled" role="slider" aria-valuemin="0"
     aria-valuemax="5" aria-valuenow="2" aria-disabled="true">
  <input type="text" tabindex="-1" aria-hidden="true"
         style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
  <div><span class="bk-star">★</span><span class="bk-star">★</span><span class="bk-star">☆</span>
       <span class="bk-star">☆</span><span class="bk-star">☆</span></div>
</div>

.bk-star { cursor: pointer; font-size: 1.4em; color: #c98a00; }
.bk-Rating-disabled .bk-star { cursor: default; color: #999; }
.bk-Rating:focus { outline: 2px solid #3366cc; }
.bk-chip { display: inline-block; margin: 0 .3em .3em 0; padding: .1em .5em; border-radius: 1em;
           background: #e6eefc; }
.bk-chip-remove { border: 0; background: none; cursor: pointer; font-size: 1em; }

public class Chip extends Widget implements HasText, HasCloseHandlers<Chip> {
  private final SpanElement label = Document.get().createSpanElement();
  private final ButtonElement remove = Document.get().createPushButtonElement();

  public Chip(String text) {
    SpanElement root = Document.get().createSpanElement();
    setElement(root);                       // exactly once, before anything else touches the element
    setStyleName("bk-chip");
    label.setClassName("bk-chip-label");
    remove.setClassName("bk-chip-remove");
    remove.setInnerText("×");          // text, not HTML
    root.appendChild(label);
    root.appendChild(remove);
    setText(text);
    sinkEvents(Event.ONCLICK);              // without this bit onBrowserEvent never sees a click
  }

  @Override public String getText() { return label.getInnerText(); }

  @Override
  public void setText(String text) {
    label.setInnerText(text);               // textContent: <script> in an author name stays text
    remove.setTitle("Remove " + text);
  }

  @Override
  public void onBrowserEvent(Event event) {
    super.onBrowserEvent(event);            // keeps handlers added with addDomHandler working
    if (event.getTypeInt() == Event.ONCLICK
        && Element.is(event.getEventTarget())
        && remove.isOrHasChild(Element.as(event.getEventTarget()))) {
      event.stopPropagation();
      CloseEvent.fire(this, this);
    }
  }

  @Override
  public HandlerRegistration addCloseHandler(CloseHandler<Chip> handler) {
    return addHandler(handler, CloseEvent.getType());
  }
}

public class ChipPanel extends ComplexPanel {
  public ChipPanel() {
    setElement(Document.get().createDivElement());
    setStyleName("bk-chips");
  }

  @Override
  public void add(Widget child) {
    add(child, getElement());               // detaches from the old parent, adds to the DOM, adopts
  }

  public void insert(Widget child, int beforeIndex) {
    insert(child, getElement(), beforeIndex, true);
  }
}

public class AuthorChips extends Composite
    implements HasValue<List<String>>, HasEnabled, IsEditor<LeafValueEditor<List<String>>> {

  private final ChipPanel chips = new ChipPanel();
  private final TextBox input = new TextBox();
  private final List<String> authors = new ArrayList<>();
  private LeafValueEditor<List<String>> editor;

  public AuthorChips() {
    FlowPanel root = new FlowPanel();
    root.add(chips);
    root.add(input);
    initWidget(root);
    setStyleName("bk-AuthorChips");
    input.getElement().setAttribute("placeholder", "Add an author");
    input.addKeyDownHandler(e -> {
      if (e.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
        add(input.getText().trim());
        input.setText("");
      }
    });
  }

  private void add(String name) {
    if (name.isEmpty() || authors.contains(name)) {
      return;
    }
    List<String> old = getValue();
    addChip(name);
    authors.add(name);
    ValueChangeEvent.fireIfNotEqual(this, old, getValue());
  }

  private void addChip(String name) {
    final Chip chip = new Chip(name);
    chip.addCloseHandler(e -> {
      List<String> old = getValue();
      authors.remove(chip.getText());
      chips.remove(chip);
      ValueChangeEvent.fireIfNotEqual(this, old, getValue());
    });
    chips.add(chip);
  }

  @Override public List<String> getValue() { return new ArrayList<>(authors); }   // defensive copy
  @Override public void setValue(List<String> v) { setValue(v, false); }

  @Override
  public void setValue(List<String> v, boolean fireEvents) {
    List<String> old = getValue();
    authors.clear();
    chips.clear();
    if (v != null) {
      for (String name : v) {
        authors.add(name);
        addChip(name);
      }
    }
    if (fireEvents) {
      ValueChangeEvent.fireIfNotEqual(this, old, getValue());
    }
  }

  @Override
  public HandlerRegistration addValueChangeHandler(ValueChangeHandler<List<String>> handler) {
    return addHandler(handler, ValueChangeEvent.getType());
  }

  @Override public boolean isEnabled() { return input.isEnabled(); }
  @Override public void setEnabled(boolean enabled) { input.setEnabled(enabled); }

  @Override
  public LeafValueEditor<List<String>> asEditor() {
    if (editor == null) {
      editor = TakesValueEditor.of(this);
    }
    return editor;
  }
}

<div class="bk-AuthorChips"><div class="bk-chips">
  <span class="bk-chip"><span class="bk-chip-label">Frank Herbert</span>
    <button type="button" class="bk-chip-remove" title="Remove Frank Herbert">×</button></span>
  <span class="bk-chip"><span class="bk-chip-label">&lt;script&gt;alert(1)&lt;/script&gt;</span>
    <button type="button" class="bk-chip-remove" title="Remove &lt;script&gt;alert(1)&lt;/script&gt;">×</button></span>
</div><input type="text" class="gwt-TextBox" placeholder="Add an author"></div>

AuthorChips after removing first chip: value=[<script>alert(1)</script>] events=[<script>alert(1)</script>]
AuthorChips after Enter (twice): value=[<script>alert(1)</script>, Brian Herbert] events=[<script>alert(1)</script>] [<script>alert(1)</script>, Brian Herbert]
AuthorChips after setValue(null,true): [] chips children=0
AuthorChips getValue returns a copy: true

public class ReviewBox extends Composite implements HasValue<ReviewBox.Review> {

  /** Immutable, with equals so that fireIfNotEqual works. */
  public static final class Review {
    private final int rating;
    private final String text;

    public Review(int rating, String text) {
      this.rating = rating;
      this.text = text;
    }

    public int getRating() { return rating; }
    public String getText() { return text; }

    @Override
    public boolean equals(Object o) {
      return o instanceof Review && ((Review) o).rating == rating && ((Review) o).text.equals(text);
    }

    @Override public int hashCode() { return 31 * rating + text.hashCode(); }
  }

  private final RatingWidget rating = new RatingWidget();
  private final TextArea text = new TextArea();
  private final Button save = new Button("Save review");
  private Review value = new Review(0, "");

  public ReviewBox() {
    VerticalPanel panel = new VerticalPanel();
    panel.add(rating);
    panel.add(text);
    panel.add(save);
    initWidget(panel);
    setStyleName("bk-ReviewBox");
    save.addClickHandler(e -> setValue(new Review(rating.getValue(), text.getText()), true));
  }

  @Override public Review getValue() { return value; }
  @Override public void setValue(Review v) { setValue(v, false); }

  @Override
  public void setValue(Review v, boolean fireEvents) {
    Review old = value;
    value = v == null ? new Review(0, "") : v;
    rating.setValue(value.getRating());
    text.setText(value.getText());
    if (fireEvents) {
      ValueChangeEvent.fireIfNotEqual(this, old, value);
    }
  }

  @Override
  public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Review> handler) {
    return addHandler(handler, ValueChangeEvent.getType());
  }
}

ReviewBox events=4/Great  getValue=4/Great
ReviewBox element tag=TABLE class=bk-ReviewBox

<module>
  <inherits name="com.google.gwt.user.User"/>
  <inherits name="com.google.gwt.junit.JUnit"/>
  <inherits name="com.google.gwt.editor.Editor"/>
  <source path="client/widget"/>
  <set-property name="user.agent" value="safari"/>
</module>

public class RatingWidgetGwtTest extends GWTTestCase {
  @Override
  public String getModuleName() {
    return "com.example.bookshelf.LabTest";
  }

  public void testClickingAStarFiresOneValueChange() {
    RatingWidget rating = new RatingWidget();
    RootPanel.get().add(rating);
    final int[] events = {0};
    rating.addValueChangeHandler(e -> events[0]++);

    rating.getElement().getElementsByTagName("span").getItem(2)
        .dispatchEvent(Document.get().createClickEvent(0, 0, 0, 0, 0, false, false, false, false));

    assertEquals(Integer.valueOf(3), rating.getValue());
    assertEquals(1, events[0]);
    assertEquals("3", rating.getElement().getAttribute("aria-valuenow"));
  }

  public void testValueIsClamped() {
    RatingWidget rating = new RatingWidget();
    rating.setValue(99);
    assertEquals(Integer.valueOf(RatingWidget.MAX), rating.getValue());
  }
}