web-dev-qa-db-fra.com

Styliser un lien externe JSF pour le faire ressembler à un bouton

Primefaces 3.5, Omnifaces 1.6

J'ai un groupe de boutons avec des icônes. Les boutons ont une action à effectuer sur la page (comme supprimer ou ajouter une nouvelle ligne dans la table de données). Je veux ajouter un nouveau "quelque chose" qui ressemble exactement aux boutons, mais avec un lien externe. Si je clique sur ce nouveau bouton, un nouvel onglet/fenêtre doit être ouvert. À cette fin, j'utilise p:commandButton et h:outputLink.

<p:commandButton action="#{bean.do1}" icon= ...>
<p:commandButton action="#{bean.do2}" icon= ...>

<h:outputLink value="#{bean.url}" target="_blank"> 
  <i class="icon-external-link"></i> 
</h:outputLink>

Comment puis-je atteindre cet objectif ?

jsfjsf-2primefaces
16
Tony

  • Utiliser un p:button, qui agit comme un lien:

    <p:button href="http://www.stackoverflow.com" value="Go to SO" />

  • Si vous voulez une cible vide et à partir de Primefaces 3.5.5, il y a la chance d'utiliser directement l'attribut target:

    <p:button target="_blank" href="http://www.stackoverflow.com" value="Go to SO" />

  • Lorsque vous êtes en dessous de PF 3.5.5, vous pourriez faire du javascript pour l'ouvrir dans une cible vide:

    <p:button value="Go to SO" onclick="window.open('http://www.stackoverflow.com')" />

  • Tous les choix ci-dessus utilisent javascript pour modifier l'emplacement de la fenêtre du navigateur. Afin de générer un élément récupérable par un bot lien HTML , utilisez un h:outputLink (ou simplement un simple élément HTML a), et stylisez-le en utilisant les classes de Primefaces:

    <h:outputLink value="http://www.stackoverflow.com"
    styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
    <span class="ui-button-text">Go to SO</span>
</h:outputLink>

Voir aussi:

42
Xtreme Biker