22/09/2009

Skinner le panneau Alert

Pour modifier l'apparence de ce panneau il va falloir skinner le composant Panel dont Alert est composé si l'on veut y appliquer une image d'arrière plan, sinon, renseigner  Alert suffit.
Dans votre fichier css, pour customiser sans images

Alert{
   background-color: #000000; //couleur de fond
   cornerRadius: 5; // arrondi du panneau
   color:#ffffff; //couleur du texte
   border-style:solid;
   modalTransparencyColor: #000000; //la couleur de    transparence sur laquelle va s'afficher le panneau Alert
}


Pour appliquer  une image de fond et changer l'aspect du bouton fermer :
Panel
{

    closeButtonDisabledSkin: Embed(source="assets/BoutonDisabledSkin.png");
    closeButtonDownSkin: Embed(source="assets/BoutonDownSkin.png");
    closeButtonOverSkin: Embed(source="assets/BoutonOverSkin.png");
    closeButtonUpSkin: Embed(source="assets/BoutonUpSkin.png");
    borderSkin:Embed(source="assets/MonImagePanel.png");
}
Bien évidement, tous les composants Panel auront ce style appliqué. Pour leur appliquer une autre apparence il faudra leur dédier une class individuelle.
3 propriétés permettent une personnalisation plus poussée :
  • buttonStyleName : Style css permettant de changer l'aspect des boutons "alert". Par défaut la valeur est "alertButtonStyle".
  • messageStyleName : Change l'aspect du message
  • titleStyleName : Modifie le style du titre. Par défaut la valeur est "windowStyle".
Pour les appliquer, personnaliser chacun d'entre eux puis les inserer dans le style du Panel.
.messageAlerte {
     color: #000000;
}
.boutonAlerte {
     fontSize: 11; cornerRadius: 10;
}
.titreAlerte {
     fontSize: 14;
}


Panel{
     buttonStyleName :"boutonAlerte";
     messageStyleName :"messageAlerte";
     titleStyleName  :"titreAlerte";
}


  

    Aucun commentaire:

    Enregistrer un commentaire