- Added keyboard navigation to Slider

- SimpleFocusablePanel now implements Focusable so keyboard focus can also be set from the server side.

svn changeset:13497/svn branch:6.4

diff --git a/src/com/vaadin/terminal/gwt/client/ui/SimpleFocusablePanel.java b/src/com/vaadin/terminal/gwt/client/ui/SimpleFocusablePanel.java
index 967e60d4660187a76f2e158f604a30183629f11e..b534e3faba056ba97770549e6eec60031c836388 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/SimpleFocusablePanel.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/SimpleFocusablePanel.java
@@ -15,6 +15,7 @@ import com.google.gwt.event.dom.client.KeyPressHandler;
 import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.impl.FocusImpl;
+import com.vaadin.terminal.gwt.client.Focusable;
 
 /**
  * Compared to FocusPanel in GWT this panel does not support eg. accesskeys, but
@@ -22,7 +23,7 @@ import com.google.gwt.user.client.ui.impl.FocusImpl;
  */
 public class SimpleFocusablePanel extends SimplePanel implements
         HasFocusHandlers, HasBlurHandlers, HasKeyDownHandlers,
-        HasKeyPressHandlers {
+        HasKeyPressHandlers, Focusable {
 
     public SimpleFocusablePanel() {
         // make focusable, as we don't need access key magic we don't need to
@@ -53,4 +54,8 @@ public class SimpleFocusablePanel extends SimplePanel implements
             FocusImpl.getFocusImplForPanel().blur(getElement());
         }
     }
+
+    public void focus() {
+        setFocus(true);
+    }
 }

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VSlider.java b/src/com/vaadin/terminal/gwt/client/ui/VSlider.java
index 81fb898011948c15fc77f0804cd15c9f594132bf..d30c2b2f20877bd9bf761f14e50872294ffa007a 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/VSlider.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VSlider.java
@@ -4,6 +4,7 @@
 // \r
 package com.vaadin.terminal.gwt.client.ui;\r
 \r
+import com.google.gwt.event.dom.client.KeyCodes;\r
 import com.google.gwt.user.client.Command;\r
 import com.google.gwt.user.client.DOM;\r
 import com.google.gwt.user.client.DeferredCommand;\r
@@ -12,14 +13,13 @@ import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.Timer;\r
 import com.google.gwt.user.client.Window;\r
 import com.google.gwt.user.client.ui.HTML;\r
-import com.google.gwt.user.client.ui.Widget;\r
 import com.vaadin.terminal.gwt.client.ApplicationConnection;\r
 import com.vaadin.terminal.gwt.client.BrowserInfo;\r
 import com.vaadin.terminal.gwt.client.ContainerResizedListener;\r
 import com.vaadin.terminal.gwt.client.Paintable;\r
 import com.vaadin.terminal.gwt.client.UIDL;\r
 \r
-public class VSlider extends Widget implements Paintable, Field,\r
+public class VSlider extends SimpleFocusablePanel implements Paintable, Field,\r
         ContainerResizedListener {\r
 \r
     public static final String CLASSNAME = "v-slider";\r
@@ -39,6 +39,7 @@ public class VSlider extends Widget implements Paintable, Field,
     private boolean readonly;\r
     private boolean scrollbarStyle;\r
 \r
+    private int acceleration = 1;\r
     private int handleSize;\r
     private double min;\r
     private double max;\r
@@ -76,7 +77,6 @@ public class VSlider extends Widget implements Paintable, Field,
     public VSlider() {\r
         super();\r
 \r
-        setElement(DOM.createDiv());\r
         base = DOM.createDiv();\r
         handle = DOM.createDiv();\r
         smaller = DOM.createDiv();\r
@@ -98,18 +98,19 @@ public class VSlider extends Widget implements Paintable, Field,
         DOM.setStyleAttribute(bigger, "display", "none");\r
         DOM.setStyleAttribute(handle, "visibility", "hidden");\r
 \r
-        DOM.sinkEvents(getElement(), Event.MOUSEEVENTS | Event.ONMOUSEWHEEL);\r
+        DOM.sinkEvents(getElement(), Event.MOUSEEVENTS | Event.ONMOUSEWHEEL\r
+                | Event.KEYEVENTS | Event.FOCUSEVENTS);\r
         DOM.sinkEvents(base, Event.ONCLICK);\r
         DOM.sinkEvents(handle, Event.MOUSEEVENTS);\r
         DOM.sinkEvents(smaller, Event.ONMOUSEDOWN | Event.ONMOUSEUP\r
                 | Event.ONMOUSEOUT);\r
         DOM.sinkEvents(bigger, Event.ONMOUSEDOWN | Event.ONMOUSEUP\r
                 | Event.ONMOUSEOUT);\r
-\r
+    \r
         feedbackPopup.addStyleName(CLASSNAME + "-feedback");\r
         feedbackPopup.setWidget(feedback);\r
     }\r
-\r
+    \r
     public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {\r
 \r
         this.client = client;\r
@@ -332,8 +333,35 @@ public class VSlider extends Widget implements Paintable, Field,
             decreaseValue(true);\r
         } else if (targ == bigger) {\r
             increaseValue(true);\r
-        } else {\r
+        } else if (DOM.eventGetType(event) == Event.MOUSEEVENTS) {\r
             processBaseEvent(event);\r
+        } else if ((BrowserInfo.get().isGecko() && DOM.eventGetType(event) == Event.ONKEYPRESS)\r
+                || (!BrowserInfo.get().isGecko() && DOM.eventGetType(event) == Event.ONKEYDOWN)) {\r
+\r
+            if (handleNavigation(event.getKeyCode(), event.getCtrlKey(), event\r
+                    .getShiftKey())) {\r
+\r
+                feedbackPopup.show();\r
+\r
+                if (scrollTimer != null) {\r
+                    scrollTimer.cancel();\r
+                }\r
+                scrollTimer = new Timer() {\r
+                    @Override\r
+                    public void run() {\r
+                        updateValueToServer();\r
+                        acceleration = 1;\r
+                    }\r
+                };\r
+                scrollTimer.schedule(100);\r
+\r
+                DOM.eventPreventDefault(event);\r
+                DOM.eventCancelBubble(event, true);\r
+            }\r
+        } else if (DOM.eventGetType(event) == Event.ONFOCUS) {\r
+            feedbackPopup.show();\r
+        } else if (DOM.eventGetType(event) == Event.ONBLUR) {\r
+            feedbackPopup.hide();\r
         }\r
     }\r
 \r
