Emily -
Another request...
Description:
=========
It would be nice to be able to programatically enable/disabled tabs in a
TabBar, preventing user's from selecting the tab.
Fix:
===
I added a TabBar.setTabEnabled(int index, boolean enabled) method and a
TabBar.isTabEnabled(int index) method. I added associated styles to the GWT
default style themes. There were a couple of questions about whether we
need a "disabled-and-selected" style, but I personally don't think its
necessary. We can always add it later if needed.
Also note that this patch applies only to the TabBar, not to the TabPanel.
So users can programatically disable a tab in a TabBar, but it will not
disable the content of the assocaited TabPanel. The user must also
programatically boot the user off the tab if the app requires it.
Testing:
=======
Manually verified the styles in IE versions of all browsers. Also added a
unit test to enable/disable the tabs.
Thanks,
John LaBanca
[EMAIL PROTECTED]
--~--~---------~--~----~------------~-------~--~----~
http://groups.google.com/group/Google-Web-Toolkit-Contributors
-~----------~----~----~----~------~----~------~--~---
Index: user/src/com/google/gwt/user/client/ui/TabBar.java
===================================================================
--- user/src/com/google/gwt/user/client/ui/TabBar.java (revision 3666)
+++ user/src/com/google/gwt/user/client/ui/TabBar.java (working copy)
@@ -57,6 +57,7 @@
private SimplePanel focusablePanel;
private ClickListener clickDelegate;
private KeyboardListener keyDelegate;
+ private boolean enabled = true;
ClickDelegatePanel(Widget child, ClickListener cDelegate,
KeyboardListener kDelegate) {
@@ -80,21 +81,33 @@
return focusablePanel;
}
+ public boolean isEnabled() {
+ return enabled;
+ }
+
@Override
public void onBrowserEvent(Event event) {
// No need for call to super.
switch (DOM.eventGetType(event)) {
case Event.ONCLICK:
- clickDelegate.onClick(this);
+ if (enabled) {
+ clickDelegate.onClick(this);
+ }
break;
case Event.ONKEYDOWN:
- keyDelegate.onKeyDown(this, ((char) DOM.eventGetKeyCode(event)),
- KeyboardListenerCollection.getKeyboardModifiers(event));
+ if (enabled) {
+ keyDelegate.onKeyDown(this, ((char) DOM.eventGetKeyCode(event)),
+ KeyboardListenerCollection.getKeyboardModifiers(event));
+ }
break;
}
}
+
+ public void setEnabled(boolean enabled) {
+ this.enabled = enabled;
+ }
}
private static final String STYLENAME_DEFAULT = "gwt-TabBarItem";
@@ -252,6 +265,19 @@
insertTabWidget(widget, beforeIndex);
}
+ /**
+ * Check if a tab is enabled or disabled. If disabled, the user cannot
+ * select the tab.
+ *
+ * @param index the index of the tab
+ * @return true if the tab is enabled, false if disabled
+ */
+ public boolean isTabEnabled(int index) {
+ assert (index >= 0) && (index < getTabCount()) : "Tab index out of bounds";
+ ClickDelegatePanel delPanel = (ClickDelegatePanel) panel.getWidget(index + 1);
+ return delPanel.isEnabled();
+ }
+
public void onClick(Widget sender) {
selectTabByTabWidget(sender);
}
@@ -324,6 +350,23 @@
}
/**
+ * Enable or disable a table. When disabled, users cannot select the tab.
+ *
+ * @param index the index of the tab to enable or disable
+ * @param enabled true to enable, false to disable
+ */
+ public void setTabEnabled(int index, boolean enabled) {
+ assert (index >= 0) && (index < getTabCount()) : "Tab index out of bounds";
+
+ // Style the wrapper
+ ClickDelegatePanel delPanel = (ClickDelegatePanel) panel.getWidget(index + 1);
+ delPanel.setEnabled(enabled);
+ setStyleName(delPanel.getElement(), "gwt-TabBarItem-disabled", !enabled);
+ setStyleName(delPanel.getElement().getParentElement(),
+ "gwt-TabBarItem-wrapper-disabled", !enabled);
+ }
+
+ /**
* Sets a tab's contents via HTML.
*
* Use care when setting an object's HTML; it is an easy way to expose
Index: user/src/com/google/gwt/user/theme/chrome/public/gwt/chrome/chrome.css
===================================================================
--- user/src/com/google/gwt/user/theme/chrome/public/gwt/chrome/chrome.css (revision 3666)
+++ user/src/com/google/gwt/user/theme/chrome/public/gwt/chrome/chrome.css (working copy)
@@ -881,6 +881,10 @@
cursor: default;
background: #bcbcbc;
}
+.gwt-TabBar .gwt-TabBarItem-disabled {
+ cursor: default;
+ color: #999999;
+}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
@@ -990,6 +994,10 @@
background: #bcbcbc url(images/hborder.png) repeat-x 0px -2511px;
color: white;
}
+.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
+ cursor: default;
+ color: #999999;
+}
.gwt-TextArea {
padding: 2px;
Index: user/src/com/google/gwt/user/theme/chrome/public/gwt/chrome/chrome_rtl.css
===================================================================
--- user/src/com/google/gwt/user/theme/chrome/public/gwt/chrome/chrome_rtl.css (revision 3666)
+++ user/src/com/google/gwt/user/theme/chrome/public/gwt/chrome/chrome_rtl.css (working copy)
@@ -881,6 +881,10 @@
cursor: default;
background: #bcbcbc;
}
+.gwt-TabBar .gwt-TabBarItem-disabled {
+ cursor: default;
+ color: #999999;
+}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
@@ -990,6 +994,10 @@
background: #bcbcbc url(images/hborder.png) repeat-x 0px -2511px;
color: white;
}
+.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
+ cursor: default;
+ color: #999999;
+}
.gwt-TextArea {
padding: 2px;
Index: user/src/com/google/gwt/user/theme/dark/public/gwt/dark/dark.css
===================================================================
--- user/src/com/google/gwt/user/theme/dark/public/gwt/dark/dark.css (revision 3666)
+++ user/src/com/google/gwt/user/theme/dark/public/gwt/dark/dark.css (working copy)
@@ -783,6 +783,10 @@
color: black;
background: #00CCFF;
}
+.gwt-TabBar .gwt-TabBarItem-disabled {
+ cursor: default;
+ color: #777777;
+}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
@@ -891,6 +895,10 @@
color: black;
background: #00CCFF;
}
+.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
+ cursor: default;
+ color: #999999;
+}
.gwt-TextArea {
padding: 2px;
Index: user/src/com/google/gwt/user/theme/dark/public/gwt/dark/dark_rtl.css
===================================================================
--- user/src/com/google/gwt/user/theme/dark/public/gwt/dark/dark_rtl.css (revision 3666)
+++ user/src/com/google/gwt/user/theme/dark/public/gwt/dark/dark_rtl.css (working copy)
@@ -783,6 +783,10 @@
color: black;
background: #00CCFF;
}
+.gwt-TabBar .gwt-TabBarItem-disabled {
+ cursor: default;
+ color: #999999;
+}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
@@ -891,6 +895,10 @@
color: black;
background: #00CCFF;
}
+.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
+ cursor: default;
+ color: #999999;
+}
.gwt-TextArea {
padding: 2px;
Index: user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css
===================================================================
--- user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css (revision 3666)
+++ user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css (working copy)
@@ -881,6 +881,10 @@
cursor: default;
background: #92c1f0;
}
+.gwt-TabBar .gwt-TabBarItem-disabled {
+ cursor: default;
+ color: #999999;
+}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
@@ -989,6 +993,10 @@
cursor: default;
background: #92c1f0;
}
+.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
+ cursor: default;
+ color: #999999;
+}
.gwt-TextArea {
padding: 2px;
Index: user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard_rtl.css
===================================================================
--- user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard_rtl.css (revision 3666)
+++ user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard_rtl.css (working copy)
@@ -881,6 +881,10 @@
cursor: default;
background: #92c1f0;
}
+.gwt-TabBar .gwt-TabBarItem-disabled {
+ cursor: default;
+ color: #999999;
+}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
@@ -989,6 +993,10 @@
cursor: default;
background: #92c1f0;
}
+.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
+ cursor: default;
+ color: #999999;
+}
.gwt-TextArea {
padding: 2px;
Index: user/test/com/google/gwt/user/client/ui/TabBarTest.java
===================================================================
--- user/test/com/google/gwt/user/client/ui/TabBarTest.java (revision 3666)
+++ user/test/com/google/gwt/user/client/ui/TabBarTest.java (working copy)
@@ -54,6 +54,19 @@
UIObjectTest.assertDebugId("myBar-tab-wrapper2", DOM.getChild(tr, 3));
}
+ public void testEnableDisable() {
+ final TabBar bar = createTabBar();
+ bar.addTab("foo");
+ bar.addTab("bar");
+ bar.addTab("baz");
+
+ assertTrue(bar.isTabEnabled(1));
+ bar.setTabEnabled(1, false);
+ assertFalse(bar.isTabEnabled(1));
+ bar.setTabEnabled(1, true);
+ assertTrue(bar.isTabEnabled(1));
+ }
+
public void testSelect() {
// Create a tab bar with three items.
final TabBar bar = createTabBar();
