Commits

Harald Schilly committed 12530ff

a widget, an animation and some canonical event handling

Comments (0)

Files changed (13)

 <?xml version="1.0" encoding="UTF-8"?>
 <projectDescription>
-	<name>GwtQueryDemo</name>
+	<name>GwtDemo</name>
 	<comment></comment>
 	<projects>
 	</projects>

.settings/com.google.gwt.eclipse.core.prefs

-#Sat Mar 26 15:27:57 CET 2011
+#Sat Mar 26 23:17:38 CET 2011
 eclipse.preferences.version=1
 filesCopiedToWebInfLib=gwt-servlet.jar
-gwtCompileSettings=PGd3dC1jb21waWxlLXNldHRpbmdzPjxsb2ctbGV2ZWw+SU5GTzwvbG9nLWxldmVsPjxvdXRwdXQtc3R5bGU+T0JGVVNDQVRFRDwvb3V0cHV0LXN0eWxlPjxleHRyYS1hcmdzPjwhW0NEQVRBWy1vcHRpbWl6ZSAwIC1zdHlsZSBERVRBSUxFRCAgLVhkaXNhYmxlQ2xhc3NNZXRhZGF0YSAtWGRpc2FibGVDYXN0Q2hlY2tpbmddXT48L2V4dHJhLWFyZ3M+PHZtLWFyZ3M+PCFbQ0RBVEFbLVhteDUxMm1dXT48L3ZtLWFyZ3M+PC9nd3QtY29tcGlsZS1zZXR0aW5ncz4\=
+gwtCompileSettings=PGd3dC1jb21waWxlLXNldHRpbmdzPjxsb2ctbGV2ZWw+SU5GTzwvbG9nLWxldmVsPjxvdXRwdXQtc3R5bGU+T0JGVVNDQVRFRDwvb3V0cHV0LXN0eWxlPjxleHRyYS1hcmdzPjwhW0NEQVRBWyAtZHJhZnRDb21waWxlIC1vcHRpbWl6ZSAwIC1zdHlsZSBQUkVUVFkgIC1YZGlzYWJsZUNsYXNzTWV0YWRhdGEgLVhkaXNhYmxlQ2FzdENoZWNraW5nIC1jb21waWxlUmVwb3J0XV0+PC9leHRyYS1hcmdzPjx2bS1hcmdzPjwhW0NEQVRBWy1YbXg1MTJtXV0+PC92bS1hcmdzPjwvZ3d0LWNvbXBpbGUtc2V0dGluZ3M+

lib/gwtquery-1.0.0-SNAPSHOT-2.2.0.jar

Binary file added.

src/at/schilly/gwtdemo/GwtDemo.gwt.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<module rename-to='gwtdemo'>
+  <!-- Inherit the core Web Toolkit stuff. -->
+  <inherits name='com.google.gwt.user.User' />
+
+  <!-- Inherit the default GWT style sheet. You can change -->
+  <!-- the theme of your GWT application by uncommenting -->
+  <!-- any one of the following lines. -->
+  <inherits name='com.google.gwt.user.theme.standard.Standard' />
+  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
+  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->
+
+  <!-- Other module inherits -->
+  <inherits name='com.google.gwt.query.Query' />
+
+  <!-- Specify the app entry point class. -->
+  <entry-point class='at.schilly.gwtdemo.client.GwtDemo' />
+
+  <!-- Specify the paths for translatable code -->
+  <source path='client' />
+
+</module>

src/at/schilly/gwtdemo/client/FadeInOrOut.java