@@ -478,4 +506,88 @@ public class VSlider extends Widget implements Paintable, Field,
         client.updateVariable(id, "value", value.doubleValue(), immediate);\r
     }\r
 \r
+    /**\r
+     * Handles the keyboard events handled by the Slider\r
+     * \r
+     * @param event\r
+     *            The keyboard event received\r
+     * @return true iff the navigation event was handled\r
+     */\r
+    public boolean handleNavigation(int keycode, boolean ctrl, boolean shift) {\r
+\r
+        // No support for ctrl moving\r
+        if (ctrl) {\r
+            return false;\r
+        }\r
+\r
+        if ((keycode == getNavigationUpKey() && vertical)\r
+                || (keycode == getNavigationRightKey() && !vertical)) {\r
+            if (shift) {\r
+                for (int a = 0; a < acceleration; a++) {\r
+                    increaseValue(false);\r
+                }\r
+                acceleration++;\r
+            } else {\r
+                increaseValue(false);\r
+            }\r
+            return true;\r
+        } else if (keycode == getNavigationDownKey() && vertical\r
+                || (keycode == getNavigationLeftKey() && !vertical)) {\r
+            if (shift) {\r
+                for (int a = 0; a < acceleration; a++) {\r
+                    decreaseValue(false);\r
+                }\r
+                acceleration++;\r
+            } else {\r
+                decreaseValue(false);\r
+            }\r
+            return true;\r
+        }\r
+\r
+        return false;\r
+    }\r
+\r
+    /**\r
+     * Get the key that increases the vertical slider. By default it is the up\r
+     * arrow key but by overriding this you can change the key to whatever you\r
+     * want.\r
+     * \r
+     * @return The keycode of the key\r
+     */\r
+    protected int getNavigationUpKey() {\r
+        return KeyCodes.KEY_UP;\r
+    }\r
+\r
+    /**\r
+     * Get the key that decreases the vertical slider. By default it is the down\r
+     * arrow key but by overriding this you can change the key to whatever you\r
+     * want.\r
+     * \r
+     * @return The keycode of the key\r
+     */\r
+    protected int getNavigationDownKey() {\r
+        return KeyCodes.KEY_DOWN;\r
+    }\r
+\r
+    /**\r
+     * Get the key that decreases the horizontal slider. By default it is the\r
+     * left arrow key but by overriding this you can change the key to whatever\r
+     * you want.\r
+     * \r
+     * @return The keycode of the key\r
+     */\r
+    protected int getNavigationLeftKey() {\r
+        return KeyCodes.KEY_LEFT;\r
+    }\r
+\r
+    /**\r
+     * Get the key that increases the horizontal slider. By default it is the\r
+     * right arrow key but by overriding this you can change the key to whatever\r
+     * you want.\r
+     * \r
+     * @return The keycode of the key\r
+     */\r
+    protected int getNavigationRightKey() {\r
+        return KeyCodes.KEY_RIGHT;\r
+    }\r
 }\r