Gestion du design, les CSS

  • warning: array_map(): Argument #2 should be an array in /var/www/titouille.ch/www/modules/system/system.module on line 1050.
  • warning: array_keys() expects parameter 1 to be array, null given in /var/www/titouille.ch/www/includes/theme.inc on line 1845.
  • warning: Invalid argument supplied for foreach() in /var/www/titouille.ch/www/includes/theme.inc on line 1845.
Portrait de titouille
Soumis par titouille le lun, 05/14/2007 - 00:30

Au détour d'une discussion avec François alias FunkC, nous parlions des CSS et ce dernier m'expliquait qu'il était très simple de récupérer les valeurs des déclarations css, tel que si nous utilisions un objet standard...

Après quelques tests, j'ai pu apprécier la rapide mise en oeuvre de fichiers de configuration, que ça soit pour le design ou des données globales.

Voici un exemple de la css que j'utilise pour les galeries de ce site :

remoting
	{
	gateway-uri:http://127.0.0.1/sites/titouille/build/build003/gateway.php;
	service-name:GaleryLayer;
	}
 
 
main
	{
	nodeID: 10;
	filespath: ./
	}
 
 
thumbs
	{
	between-border:30;
	between-thumbs:20;
	position: top;
	count: 4;
	}
 
thumb
	{
	width: 100;
	height: 100;
 
	display-speed: 12;
	transition-speed: 12;
	}
 
 
thumbmask
	{
	line-weight: 2;
	line-color: 0xffffff;
	line-alpha: 100;
	mask-color: 0xffffff;
	mask-alpha: 60;
	}
 
 
 
thumbsnav
	{
	align-border: 40;
	between-border: 4;
 
	previous: 1leftarrow.png;
	next: 1rightarrow.png;
 
	dimensions: 22;
	position: top-right;
	transition-speed: 12;
	navigation-speed: 20;
	}

picture
	{
	transition-hide-speed: 12;
	transition-show-speed: 12;
	transition-move-speed: 20;
	}
 
picturemask
	{
	line-weight: 1;
	line-color: 0xff0000;
	line-alpha: 100;
	mask-color: 0x000000;
	mask-alpha: 40;
	}
 
label
	{
	font-family: Verdana;
	font-size: 12;
	font-weight: bold;
	text-align: center;
	color: 0xff0000;
	}
 
progressbar
	{
	x: 0;
	y: 10;
	left: 0;
	top: 0;
	width: 400;
	height: 3;
	fill-alpha: 100;
	fill-color: 0xaaaaaa;
	rotation: 0;
	startxscale:0;
	startyscale: 100;
	movingscale: _xscale;
	depth: 500;
	}

Bien que la css soit un peu complexe, il n'est pas très compliqué pour quelqu'un connaissant un peu l'actionScript de comprendre à quoi peuvent servir les paramètres qu'on peut lire ici.

Ensuite, J'ai simplement créé une classe me permettant de charger une css et de pouvoir récupérer soit un objet correspondant à une classe css, soit une valeur précise dans une classe.

On peut l'instancier de manière assez simple, et une fois passé le le gestionnaire de retour onReady, on peut récupérer les valeurs via les méthodes getStyle et getProperty

import ch.titouille.css.CSSManager;
 
var cssm:CSSManager;
 
loadCSS();
 
function loadCSS()
	{
	cssm = CSSManager.getInstance();
	cssm.onReady = Delegate.create( this, onParseCSS );
	cssm.onError = Delegate.create( this, onErrorCSS );
	cssm.load("mycss.css");
	}		
 
function onErrorCSS()
	{
	trace( "Impossible de charger la css spécifiée..." );
	}
 
function onParseCSS()
	{
	//var o:Object = cssm.getStyle( 'main' );
	//trace( o.nodeID );
	}

Je pense que ça va ouvrir pas mal de possibilités pour les chargements de fichiers de configuration Wink A ton clavier !!