Table des matières

Pxxo_Widget_Decorator_Roundedbox

Ce décorateur permet de générer une boite aux coins arrondis (pleine ou filaire) autours d'un widget. Le résultat a été testé et validé sous Internet Explorer 6, Internet Explorer 7, Firefox 2 (et +), Safari et Opéra. De plus, contrairement à la prise en charge partielle de la propriété CSS border-radius par les différents navigateurs (à l'heure où j'écris ces lignes), les coins arrondis générés par ce décorateur sont anti-aliasés afin d'obtenir un visuel plus soigné.

Paramètres

Aucun des paramètres ci-dessous n'est obligatoire.

Nom Type Valeur par défaut Description
borderRadius Integer 11 rayon de l'arrondi des coins en pixel (ATTENTION ne pas spécifier d'unité, ce paramètre doit être numérique)
borderColor Array Array(0,0,0) Triplet de valeur correspondant au code RGB de la couleur de la bordure de la boîte. Chacune des valeurs doit être comprises entre 0 et 255 (bornes incluses).
backgroundColor Array Array(255,255,255) Triplet de valeur correspondant au code RGB de la couleur d'arrière plan. Chacune des valeurs doit être comprises entre 0 et 255 (bornes incluses).
foregroundColor Array Array(255,255,255) Triplet de valeur correspondant au code RGB de la couleur d'avant plan. Chacune des valeurs doit être comprises entre 0 et 255 (bornes incluses).
width String 100% Largeur de la boîte. Veuillez spécifier l'unité (px, %, …)
height String null Hauteur de la boîte. Veuillez spécifier l'unité (px, %, …)
widthContent String null Largeur du contenu de la boîte. Veuillez spécifier l'unité (px, %, …)
heightContent String null Hauteur du contenu de la boîte. Veuillez spécifier l'unité (px, %, …)
alignCenterContent boolean true Si à true centre le contenu du widget décoré par rapport à la boîte. Pour que celui-ci soit pris en compte, le paramètre widthContent doit être valorisé.
overflowX String hidden gestion de l'overflow horizontal ; valeurs autorisées : hidden, auto, scroll
overflowY String auto gestion de l'overflow vertical ; valeurs autorisées : hidden, auto, scroll
padding String 0px Padding de la boîte. Veuillez spécifier l'unité (px, %, …)
margin String 0px Margin par rapport à la boîte. Veuillez spécifier l'unité (px, %, …)

Exemples

Voici quelques exemples pour illustrer la manière de mettre en oeuvre ce décorateur et l'usage qu'on peut en faire.

Exemple 1 : sans paramètre 

<?php
// configuration de l'environnement Pxxo
require_once 'Pxxo/Config.php';
$config = new Pxxo_Config();
$config->path     = dirname(__FILE__);              // Chemin physique de la racine de l'application
$config->url_root = dirname($_SERVER['PHP_SELF']);  // URL de la racine de l'application (public)
$config->resources_path = $config->path.'/rsc';     // Chemin physique du répertoire de ressources
$config->resources_url  = $config->url_root.'/rsc'; // URL du répertoire de ressources (public)
$config->cache_flag  = false;
$config->register();
 
// widget qui sera décoré 
require_once 'Pxxo/Widget/Htmler.php';
$o = new Pxxo_Widget_Htmler( array('element'=>'div','content'=>'Exemple de contenu simple pour illustrer l\'utilisation du décorateur Pxxo_Widget_Decorator_Roundedbox.') );
 
// on le decore d'un boite aux coins arrondis
require_once 'Pxxo/Widget/Decorator/Roundedbox.php';
$o->addDecorator( new Pxxo_Widget_Decorator_Roundedbox( array() ) );
 
// on inclue le resultat dans une page XHTML pour afficher l'exemple en standalone
$o->addDecorator('Pxxo_Widget_Decorator_Core');
 
// execution
$o->main();
$o->dump();
?>

Exemple 1

Voici quelques exemples de visuel qu'on peut obtenir avec ce décorateur.

Exemple 2 : changement des couleurs 

<?php
// configuration de l'environnement Pxxo
require_once 'Pxxo/Config.php';
$config = new Pxxo_Config();
$config->path     = dirname(__FILE__);              // Chemin physique de la racine de l'application
$config->url_root = dirname($_SERVER['PHP_SELF']);  // URL de la racine de l'application (public)
$config->resources_path = $config->path.'/rsc';     // Chemin physique du répertoire de ressources
$config->resources_url  = $config->url_root.'/rsc'; // URL du répertoire de ressources (public)
$config->cache_flag  = false;
$config->register();
 
