====== 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é.

  * [[http://apps.pxxo.net/showcase/|Exemple d'utilisation en ligne]]
  * [[fr:install|Installer]]




===== 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__

<code php>
<?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();
?>
</code>
{{ fr:doc:roundedbox_exple1.png | Exemple 1 }}


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


__Exemple 2 : changement des couleurs__

<code php>
<?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();
?>
</code>
{{ fr:doc:roundedbox_exple2.png | Exemple 2 }}


__Exemple 3 : changement des couleurs et de //borderRadius//__

<code php>
<?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();
?>
</code>
{{ fr:doc:roundedbox_exple3.png | Exemple 3 }}


__Exemple 4 : on fixe les tailles et le comportement en //overflow//__

<code php>
<?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();
?>
</code>
{{ fr:doc:roundedbox_exple4.png | Exemple 4 }}