Fixed MaterialListValueBox documentation and codeblocks #90

Author: kevzlou7979

pom.xml

@@ -4,14 +4,14 @@
     <parent>
         <artifactId>gwt-material-parent</artifactId>
         <groupId>com.github.gwtmaterialdesign</groupId>
-        <version>2.0</version>
+        <version>2.0.1-SNAPSHOT</version>
     </parent>
 
     <modelVersion>4.0.0</modelVersion>
 
     <artifactId>gwt-material-demo</artifactId>
     <packaging>war</packaging>
-    <version>2.0</version>
+    <version>2.0.1-SNAPSHOT</version>
     <name>Gwt Material Demo</name>
     <description>Showcase for gwt-material</description>
 
@@ -34,7 +34,7 @@
         <gwt.version>2.8.1</gwt.version>
         <gwtp.version>1.5.3</gwtp.version>
         <gin.version>2.1.2</gin.version>
-        <gwt-material.version>2.0</gwt-material.version>
+        <gwt-material.version>2.0.1-SNAPSHOT</gwt-material.version>
 
         <gwt.style>PRETTY</gwt.style>
 

src/main/java/gwt/material/design/demo/client/application/components/forms/listbox/ListBoxView.java

@@ -29,19 +29,49 @@
 import com.google.gwt.user.client.ui.Widget;
 import com.gwtplatform.mvp.client.ViewImpl;
 import gwt.material.design.client.ui.MaterialListBox;
+import gwt.material.design.client.ui.MaterialListValueBox;
 import gwt.material.design.client.ui.MaterialToast;
+import gwt.material.design.demo.client.application.dto.DataHelper;
+import gwt.material.design.demo.client.application.dto.Hero;
 
 import javax.inject.Inject;
 
 public class ListBoxView extends ViewImpl implements ListBoxPresenter.MyView {
     interface Binder extends UiBinder<Widget, ListBoxView> {
     }
 
-    @UiField MaterialListBox lstOptions, lstSetValue, lstAddOptions, lstRemoveOptions, lstLazy;
+    @UiField
+    MaterialListBox lstOptions, lstSetValue, lstAddOptions, lstRemoveOptions, lstLazy;
+
+    @UiField
+    MaterialListValueBox<Hero> lstValueBox, lstValueBoxMultiple, lstEmptyPlacehoder, lstFocusAndBlur;
 
     @Inject
     ListBoxView(Binder uiBinder) {
         initWidget(uiBinder.createAndBindUi(this));
+
+        buildListHeroes(lstValueBoxMultiple);
+        buildListHeroes(lstValueBox);
+        buildListHeroes(lstEmptyPlacehoder);
+
+        lstFocusAndBlur.addFocusHandler(focusEvent -> MaterialToast.fireToast("Focus Event Fired"));
+        lstFocusAndBlur.addBlurHandler(blurEvent -> MaterialToast.fireToast("Blur Event Fired"));
+        buildListHeroes(lstFocusAndBlur);
+
+        lstOptions.addFocusHandler(focusEvent -> {
+            MaterialToast.fireToast("FOCUSED");
+        });
+
+        lstOptions.addBlurHandler(blurEvent -> {
+            MaterialToast.fireToast("BLURRED");
+        });
+    }
+
+    protected void buildListHeroes(MaterialListValueBox<Hero> listBox) {
+        listBox.addValueChangeHandler(valueChangeEvent -> MaterialToast.fireToast("VALUE [ " + valueChangeEvent.getValue().getName() + " ]"));
+        for (Hero hero : DataHelper.getAllHeroes()) {
+            listBox.addItem(hero, hero.getName());
+        }
     }
 
     @UiHandler("addItems")

src/main/java/gwt/material/design/demo/client/application/components/forms/listbox/ListBoxView.ui.xml

@@ -49,6 +49,28 @@
       </demo:PrettyPre>
     </m:MaterialRow>
 
+    <m:MaterialRow addStyleNames="code">
+      <m:MaterialTitle title="Using MaterialListValueBox" description="You can easily set the generic param with your desired object into the MaterialListValueBox." />
+      <m:MaterialListValueBox ui:field="lstValueBox" placeholder="Choose your hero" grid="s12"/>
+      <demo:PrettyPre addStyleNames="lang-xml">
+        &emsp;// UiBinder<br/>
+        &lt;m:MaterialListValueBox ui:field="lstIntegerListBox" placeholder="Choose your hero" grid="s12"/>
+      </demo:PrettyPre>
+      <demo:PrettyPre addStyleNames="lang-java">
+        &emsp;// Java <br/>
+        @UiField <br/>
+        MaterialListValueBox&lt;Hero> lstIntegerListBox; <br/><br/>
+
+        for (Hero hero : DataHelper.getAllHeroes()) { <br/>
+        &emsp;lstIntegerListBox.addItem(hero, hero.getName()); <br/>
+        } <br/><br/>
+
+        lstIntegerListBox.addValueChangeHandler(valueChangeEvent -> { <br/>
+        &emsp;MaterialToast.fireToast("VALUE: " + valueChangeEvent.getValue().getName()); <br/>
+        });
+      </demo:PrettyPre>
+    </m:MaterialRow>
+
     <m:MaterialRow addStyleNames="code">
       <m:MaterialTitle title="Add Option" description="You can easily add an item by calling addItem(Item)"/>
       <m:MaterialListBox placeholder="ListBox" grid="s12" ui:field="lstAddOptions">
@@ -162,6 +184,31 @@
       </demo:PrettyPre>
     </m:MaterialRow>
 
+
+    <m:MaterialRow addStyleNames="code">
+      <m:MaterialBadge text="FEATURE UPDATE" textColor="AMBER" shadow="1" layoutPosition="RELATIVE" float="RIGHT" backgroundColor="AMBER_LIGHTEN_5" />
+      <m:MaterialTitle title="Empty Placeholder" />
+      <m:MaterialListValueBox ui:field="lstEmptyPlacehoder" emptyPlaceHolder="Select your Hero" grid="s12"/>
+      <demo:PrettyPre addStyleNames="lang-xml">
+        &emsp;&lt;m:MaterialListValueBox ui:field="lstEmptyPlacehoder" emptyPlaceHolder="Select your Hero"/>
+      </demo:PrettyPre>
+    </m:MaterialRow>
+
+    <m:MaterialRow addStyleNames="code">
+      <m:MaterialBadge text="FEATURE UPDATE" textColor="AMBER" shadow="1" layoutPosition="RELATIVE" float="RIGHT" backgroundColor="AMBER_LIGHTEN_5" />
+      <m:MaterialTitle title="Focus and Blur Handlers" />
+      <m:MaterialListValueBox ui:field="lstFocusAndBlur" placeholder="Select your Hero" grid="s12"/>
+      <demo:PrettyPre addStyleNames="lang-java">
+        &emsp;lstOptions.addFocusHandler(focusEvent -> { <br/>
+        &emsp;MaterialToast.fireToast("FOCUSED");<br/>
+        });<br/><br/>
+
+        lstOptions.addBlurHandler(blurEvent -> {<br/>
+        &emsp;MaterialToast.fireToast("BLURRED");<br/>
+        });
+      </demo:PrettyPre>
+    </m:MaterialRow>
+
     <m:MaterialRow addStyleNames="code">
       <m:MaterialBadge text="FEATURE UPDATE" textColor="AMBER" shadow="1" layoutPosition="RELATIVE" float="RIGHT" backgroundColor="AMBER_LIGHTEN_5" />
       <m:MaterialTitle title="ListBox : Lazyload"/>