Lorsque l’on définit le style d’un composant, on ne définit en général que les styles que l’on souhaite modifier. Or, si le composant peut s’intégrer à plusieurs applications différentes, il se peut que certains styles par défaut soient redéfinis par celle-ci, ce qui modifie également l’aspect de notre composant.
Exemple:
On souhaite utiliser le composant kPanel avec le style suivant:
.kPanel
{
paddingTop : 0;
paddingRight : 0;
paddingBottom : 0;
paddingLeft : 0;
borderSkin : ClassReference("fr.kapit.skin.BorderSkinWithShadow");
titleStyleName : "kPanelTitleStyle";
}
mais l’application a défini le style suivant:
Panel {
font-weight: bold;
}
On se retrouve ici avec un kPanel qui a un font-weight à bold, ce qui n’est pas forcément ce que l’on souhaitait.
Pour s’assurer que les styles des composants ne soient jamais modifiés par les applications, voici une méthode:
1) On récupère le style par défaut de flex (global) contenu en général ici:
“C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\projects\framework\default.css”
2) On applique tous les styles de nos composants par celui-ci
.kButton, .kPanel, .kDatagrid {
backgroundAlpha: 1.0; /* this runs the opacity of nearly every square piece of the components */
/* backgroundDisabledColor: #DDDDDD; */
backgroundSize: "auto";
bevel: true;
borderAlpha: 1.0;
borderCapColor: #919999;
borderColor: #B7BABC;
borderSides: "left top right bottom";
borderSkin: ClassReference("mx.skins.halo.HaloBorder");
borderStyle: "inset";
borderThickness: 1;
buttonColor: #6F7777;
closeDuration: 250;
color: #0B333C;
cornerRadius: 0;
disabledColor: #AAB3B3;
disabledIconColor: #999999;
dropShadowColor: #000000;
dropShadowEnabled: false;
embedFonts: false;
errorColor: #FF0000;
fillAlphas: 0.6, 0.4, 0.75, 0.65; /* last pair are for OVER state */
fillColor: #FFFFFF; /* kill this?? */
fillColors: #FFFFFF, #CCCCCC, #FFFFFF, #EEEEEE;
filled: true;
focusAlpha: 0.4;
focusBlendMode: "normal";
focusRoundedCorners: "tl tr bl br";
focusSkin: ClassReference("mx.skins.halo.HaloFocusRect");
focusThickness: 2;
fontAntiAliasType: "advanced";
fontFamily: "Verdana";
fontGridFitType: "pixel";
fontSharpness: 0;
fontSize: 10;
fontStyle: "normal";
fontThickness: 0;
fontWeight: "normal";
/* footerColors: #E7E7E7, #C7C7C7; */
/* headerColors: #E7E7E7, #D9D9D9; */
/* headerHeight: 28; */
highlightAlphas: 0.3, 0; /* use this to control the 'light' cast on the components */
horizontalAlign: "left";
horizontalGap: 8;
horizontalGridLineColor: #F7F7F7;
horizontalGridLines: false;
iconColor: #111111;
indentation: 17;
indicatorGap: 14;
kerning: false;
leading: 2;
letterSpacing: 0;
modalTransparency: 0.5;
modalTransparencyBlur: 3;
modalTransparencyColor: #DDDDDD;
modalTransparencyDuration: 100;
openDuration: 250;
paddingBottom: 0;
paddingLeft: 0;
paddingRight: 0;
paddingTop: 0;
roundedBottomCorners: true;
repeatDelay: 500;
repeatInterval: 35;
selectionDisabledColor: #DDDDDD;
selectionDuration: 250;
shadowCapColor: #D5DDDD;
shadowColor: #EEEEEE;
shadowDirection: "center";
shadowDistance: 2;
stroked: false;
strokeWidth: 1;
textAlign: "left";
textDecoration: "none";
textIndent: 0;
textRollOverColor: #2B333C;
textSelectedColor: #2B333C;
themeColor: #009DFF; /* haloBlue */
/*
//themeColor: #80FF4D; // haloGreen
//themeColor: #FFB600; // haloOrange
//themeColor: #AECAD9; // haloSilver
*/
useRollOver: true;
version: "3.0.0";
verticalAlign: "top";
verticalGap: 6;
verticalGridLineColor: #D5DDDD;
verticalGridLines: true;
}
3) On définit enfin nos propres styles
.kPanel
{
paddingTop : 0;
paddingRight : 0;
paddingBottom : 0;
paddingLeft : 0;
borderSkin : ClassReference("fr.kapit.skin.BorderSkinWithShadow");
titleStyleName : "kPanelTitleStyle";
}