Dans ce billet, nous verrons comment forcer le verrouillage d’un onglet d’un TabNavigator.

Introduction

Nous partirons d’un cas pratique que j’ai rencontré. Imaginons une application de gestion de donnée ou une série de formulaire sont liés entre eux. Les données sont réparties en plusieurs formulaire affichés dans une onglet d’un TabNavigator. Donc certains de ces formulaire DOIVENT être enregistrés avant que l’utilisateur bascule dans un autre onglet.

Pour verrouiller le TabNavigator, nous allons devoir intercepter l’interaction de l’utilisateur sur la TabBar.

Je vais m’appuyer sur un tutoriel ( Preventing the TabNavigator from changing tabs when one is clicked )qui répond au problème, le seul inconvénient de la solution proposée, c’est qu’elle lie très fortement le canvas affiché au TabNavigator qui le contiens. Or dans notre cas, certains Formulaire doivent être verrouillés, d’autre pas.

Le script sera donc intégré à la vue qui doit être verrouillée.

Les fichiers

Créez un nouveau projet Flex. Le fichier principal contiendra notre TabNavigator, et nous allons créer un autre fichier que j’ai appelé UseTab.mxml, ce fichier sera un héritier de Canvas. C’est dans ce fichier que nous développerons la logique permettant de verrouiller la vue.

Pour commencer à dégrossir un peu, nous allons commencer par déterminer les mécanismes de la vues.

Les variables

Notre vue contiendra une variable qui déterminera si la vue a subit des changement ou pas, dans l’exemple elle s’appelle viewChanged, on peut donc commencez à saisir ça dans la Balise Script du fichier UseTab.mxml.

1

[Bindable] public var viewChanged:Boolean = false;

Maintenant passons au fonctionnement…

Les méthodes :

Notre vue comportera 3 méthodes relativement simple, l’une pour mettre en place le système d’écoute sur le Event.CLICK de la TabBar, l’autre pour suspendre l’écoute, la dernière se chargera de traiter l’interception produite pas les 2 autres méthodes.

1
2
3
4
5
6
7
8
9
10

// Quand la vue est créer/affichée, on place un écouteur sur le parent
// seulement si ce parent est un TabNavigator			
private function listenTabBar() :void {
 
	if( parent is TabNavigator ) {
		trace(this + " cré un écouteur");
		var tab:TabNavigator = parent as TabNavigator;
		tab.addEventListener(MouseEvent.CLICK, interceptClick, true);
	}
}

Ensuite la méthode qui supprime l’écouteur créé

1
2
3
4
5
6
7

private function unListenTabBar() :void {
	if( parent is TabNavigator ) {
		trace(this + " arrète d'écouter");
		var tab:TabNavigator = parent as TabNavigator;
		tab.removeEventListener(MouseEvent.CLICK, interceptClick,true);
	}
}

Comme vous pouvez le constater, le principe est assez simple, notez quand même que le paramètre useCapture:Boolean de la méthode addEventListener DOIT être sur true afin que l’on puisse stopper la diffusion de l’événement.

Enfin la méthode interceptClick. Cette méthode DOIT procéder à 2 contrôles : L’un sur la source du click, en effet, les click qui nous interessent sont ceux qui se produisent dans la TabBar uniquement. L’autre contrôle se faisant sur notre variable viewChanged

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private function interceptClick( e:MouseEvent ) :void {
 
	// Vus que la capture se fait au clique, nous devons savoir sir le 
	// clique se produit bien sur la TabBar et pas à un autre endroit
	if( e.target.parent is TabBar ) {
		if( viewChanged ) {
			e.stopImmediatePropagation();
			Alert.show("Vous devez enregistrer les données, merci", "Attention");
		} else {
			// rien a changé
			trace("Rien a changé...");
		}
	}
}

Maintenant que la logique est en place, il ne nous reste plus qu’a appeler ces 2 méthodes au bon moment, à savoir, pour le début de l’écoute :

• Quand la vue est créé (FlexEvent.INITIALIZE)
• Quand la vue s’affiche (FlexEvent.SHOW)

Et pour la fin de l’écoute, quand la vue est cachée (FlexEvent.HIDE)

Rien ne vous empèche après d’adapter à votre cas

Dans l’exemple, j’appelle les méthodes dans les événements de la balise Canvas

1
2
3
4
5
6
7

<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%" height="100%"
	show="listenTabBar()"
	hide="unListenTabBar();"
	initialize="listenTabBar()"
>

Il ne vous reste plus qu’a tester. Dans l’exemple j’ai créé une checkbox pour modifier la valeur de la variable changed.

1
2
3
4
5

<mx:CheckBox y="20"
	label="Vue modifiée ?"
	selected="{viewChanged}"
	change="viewChanged=!viewChanged" 
/>

Il ne vous reste plus qu’a intégrer une ou plusieurs UseTab dans votre tabNavigator du fichier principal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	xmlns:local="*"
	>
	<mx:TabNavigator top="10" right="10" bottom="10" left="10" id="tab">
		<local:UseTab label="TAB 1"/>
		<local:UseTab label="TAB 3"/>
		<local:UseTab label="TAB 4"/>
		<local:UseTab label="TAB 5"/>
		<mx:Canvas label="Pas de verrouillage">
			<mx:Label text="Cette vue n'a pas besoin d'être vérouillée" />
		</mx:Canvas>
	</mx:TabNavigator>
</mx:Application>

Ce qui nous donne

Voilà, en espérant que ce tutorial vous sera utile,

Cordialement