Discussion :

[Gaaaga]

Hello,

j'ai un probleme, et meme 2.
Le premier est que je n'arrive pas a fixer la taille de mon Button. C'est tres bizarre puisque mon Button en flash a comme taille 16 (height)*28 (width), et je lui impose la Height a 16, mais la largeur reste a 33
Lorsque je fixe aussi la Width a 28, j'obtiens ca :



comme vous pouvez le voir, le text est coupe.


Sinon, 2eme soucis, et je n'arrive pas a comprendre pourquoi puisque dans mon code, je met partout le verticale align a middle et aucun padding ni gap.. Mais bref, en fait, je suis en train de coder un Pager, et de le customiser. Alors voila mon 2eme soucis, que j'ai du mal a comprendre :
Lorsqu'il n'y a qu'un page, pas de soucis, exactement le comportement que je cherche. Par contre qd il y a plusieurs pages, rien ne va plus, tout est decale vers le bas..

une page : (j'ai volontairement mis le background a noir pour bien voir le comportement ainsi que modification du skin du bouton selected)




plusieurs pages :



(on remarque aussi que le background image fait 15 pixel au lieu de 14... D'ailleurs, le composant flash fait 16 pixel, avec une ligne de pixel transparente (alpha = 2) au dessus et en dessous)

Mon code :

Le pager est appelé :

Code :

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

1
2
3
4
5
<!-- Pager -->
				<mx:HBox width="100%" horizontalAlign="right" height="28" paddingRight="25" verticalAlign="middle">				
					<components:Pager id="pager" horizontalAlign="right" verticalAlign="middle" pageUpdate="onPageUpdate(event)"
								currentPage="{getCurrentPage(panelVO.firstEntry)}" totalPages="{getTotalPages(panelVO.totalEntries)}" width="100%" height="16"/>
				</mx:HBox>

La definition du Pager :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="onCreationComplete()" 
	width="100%" height="100%"
	verticalAlign="middle" horizontalGap="5" verticalGap="0"
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
	backgroundColor="#000000">
	<mx:Metadata>
		[Event(name="pageUpdate", type="com.woodwing.components.events.PageUpdateEvent")]
	</mx:Metadata>
 
	<mx:Script>
 
 
[..coupé pour plus de lisibilite..]
 
			/**
			 * Add a button for a page
			 * The data property of the button contains the page number
			 * Adjust the height and width to the height of this component
			 * to result in square buttons
			 * @param the index for the button to add, used for data and label
			 * 
			 */			
			private function addButton (index:uint) : void {
 
				var pageButton:Button = new Button();
				pageButton.styleName = "pageButton";
 
 
				pageButton.label = String(index);
				//pageButton.labelPlacement = ButtonLabelPlacement.BOTTOM;
				pageButton.data = index;
				pageButton.setStyle("leading",0);
				pageButton.toggle = true;
				pageButton.addEventListener("click",updatePageClick);
				pageButton.height = 16;
				//pageButton.width = 28;
				// select the current page
				if (index == this.currentPage){
					pageButton.selected = true;
					pageButton.setStyle("color","#000000");
					//pageButton.width = 28;
				}
				this.pages_box.addChild(pageButton);				
			}
 
[..coupé pour plus de lisibilite..]
 
		]]>
	</mx:Script>
	<mx:Button id="previous_btn" click="moveToPreviousPage(event)" height="15" styleName="pageArrowLeft"/><!--height="{this.height}"-->			
	<mx:HBox id="pages_box" styleName="pagesBox" paddingLeft="0" paddingRight="0" verticalAlign="middle"
		 horizontalGap="0" verticalGap="0" paddingBottom="0" paddingTop="0" height="100%">		
	</mx:HBox>			
	<mx:Button id="next_btn"  click="moveToNextPage(event)" height="15" styleName="pageArrowRight"/><!--height="{this.height}"-->
</mx:HBox>

Dans mon fichier css :

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
.pageButton{
	selected-disabled-skin: 	Embed(source="flash.swf", symbol="pagerButton");
	selected-down-skin: 		Embed(source="flash.swf", symbol="pagerButton");
	selected-over-skin: 		Embed(source="flash.swf", symbol="pagerButton");
	selected-up-skin : 			Embed(source="flash.swf", symbol="pagerButton");
	up-skin: 					Embed(source="flash.swf", symbol="pagerButton");
	over-skin: 					Embed(source="flash.swf", symbol="pagerButton");
	down-skin: 					Embed(source="flash.swf", symbol="pagerButton");
	disabled-skin: 				Embed(source="flash.swf", symbol="pagerButton");
	/*text-selected-color :		#000000; pagerButton pagerbox
	selection-color:			#000000;*/
	font-size: 					11;
	text-roll-over-color : 		#bab2bc;
	color :						#ffffff;	
 
}
 
 
.pagesBox{
	background-image : 			Embed(source="flash.swf", symbol="pagerbar2");
	background-size :  "100%";
}

Desolee, c'est long j'espere avoir ete claire !

Quelqu'un voit-il ou est le soucis ???

MERCI !

[Gaaaga]

J'ai omis de preciser mon 3eme soucis qui est que le text (les numero, index) ne sont pas verticalement centre malgre toutes mes tentatives de VerticalAlign="middle"...

[Gaaaga]

Bon, avec de la grosse bidouille de composant flash et d'attribut flex, je m'en sors a peu pres pour les tailles et co.

Me reste le probleme des WIDTH.

et celui de l'alignement central des labels... (deja tente le labelPlacement, d'ailleurs j'ai aps d'icone de toute facon)

[Gaaaga]

Bizzarement j ai reussi a m en sortir, autant pour la width que pour l alignement du text verticalement et horizontalement en bidouillant avec les padding :

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
.pageButton{
	selected-disabled-skin: 	Embed(source="flash.swf", symbol="pagerbox");
	selected-down-skin: 		Embed(source="flash.swf", symbol="pagerbox");
	selected-over-skin: 		Embed(source="flash.swf", symbol="pagerbox");
	selected-up-skin : 			Embed(source="flash.swf", symbol="pagerbox");
	up-skin: 					Embed(source="flash.swf", symbol="pagerButton");
	over-skin: 					Embed(source="flash.swf", symbol="pagerButton");
	down-skin: 					Embed(source="flash.swf", symbol="pagerButton");
	disabled-skin: 				Embed(source="flash.swf", symbol="pagerButton");
	/*text-selected-color :		#000000; pagerButton pagerbox
	selection-color:			#000000;*/
	background-color :			#000000;
	font-size: 					11;
	text-roll-over-color : 		#bab2bc;
	color :						#ffffff;
	text-align : center;
	padding-left:0;
	padding-right:1;
	padding-bottom : 2;
	padding-top : 0;	
 
}