proposal for Widgets plugin

9 files changed, 487 insertions, 18 deletions

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/Widgets.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/Widgets.java
new file mode 100755
index 00000000..a0385749
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/Widgets.java
@@ -0,0 +1,162 @@
+/*

+ * Copyright 2011, The gwtquery team.

+ * 

+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not

+ * use this file except in compliance with the License. You may obtain a copy of

+ * the License at

+ * 

+ * http://www.apache.org/licenses/LICENSE-2.0

+ * 

+ * Unless required by applicable law or agreed to in writing, software

+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT

+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the

+ * License for the specific language governing permissions and limitations under

+ * the License.

+ */

+package com.google.gwt.query.client.plugins.widgets;

+

+import com.google.gwt.dom.client.Element;

+import com.google.gwt.dom.client.NodeList;

+import com.google.gwt.query.client.GQuery;

+import com.google.gwt.query.client.JSArray;

+import com.google.gwt.query.client.Plugin;

+import com.google.gwt.query.client.plugins.GQueryQueue;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.ButtonWidgetFactory;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.TabPanelWidgetFactory;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.WidgetFactory;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.WidgetOptions;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.ButtonWidgetFactory.ButtonOptions;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.TabPanelWidgetFactory.TabPanelOptions;

+import com.google.gwt.user.client.ui.Button;

+import com.google.gwt.user.client.ui.TabPanel;

+import com.google.gwt.user.client.ui.Widget;

+

+/**

+ * Widgets plugin for Gwt Query.

+ */

