diff options
5 files changed, 262 insertions, 23 deletions
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyWidgets.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyWidgets.java index 324fc0a1..3f280133 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyWidgets.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyWidgets.java @@ -20,14 +20,18 @@ import com.google.gwt.query.client.GQuery; import com.google.gwt.query.client.plugins.widgets.ButtonWidgetFactory; import com.google.gwt.query.client.plugins.widgets.DateBoxWidgetFactory; import com.google.gwt.query.client.plugins.widgets.DisclosurePanelWidgetFactory; +import com.google.gwt.query.client.plugins.widgets.ListBoxWidgetFactory; +import com.google.gwt.query.client.plugins.widgets.PasswordTextBoxWidgetFactory; import com.google.gwt.query.client.plugins.widgets.RichTextWidgetFactory; import com.google.gwt.query.client.plugins.widgets.TabPanelWidgetFactory; import com.google.gwt.query.client.plugins.widgets.TextBoxWidgetFactory; import com.google.gwt.query.client.plugins.widgets.WidgetFactory; import com.google.gwt.query.client.plugins.widgets.DisclosurePanelWidgetFactory.DisclosurePanelOptions; +import com.google.gwt.query.client.plugins.widgets.ListBoxWidgetFactory.ListBoxOptions; import com.google.gwt.query.client.plugins.widgets.TabPanelWidgetFactory.TabPanelOptions; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.DisclosurePanel; +import com.google.gwt.user.client.ui.PasswordTextBox; import com.google.gwt.user.client.ui.TabPanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.Widget; @@ -90,6 +94,36 @@ public interface LazyWidgets<T> extends LazyBase<T>{ LazyWidgets<T> textBox(Function... initFunctions); /** + * Create a {@link PasswordTextBox} widget for each selected element. The + * <code>initFunctions</code> will be called on each new {@link PasswordTextBox} + * created by passing them in parameter. + * + * A {@link PasswordTextBox} is created if the element is a <i>input</i> with type + * <i>password</i>, a <i>div</i> or a<i>span</i> element. + */ + LazyWidgets<T> passwordBox(Function... initFunctions); + + /** + * Create a {@link ListBox} widget for each selected element. The + * <code>initFunctions</code> will be called on each new {@link ListBox} + * created by passing them in parameter. + * + * A {@link ListBox} is created if the element is a <i>input</i> with type + * <i>password</i>, a <i>div</i> or a<i>span</i> element. + */ + LazyWidgets<T> listBox(Function... initFunctions); + + /** + * Create a {@link ListBox} widget for each selected element. The + * <code>initFunctions</code> will be called on each new {@link ListBox} + * created by passing them in parameter. + * + * A {@link ListBox} is created if the element is a <i>input</i> with type + * <i>password</i>, a <i>div</i> or a<i>span</i> element. + */ + LazyWidgets<T> listBox(ListBoxOptions options, Function... initFunctions); + + /** * Try to create a widget using the given factory and the given options for * each element of the query. Returns a new gquery set of elements with the * new widgets created. diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Widgets.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Widgets.java index a4fcceee..f238fb32 100755 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Widgets.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Widgets.java @@ -21,14 +21,18 @@ import com.google.gwt.query.client.GQuery; import com.google.gwt.query.client.plugins.widgets.ButtonWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.DateBoxWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.DisclosurePanelWidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.ListBoxWidgetFactory;
+import com.google.gwt.query.client.plugins.widgets.PasswordTextBoxWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.RichTextWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.TabPanelWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.TextBoxWidgetFactory;
import com.google.gwt.query.client.plugins.widgets.WidgetFactory;
import com.google.gwt.query.client.plugins.widgets.DisclosurePanelWidgetFactory.DisclosurePanelOptions;
+import com.google.gwt.query.client.plugins.widgets.ListBoxWidgetFactory.ListBoxOptions;
import com.google.gwt.query.client.plugins.widgets.TabPanelWidgetFactory.TabPanelOptions;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DisclosurePanel;
+import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
@@ -127,6 +131,43 @@ public class Widgets extends QueuePlugin<Widgets> { }
/**
+ * Create a {@link PasswordTextBox} widget for each selected element. The
+ * <code>initFunctions</code> will be called on each new {@link PasswordTextBox}
+ * created by passing them in parameter.
+ *
+ * A {@link PasswordTextBox} is created if the element is a <i>input</i> with type
+ * <i>password</i>, a <i>div</i> or a<i>span</i> element.
+ */
+ public Widgets passwordBox(Function... initFunctions) {
+ return widgets(new PasswordTextBoxWidgetFactory(), initFunctions);
+ }
+
+ /**
+ * Create a {@link ListBox} widget for each selected element. The
+ * <code>initFunctions</code> will be called on each new {@link ListBox}
+ * created by passing them in parameter.
+ *
+ * A {@link ListBox} is created if the element is a <i>input</i> with type
+ * <i>password</i>, a <i>div</i> or a<i>span</i> element.
+ */
+ public Widgets listBox(Function... initFunctions) {
+ return listBox(new ListBoxOptions(), initFunctions);
+ }
+
+ /**
+ * Create a {@link ListBox} widget for each selected element. The
+ * <code>initFunctions</code> will be called on each new {@link ListBox}
+ * created by passing them in parameter.
+ *
+ * A {@link ListBox} is created if the element is a <i>input</i> with type
+ * <i>password</i>, a <i>div</i> or a<i>span</i> element.
+ */
+ public Widgets listBox(ListBoxOptions options, Function... initFunctions) {
+ return widgets(new ListBoxWidgetFactory(options), initFunctions);
+ }
+
+
+ /**
* Create and return a widget using the given factory and the given options
*/
protected <W extends Widget> W widget(WidgetFactory<W> factory,
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ListBoxWidgetFactory.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ListBoxWidgetFactory.java new file mode 100644 index 00000000..6dda929a --- /dev/null +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/ListBoxWidgetFactory.java @@ -0,0 +1,119 @@ +package com.google.gwt.query.client.plugins.widgets; + +import static com.google.gwt.query.client.GQuery.$; + +import com.google.gwt.dom.client.Document; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.SelectElement; +import com.google.gwt.query.client.GQuery; +import com.google.gwt.user.client.ui.ListBox; + +/** + * Factory used to create a {@link ListBox} widget. A {@link ListBox} is created + * if the element is a <i>select</i>, a <i>ul</i>, a <i>ol</i>, a <i>div</i> or + * a<i>span</i> element. In case of <i>ul</i>, <i>ol</i>, <i>div</i> and + * <i>span</i>, inner text of direct children will be composed the elements of + * the list + * + */ +public class ListBoxWidgetFactory implements WidgetFactory<ListBox> { + + /** + * Options used to create a {@link ListBox} + * + */ + public static class ListBoxOptions implements WidgetOptions { + + private String optionsSelector; + private boolean multipleSelect; + + public ListBoxOptions() { + initDefault(); + } + + public ListBoxOptions(String optionsSelector, boolean multipleSelect) { + this.optionsSelector = optionsSelector; + this.multipleSelect = multipleSelect; + } + + public String getOptionsSelector() { + return optionsSelector; + } + + public boolean isMultipleSelect() { + return multipleSelect; + } + + /** + * Set the css selector to use for selecting elements playing roles of the + * list items. The value of the items will be the inner texts of the + * selected elements + * + * If this options is null, the inner text of the direct children of the + * element will be used as items list. + * + * This options is used if the element is not a <i>select</i> element. + * + * @param optionsSelector + */ + public void setOptionsSelector(String optionsSelector) { + this.optionsSelector = optionsSelector; + } + + public void setMultipleSelect(boolean multipleSelect) { + this.multipleSelect = multipleSelect; + } + + private void initDefault() { + optionsSelector = null; + multipleSelect = false; + } + } + + private ListBoxOptions options; + + public ListBoxWidgetFactory(ListBoxOptions options) { + this.options = options; + } + + public ListBox create(Element e) { + + if (WidgetsUtils.matchesTags(e, "select")) { + + SelectElement selectElement = e.cast(); + + if (selectElement.isMultiple() != options.isMultipleSelect()) { + selectElement.setMultiple(options.isMultipleSelect()); + } + + return ListBox.wrap(e); + } + + if (WidgetsUtils.matchesTags(e, "ul", "ol", "div", "span")) { + SelectElement selectElement = Document.get().createSelectElement( + options.isMultipleSelect()); + + WidgetsUtils.replace(e, selectElement); + + ListBox listBox = ListBox.wrap(selectElement); + + GQuery itemsList = getItemsList(e); + + for (Element item : itemsList.elements()) { + listBox.addItem(item.getInnerText()); + } + + return listBox; + } + + return null; + } + + private GQuery getItemsList(Element e) { + if (options.getOptionsSelector() != null) { + return $(options.getOptionsSelector(), e); + } + + return $(e).children(); + } +}
\ No newline at end of file diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java index 61ac65fc..29a20d2a 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java @@ -22,18 +22,18 @@ import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.query.client.Function;
+import com.google.gwt.query.client.plugins.widgets.ListBoxWidgetFactory.ListBoxOptions;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
-import com.google.gwt.user.client.ui.RichTextArea;
import com.google.gwt.user.client.ui.Widget;
-import com.google.gwt.user.datepicker.client.DateBox;
public class GwtQueryWidgetModule implements EntryPoint {
public void onModuleLoad() {
$(".inputText").as(Widgets).textBox();
+ $(".inputPsw").as(Widgets).passwordBox();
$(".btn").as(Widgets).button(new Function() {
@@ -57,13 +57,11 @@ public class GwtQueryWidgetModule implements EntryPoint { });
$("#tabs").as(Widgets).tabPanel();
-
$(".date").as(Widgets).datebox();
-
- $(".editable").as(Widgets).richtext();
-
-
+ $(".editable").as(Widgets).richtext();
$("#disclosure").as(Widgets).disclosurePanel();
+ $(".list").as(Widgets).listBox();
+ $("#multiSelect").as(Widgets).listBox(new ListBoxOptions(".item", true));
}
}
diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html index 29217aff..e9249222 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html @@ -3,23 +3,39 @@ <title>GQuery Demo</title>
<script language="javascript"
src="gwtquery.samples.GwtQueryWidgets.nocache.js"></script>
+<style type="text/css">
+ .outer{
+ margin : 5px;
+ }
+</style>
</head>
<body>
<div class="outer">
<div class="btn">Make me a button 1!</div>
-<a class="btn">Make me a button 2!</a> <span class="btn">Make me
-a button 3!</span>
+<a class="btn">Make me a button 2!</a>
+<span class="btn">Make me a button 3!</span>
<button class="btn">Make me a button 4!</button>
<div class="btn">Make me a button 5!</div>
<div class="btn">Make me a button 6!</div>
-<input type="text" class="date" value="dd/MM/yyyy"/>
+
</div>
+<input type="text" class="date" value="dd/MM/yyyy" />
+
+<div class="outer">
<div class="inputText">I will be an Input</div>
-<span class="inputText">I will be an Input</span>
+<span class="inputText">I will be an Input</span>
<input class="inputText" type="text"></input>
+</div>
+<div class="outer">
+<div class="inputPsw">I will be an password input</div>
+<span class="inputPsw">I will be an password input</span>
+<input class="inputPsw" type="password"></input>
+</div>
+
+<div class="outer">
<div id="tabs">
<h3>First tab</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
@@ -48,23 +64,24 @@ egestas, mi sapien ullamcorper diam, sit amet molestie mauris odio at lacus.</div>
<h3>Third tab</h3>
-<div class='editable'>Vestibulum turpis eros, tempor et hendrerit sit amet,
-hendrerit ut urna. Integer aliquam, neque non sollicitudin pulvinar,
-orci neque faucibus mauris, a molestie massa ligula vitae eros. Proin
-egestas, purus in pharetra aliquam, dolor odio faucibus lorem, ac
-egestas mi orci ac est. Maecenas pellentesque dui id felis tempus
-vestibulum. Vestibulum vitae nisi tortor. Etiam risus arcu, gravida quis
-pellentesque non, sodales at felis. Cras eros diam, pretium ut
-sollicitudin ut, vulputate a ipsum. Curabitur quis leo urna, in bibendum
-nibh. Ut viverra convallis purus vitae eleifend. Cras bibendum nulla a
-felis vestibulum consequat. Aliquam erat volutpat.</div>
+<div class='editable'>Vestibulum turpis eros, tempor et hendrerit
+sit amet, hendrerit ut urna. Integer aliquam, neque non sollicitudin
+pulvinar, orci neque faucibus mauris, a molestie massa ligula vitae
+eros. Proin egestas, purus in pharetra aliquam, dolor odio faucibus
+lorem, ac egestas mi orci ac est. Maecenas pellentesque dui id felis
+tempus vestibulum. Vestibulum vitae nisi tortor. Etiam risus arcu,
+gravida quis pellentesque non, sodales at felis. Cras eros diam, pretium
+ut sollicitudin ut, vulputate a ipsum. Curabitur quis leo urna, in
+bibendum nibh. Ut viverra convallis purus vitae eleifend. Cras bibendum
+nulla a felis vestibulum consequat. Aliquam erat volutpat.</div>
</div>
</div>
+<div class="outer">
<div id="disclosure">
<h3>Show me</h3>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
-mollis dignissim mattis. In hac habitasse platea dictumst. Cras gravida
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis
+dignissim mattis. In hac habitasse platea dictumst. Cras gravida
pellentesque purus, ullamcorper euismod enim ornare ac. Suspendisse sed
tortor diam. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Integer a cursus erat. Nam in molestie
@@ -75,7 +92,37 @@ velit ac nunc dapibus volutpat eget vel eros. Maecenas tincidunt, turpis vel placerat imperdiet, metus elit mollis sapien, et egestas felis felis
vitae metus.</div>
+</div>
+
+<div class="outer">
+<select class="list">
+ <option>option 11</option>
+ <option>option 12</option>
+ <option>option 13</option>
+ <option>option 14</option>
+</select>
+
+<ul class="list">
+ <li>option 21</li>
+ <li>option 22</li>
+ <li>option 23</li>
+ <li>option 23</li>
+</ul>
+<div class="list">
+ <div>div 1</div>
+ <div>div 2</div>
+ <span>span 1</span>
+ <span>span 1</span>
+</div>
+
+<div id="multiSelect">
+ <div>div 1</div>
+ <div class="item">div 2</div>
+ <span>span 1</span>
+ <span class="item">span 1</span>
+</div>
+</div>
</body>
</html>
|