Discussion :

[Micromalice]

Bonjour à tous,

Mon application (un tchat) possède un tabNavigator avec 3 onglets.

onglet 1: le tchat
onglet 2: autre chose
onglet 3: autre chose

Lorsque l'utilisateur est sur l'onglet n°2 ou 3, et qu'un message arrive sur le tchat (onglet 1) je souhaite faire clignoter cet onglet (le 1 pour ceux qui n'ont pas suivi...

Pour cela, mon appli possède un timer qui s'occuppe de faire clignoter l'onglet en changeant sont backgroundColor a interval régulier

tab.setStyle("backgroundColor",COL_CLIGNO);

Mon problème est que malgré l'arrivé du message (testé) et le déclenchement du timer (timer.start() -> verifié aussi), l'onglet ne se met a clignoter que lorsqu'il est sélectionné (ce qui rend le clignotement totalement inutile pour mon appli :-/ )

Auriez vous déjà expérimenté ce problème? ou sauriez vous d'où cela peut venir?

[Jim_Nastiq]

en fait la propriété BackgroundColor s'applique à ton contenu , i lte faut faut viser l'onglet : le TabBar

voici un exemple de CSS, avec un TabNavigator :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
TabNavigator {
   tabStyleName: "myTabs";
   firstTabStyleName: "myTabs";
   lastTabStyleName: "myTabs";
   selectedTabTextStyleName: "mySelectedTabs";
}
 
.myTabs {
   fillColors: #0033cc, #cccccc;
   backgroundColor: #00cccc;
}
 
.mySelectedTabs {
   fillColors: #0033cc, #cccccc;
   backgroundColor: #00cccc;
}

tu as donc modifié, avec ce code CSS uniquement les onglets, il ne te reste plus qu'a créer un autre styleName (comme .myTabs) et de modifier la propriété firstTabStyleName

[Micromalice]

Merci pour ta réponse, mais j'ai du passé a coté de quelque chose...
Je n'arrive toujours pas a faire clignoté mon 1er onglet lorsqu'il n'a pas le focus. Pour l'instant j'ai pallié le problème en modifiant son label aussi mais je ne trouve pas ça terrible.
Voici le code de mon exemple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="800" height="604" creationComplete="init()" >

<mx:Style>

TabNavigator {
tabStyleName: "myTabs";
firstTabStyleName: "myTabs";
lastTabStyleName: "myTabs";
selectedTabTextStyleName: "mySelectedTabs";
}

.myTabs {
fillColors: #0033cc, #cccccc;
backgroundColor: #00cccc;
text-align:left;
}

.myTabsCligno {
fillColors: #0033cc, #cccccc;
backgroundColor: #FE6801;
text-align:left;
}


.mySelectedTabs {
fillColors: #0033cc, #cccccc;
backgroundColor: #00cccc;
text-align:left;
}

</mx:Style>

<mx:TabNavigator x="0" y="0" width="800" height="269" tabHeight="35" id="tabnavigator1" selectedIndex="0">

<mx:Canvas label="onglet1" width="100%" height="100%" id="onglet_tchat" click="stopClignoTab()">
</mx:Canvas>

<mx:Canvas label="onglet2" width="100%" height="100%" id="onglet_2">
</mx:Canvas>

<mx:Canvas label="onglet3" width="100%" height="100%" id="onglet_3" >
</mx:Canvas>



</mx:TabNavigator>
<mx:Button x="116" y="330" label="Start" width="103" click="startClignoTab()" id="button1"/>
<mx:Button x="285" y="330" label="Stop" click="stopClignoTab()" />
<mx:Script>
<![CDATA[
import mx.containers.TabNavigator;
import flash.utils.Timer;
import flash.events.TimerEvent;

private const TIMER_INTERVAL:int = 500;

private var toggle:Boolean = false;
private var tCligno: Timer;
private const COL_CLIGNO:int = 0xFE6801;

private function clignoteTab(evt:TimerEvent):void {
toggle = !toggle;
var tab : Object;
tab = tabnavigator1.getTabAt(0);

if (toggle==true){
tab.label = 'onglet1: New';
tabnavigator1.setStyle('firstTabStyleName','myTabsCligno');
}else{
tab.label = 'onglet1';
tabnavigator1.setStyle('firstTabStyleName','myTabs');
}
}

public function startClignoTab():void {
tCligno.start();
}

public function stopClignoTab():void {
tCligno.stop();
}


public function init():void{

tCligno = new Timer(TIMER_INTERVAL);
tCligno.addEventListener(TimerEvent.TIMER, clignoteTab);
}

]]>
</mx:Script>