+public class Widgets extends GQueryQueue<Widgets> {

+

+  public static final Class<Widgets> Widgets = Widgets.class;

+

+  static {

+    GQuery.registerPlugin(Widgets.class, new Plugin<Widgets>() {

+      public Widgets init(GQuery gq) {

+        return new Widgets(gq);

+      }

+    });

+  }

+

+  public Widgets(final Element element) {

+    super(element);

+  }

+

+  public Widgets(GQuery gq) {

+    super(gq);

+  }

+

+  public Widgets(final JSArray elements) {

+    super(elements);

+  }

+

+  public Widgets(final NodeList<Element> list) {

+    super(list);

+  }

+

+

+  /**

+   * Create an return a {@link TabPanel} widget with the first selected

+   * elements. Each div element will create a tab and the first h3 element

+   * inside the div will be used as title

+   */

+  public TabPanel tabPanel() {

+    return tabPanel(new TabPanelOptions());

+  }

+

+  /**

+   * Create an return a {@link TabPanel} widget with the first selected elements

+   * by using a {@link TabPanelOptions}

+   */

+  public TabPanel tabPanel(TabPanelOptions o) {

+    return widget(new TabPanelWidgetFactory(), o);

+  }

+

+  /**

+   * Create {@link TabPanel} widget for each selected elements. Each div element

+   * will create a tab and the first h3 element inside the div will be used as

+   * title

+   */

+  public Widgets tabPanels() {

+    return tabPanels(new TabPanelOptions());

+  }

+

+  /**

+   * Create a {@link TabPanel} widget for each selected elements. Each div

+   * element inside a selected element will create a tab and the first h3

+   * element inside the div will be used as title

+   */

+  public Widgets tabPanels(TabPanelOptions o) {

+    return widgets(new TabPanelWidgetFactory(), o);

+  }

+

+  /**

+   * Create an return a {@link Button} widget with the first element of the

+   * query

+   */

+  public Button button() {

+    return button(new ButtonOptions());

+  }

+

+  /**

+   * Create and return a {@link Button} widget with the first element of the

+   * query by using a {@link ButtonOptions}

+   */

+  public Button button(ButtonOptions o) {

+    return widget(new ButtonWidgetFactory(), o);

+  }

+

+  /**

+   * Create a {@link Button} widget for each selected element.

+   * 

+   */

+  public Widgets buttons() {

+    return buttons(new ButtonOptions());

+  }

+

+  /**

+   * Create a {@link Button} widget for each selected element by using a

+   * {@link ButtonOptions}

+   * 

+   */

+  public Widgets buttons(ButtonOptions o) {

+    return widgets(new ButtonWidgetFactory(), o);

+  }

+

+  /**

+   * Create and return a widget using the given factory and the given options

+   */

+  public <W extends Widget, O extends WidgetOptions> W widget(

+      WidgetFactory<W, O> factory, O options) {

+    return widget(get(0), factory, options);

+  }

+

+  /**

+   * Try to create a widget using the given factory and the given options for

+   * each element of the query

+   */

+  public <W extends Widget, O extends WidgetOptions> Widgets widgets(

+      WidgetFactory<W, O> factory, O options) {

+    for (Element e : elements()) {

+      widget(e, factory, options);

+    }

+    return this;

+  }

+

+  /**

+   * Create and return a widget using the given factory and the given options

+   */

+  protected <W extends Widget, O extends WidgetOptions> W widget(Element e,

+      WidgetFactory<W, O> factory, O options) {

+    return factory.create(e, options);

+  }

+

+}

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/AbstractWidgetFactory.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/AbstractWidgetFactory.java
new file mode 100644
index 00000000..7015edca
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/AbstractWidgetFactory.java
@@ -0,0 +1,49 @@
+package com.google.gwt.query.client.plugins.widgets.widgetfactory;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.user.client.ui.Widget;
+
+/**
+ * Abstract factory containing useful methods for widget creation
+ * 
+ */
+public abstract class AbstractWidgetFactory<W extends Widget, O extends WidgetOptions>
+    implements WidgetFactory<W, O> {
+
+  public W create(Element e, O options) {
+    W w = createWidget(e);
+
+    initialize(w, options, e);
+
+    return w;
+  }
+
+  protected abstract void initialize(W widget, O options, Element e);
+
+  protected abstract W createWidget(Element e);
+
+  /**
+   * Test if the tag name of the element is one of tag names given in parameter
+   * 
+   * @param tagNames
+   * @return
+   */
+  protected boolean matchesTags(Element e, String... tagNames) {
+
+    assert e != null : "Element cannot be null";
+
+    StringBuilder regExp = new StringBuilder("^(");
+    int tagNameLenght = tagNames != null ? tagNames.length : 0;
+    for (int i = 0; i < tagNameLenght; i++) {
+      regExp.append(tagNames[i].toUpperCase());
+      if (i < tagNameLenght - 1) {
+        regExp.append("|");
+      }
+    }
+    regExp.append(")$");
+
+    return e.getTagName().toUpperCase().matches(regExp.toString());
+
+  }
+
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/ButtonWidgetFactory.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/ButtonWidgetFactory.java
new file mode 100644
index 00000000..c85af1e8
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/ButtonWidgetFactory.java
@@ -0,0 +1,73 @@
+package com.google.gwt.query.client.plugins.widgets.widgetfactory;
+
+import com.google.gwt.dom.client.ButtonElement;
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.ui.Button;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Factory used to create a {@link Button} widget. A {@link Button} is created
+ * if the element is a <i>button</i>, <i>div></i>, <i>span</i> or <i>a</i>
+ * element (should be extends to other element).
+ */
+public class ButtonWidgetFactory extends
+    AbstractWidgetFactory<Button, ButtonWidgetFactory.ButtonOptions> {
+
+  /**
+   * Options used to initialize new {@link Button}
+   * 
+   */
+  public static class ButtonOptions implements WidgetOptions {
+
+    private List<ClickHandler> clickHandlers;
+
+    public ButtonOptions() {
+      clickHandlers = new ArrayList<ClickHandler>();
+    }
+
+    public void addClickHandler(ClickHandler clickHandler) {
+      clickHandlers.add(clickHandler);
+    }
+
+    public List<ClickHandler> getClickHandlers() {
+      return clickHandlers;
+    }
+  }
+
+  protected void initialize(Button button, ButtonOptions options, Element e) {
+    if (button == null || options == null) {
+      return;
+    }
+
+    for (ClickHandler handler : options.getClickHandlers()) {
+      button.addClickHandler(handler);
+    }
+
+  }
+
+  protected Button createWidget(Element e) {
+
+    if ("button".equalsIgnoreCase(e.getTagName())) {
+      return Button.wrap(e);
+    }
+
+    if (matchesTags(e, "div", "span", "a")) {
+      ButtonElement buttonElement = Document.get().createPushButtonElement();
+      e.getParentElement().insertAfter(buttonElement, e);
+      // detach the original element (can be maybe hidden instead of detach
+      // it?)
+      e.removeFromParent();
+
+      Button b = Button.wrap(buttonElement);
+      b.setHTML(e.getInnerHTML()); // maybe use setText and getInnerText
+
+      return b;
+    }
+
+    return null;
+  }
+}
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/TabPanelWidgetFactory.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/TabPanelWidgetFactory.java
new file mode 100644
index 00000000..18ff912b
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/TabPanelWidgetFactory.java
@@ -0,0 +1,97 @@
+package com.google.gwt.query.client.plugins.widgets.widgetfactory;
+
+import static com.google.gwt.query.client.GQuery.$;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.query.client.GQuery;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.HTMLPanel;
+import com.google.gwt.user.client.ui.RootPanel;
+import com.google.gwt.user.client.ui.TabPanel;
+
+
+/**
+ * Factory used to create a {@link Button} widget. A {@link Button} is created
+ * if the element is a <i>button</i>, <i>div></i>, <i>span</i> or <i>a</i>
+ * element (should be extends to other element).
+ */
+public class TabPanelWidgetFactory extends
+    AbstractWidgetFactory<TabPanel, TabPanelWidgetFactory.TabPanelOptions> {
+  
+  public static class ExtendedTabPanel extends TabPanel{
+    
+    
+    void attach(){
+      onAttach();
+      RootPanel.detachOnWindowClose(this);
+    }
+  }
+
+  /**
+   * Options used to initialize new {@link Button}
+   * 
+   */
+  public static class TabPanelOptions implements WidgetOptions {
+
+    private String tabSelector;
+    private String titleSelector;
+
+    public TabPanelOptions() {
+      initDefault();
+    }
+
+    public String getTabSelector() {
+      return tabSelector;
+    }
+
+    public String getTitleSelector() {
+      return titleSelector;
+    }
+
+    public void setTabSelector(String contentSelector) {
+      this.tabSelector = contentSelector;
+    }
+
+    public void setTitleSelector(String titleSelector) {
+      this.titleSelector = titleSelector;
+    }
+
+    private void initDefault() {
+      tabSelector = "div";
+      titleSelector = "h3";
+    }
+  }
+
+  protected void initialize(TabPanel tabPanel, TabPanelOptions options,
+      Element e) {
+
+    GQuery tabs = $(options.getTabSelector(), e);
+    GQuery titles = $(options.getTitleSelector(), e);
+
+    for (int i = 0; i < tabs.length(); i++) {
+      Element tab = tabs.get(i);
+      Element title = titles.get(i);
+
+      tabPanel.add(new HTMLPanel(tab.getString()), title != null
+          ? title.getInnerText() : "Tab " + (i + 1));
+      
+      
+
+    }
+    
+    if (tabs.length() > 0){
+      tabPanel.selectTab(0);
+    }
+
+    // the tab panel is initialized, attach it to the dom ;
+    e.getParentElement().insertBefore(tabPanel.getElement(), e);
+    ((ExtendedTabPanel)tabPanel).attach();
+
+    // detach the element as it is replaced by the tab panel !
+    e.removeFromParent();
+  }
+
+  protected TabPanel createWidget(Element e) {
+    return new ExtendedTabPanel();
+  }
+}
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/WidgetFactory.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/WidgetFactory.java
new file mode 100644
index 00000000..25723d3d
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/WidgetFactory.java
@@ -0,0 +1,14 @@
+package com.google.gwt.query.client.plugins.widgets.widgetfactory;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.user.client.ui.Widget;
+
+/**
+   * Factory interface
+   * 
+   * @param <W>
+   * @param <O>
+   */
+  public interface WidgetFactory<W extends Widget, O extends WidgetOptions> {
+    public W create(Element e, O options);
+  }
\ No newline at end of file
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/WidgetOptions.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/WidgetOptions.java
new file mode 100644
index 00000000..b268d935
--- /dev/null
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/widgets/widgetfactory/WidgetOptions.java
@@ -0,0 +1,10 @@
+package com.google.gwt.query.client.plugins.widgets.widgetfactory;
+
+/**
+ * Marker interface for factory options. All options should extend
+ * {@link WidgetOptions}.
+ * 
+ */
+public interface WidgetOptions {
+
+}
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml b/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml
index ea6ddd04..014b421b 100644
--- a/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml
+++ b/samples/src/main/java/gwtquery/samples/GwtQueryWidgets.gwt.xml
@@ -1,5 +1,6 @@
 <module>
     <inherits name='com.google.gwt.query.Query'/>
+    <inherits name='com.google.gwt.user.theme.chrome.Chrome' />
     <entry-point class='gwtquery.samples.client.GwtQueryWidgetModule'/>
 </module>
     
diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java
index 68950723..65bb2e7c 100644
--- a/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java
+++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryWidgetModule.java
@@ -16,21 +16,18 @@
 package gwtquery.samples.client;

 

 import static com.google.gwt.query.client.GQuery.$;

+import static com.google.gwt.query.client.plugins.widgets.Widgets.Widgets;

 

 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.GQuery;

-import com.google.gwt.query.client.plugins.Widgets;

-import com.google.gwt.user.client.Element;

-import com.google.gwt.user.client.Event;

-import com.google.gwt.user.client.Window;

-import com.google.gwt.user.client.ui.Button;

+import com.google.gwt.query.client.plugins.widgets.widgetfactory.ButtonWidgetFactory.ButtonOptions;

+import com.google.gwt.user.client.ui.Label;

+import com.google.gwt.user.client.ui.PopupPanel;

 

 public class GwtQueryWidgetModule implements EntryPoint {

 

-  public void onModuleLoad() {

+/*  public void onModuleLoad() {

     $("<button>Enhance</button>").appendTo(".outer").one(Event.ONCLICK, null, new Function() {

       public boolean f(Event e) {

         $(".btn:nth-child(odd)").each(new Function(){

@@ -52,5 +49,30 @@ public class GwtQueryWidgetModule implements EntryPoint {
         return true;

       }

     });

+  }*/

+  

+  public void onModuleLoad() {

+   

+    

+    $(".btn").as(Widgets).buttons(createButtonOptions());

+    $("#tabs").as(Widgets).tabPanel();

+    

+  }

+  

+  private ButtonOptions createButtonOptions(){

+    ButtonOptions options = new ButtonOptions();

+    options.addClickHandler(new ClickHandler() {

+      

+      public void onClick(ClickEvent event) {

+        Label l = new Label("You click on a GWT Button !");

+        PopupPanel panel = new PopupPanel(true, true);

+        panel.setGlassEnabled(true);

+        panel.add(l);

+        panel.center();

+        

+      }

+    });

+    

+    return options;

   }

 }

diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html
index a414cf94..535eb08e 100644
--- a/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html
+++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryWidgets.html
@@ -1,20 +1,61 @@
 <html>

 <head>

-    <title>GQuery Demo</title>

-    <script language="javascript"

-            src="gwtquery.samples.GwtQueryWidgets.nocache.js"></script>

+<title>GQuery Demo</title>

+<script language="javascript"

+    src="gwtquery.samples.GwtQueryWidgets.nocache.js"></script>

 </head>

 <body>

 <div class="outer">

-    <div class="btn">Make me a button 1!</div>

-    <div class="btn">Make me a button 2!</div>

-    <div class="btn">Make me a button 3!</div>

-    <div class="btn">Make me a button 4!</div>

-    <div class="btn">Make me a button 5!</div>

-    <div class="btn">Make me a button 6!</div>

+<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>

+<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>

 </div>

 

+<div id="tabs">

+<h3>First tab</h3>

+<div>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

+lacus. Nullam adipiscing fermentum magna vel sagittis. Pellentesque et

+nisi orci. Nunc volutpat ornare malesuada. Aliquam erat volutpat. Duis

+hendrerit adipiscing mauris, vitae tincidunt dui sodales eget. Nulla ac

+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>

+

+<h3>Second tab</h3>

+<div>Pellentesque habitant morbi tristique senectus et netus et

+malesuada fames ac turpis egestas. Duis feugiat dapibus nunc, sit amet

+sodales dolor bibendum eget. Pellentesque ac libero et nibh ultrices

+vehicula. Morbi convallis auctor ultricies. Class aptent taciti sociosqu

+ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean

+gravida eros at massa fringilla vestibulum. Sed justo dui, euismod et

+venenatis in, vehicula ut nisi. Sed sodales lorem vel est luctus vitae

+ornare erat pulvinar. Maecenas lacus sem, ultrices vitae tincidunt in,

+gravida eget quam. Vestibulum condimentum, augue nec consectetur

+egestas, mi sapien ullamcorper diam, sit amet molestie mauris odio at

+lacus.</div>

+

+<h3>Third tab</h3>

+<div>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>

+

+

 

 </body>

 </html>

-    
\ No newline at end of file