lundi 7 décembre 2009

Wicket et coins arrondis

Aujourd'hui nous allons voir comment intégrer le framework Wicket avec Nifty Corners Cube.
Si vous faites un peu de développement web, vous avez sûrement déjà été confronté au problème des coins arrondis. Pour faire ça, on peut utiliser une technique assez lourde qui consite à placer une image pour chaque coin du composant à arrondir, ou utiliser CSS3, mais cette solution ne fonctionne pas sur tous les navigateurs, notamment sous IE...
Nifty Corners Cube est une petite librairie JavaScript qui permet de faire des coins arrondis en HTML/CSS, sans utiliser d'images ni CSS3. Son gros avantage est d'être compatible avec tous les navigateurs actuels.
Nous allons utiliser les fonctions d'intégration JavaScript de Wicket pour arrondir dynamiquement des composants à partir du code Java.



Création d'une page mère

Cette page embarque les librairies JS et CSS nécessaires au fonctionnement de Nitfy Corners Cube. Toutes les pages que nous créeront par la suite hériteront de cette page.

Partie Java :
public class BasePage extends WebPage {

public BasePage() {
NiftyPageBehavior niftyPageBehavior = new NiftyPageBehavior();
add(niftyPageBehavior);
add(CSSPackageResource.getHeaderContribution(this.getClass(),"style.css"));
add(CSSPackageResource.getHeaderContribution(this.getClass(),"niftyCorners.css"));
add(JavascriptPackageResource.getHeaderContribution(this.getClass(),"niftycube.js"));

}

}

Partie HTML :




Création d'un Behavior

Comme vous pouvez le voir, nous avons aussi ajouté un NiftyPageBehavior à notre page.
Un Behavior permet d'ajouter un comportement particulier à un composant. Dans notre cas, nous ajoutons un appel à la librairie JS de Nifty Corners pour appliquer une bordure arrondie à tous les éléments qui contiennent un certain style CSS.

Voici le code de ce Behavior :

public class NiftyPageBehavior extends AbstractBehavior{

@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
//for links (buttons)
response.renderOnDomReadyJavascript("Nifty('a.rounded','transparent')");
//for text
response.renderOnDomReadyJavascript("Nifty('p.rounded','transparent')");
//for divs
response.renderOnDomReadyJavascript("Nifty('div.rounded','transparent')");
}

}


Mise en oeuvre

La classe CSS "rounded" sera donc utilisée pour spécifier un coin arrondi. Voyons maintenant comment appliquer dynamiquement ce style à un composant Wicket.

Partie Java :
public final class RoundedTestPage extends BasePage {

public RoundedTestPage(PageParameters params) {
Button bouton = new Button("bouton");
Button boutonRond = new Button("boutonRond");
WebMarkupContainer texte = new WebMarkupContainer("texte");
WebMarkupContainer texteArrondi = new WebMarkupContainer("texteArrondi");

//On arrondi certains composants
boutonRond.add(RoundFactory.getModifier());
texteArrondi.add(RoundFactory.getModifier());

add(texte);
add(texteArrondi);
add(bouton);
add(boutonRond);
}
}

Partie HTML :



En appelant simplement boutonRond.add(RoundFactory.getModifier()), on demande à Wicket d'appliquer le style CSS rounded que nous avons défini précédemment et qui sera reconnu par NiftyCorners.
On obtient alors le résultat suivant :




Pour appliquer ce style, nous avons utilisé un Behavior particulier appelé SimpleAttributeModifier. Ce type de modificateur permet (entre autres) d'ajouter une classe CSS à un composant. Dans notre cas nous ajoutons donc la classe rounded.

public class RoundFactory {

private static RoundedModifier modifier;

public static RoundedModifier getModifier() {
//retourne une instance unique de RoundedModifier
if (modifier == null)
modifier = new RoundedModifier();
return modifier;
}

}


public class RoundedModifier extends SimpleAttributeModifier {

public RoundedModifier() {
super("class", "rounded");
}
}


Quoi de plus simple? On peut bien sur améliorer ces exemples en utilisant plus d'options de Nifty Corners Cube, pour par exemple arrondir uniquement un coin du bouton ou modifier l'angle d'arrondi...

Vous pouvez si vous le souhaitez télécharger le code source de ce petit exemple.