Je suis en train d'apprendre/utiliser JSF 2.0 (Sun Mojarra) et je veux avoir un panneau à onglets dans ma webapp (les onglets simples pourraient être nommés General, Detail1,Detail2,...).
Comment puis-je y parvenir ? Je n'ai pas trouvé de documentation à ce sujet jusqu'à présent :(
D'autres l'ont déjà laissé entendre : Mojarra est un base Mise en œuvre de JSF. Il offre un ensemble minimal de composants obligatoires pour couvrir la plupart des éléments HTML existants (formulaires, champs de saisie et tableaux). Étant donné que le HTML ne propose pas de panneau à onglets dans un seul élément, l'implémentation JSF de base ne le fera pas non plus.
Un panneau à onglets est essentiellement un ensemble de liens (ou de boutons) et de panneaux qui doivent être masqués/visibles. Pour représenter les liens, on utilise généralement le code HTML <a> élément. Pour représenter les panneaux, vous utilisez généralement l'élément HTML <div> élément. Pour afficher ou masquer l'un ou l'autre de ces éléments, il y a essentiellement deux façons :
Imprimer chaque panneau en réponse, mais masquer tous les autres panneaux à l'aide de CSS display: none et utiliser JavaScript pour faire basculer la visibilité en définissant le nouveau panneau comme suit display: block et l'ancien panneau à display: none .
Ou bien, imprimez le panneau demandé dans la réponse de manière conditionnelle. Le panneau qui a été demandé peut être déterminé par les paramètres de demande dans les liens (ou les boutons).
Voici un base copier'n'coller'n'runnable exemple de la voie 1 :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SO question 3491969</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#tabs a').click(function() {
$('#panels').children().hide();
$($(this).attr('href')).show();
});
});
</script>
<style>
#tabs li { list-style-type: none; display: inline; border: 1px solid black; }
#panels { width: 600px; height: 400px; border: 1px solid black; }
.hide { display: none; }
</style>
</h:head>
<h:body>
<ul id="tabs">
<li><a href="#panel1">panel1</a></li>
<li><a href="#panel2">panel2</a></li>
<li><a href="#panel3">panel3</a></li>
</ul>
<div id="panels">
<div id="panel1">panel1 content</div>
<div id="panel2" class="hide">panel2 content</div>
<div id="panel3" class="hide">panel3 content</div>
</div>
</h:body>
</html>Vous pouvez bien sûr remplacer <a> por <h:outputLink> y <div> por <h:panelGroup layout="block"> et ainsi de suite, mais tant que vous n'avez pas besoin de le lier à l'arbre des beans et/ou des composants JSF, le simple HTML est parfaitement valable et présente moins de surcharge.
Vous devez juste apporter <ui:repeat> pour répéter les onglets et les panneaux "dynamiquement" en fonction d'une liste. N'oubliez pas non plus d'ajouter une bonne dose de CSS pour que tout cela ait l'air savoureux. C'est là que se situe le gros du travail.
Après tout, c'est aussi ce que font les bibliothèques de composants tiers. PrimeFaces , RichFaces y IceFaces font. Ils fournissent tous la fonctionnalité souhaitée dans un seul composant qui fait tout le travail de répétition et d'esthétisme. PrimeFaces, par exemple, possède un composant <p:tabView> , RichFaces a <rich:tabPanel> , IceFaces et <ice:panelTabSet> et ainsi de suite.
Envisagez d'utiliser une bibliothèque de composants existante.
PrimeFaces a un TabView avec la possibilité d'ajouter des effets et du contenu dynamique.
Afin d'implémenter PrimeFaces, suivez les instructions de la section instructions
JSF n'est qu'un framework "dorsal", si je peux l'appeler ainsi. Il ne contient que très peu de composants, car c'était l'intention de ses créateurs : ils voulaient que d'autres puissent étendre ce framework avec leurs propres travaux (à condition de respecter les normes établies). Maintenant, vous pouvez soit écrire vos propres composants, soit utiliser des frameworks tels que PrimeFaces, ICEFaces, RichFaces, etc. qui ont déjà un certain nombre de composants.
Il existe de nombreux composants utiles pour JSF, qui fournissent des panneaux d'onglets plus ou moins fantaisistes (parmi beaucoup d'autres). RichFaces, IceFaces, OpenFaces (et PrimeFaces comme mentionné). Chacun d'entre eux est assez complet et vous ne pouvez généralement pas les mélanger, alors voyez les sites de démonstration de chacun d'entre eux, et choisissez celui que vous aimez. J'aime bien RichFaces, mais c'est en partie parce que c'était la version par défaut de Seam2, où j'ai appris à connaître JSF. frameworks
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
