Change Tab Label colour on the fly

asked 2010-12-02 22:08:13 +0800

Hi All,

I want to change the Tab Label colour on a set event within Java.

I know that the style for the text is: z-tab-seld .z-tab-text

But I am having a hard time just changing the colours for these CSS classes.

I want to do something like this:

button.addEventListener(Events.ON_CHANGE, new EventListener()
{
 public void onEvent( Event event ) throws Exception
 {
   Tabpanel tp = (Tabpanel)comp;
   Tab tab = tp.getLinkedTab();
   tab.setStyle("color: red;");
 }
 });

Does anyone know how to do this?

Thanks!

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2010-12-05 15:04:25 +0800

FujitsuConsulting
165 ● 1

Any ideas guys?

link publish delete flag offensive edit

answered 2010-12-05 19:17:32 +0800

FujitsuConsulting
165 ● 1

Okay... slight progress on this:

<zk>  
<style dynamic="true">

  .savedTab .z-tab-text {
    color: #FF0000;
  }

</style>

<zscript>

  void savedTabStyle(Tab t) {
    t.setSclass("savedTab");
  } 
</zscript>

  <tabbox>
    <tabs>
      <tab id="1" label="Tab 1" onSelect='savedTabStyle(self);' /> 
      <tab id="2" label="Tab 2c" onSelect='savedTabStyle(self);' /> 
    </tabs>
    <tabpanels>
      <tabpanel>
        <label value="Content for Tab #1"/>
      </tabpanel>
      <tabpanel>
        <label value="Content for Tab #2"/>
      </tabpanel>
    </tabpanels>
  </tabbox>
</zk>

The issue with this is it loses the look of the selected tab as well as changing the text label font to red...

link publish delete flag offensive edit

answered 2010-12-05 21:51:49 +0800

FujitsuConsulting
165 ● 1

updated 2010-12-05 22:01:22 +0800

Think Ive cracked it:

<zk>  
<style dynamic="true">
  .savedTab .z-tab-text {
    color: #FF0000;
  }
</style>

<zscript>
  void savedTabStyle(Tab t) {
    t.setSclass("savedTab");
    t.invalidate();
  } 
</zscript>

  <tabbox id="tabbox" >
    <tabs>
      <tab id="1" label="Tab 1" onSelect='savedTabStyle(self);' /> 
      <tab id="2" label="Tab 2" onSelect='savedTabStyle(self);' /> 
    </tabs>
    <tabpanels>
      <tabpanel>
        <label value="Content for Tab #1"/>
      </tabpanel>
      <tabpanel>
        <label value="Content for Tab #2"/>
      </tabpanel>
    </tabpanels>
  </tabbox>
</zk>

Spot the difference :P

I had to invalidate the Tab to make it look selected again!

So in pure Java it looks something like this:

button.addEventListener(Events.ON_CHANGE, new EventListener()
{
 public void onEvent( Event event ) throws Exception
 {
   Tabpanel tp = (Tabpanel)comp;
   Tab tab = tp.getLinkedTab();
   tab.setSclass("savedTab;");
   tab.invalidate();
 }
 });