// widget qui sera décoré 
require_once 'Pxxo/Widget/Htmler.php';
$o = new Pxxo_Widget_Htmler( array('element'=>'div','content'=>'Exemple de contenu simple pour illustrer l\'utilisation du décorateur Pxxo_Widget_Decorator_Roundedbox.') );
 
// on le decore d'un boite aux coins arrondis
require_once 'Pxxo/Widget/Decorator/Roundedbox.php';
$o->addDecorator( 
        new Pxxo_Widget_Decorator_Roundedbox( 
                array(
                    'foregroundColor'=>array(255,255,255),
                    'backgroundColor'=>array(255,255,255),
                    'borderColor'=>array(45,124,193),                    
                ) 
        ) 
);
 
// on inclue le resultat dans une page XHTML pour afficher l'exemple en standalone
$o->addDecorator('Pxxo_Widget_Decorator_Core');
 
// execution
$o->main();
$o->dump();
?>

Exemple 2

Exemple 3 : changement des couleurs et de borderRadius 

<?php
// configuration de l'environnement Pxxo
require_once 'Pxxo/Config.php';
$config = new Pxxo_Config();
$config->path     = dirname(__FILE__);              // Chemin physique de la racine de l'application
$config->url_root = dirname($_SERVER['PHP_SELF']);  // URL de la racine de l'application (public)
$config->resources_path = $config->path.'/rsc';     // Chemin physique du répertoire de ressources
$config->resources_url  = $config->url_root.'/rsc'; // URL du répertoire de ressources (public)
$config->cache_flag  = false;
$config->register();
 
// widget qui sera décoré 
require_once 'Pxxo/Widget/Htmler.php';
$o = new Pxxo_Widget_Htmler( array('element'=>'div','content'=>'Exemple de contenu simple pour illustrer l\'utilisation du décorateur Pxxo_Widget_Decorator_Roundedbox.','style'=>'color: #FFFFFF;') );
 
// on le decore d'un boite aux coins arrondis
require_once 'Pxxo/Widget/Decorator/Roundedbox.php';
$o->addDecorator( 
        new Pxxo_Widget_Decorator_Roundedbox( 
                array(
                    'foregroundColor'=>array(45,124,193),
                    'backgroundColor'=>array(255,255,255),
                    'borderColor'=>array(45,124,193),                    
                    'borderRadius'=>5,
                ) 
        ) 
);
 
// on inclue le resultat dans une page XHTML pour afficher l'exemple en standalone
$o->addDecorator('Pxxo_Widget_Decorator_Core');
 
// execution
$o->main();
$o->dump();
?>

Exemple 3

Exemple 4 : on fixe les tailles et le comportement en overflow 

<?php
// configuration de l'environnement Pxxo
require_once 'Pxxo/Config.php';
$config = new Pxxo_Config();
$config->path     = dirname(__FILE__);              // Chemin physique de la racine de l'application
$config->url_root = dirname($_SERVER['PHP_SELF']);  // URL de la racine de l'application (public)
$config->resources_path = $config->path.'/rsc';     // Chemin physique du répertoire de ressources
$config->resources_url  = $config->url_root.'/rsc'; // URL du répertoire de ressources (public)
$config->cache_flag  = false;
$config->register();
 
// widget qui sera décoré 
require_once 'Pxxo/Widget/Htmler.php';
$o = new Pxxo_Widget_Htmler( array('element'=>'div','content'=>'Exemple de contenu simple pour illustrer l\'utilisation du décorateur Pxxo_Widget_Decorator_Roundedbox ... blabla<br/>et reblabla<br/>et je dirai même plus blablabla ...<br/>','style'=>'color: #FFFFFF;') );
 
// on le decore d'un boite aux coins arrondis
require_once 'Pxxo/Widget/Decorator/Roundedbox.php';
$o->addDecorator( 
        new Pxxo_Widget_Decorator_Roundedbox( 
                array(
                    'foregroundColor'=>array(45,124,193),
                    'backgroundColor'=>array(255,255,255),
                    'borderColor'=>array(45,124,193),                    
                    'borderRadius'=>5,
                    'width'=>'325px',
                    'widthContent'=>'300px',                    
                    'heightContent'=>'90px',
                    'overflowX'=>'auto',
                    'overflowY'=>'scroll',
                ) 
        ) 
);
 
// on inclue le resultat dans une page XHTML pour afficher l'exemple en standalone
$o->addDecorator('Pxxo_Widget_Decorator_Core');
 
// execution
$o->main();
$o->dump();
?>

Exemple 4