Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

jsf 2 - Styling one JSF external link to make it look like a button

Primefaces 3.5, Omnifaces 1.6

I have a group of buttons with icons. The buttons have an action to do on the page (such as delete or add new row in datatable). I want to add new "something" that looks exactly as buttons do, but with an external link. If I click on this new button, new tab/window have to be opened. For that purpose I am using p:commandButton and 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>

How can I achieve this ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
  • Use a p:button, which acts like a link:

    <p:button href="http://www.stackoverflow.com" value="Go to SO" />
    
  • If you want a blank target and starting from Primefaces 3.5.5, there's the chance to use the target attribute directly:

    <p:button target="_blank" href="http://www.stackoverflow.com" value="Go to SO" />
    
  • When being below PF 3.5.5, you could do some javascript to open it in a blank target:

    <p:button value="Go to SO" onclick="window.open('http://www.stackoverflow.com')" />
    
  • All of the choices above use javascript to change the browser's window location. In order to generate a bot-harvestable HTML link element, make use of a h:outputLink (or just a plain HTML a element), and style it using Primefaces' classes:

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

See also:


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...