[Flash] Composant - ComboBox

Vous avez pas trop envie de programmer pour créer un site, donc vous préférez utiliser les composants flash. Mais un petit problème, c'est que les couleurs, les typos,... ne collent pas trop à l'ambiance du site.

Comment faire?

Tout simple, les composants sont facile à personnaliser. Je vais vous faire un bref aperçu des personnalisations disponible et ce que ça donne:

#1: Changement de couleur avec un thème pre-fait
#2: Changement de couleur du fond et du thème avec une couleur que nous voulons
#3: Changement de la couleur du texte.
#4: Changement de la typo (comic sans MS), de la décoration (sous-ligné), et du style (italique)
#5: Changement de la durée d'ouverture du combobox
#6: Effet tween pour l'ouverture du CB

Code:

import mx.transitions.easing.*;
//Couleur prédéfinie
un_cb.setStyle("themeColor","haloBlue");
//Couleur spécifique
deux_cb.setStyle("themeColor",0x23CB64);
deux_cb.setStyle("backgroundColor",0x99FF99);
//Couleur spécifique pour le texte
trois_cb.setStyle("color",0xCB2364);
//Couleur style et décoration spécifique pour le texte
quatre_cb.setStyle("fontFamily","Comic Sans MS");
quatre_cb.setStyle("fontStyle","italic");
quatre_cb.setStyle("textDecoration","underline");
//Durée spécifique pour le CB (en milliseconde)
cinq_cb.setStyle("openDuration","1000");
//Durée et effet d'ouverture personnalisé
six_cb.setStyle("openDuration","1500");
six_cb.setStyle("openEasing",Elastic.easeOut);

Propriétés de personnalisation des styles du ComboBox :

combobox_cb.setStyle("nom du style","paramètre")

Paramètres:

themeColor : Couleur de base d'un composant. « haloGreen », « haloBlue » et « haloOrange » sont des valeurs possibles. La valeur par défaut est « haloGreen ».


backgroundColor : Couleur d'arrière-plan. La couleur par défaut est le blanc.

borderStyle :

color : Couleur du texte. La valeur par défaut est 0x0B333C pour le thème Halo et vide pour le thème Sample.

disabledColor : Couleur du texte lorsque le composant est désactivé. La couleur par défaut est 0x848384 (gris foncé).

embedFonts : Valeur booléenne qui indique si la police spécifiée dans fontFamily est de type intégré. Ce style doit être défini sur true si fontFamily fait référence à une police intégrée. Dans le cas contraire, la police intégrée n'est pas utilisée. Si ce style est défini sur true et que fontFamily ne fait pas référence à une police intégrée, aucun texte n'est affiché. La valeur par défaut est false.

fontFamily : Nom de la police du texte. La valeur par défaut est « _sans ».

fontSize : Taille, en points, de la police. La valeur par défaut est 10.

fontStyle : Style de police : « normal » ou « italic ». La valeur par défaut est « normal ».

fontWeight : Epaisseur de la police : « none » ou « bold ». La valeur par défaut est « none ». Tous les composants peuvent également accepter la valeur « normal » au lieu de « none » pendant un appel à la méthode setStyle(), mais les appels suivants à getStyle() renvoient « none ».

textAlign : Alignement du texte : « left », « right » ou « center ». La valeur par défaut est « left ».

textDecoration : Décoration du texte : « none » ou « underline ». La valeur par défaut est « none ».

openDuration : Durée, en millisecondes, de l'animation de transition. La valeur par défaut est 250.

openEasing : Référence à une fonction d'interpolation qui contrôle l'animation. Par défaut, sine in/out (sinus).

Niveau un peu plus dur :

Cette fois ci je propose de vous montrer comment gérer un comboBox via actionscript. Grâce a ce code là, vous pourrez créer des comboBox et insérer les valeurs des fichiers XML que vous aurez chargé.

Code:

var i:Number=2;

add_btn.onRelease=function(){
   var texte= add_txt.text;
   ajoutLigne(texte);
   add_txt.text="";
}

delete_btn.onRelease=function(){
   var ligne= suppr_txt.text;
   supprimerLigne(ligne);
   suppr_txt.text="";
   combobox_cb.selectedIndex=0;
}

asc_btn.onRelease=function(){
   triLignesAsc();
}
desc_btn.onRelease=function(){
   triLignesDesc();
}

count_btn.onRelease=function(){
   comptageLigne();
}

open_btn.onRelease=function(){
   openCB();
}

close_btn.onRelease=function(){
   closeCB();
}

// Partie pour écouter la sélection d'un item
var cbListener:Object = new Object();
cbListener.change = function(evt_obj:Object) {
   selected_txt.text=combobox_cb.selectedIndex;
};
combobox_cb.addEventListener("change", cbListener);

// fonction d'ajout dans le combobox
function ajoutLigne(texte){
   i++;
   combobox_cb.addItem({label:texte, data:i})
}

// fonction de suppression dans le combobox
function supprimerLigne(ligne){
   combobox_cb.removeItemAt(ligne);
}

// fonction de tri dans le combobox
function triLignesAsc(){
   combobox_cb.sortItemsBy("label", "ASC");
}
function triLignesDesc(){
   combobox_cb.sortItemsBy("label", "DESC");
}

// Nombre de lignes visible. Si il y a plus de ligne que dit
//dans le maximum, alors le scroll apparait
function visibleLigne(nombre){
   combobox_cb.rowCount = nombre;
}

// ouverture du Combobox
function openCB(){
   combobox_cb.open();
}
// fermeture du Combobox
function closeCB(){
   combobox_cb.close();
}