+package at.schilly.gwtdemo.client;
+
+import com.google.gwt.animation.client.Animation;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.Unit;
+
+/**
+ * custom animation
+ * 
+ * @author schilly
+ */
+class FadeInOrOut extends Animation {
+  
+  enum Type {
+    In, Out
+  }
+  
+  final private static double s = 2;
+  private Type                t;
+  private Element             e;
+  private double              start;
+  
+  FadeInOrOut(Element e, Type t) {
+    this.e = e;
+    this.t = t;
+    this.start = GwtDemo.INDENT;
+    
+    // attach each animation object to the respective element
+    // and cancel animations immediately when they are ongoing.
+    if (e.getPropertyObject("animation") != null) {
+      FadeInOrOut a = ((FadeInOrOut) e.getPropertyObject("animation"));
+      a.cancel();
+    }
+    e.setPropertyObject("animation", this);
+  }
+  
+  @Override
+  protected void onUpdate(double x) {
+    // in our out
+    x = (t == Type.In) ? x : 1 - x;
+    // overshoot cubic
+    x = (s + 1) * x * x * x - s * x * x;
+    e.getStyle().setPaddingLeft(x * start, Unit.PX);
+  }
+}

src/at/schilly/gwtdemo/client/GwtDemo.java

+package at.schilly.gwtdemo.client;
+
+import static com.google.gwt.query.client.GQuery.$;
+import static com.google.gwt.query.client.css.CSS.BACKGROUND_COLOR;
+import static com.google.gwt.query.client.css.CSS.FONT_SIZE;
+import static com.google.gwt.query.client.css.CSS.TEXT_ALIGN;
+
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.event.logical.shared.ValueChangeEvent;
+import com.google.gwt.event.logical.shared.ValueChangeHandler;
+import com.google.gwt.query.client.Function;
+import com.google.gwt.query.client.GQuery;
+import com.google.gwt.query.client.Selector;
+import com.google.gwt.query.client.Selectors;
+import com.google.gwt.query.client.css.FontSizeProperty.FontSize;
+import com.google.gwt.query.client.css.RGBColor;
+import com.google.gwt.query.client.css.TextAlignProperty.TextAlign;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.ui.RootPanel;
+
+public class GwtDemo implements EntryPoint, ValueChangeHandler<Integer> {
+  MyGWTQuerySelectors selectors = GWT.create(MyGWTQuerySelectors.class);
+  
+  interface MyGWTQuerySelectors extends Selectors {
+    @Selector(".A")
+    GQuery getAs();
+    
+    @Selector(".B")
+    GQuery getBs();
+    
+    /** this is the alink below the list */
+    @Selector("#link1")
+    GQuery getLink();
+  }
+  
+  // global constants
+  static final double INDENT  = 40;
+  
+  // application's internal state
+  static Boolean      animate = false;
+  private boolean     state   = false;
+  private int         length  = 30;
+  
+  /**
+   * This is where the application starts.
+   */
+  public void onModuleLoad() {
+    
+    // page contents
+    MainPage mp = new MainPage();
+    RootPanel.get().add(mp);
+    mp.getSimpleWidget().addValueChangeHandler(this);
+    
+    // generate 30 entries
+    list(length);
+    
+  }
+  
+  private void list(int anz) {
+    Element container = $("#container").get(0);
+    // clean it
+    while (container.getChildCount() > 0) {
+      container.removeChild(container.getChild(0));
+    }
+    for (int i = 0; i < anz; i++) {
+      Element div = DOM.createDiv();
+      div.setInnerText("line " + i);
+      div.setAttribute("class", (i % 2 == 0) ? "A" : "B");
+      container.appendChild(div);
+    }
+    
+    // rewire all events (we have deleted all of them
+    selectors.getLink().click(new Function() {
+      @Override
+      public void f() {
+        RGBColor c = state ? RGBColor.GREEN : RGBColor.RED;
+        selectors.getAs().css(BACKGROUND_COLOR.with(c));
+        state = !state;
+      }
+    });
+    
+    selectors.getBs().mouseover(new Function() {
+      @Override
+      public void f(Element e) {
+        if (!animate) {
+          $(e).css(FONT_SIZE.with(FontSize.LARGE));
+          e.getStyle().setPaddingLeft(20, Unit.PX);
+        } else {
+          FadeInOrOut fioo = new FadeInOrOut(e, FadeInOrOut.Type.In);
+          fioo.run(2000);
+        }
+      }
+    });
+    
+    selectors.getBs().mouseout(new Function() {
+      @Override
+      public void f(Element e) {
+        if (!animate) {
+          e.getStyle().clearFontSize();
+          e.getStyle().setPaddingLeft(0, Unit.PX);
+        } else {
+          FadeInOrOut fioo = new FadeInOrOut(e, FadeInOrOut.Type.Out);
+          fioo.run(2000);
+        }
+      }
+    });
+    
+    selectors.getAs().click(new Function() {
+      @Override
+      public void f(Element e) {
+        boolean o = $(e).get(0).getPropertyBoolean("state");
+        $(e).css(TEXT_ALIGN.with(o ? TextAlign.LEFT : TextAlign.RIGHT));
+        $(e).get(0).setPropertyBoolean("state", !o);
+      }
+    });
+  }
+  
+  @Override
+  public void onValueChange(ValueChangeEvent<Integer> event) {
+    list(event.getValue());
+  }
+}

