#5880 Add style name support for Tabsheet's Tab interface

svn changeset:20402/svn branch:6.7

4 files changed, 186 insertions, 1 deletions

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
index 9b99391dda..0a69fd3b9d 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
@@ -4,8 +4,10 @@
 
 package com.vaadin.terminal.gwt.client.ui;
 
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.Iterator;
+import java.util.List;
 import java.util.Set;
 
 import com.google.gwt.core.client.Scheduler;
@@ -187,7 +189,8 @@ public class VTabsheet extends VTabsheetBase {
 
         public void addTab(VCaption c) {
             Element td = DOM.createTD();
-            setStyleName(td, CLASSNAME + "-tabitemcell");
+            setStyleName(td, ITEMCELL_CLASSNAME);
+            tabStyles.add(null);
 
             if (getWidgetCount() == 0) {
                 setStyleName(td, CLASSNAME + "-tabitemcell-first", true);
@@ -295,6 +298,11 @@ public class VTabsheet extends VTabsheetBase {
 
     public static final String TABS_CLASSNAME = "v-tabsheet-tabcontainer";
     public static final String SCROLLER_CLASSNAME = "v-tabsheet-scroller";
+    public static final String ITEMCELL_CLASSNAME = CLASSNAME + "-tabitemcell";
+
+    // Can't use "style" as it's already in use
+    public static final String TAB_STYLE_NAME = "tabstyle";
+
     private final Element tabs; // tabbar and 'scroller' container
     private final Element scroller; // tab-scroller element
     private final Element scrollerNext; // tab-scroller next button element
@@ -329,6 +337,12 @@ public class VTabsheet extends VTabsheetBase {
 
     private String currentStyle;
 
+    /**
+     * Keeps track of the currently set styleName for each tab so it can be
+     * removed without affecting the other styles set to the same DOM element
+     */
+    private List<String> tabStyles = new ArrayList<String>();
+
     private void onTabSelected(final int tabIndex) {
         if (disabled || waitingForResponse) {
             return;
@@ -639,6 +653,30 @@ public class VTabsheet extends VTabsheetBase {
         }
         c.updateCaption(tabUidl);
 
+        // Apply the styleName set for the tab
+        String styleName = tabUidl.getStringAttribute(TAB_STYLE_NAME);
+        String oldStyleName = tabStyles.get(index);
+        // Find the nth td element
+        Element td = (Element) tb.tr.getChild(index);
+        if (styleName != null && !styleName.isEmpty()) {
+            if (!styleName.equals(oldStyleName)) {
+                // If we have a new style name
+                if (oldStyleName != null && !oldStyleName.isEmpty()) {
+                    // Remove old style name if present
+                    td.removeClassName(ITEMCELL_CLASSNAME + "-" + oldStyleName);
+                }
+                // Set new style name
+                td.addClassName(ITEMCELL_CLASSNAME + "-" + styleName);
+                // Update bookkeeping
+                tabStyles.set(index, styleName);
+            }
+        } else if (oldStyleName != null) {
+            // Remove the set stylename if no stylename is present in the uidl
+            td.removeClassName(ITEMCELL_CLASSNAME + "-" + oldStyleName);
+            // Also update the bookkeeping
+            tabStyles.set(index, null);
+        }
+
         c.setHidden(hidden);
         if (scrolledOutOfView(index)) {
             // Should not set tabs visible if they are scrolled out of view
diff --git a/src/com/vaadin/ui/TabSheet.java b/src/com/vaadin/ui/TabSheet.java
index 8a1fd43b9a..212f13328b 100644
--- a/src/com/vaadin/ui/TabSheet.java
+++ b/src/com/vaadin/ui/TabSheet.java
@@ -406,6 +406,11 @@ public class TabSheet extends AbstractComponentContainer {
                 componentError.paint(target);
             }
 
+            final String styleName = tab.getStyleName();
+            if (styleName != null) {
+                target.addAttribute(VTabsheet.TAB_STYLE_NAME, styleName);
+            }
+
             target.addAttribute("key", keyMapper.key(component));
             if (component.equals(selected)) {
                 target.addAttribute("selected", true);
@@ -991,6 +996,47 @@ public class TabSheet extends AbstractComponentContainer {
          * Get the component related to the Tab
          */
         public Component getComponent();
+
+        /**
+         * Sets a style name for the tab. The style name will be rendered as a
+         * HTML class name, which can be used in a CSS definition.
+         * 
+         * <pre>
+         * Tab tab = tabsheet.addTab(tabContent, &quot;Tab text&quot;);
+         * tab.setStyleName(&quot;mystyle&quot;);
+         * </pre>
+         * <p>
+         * The used style name will be prefixed with "
+         * {@code v-tabsheet-tabitemcell-}". For example, if you give a tab the
+         * style "{@code mystyle}", the tab will get a "
+         * {@code v-tabsheet-tabitemcell-mystyle}" style. You could then style
+         * the component with:
+         * </p>
+         * 
+         * <pre>
+         * .v-tabsheet-tabitemcell-mystyle {font-style: italic;}
+         * </pre>
+         * 
+         * <p>
+         * This method will trigger a
+         * {@link com.vaadin.terminal.Paintable.RepaintRequestEvent
+         * RepaintRequestEvent} on the TabSheet to which the Tab belongs.
+         * </p>
+         * 
+         * @param styleName
+         *            the new style to be set for tab
+         * @see #getStyleName()
+         */
+        public void setStyleName(String styleName);
+
+        /**
+         * Gets the user-defined CSS style name of the tab. Built-in style names
+         * defined in Vaadin or GWT are not returned.
+         * 
+         * @return the style name or of the tab
+         * @see #setStyleName(String)
+         */
+        public String getStyleName();
     }
 
     /**
@@ -1005,6 +1051,7 @@ public class TabSheet extends AbstractComponentContainer {
         private boolean closable = false;
         private String description = null;
         private ErrorMessage componentError = null;
+        private String styleName;
 
         public TabSheetTabImpl(String caption, Resource icon) {
             if (caption == null) {
@@ -1098,6 +1145,15 @@ public class TabSheet extends AbstractComponentContainer {
             }
             return null;
         }
+
+        public void setStyleName(String styleName) {
+            this.styleName = styleName;
+            requestRepaint();
+        }
+
+        public String getStyleName() {
+            return styleName;
+        }
     }
 
     /**
diff --git a/tests/src/com/vaadin/tests/components/tabsheet/TabSheetTabStyleNames.html b/tests/src/com/vaadin/tests/components/tabsheet/TabSheetTabStyleNames.html
new file mode 100644
index 0000000000..0ff83bbaca
--- /dev/null
+++ b/tests/src/com/vaadin/tests/components/tabsheet/TabSheetTabStyleNames.html
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="" />
+<title>TabSheetTabStyleNames</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">TabSheetTabStyleNames</td></tr>
+</thead><tbody>
+<tr>
+	<td>open</td>
+	<td>/run/com.vaadin.tests.components.tabsheet.TabSheetTabStyleNames?debug&amp;restartApplication</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentstabsheetTabSheetTabStyleNames::/VVerticalLayout[0]/ChildComponentContainer[1]/VVerticalLayout[0]/ChildComponentContainer[1]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]</td>
+	<td>v-tabsheet-tabitemcell-ticket5880</td>
+</tr>
+<tr>
+	<td>click</td>
+	<td>vaadin=runcomvaadintestscomponentstabsheetTabSheetTabStyleNames::/VVerticalLayout[0]/ChildComponentContainer[1]/VVerticalLayout[0]/ChildComponentContainer[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertNotCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentstabsheetTabSheetTabStyleNames::/VVerticalLayout[0]/ChildComponentContainer[1]/VVerticalLayout[0]/ChildComponentContainer[1]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]</td>
+	<td>v-tabsheet-tabitemcell-ticket5880</td>
+</tr>
+<tr>
+	<td>assertCSSClass</td>
+	<td>vaadin=runcomvaadintestscomponentstabsheetTabSheetTabStyleNames::/VVerticalLayout[0]/ChildComponentContainer[1]/VVerticalLayout[0]/ChildComponentContainer[1]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[1]</td>
+	<td>v-tabsheet-tabitemcell-ticket5880_0</td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
diff --git a/tests/src/com/vaadin/tests/components/tabsheet/TabSheetTabStyleNames.java b/tests/src/com/vaadin/tests/components/tabsheet/TabSheetTabStyleNames.java
new file mode 100644
index 0000000000..00b6e142b3
--- /dev/null
+++ b/tests/src/com/vaadin/tests/components/tabsheet/TabSheetTabStyleNames.java
@@ -0,0 +1,49 @@
+package com.vaadin.tests.components.tabsheet;

+

+import com.vaadin.tests.components.TestBase;

+import com.vaadin.ui.Button;

+import com.vaadin.ui.Button.ClickEvent;

+import com.vaadin.ui.Label;

+import com.vaadin.ui.TabSheet;

+import com.vaadin.ui.TabSheet.Tab;

+

+public class TabSheetTabStyleNames extends TestBase {

+

+    private static final String STYLE_NAME = "ticket5880";

+

+    @Override

+    public void setup() {

+        TabSheet tabsheet = new TabSheet();

+        final Tab tab1 = tabsheet.addTab(new Label(), "Tab 1");

+        final Tab tab2 = tabsheet.addTab(new Label(), "Tab 2");

+

+        tab1.setStyleName(STYLE_NAME);

+

+        addComponent(new Button("Update style names",

+                new Button.ClickListener() {

+                    int counter = 0;

+

+                    public void buttonClick(ClickEvent event) {

+                        if (tab1.getStyleName() == null) {

+                            tab1.setStyleName(STYLE_NAME);

+                        } else {

+                            tab1.setStyleName(null);

+                        }

+

+                        tab2.setStyleName(STYLE_NAME + "_" + (counter++));

+                    }

+                }));

+

+        addComponent(tabsheet);

+    }

+

+    @Override

+    protected String getDescription() {

+        return "Tests setting style names for individual tabs.";

+    }

+

+    @Override

+    protected Integer getTicketNumber() {

+        return 5880;

+    }

+}
\ No newline at end of file