Changer la width d'un Button et autres subtilites
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 :
http://img168.imageshack.us/img168/2...re56op0.th.png
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)
http://img263.imageshack.us/img263/756/picture63np7.png
plusieurs pages :
http://img247.imageshack.us/img247/6...re64vw7.th.png
(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:
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:
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:
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 !