src/at/schilly/gwtdemo/client/MainPage.java

+package at.schilly.gwtdemo.client;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.logical.shared.ValueChangeEvent;
+import com.google.gwt.event.logical.shared.ValueChangeHandler;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.HTMLPanel;
+import com.google.gwt.user.client.ui.HasText;
+import com.google.gwt.user.client.ui.ToggleButton;
+
+class MainPage extends Composite implements ValueChangeHandler<Integer> {
+  
+  private static MainPageUiBinder uiBinder = GWT.create(MainPageUiBinder.class);
+  
+  interface MainPageUiBinder extends UiBinder<HTMLPanel, MainPage> {}
+  
+  @UiField
+  Anchor       link2;
+  
+  @UiField
+  ToggleButton animate;
+  
+  @UiField
+  SimpleWidget simplewidget;
+  
+  @UiField
+  HasText      widgetvalue;
+  
+  public MainPage() {
+    initWidget(uiBinder.createAndBindUi(this));
+    
+    // more init code
+    simplewidget.addValueChangeHandler(this);
+  }
+  
+  @UiHandler("animate")
+  void onAnimateToggle(ClickEvent e) {
+    GwtDemo.animate = animate.getValue();
+  }
+  
+  @UiHandler("link2")
+  void onLink2Click(ClickEvent e) {
+    Window.alert("Hello, UiHandler talking!");
+  }
+  
+  public void setText(String text) {
+    link2.setText(text);
+  }
+  
+  public String getText() {
+    return link2.getText();
+  }
+  
+  @Override
+  public void onValueChange(ValueChangeEvent<Integer> event) {
+    widgetvalue.setText(event.getValue().toString());
+  }
+  
+  public SimpleWidget getSimpleWidget() {
+    return simplewidget;
+  }
+}

src/at/schilly/gwtdemo/client/MainPage.ui.xml

+<!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"
+  xmlns:mine="urn:import:at.schilly.gwtdemo.client"
+>
+
+  <ui:style>
+    .important {
+      text-align: center;
+      font-size: 200%;
+      font-weight: bold;
+    }
+    .table { margin-top: 20px; }
+    .table td {
+      border: 2px solid grey;
+      padding: 10px;
+      vertical-align: top;
+    }
+    .table th { font-size: 200%; }
+    
+  </ui:style>
+
+
+  <g:HTMLPanel>
+
+    <h1>GWT GTUG Demo</h1>
+    <div>
+      2011-03-31 by
+      <a href="mailto:harald.schilly@gmail.com">Harald Schilly</a>
+    </div>
+
+    <table class="{style.table}">
+
+      <tr>
+        <th>basics</th>
+        <th>widget</th>
+      </tr>
+
+      <tr>
+        <td>
+          <g:HTMLPanel>
+            <div id="container"></div>
+            <div class="{style.important}" >
+              <a href="#" id="link1">click me</a>
+              or
+              <g:Anchor ui:field="link2">me</g:Anchor>
+              .
+              <br />
+              <g:ToggleButton ui:field="animate">animate?</g:ToggleButton>
+            </div>
+          </g:HTMLPanel>
+        </td>
+        <td>
+          <mine:SimpleWidget ui:field="simplewidget" />
+          
+          <div style="margin-top: 30px;">
+            Value:
+            <g:InlineLabel ui:field="widgetvalue" />
+          </div>
+        </td>
+      </tr>
+    </table>
+
+  </g:HTMLPanel>
+</ui:UiBinder> 

