I am new to Primefaces and also to SWF. I have setup sauch page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
</h:head>
<h:body>
<f:view>
<h:form>
<p:panel header="Keyboard Demo">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="USERs : "/>
<p:inputText id="name" value="#{sampleBean.jmeno}"/>
<p:selectOneRadio id="customRadio">
<f:selectItem itemLabel="Option 1" itemValue="1"/>
<f:selectItem itemLabel="Option 2" itemValue="2"/>
<f:selectItem itemLabel="Option 3" itemValue="3"/>
</p:selectOneRadio>
<h:outputText value="Basic QWERTY: "/>
<p:keyboard value="#{sampleBean.zadavanaHodnota}" layout="qwertyBasic"/>
<h3>Inline</h3>
<p:calendar size="21" value="#{sampleBean.datum}" id="inlineCal" mode="popup"
showOn="focus"/>
<p:commandButton action="pokracuj" value="Prechod na druhou stranku"/>
<p:dataTable rendered="false"/>
</h:panelGrid>
</p:panel>
<p:dialog widgetVar="dialog" showEffect="fade" hideEffect="fade" header="Values">
<h:panelGrid columns="2" id="display" cellpadding="5">
<h:outputText value="Value2:"/>
<h:outputText value="#{sampleBean.zadavanaHodnota}"/>
</h:panelGrid>
</p:dialog>
</h:form>
</f:view>
<p:spinner/>
</h:body>
</html>
According to documentation it schould be OK, but when I run it on any AS (JBoss, WL), it outputs error in JS:
Primefaces not defined. The start of generated page looks like this:
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/theme.css?ln=primefaces-ui-lightness" /><link type="text/css" rel="stylesheet" href="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/primefaces.css?ln=primefaces" /><link type="text/css" rel="stylesheet" href="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/keyboard/keyboard.css?ln=primefaces" /><script type="text/javascript" src="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script><script type="text/javascript" src="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/primefaces.js?ln=primefaces"></script><script type="text/javascript" src="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/keyboard/keyboard.js?ln=primefaces"></script>
Problem is obvious - static resources - Primefaces.js, themes.js are not found. I have tried various configuration of SWF but I didnt succeed. For example my current conf regarding resource reading is this:
<faces:resources />
<!--<mvc:resources location="/, classpath:/META-INF/resources/, classpath:/META-INF/" order="1" mapping="/resources/**" />-->
<mvc:resources mapping="/javax.faces.resource/**" location="/, classpath:/META-INF/resources/" />
I also tried resource servlet, but it didnt work neither.
ResourceServlet
org.springframework.js.resource.ResourceServlet
1
ResourceServlet
/resources/*/
Thanks for any help.
Try it without mvc:resources tag. Also make sure Primefaces JAR gets deployed to your server.
Related
I want to do conditional Polling in Primefaces (Version:6.0.0).
Here is the polling code:
<p:poll interval="20" update="liveChart,chrtTC_Cnt_Status,chrtStatus" />
For Example, I am field call Status. If status value is 'In-Progress' then only polling should start. Or else it should not do polling.
Here is my field code, if this value changed to 'In-Progress' then polling should start or else not
<p:outputLabel value="Status:" />
<p:outputLabel id="lblCurrentStatus" value="#{backingBean.status}" />
Here is my Xhtml code
<h:panelGrid columns="2" width="400">
<p:outputLabel for="lblStudentName" value="Select Other StudentName: " />
<p:selectOneMenu id="lblStudentName" style="width:250px"
value="#{backingBean.selectedStudent}"
panelStyle="width:180px" effect="fade" filter="true"
filterMatchMode="startsWith">
<f:selectItem itemLabel="Select One" itemValue=""
noSelectionOption="true" />
<f:selectItems value="#{backingBean.studentItemList}" />
<p:ajax
listener="#{backingBean.OnChangeOtherStudentDropDown}"
update=":idForm:tabStatus:p1,:idForm:tabStatus:p4,growl"
process="#form" />
</p:selectOneMenu>
<p:tabView id="tabStatus">
<p:tab title="Status" id="idStatusTab">
<h:panelGrid columns="3" cellpadding="10" id="p1">
<p:growl id="growl" showDetail="true" />
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" draggable="false"
closable="false" resizable="false" showHeader="false">
<h:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
<h:panelGrid columns="2" cellpadding="5" id="p2">
<p:outputLabel value="Failed:" />
<p:outputLabel id="lblCurrentFailed"
value="#{backingBean.intCurrentFailedStudent}" />
<p:outputLabel value="Processed:" />
<p:outputLabel id="lblCurrentProcess"
value="#{backingBean.intCurrentPassedStudent}" />
<p:outputLabel value="Status:" />
<p:outputLabel id="lblCurrentStatus"
value="#{backingBean.status}" />
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="10" id="p3">
<p:chart type="pie" model="#{backingBean.pieModel1}"
rendered="#{not empty backingBean.pieModel1}"
id="chrtStatus" style="width:300px;height:200px">
</p:chart>
<br />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid columns="3" cellpadding="10" id="p4">
<p:poll interval="20" update="liveChart,chrtTC_Cnt_Status,chrtStatus" />
<p:chart type="line"
model="#{backingBean.lineCurrentLineChart}"
rendered="#{not empty backingBean.lineCurrentLineChart}"
id="liveChart" style="height:500px;width:500px" />
<p:chart type="bar"
model="#{backingBean.barStatusCountStudent}"
rendered="#{not empty backingBean.barStatusCountStudent}"
id="chrtTC_Cnt_Status" style="width:500px;height:500px">
<p:ajax event="itemSelect" listener="#{backingBean.itemSelect}" />
</p:chart>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
Solution 1:
Wrap your p:poll within h:panelGroup or h:panelGrid, set rendered="#{backingBean.status eq 'In-Progress'}" on panel and update panel on changing of status, that will reset your polling.
Solution 2:
If you want to manually start and stop the polling then you need to set autoStart="false" and add widgetVar="statusPoll" attributes on p:poll and by invoking PF('statusPoll').start(); and PF('statusPoll').stop(); on changing the value of status field.
It is working,
<h:panelGrid columns="1" id="ID_polling" rendered="#{BackingBean.status eq 'In-Progress'}">
<p:poll interval="20" update="liveChart,chrtTC_Cnt_Status,chrtStatus" />
</h:panelGrid>
When I write this Panel, Panel will display only when status = 'In-Progress' or else it will not display.
Thank you again,
I have a problem with tabView. The 1st tab should always display the same content (called search template which is identified with #{not curSearch.isClosable()}. All other tabs are search instances (identified with #{curSearch.isClosable()}
Here is the code:
<p:tabView id="searchTabViewId" var="curSearch" value="#{searchBL.searchInstances}"
activeIndex="#{searchBL.activeTabIndex}" styleClass="searchTabView">
<!-- search template tab -->
<ui:include src="/icarchive/sections/search/firstSearchTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
<!-- search instances tabs -->
<ui:include src="/icarchive/sections/search/searchInstanceTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tabView>
Unfortunately there are methods on the 1st tabs curSearch object called which are used on 2nd and following tabs only. If I do not use the ui:insert it does not change anything.
Anybody knows where is my fault?
Regards
Oliver
This works:
<p:tabView id="searchTabViewId" styleClass="searchTabView" activeIndex="#{searchBL.activeTabIndex}">
<!-- do the iteration over the search instances NOT in the tabView because this will not work with ui:include -->
<c:forEach items="#{searchBL.searchInstances}" var="curSearch">
<p:tab closable="#{curSearch.isCloseable()}">
<f:facet name="title">
<p:graphicImage library="images" name="search_tab.png" height="16" styleClass="tabImage"
rendered="#{not curSearch.isCloseable()}" />
<h:outputText value="#{curSearch.title}" />
</f:facet>
<!-- do not use 2 ui:includes here, the dynamic must be in the src attribute to get it work -->
<ui:include
src="#{curSearch.closeable ? '/sections/search/searchInstanceTab.xhtml' : '/sections/search/firstSearchTab.xhtml'}">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tab>
</c:forEach>
I had the same problem, only solution i found is wrap include in other component and clamp with render which one is displayed. For initial load if you have ids depending on content you will need to set id prefix so that it does not allow empty id fields:
<p:tabView id="tabsView" dynamic="true" cache="true"
value="#{TabViewController.tabView.openedTabs}" var="tabDefinition" activeIndex="#{TabViewController.tabView.activeIndex}">
<p:ajax event="tabClose" listener="#{TabViewController.onCloseTab}" update="tabsView"/>
<p:ajax event="tabChange" update="tabsView"/>
<p:tab id="tab#{tabDefinition.id}" title="#{tabDefinition.title}" closable="true" action="">
<f:facet name="title">
<h:outputText value="#{tabDefinition.title}"/>
</f:facet>
<p:outputPanel style="display:block" rendered="#{'dataTable'.equals(tabDefinition.type)}">
<ui:include src="dataTable.xhtml">
<ui:param name="dataTableName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
<p:outputPanel style="display:block" rendered="#{'form'.equals(tabDefinition.type)}">
<ui:include src="form.xhtml">
<ui:param name="formId" value="#{tabDefinition.id}"/>
<ui:param name="formName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
</p:tab>
</p:tabView>
I have an application that has a layout with left and center layout units (demoLayout.xhtml). On main page (main.xhtml) i have p:tree on left layout unit (demoTree.xhtml) and three different forms on center layout unit (first.xhtml, second.xhtml, third.xhtml). Center forms switches using tree node clicks. My default center form is first.xhtml and when i do not put p:commandButton on first.xhtml command buttons on second.xhtml and on third.xhtml actions has not being called. When i put p:commandButton on first.xhtml the other command buttons works, but i do not want to put p:commandButton on first.xhtml. How can i do?
demoLayout.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view id="mainPanel" encoding="UTF-8" contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>#{title}</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="left" position="west" size="300" resizable="true" closable="true" collapsible="true" header="Quick Links" visible="true" minSize="200">
<div id="west">
<ui:insert name="west">
Default West Content
</ui:insert>
</div>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<div id="centerDiv">
<ui:insert name="center">
Default Center Content
</ui:insert>
</div>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
main.xhtml
<ui:composition template="demoLayout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:param name="title" value="demo" />
<ui:define name="west">
<ui:include src="demoTree.xhtml" />
</ui:define>
<ui:define name="center">
<ui:include src="#{demo3MBean.activePanel}" />
</ui:define>
</ui:composition>
demoTree.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form id="treeForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<p:tree value="#{demoTreeBean.root}" var="node" id="tree" animate="true" style="width:350px;height:720px" dynamic="true" cache="false"
selectionMode="single">
<p:treeNode type="First">
<h:outputText value="#{node}" id="lblNode1" />
</p:treeNode>
<p:treeNode type="Second">
<h:outputText value="#{node}" id="lblNode2" />
</p:treeNode>
<p:treeNode type="Third">
<h:outputText value="#{node}" id="lblNode3" />
</p:treeNode>
<p:ajax event="select" update=":rightForm" listener="#{demo3MBean.onNodeSelect}" />
</p:tree>
<p:blockUI block=":center" trigger="tree">
LOADING<br />
<p:graphicImage value="/images/ajax-loader.gif" />
</p:blockUI>
</h:form>
</ui:composition>
first.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form id="rightForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<br></br>
<p:fieldset id="resourceList" legend="1 nolu grup">
<h:outputText value="1 Nolu XHTML" />
<br />
<ui:remove>
<p:commandButton id="buton" value="Print Me 1" actionListener="#{demo3MBean.printMe1}" />
</ui:remove>
</p:fieldset>
</h:form>
</ui:composition>
second.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form id="rightForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<br></br>
<p:fieldset id="resourceList" legend="2 nolu grup">
<h:outputText value="2 Nolu XHTML" />
<br />
<p:commandButton id="buton" value="Print Me 2" actionListener="#{demo3MBean.printMe2}" />
</p:fieldset>
</h:form>
</ui:composition>
third.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form id="rightForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<br></br>
<p:fieldset id="resourceList" legend="3 nolu grup">
<h:outputText value="3 Nolu XHTML" />
<br />
<p:commandButton id="buton" value="Print Me 3" actionListener="#{demo3MBean.printMe3}" />
</p:fieldset>
</h:form>
</ui:composition>
Demo3MBean.java
#ManagedBean(name = "demo3MBean")
#ViewScoped
public class Demo3MBean extends TlosSWBaseBean implements Serializable {
private static final long serialVersionUID = -504537811128309503L;
private String activePanel = FIRST_PANEL;
public final static String FIRST_PANEL = "first.xhtml";
public final static String SECOND_PANEL = "second.xhtml";
public final static String THIRD_PANEL = "third.xhtml";
public void onNodeSelect(NodeSelectEvent event) {
String nodeType = event.getTreeNode().getType();
if (nodeType.equals("First")) {
activePanel = FIRST_PANEL;
} else if (nodeType.equals("Second")) {
activePanel = SECOND_PANEL;
} else if (nodeType.equals("Third")) {
activePanel = THIRD_PANEL;
}
}
public void printMe1(ActionEvent e) {
System.out.println("Me 1");
}
public void printMe2(ActionEvent e) {
System.out.println("Me 2");
}
public void printMe3(ActionEvent e) {
System.out.println("Me 3");
}
public String getActivePanel() {
return activePanel;
}
public void setActivePanel(String activePanel) {
this.activePanel = activePanel;
}
}
DemoTreeBean.java
#ManagedBean(name = "demoTreeBean")
public class DemoTreeBean {
private TreeNode root;
#SuppressWarnings("unused")
public DemoTreeBean() {
root = new DefaultTreeNode("Root", null);
TreeNode node0 = new DefaultTreeNode("First", "First Node", root);
TreeNode node1 = new DefaultTreeNode("Second", "Second Node", root);
TreeNode node2 = new DefaultTreeNode("Third", "Third Node", root);
}
public TreeNode getRoot() {
return root;
}
}
I also read these :
JSF : dynamically loaded page commandButton not working
Primefaces commandButton action attribute not being called
BalusC answer - h:commandLink / h:commandButton is not being invoked
This part from main.xhtml is the cause of your problem.
<ui:define name="center">
<ui:include src="#{demo3MBean.activePanel}" />
</ui:define>
changing value of src at runtime does not work.
Try it with a static value like
<ui:define name="center">
<ui:include src="third.xhtml" />
</ui:define>
and you will see that buttons work.
Changing value of src at runtime will not work.
<ui:define name="center">
<ui:include src="#{demo3MBean.activePanel}" />
</ui:define>
Alternative solution to conquer your problem is using a rendered flag for your xhtml pages.For example
<ui:define name="center">
<s:div rendered="#{demo3MBean.firstFlag}">
<ui:include src="first.xhtml" />
</s:div>
<s:div rendered="#{demo3MBean.secondFlag}">
<ui:include src="second.xhtml" />
</s:div>
<s:div rendered="#{demo3MBean.thirdFlag}">
<ui:include src="third.xhtml.xhtml" />
</s:div>
</ui:define>
Set all pages flag to FALSE intially. Make the specific flag value as TRUE only when the relevant tree node is clicked. Do not forget to set unique "id" of all components of the included pages.
Using the above solution, attributes like action and actionListener of components such as commandButtons, commandLinks etc will also work normally and perfectly.
Hope this will solve your problem.
And also do not forget to accept my answer if it helps. Have a nice Day!!
It is just impossible to include a different file by updating the form inside of the included file. As you have the form rightForm in each of your files, you are only updating the rightForm of the currently loaded file when a tree node is selected. So there will never be a different file loaded.
Besides it is a bad approach to define the same form in each file when it exists in everyone (similiar for the growl).
To fix this remove the h:form in first.xhtml, second.xhtml and third.xhtml and change the second ui:define in your main.xhtml to the following:
<ui:define name="center">
<h:form id="rightForm">
<ui:include src="#{demo3MBean.activePanel}" />
</h:form>
</ui:define>
And why are you defining three p:treeNodes in the p:tree? As you are initializing the tree in the DemoTreeBean there is no need to define the treenodes manually. The p:tree is just iterating through the nodes of the given value, as you can see in the showcase. Try the following code to reduce the effort when adding more tree nodes:
<p:tree value="#{demoTreeBean.root}" var="node" id="tree" animate="true"
style="width:350px;height:720px" dynamic="true" cache="false"
selectionMode="single">
<p:treeNode type="#{node.data}">
<h:outputText value="#{node}" id="lblNode1" />
</p:treeNode>
<p:ajax event="select" update=":rightForm" listener="#{demo3MBean.onNodeSelect}" />
</p:tree>
I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.
I'm trying to use JavaScript to open the primefaces dialog component when a page loads but I'm unable to get it to open. My "HERE!" alert gets fires off when the page loads but the component must not be found using the widgetvar property on the client side. Anyone know the proper reference in JavaScript?
Code:
<ui:composition template="#{layoutBean.registeredTemplate}">
<ui:define name="head">
<script type="text/javascript">
jQuery(document).ready(function(){
alert("HERE!");
scrapeImagesDlg.show();
});
</script>
</ui:define>
<ui:define name="content">
<p:dialog header="#{bundle['bookmarklet.dialog.HEADER']}"
widgetVar="scrapeImagesDlg"
modal="true"
styleClass="dialog dialog2"
draggable="false"
resizable="false"
showEffect="fade"
hideEffect="fade"
closeListener="#{bookmarklet.close}"
onCloseUpdate="imageGrid">
<div class="dialog dialog2">
<div class="dialog-top-reg"></div>
<div class="dialog-middle-reg">
<div class="close-button"><h:form>
<p:commandButton onclick="scrapeImagesDlg.hide()"/>
</h:form></div>
<h:form id="scrapeFrm">
<p:commandButton onclick="scapeImages()" value="scrape images"/>
<h:inputHidden id="scrapeURL" value="http://www.freefoto.com/preview/04-01-70?ffid=04-01-70"/>
<p:remoteCommand name="scapeImages"
process="#this,scrapeURL"
actionListener="#{bookmarklet.loadImages}"
update="imageGrid"/>
<p:outputPanel id="imageGrid">
<p:dataGrid var="img"
value="#{bookmarkletBean.imageURLs}"
rendered="#{bookmarkletBean.shouldRender}"
columns="1"
rows="1"
paginator="true"
effect="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
paginatorPosition="bottom">
<p:column>
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{img}" width="100" height="100"/>
</h:panelGrid>
</p:column>
</p:dataGrid>
</p:outputPanel>
</h:form>
</div>
<div class="dialog-bottom-reg"></div>
</div>
</p:dialog>
</ui:define>
</ui:composition>
<p:dialog visible="true" ...>
tells PrimeFaces to open the dialog automatically when page is loaded.