I'm sure this a duplicate but what I found here and elsewhere on the net just didn't work for me.
Whatever I do, the images in the following code are aligned vertically, but I want them horizontally.
<script>
var aa = "src='images/img?r=' + Math.random()"
var bb = "src='images/trans?x=' + Math.random()"
</script>
<hr />
<h:panelGroup layout="horizontal">
<h:form>
<h:commandLink>
<h:graphicImage width="100" id="img1"
value="images/img?r=1#{Math.random()}" alt="not found">
</h:graphicImage>
<f:ajax render="#this :pg2"></f:ajax>
</h:commandLink>
</h:form>
<h:form id="pg2">
<h:graphicImage width="100" id="img2"
value="images/trans?y=#{Math.random()}" onclick="eval(bb)">
</h:graphicImage>
</h:form>
</h:panelGroup>
<h:messages></h:messages>
<hr />
(And don't get confused about that #{Math.random()}. It works just because I have a bean called "Math".)
I'm using tomcat 8 and jsf version 2.2.8.
Can you try this
<h:panelGrid columns="2" width="210px" columnClasses="small, small">
<h:panelGroup id="a1">
<h:form>
<h:commandLink>
<h:graphicImage width="100" id="img1"
value="images/img?r=1#{Math.random()}" alt="not found">
</h:graphicImage>
<f:ajax render="#this :pg2"></f:ajax>
</h:commandLink>
</h:form>
</h:panelGroup>
<h:panelGroup id="b1">
<h:form id="pg2">
<h:graphicImage width="100" id="img2"
value="images/trans?y=#{Math.random()}" onclick="eval(bb)">
</h:graphicImage>
</h:form>
</h:panelGroup>
</h:panelGrid>
with CSS:
.small{
width:102px;
vertical-align: text-top;
}
Let us know
Edit. changed div to panelGroup
try to add display: inline-block style to the second form
as you see in here the images need to be inside divs which contain this css
Related
I am using <p:graphicImage> like below:
<div id="mapp">
<h3>Country Map</h3>
<p:graphicImage id="city"
value="#{countryPages_Setup.countryMap}"
width="250"
height="190">
</p:graphicImage>
</div>
But this is not a clickable image. How can I make this image clickable so when user click on it, I can invoke the managed bean action that I want.
Wrap your image in a h:commandLink / h:link:
<h:commandLink action="...">
<p:graphicImage id="city"
value="#{countryPages_Setup.countryMap}"
width="250"
height="190">
</p:graphicImage>
</h:commandLink>
If the p:graphicImage is inside a p:contentFlow, you can use the following:
For me, this works perfectly:
<h:form id="imageFlowForm">
<p:contentFlow id="imageContent" value="#{controller.allImages}" var="entry">
<div class="caption">#{entry.name}</div>
<p:commandLink styleClass="content" action="#{controller.doAction}" update="detailForm">
<p:graphicImage value="#{entry.imagePreviewUrl}" styleClass="content" width="50px" />
<f:param name="id" value="#{entry.id}" />
</p:commandLink>
</p:contentFlow>
</h:form>
When I click somewhere inside my panelGrid, it runs action from my commandButton which is inside as well. Whole accordionPanel is inside h:form ..
jsf:
<p:accordionPanel value="#{test.getAllTests()}" var="currentTest" activeIndex="false">
<p:tab title="#{currentTest.name}">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage value="resources/img/testIT/#{currentTest.imageSrc}" width="100" height="100" />
<p:outputLabel>
<h2>#{currentTest.name}</h2>
<p>#{currentTest.description}</p>
<p:commandButton value="Zvolit test" styleClass="testChoseButton" actionListener="#{test.setSelectedTest(currentTest)}" action="testProgress.xhtml" />
<p:spacer height="5px" width="20px" style="float: right;" />
<p:button value="Statistika testu" styleClass="testChoseButton" />
</p:outputLabel>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
test.setSelectedTest(currentTest):
public void setSelectedTest(Test selectedTest) {
this.selectedTest = selectedTest;
System.err.println("Selected test: " + selectedTest.getId() + " - " + selectedTest.getName());
}
I do not know what more you could need guys. Thnx for help.
You're misusing p:outputLabel, it generates a HTML <label> element which is not what you want. I'd think both these will work:
p:outputPanel
h:panelGroup
They can both produce a HTML span or a div based on the layout attribute.
I'd take <h:panelGroup> which is meant for exactly this kind of grouping.
I'm using primeface print just like below
<ui:define name="content" id="content">
<h:form id="common_chart_form" prependId="flase">
<p:growl id="growl" showDetail="true" autoUpdate="true"
sticky="false" />
<p:outputLabel id="labelvalue" value="aaaaaaaaaa"/>
<p:chart id="chart" type="bar"
model="#{commonChartController.barModel}" style="height:300px" />
<p:commandButton value="Print" type="button" icon="ui-icon-print">
<p:printer target="chart" />
</p:commandButton>
<p:commandButton value="Back" action="admin_sales_reports" />
</h:form>
</ui:define>
i need to print the chart but unfortunately it cannot print. then to test the print target i tried to print the "labelvalue" it printed what is the wrong thing that im doing in this code
this is the screen shot of the page
You can do it in a more elegant way, without the need of the outputPanel declared in the page:
Javascript function:
function print(component){
var out = document.createElement('div');
out.appendChild(PF(component).exportAsImage());
var innerHTML = out.innerHTML;
var openWindow = window.open('', 'Report', '');
openWindow.document.write(innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
Define widgetVar for chart:
<p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" />
Call the print function:
<p:commandLink id="lnk" onclick="print('chart2')"/>
Here is how you do it - found a thread from Brazil that showed it:
1 - Create a dialog like this:
<p:dialog widgetVar="outputDialog" showEffect="fade" modal="true" header="Header Name">
<p:outputPanel id="output" layout="block" style="width:860px;height:540px"/>
</p:dialog>
2 - Create your charts with a widgetVar like this:
<p:chart widgetVar="chart1" type="bar" model="#{chartsBean.barModel1}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart2" type="bar" model="#{chartsBean.barModel2}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart3" type="bar" model="#{chartsBean.barModel3}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart4" type="line" model="#{chartsBean.lineModel1}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart5" type="line" model="#{chartsBean.lineModel2}" style="height:300px;width:800px;"/>
<p:spacer height="40px"/>
<p:chart widgetVar="chart6" type="line" model="#{chartsBean.lineModel3}" style="height:300px;width:800px;"/>
3 - Create a javascript function like this:
function print() {
$('#output').empty().append(PF('chart1').exportAsImage());
$('#output').append(PF('chart2').exportAsImage());
$('#output').append(PF('chart3').exportAsImage());
$('#output').append(PF('chart4').exportAsImage());
$('#output').append(PF('chart5').exportAsImage());
$('#output').append(PF('chart6').exportAsImage());
//PF('outputDialog').show();
var innerHTML = $('#output')[0].innerHTML;
if (innerHTML != null){
var openWindow = window.open("", 'Report', "");
openWindow.document.write(innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
}
4 - Create a menubar, command button, or any other way of invoking the print() function. Here is my way:
<p:menubar>
<p:menuitem value="Print" icon="ui-icon-print" action="javascript.void(0);" onclick="print();"/>
<p:menuitem value="Email" icon="ui-icon-mail-closed" action="javascript.void(0);" onclick="alert('email');"/>
</p:menubar>
Only put this (onclick="print();").
<p:commandButton value="Print" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px" onclick="print();"/>
Thats it.
According to this post, it's not possible to print a chart. A solution is given in the last post.
You can use script to export chart as image to a panel which has same height with chart and z-index property value less than chart. Exp:
<h:form>
<p:commandButton value="Print" style="margin:10px;"
onclick="$('#output').empty().append(PF('chart').exportAsImage());">
<p:printer target="output"></p:printer>
</p:commandButton>
</h:form>
<p:outputPanel id="output" layout="block"
style="position:absolute;height:300px;z-index:1" />
<p:chart widgetVar="chart" type="bar" model="#{bean.barModel}"
style="height:300px;z-index:1000;background:#fff"></p:chart>
To reproduce the problem move pupup in front of pdf and try to resize it. In IE (tested on 8 and 9) popup partialy hides behind pdf. In Firefox and Chrome everything is ok.
<h:body>
<h:form>
<iframe id="overviewFrame" src="http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/pdf/richfaces_reference.pdf" width="900" height="800" />
<h:commandButton value="openPopupWithPdf">
<rich:componentControl target="pdfPopup" operation="show" />
</h:commandButton>
</h:form>
<h:form>
<rich:popupPanel autosized="false" id="pdfPopup" resizeable="true" width="300" height="100" moveable="true" overlapEmbedObjects="true">
<f:facet name="controls">
<a4j:commandLink id="documentHideEditLink" styleClass="hidelink" onclick="#{rich:component('pdfPopup')}.hide()" execute="#this">
<h:graphicImage value="/img/modal/close.png" />
</a4j:commandLink>
</f:facet>
<f:facet name="header">
This is popup header
</f:facet>
<h:panelGrid>
Some text
</h:panelGrid>
</rich:popupPanel>
</h:form>
</h:body>
Same thing if I use a4j:mediaOutput instead of iframe.
I am using <p:graphicImage> like below:
<div id="mapp">
<h3>Country Map</h3>
<p:graphicImage id="city"
value="#{countryPages_Setup.countryMap}"
width="250"
height="190">
</p:graphicImage>
</div>
But this is not a clickable image. How can I make this image clickable so when user click on it, I can invoke the managed bean action that I want.
Wrap your image in a h:commandLink / h:link:
<h:commandLink action="...">
<p:graphicImage id="city"
value="#{countryPages_Setup.countryMap}"
width="250"
height="190">
</p:graphicImage>
</h:commandLink>
If the p:graphicImage is inside a p:contentFlow, you can use the following:
For me, this works perfectly:
<h:form id="imageFlowForm">
<p:contentFlow id="imageContent" value="#{controller.allImages}" var="entry">
<div class="caption">#{entry.name}</div>
<p:commandLink styleClass="content" action="#{controller.doAction}" update="detailForm">
<p:graphicImage value="#{entry.imagePreviewUrl}" styleClass="content" width="50px" />
<f:param name="id" value="#{entry.id}" />
</p:commandLink>
</p:contentFlow>
</h:form>