Créer un composant et sa bibliothèque de composants

Version imprimable

28/07/2015, 12h03
Lacunasaurus

Créer un composant et sa bibliothèque de composants
Bonjour.

Je suis entrain de développer un petit site perso et après avoir ajouté quelques composants html dedans je me suis dit que ca serait bien de les capitaliser en créant ma propre bibliothèque de composants.

Alors je me suis donné comme défi de créer cette bibliothèque :)

J'ai deux objectifs

1 - Créer un composant panel qui prendrait une liste de paramètre très simple
- Une icone facultative
- Un texte de titre de panel
L'objectif sera d'afficher un panel en lieu et place de la balise.

2 - Creer un composant menu qui prendrait en paramètre
- Une liste d'items
Un item serait composé de :
- Un titre
- Un lien de destination
- Une icone
- La position de l'icone
Le but serait ensuite d'introduire cette liste de composant utilisable sous forme de namespace (comme primefaces).

J'ai un peu de mal à trouver des sources permettant de réaliser ce challenge. Auriez-vous des pistes ou des exemple ?

En vous remerciant
28/07/2015, 14h56
OButterlin

Avec des composite-components c'est assez facile à faire, tu buttes sur quoi, les composants eux-même ou l'externalisation des composants ?
28/07/2015, 18h21
Lacunasaurus

En fait en m'appuyant sur ce que ton tuto et des ressources du web j'ai pu me faire un composite implémentant pas mal de fonctionnalités comme un fichier JS perso et porté par le composant, un fichier CSS pareil et l’internationalisation des labels du composite composant (toujours dans ce dernier).

Maintenant je bute un peu sur la création d'un composant en lui même en partant de rien.

Prenons l'exemple du menu horizontal :

Je doit produire un div "menu" qui prendra tout l'espace disponible
A l'intérieur j'ai des composant enfant "item" dont je ne connais pas le nombre

Comment coder ?
- est-ce que je fais une classe par element et je code tout en java (HTML + logique) ?
- Dans ce cas comment définir des attributs spécifiques et les récuperer ?
- Est ce que je me base sur des descriptions XHTML ?

Désolé mes questions sont peut être confuses mais je ne comprend mal comment faire donc ça aide pas a poser les bonnes question :)
29/07/2015, 08h41
OButterlin

Pour ton composant menu, la définition vient par des paramètres ou c'est une création à partir d'informations dans la base de données et des paramètres de contexte qui seraient passés au composant ?

En fait tout viens de la page.
Par exemple je souhaite pouvoir faire :
Code:

1 2 3 4 5 <l4goon:menu orientation="horizontal" id="monMenu"> <l4goon:menu-item value="accueil" ref="#" icon="mon-icone.png" /> <l4goon:menu-item value="forum" ref="#" icon="mon-icone-forum.png" /> </l4goon>
Le comportement est directement porté par le composant et la customisation se fait par les attributs html autorisés

Bonjour,
pour un composant simple demandant peu de traitements tu peux le faire directement en XHTML.
Par exemple ton composant menu.xhtml ressemblerait à ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:cc="http://java.sun.com/jsf/composite"> <cc:interface> <cc:attribute name="orientation" required="false" type="java.lang.String"/>  </cc:interface> <cc:implementation> <div> <cc:insertChildren/>  </div> </cc:implementation> </html>
La balise <cc:interface/> contient tes attributs
La balise <cc:implementation/> sera le code HTML généré.

Tu accèdes à tes attributs par #{cc.attrs.monAttribut}, par exemple #{cc.attrs.orientation}.
<cc:insertChildren/> comme son nom l'indique insère le code encapsulé par ta balise (dans ton cas, tes <menu-item/>

07/08/2015, 16h06
Lacunasaurus

Avec un peu de retard, merci a vous 2, j'ai pu faire ce que je voulais avec les derniers exemples ;)