src/at/schilly/gwtdemo/client/SimpleWidget.java

+package at.schilly.gwtdemo.client;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.MouseWheelEvent;
+import com.google.gwt.event.logical.shared.HasValueChangeHandlers;
+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.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.InlineLabel;
+import com.google.gwt.user.client.ui.Widget;
+
+public class SimpleWidget extends Composite implements HasValueChangeHandlers<Integer>, ValueChangeHandler<Integer> {
+  
+  private static SimpleWidgetUiBinder uiBinder = GWT.create(SimpleWidgetUiBinder.class);
+  
+  interface SimpleWidgetUiBinder extends UiBinder<Widget, SimpleWidget> {}
+  
+  public SimpleWidget() {
+    initWidget(uiBinder.createAndBindUi(this));
+    addValueChangeHandler(this);
+  }
+  
+  private int value;
+  
+  @UiField
+  Button      count1;
+  
+  @UiField
+  Button      count2;
+  
+  @UiField
+  InlineLabel number;
+  
+  @UiHandler("count1")
+  void onClick1(ClickEvent e) {
+    value++;
+    // notify our listeners
+    ValueChangeEvent.fire(this, value);
+  }
+  
+  @UiHandler("count2")
+  void onClick2(ClickEvent e) {
+    value--;
+    // notify our listeners
+    ValueChangeEvent.fire(this, value);
+  }
+  
+  @UiHandler("count1")
+  void onMouseWheeling1(MouseWheelEvent e) {
+    value += e.getDeltaY();
+    ValueChangeEvent.fire(this, value);
+  }
+  
+  @UiHandler("count2")
+  void onMouseWheeling2(MouseWheelEvent e) {
+    value += e.getDeltaY();
+    ValueChangeEvent.fire(this, value);
+  }
+  
+  @Override
+  public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Integer> handler) {
+    return addHandler(handler, ValueChangeEvent.getType());
+  }
+  
+  @Override
+  public void onValueChange(ValueChangeEvent<Integer> event) {
+    number.setText(Integer.toString(value));
+  }
+  
+}

src/at/schilly/gwtdemo/client/SimpleWidget.ui.xml

+<!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:style>
+    .button { 
+      width:75px;
+     height: 30px;
+    }
+  </ui:style>
+  <g:HTMLPanel>
+    Counter: <g:InlineLabel ui:field="number">0</g:InlineLabel><br/>
+    <g:Button styleName="{style.button}" ui:field="count1" >+ One</g:Button><br/>
+    <g:Button styleName="{style.button}" ui:field="count2" >- One</g:Button>
+  </g:HTMLPanel>
+</ui:UiBinder> 
+/** Add css rules here for your application. */
+
+
+/** Example rules used by the template application (remove for your app) */
+h1 {
+  font-size: 2em;
+  font-weight: bold;
+  color: #777777;
+  text-align: center;
+}
+
+html { background: grey; 
+  margin: 30px;}
+
+body {
+  width: 300px;
+}
+
+.sendButton {
+  display: block;
+  font-size: 16pt;
+}
+
+/** Most GWT widgets already have a style name defined */
+.gwt-DialogBox {
+  width: 400px;
+}
+
+.dialogVPanel {
+  margin: 5px;
+}
+
+.serverResponseLabelError {
+  color: red;
+}
+
+/** Set ids using widget.getElement().setId("idOfElement") */
+#closeButton {
+  margin: 15px 6px 6px;
+}
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<link type="text/css" rel="stylesheet" href="GwtDemo.css">
+
+<title>GWT Query Demo</title>
+<script type="text/javascript" language="javascript"
+  src="gwtdemo/gwtdemo.nocache.js"></script>
+</head>
+
+<body>
+</body>
+</html>

war/WEB-INF/web.xml

   
   <!-- Default page to serve -->
   <welcome-file-list>
-    <welcome-file>GwtQueryDemo.html</welcome-file>
+    <welcome-file>GwtDemo.html</welcome-file>
   </welcome-file-list>
 
 </web-app>