</mx:Application>

[Jim_Nastiq]

je me suis mal exprimé, il faut que tu joues sur le fill-colors pour les tab non sélectionnées:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
TabNavigator {
tabStyleName: "myTabs";
firstTabStyleName: "myTabs";
lastTabStyleName: "myTabs";
selectedTabTextStyleName: "mySelectedTabs";
}
 
.myTabs {
backgroundColor: #00cccc;
text-align:left;
}
 
.myTabsCligno {
fillColors: #0033cc, #cccccc;
backgroundColor: #FE6801;
text-align:left;
}
 
 
.mySelectedTabs {
backgroundColor: #00cccc;
text-align:left;
}

[Micromalice]

Génial, merci beaucoup de ton aide.

Voila le code final pour ceux que ça intéresse:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="800" height="604" creationComplete="init()" >

<mx:Style>

TabNavigator {
tabHeight: 35;
tabWidth: 262;
cornerRadius: 0;
horizontalGap: 0;
horizontalAlign: left;
paddingLeft: 0;
textIndent: 0;
backgroundAlpha: 1;
backgroundColor: #000000;
borderStyle: solid;
color: #000000;
dropShadowEnabled: false;
tabStyleName: "myTabs";
firstTabStyleName: "myTabs";
lastTabStyleName: "myTabs";
selectedTabTextStyleName: "mySelectedTabs";
}

.myTabs {
cornerRadius: 10;
highlightAlphas: 0, 0;
fillAlphas: 1, 1;
fillColors: #ffffff, #ffffff;
backgroundAlpha: 1;
backgroundColor: #000000;
borderColor: #ffffff;
color: #000000;
textRollOverColor: #0b333c;
themeColor: #000000;
fontSize: 16;
fontWeight: bold;
}


.mySelectedTabs {
color: #ffffff;
}


.myTabsCligno {
cornerRadius: 10;
fillColors: #FE6801, #FE6801;
fill-alphas:1,1;
highlight-alphas:0,0;
backgroundColor: #FE6801;
fontSize: 16;
fontWeight: bold;
}
</mx:Style>

<mx:TabNavigator x="0" y="0" width="800" height="269" tabHeight="35" id="tabnavigator1" selectedIndex="0">

<mx:Canvas label="onglet1" width="100%" height="100%" id="onglet_tchat" click="stopClignoTab()">
</mx:Canvas>

<mx:Canvas label="onglet2" width="100%" height="100%" id="onglet_2">
</mx:Canvas>

<mx:Canvas label="onglet3" width="100%" height="100%" id="onglet_3" >
</mx:Canvas>



</mx:TabNavigator>
<mx:Button x="116" y="330" label="Start" width="103" click="startClignoTab()" id="button1"/>
<mx:Button x="285" y="330" label="Stop" click="stopClignoTab()" />
<mx:Script>
<![CDATA[
import mx.containers.TabNavigator;
import flash.utils.Timer;
import flash.events.TimerEvent;

private const TIMER_INTERVAL:int = 500;

private var toggle:Boolean = false;
private var tCligno: Timer;
private const COL_CLIGNO:int = 0xFE6801;

private function clignoteTab(evt:TimerEvent):void {
toggle = !toggle;
if (toggle==true){
tabnavigator1.setStyle('firstTabStyleName','myTabsCligno');
}else{
tabnavigator1.setStyle('firstTabStyleName','myTabs');
}
}

public function startClignoTab():void {
tCligno.start();
}

public function stopClignoTab():void {
tCligno.stop();
}


public function init():void{

tCligno = new Timer(TIMER_INTERVAL);
tCligno.addEventListener(TimerEvent.TIMER, clignoteTab);
}

]]>
</mx:Script>


</mx:Application>

[dut-dut]

(Bonjour)

Excellent !!

Pile ce que je cherchais à un détail près... Comment est-ce que je peux appliquer la même chose à un onglet particulier autre que le premier ou le dernier ? (le 2nd, le 4e, le 7e, etc...)