I'm trying the following aprouch to display a date-based chart with primefaces:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<ui:composition template="/template/menu.xhtml">
<ui:define name="content">
<h:form>
<p:dataTable value="#{busca.resultado}" var="serie" style="width:1000px">
<p:column>
<h:panelGrid columns="3" rows="2">
<h:outputText value="#{serie.tipoEmTexto()}" />
<h:outputText value="#{serie.nome}" />
<h:commandButton value="#{busca.controle[busca.resultado.indexOf(serie)] ? 'X' : '+'}" action="#{busca.flip()}">
<f:attribute name="serPar" value="#{serie}" />
<f:ajax render="'serie_'.concat(#{busca.resultado.indexOf(serie)})" event="click" />
</h:commandButton>
<h:panelGroup id="serie_#{busca.meuIndice()}" >
<f:attribute name="serPar" value="#{serie}" />
<h:panelGrid rendered="#{busca.meuControle()}" columns="2">
<f:attribute name="serPar" value="#{serie}" />
<h:outputLabel value="Extrair" />
<h:selectBooleanCheckbox value="#{serie.selecionado}" />
<h:outputLabel value="Série #{serie.periodicidadeComoTexto()}" />
<br />
<p:chart type="line" model="#{busca.graficoReal[busca.resultado.indexOf(serie)]}" style="height:300px;width:400px;" responsive="true"/>
</h:panelGrid>
</h:panelGroup>
</h:panelGrid>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
However, whenever "busca.flip()" is activated and the panelGroup is rendered, no graph is rendered: it simply shows as a blank. This is the creation of the LineChartModel object:
private void carregaGraficoReal(Serie s, int index)
{
int i;
LineChartSeries lcs = new LineChartSeries("Gráfico para " + s.getNome());
LineChartModel lcm = new LineChartModel();
List<String> ls = new ArrayList<String>();
DateAxis da = new DateAxis("Datas");
String data;
ls.addAll(s.getSerieReal().keySet());
ls = OrdenadoresDeLista.ordenaDatas(ls);
for(i = 0; i < ls.size(); i++)
{
data = ls.get(i);
lcs.set(dataParaFormatoPrime(data), s.getSerieReal().get(data));
}
da.setMax(ls.get(ls.size() - 1));
da.setTickAngle(-50);
da.setTickFormat("%b %#d, %y");
lcm.addSeries(lcs);
lcm.getAxis(AxisType.Y).setLabel("Valores");
lcm.getAxes().put(AxisType.X, da);
graficoReal[index] = lcm;
}
For me, at least, it seem to be all in order with what is stabilished in the showcase, so I don't have a clue of why it isn't working. I'm running this application in a App Server Glassfish 4.0, JDK 1.7.0, primefaces 5.1 and using JSF 2, if this information might help someone pinpoint why the graph isn't being rendered.
A bit of more information about my code:
ordenaDatas return a list of strings, which are dates, ordered in crescent order;
dataParaFormatoPrime turns a string of type "dd/mm/YYYY" in the format "YYYY-mm-dd", as showed in the showcase;
The panelGroup "serie_x" is rendered correctly for each item of p:dataTable, only not showing the graph;
Related
I have a comment box and a need to show and hide the comment box depending on radio button select above. I dont want to use jquery and i am not getting any idea as am new to jsf primeface
My code is bellow is:
<h:outputText value="Action :" class="alignment"/>
<p:selectOneRadio id="console"
value="#{examinationFormBean.action}"
required="true" label="Action">
<f:selectItem itemLabel="Ok" itemValue="ok" />
<f:selectItem itemLabel="Have Issued"
itemValue="haveissue" />
</p:selectOneRadio>
<h:outputLabel value="Comment:"></h:outputLabel>
<h:inputText id="compid"
value="#{examinationFormBean.comment}"/>
<p:commandButton value="Proceed to Zonal Electrical Inspector>>"
action="#{examinationFormBean.saveFormStatusByOfficeAssistent()}"
update="messageid"
process="data"
oncomplete="if (args && !args.validationFailed) PF('test').hide()" >
<f:ajax update="datatable"/>
</p:commandButton>
Please help me to sort it out. thanks in advance
You can achieve by using JSF EL.
xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>hide some component</title>
</h:head>
<h:body>
<h:form>
<p:selectOneRadio id="console"
value="#{examinationFormBean.radioVal}"
required="true" label="Action">
<f:selectItem itemLabel="Ok" itemValue="ok" />
<f:selectItem itemLabel="Have Issued"
itemValue="haveissue" />
<p:ajax process="console"
update="#form" />
</p:selectOneRadio>
<h:outputLabel value="Comment:"
rendered="#{examinationFormBean.radioVal eq 'haveissue'}">
</h:outputLabel>
<h:inputText id="compid"
value="#{examinationFormBean.comment}"
rendered="#{examinationFormBean.radioVal eq 'haveissue'}"/>
</h:form>
</h:body>
</html>
managedbean
#ViewScoped
#ManagedBean(name="examinationFormBean")
public class ExaminationFormBean implements Serializable{
private String comment;
private String radioVal;
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}
public String getRadioVal() {
return radioVal;
}
public void setRadioVal(String radioVal) {
this.radioVal = radioVal;
}
}
I need the datatable to get filtered by the default value(see selectOneMenu 'chkNot', false in this case) after page is loaded.
Current situation: The filter value get selected but the datatable doesn't get filtered. If I change the value then it works well.
<ui:composition template="templates/layout.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:components="http://java.sun.com/jsf/composite/components"
xmlns:p="http://primefaces.org/ui" >
<ui:define name="title">Test Page</ui:define>
<ui:define name="content">
<h:form id="tranForm">
<p:dataTable value="#{myBean.ordersAll}" var="order"
id="myDTable" widgetVar="myDTable"
filteredValue="#{myBean.ordersAllFiltered}">
<p:column filterBy="#{order.selected}" filterMatchMode="exact" headerText="Filter">
<f:facet name="filter">
<p:selectOneMenu id="chkNot" widgetVar="chkNot"
value="#{false}"
onchange="PF('myDTable').filter()" >
<f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
<f:selectItem itemLabel="Yes" itemValue="#{true}" />
<f:selectItem itemLabel="No" itemValue="#{false}" />
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{order.selected}"/>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
The filter function is triggered by PF('myDTable').filter() so you need to fire that event on page load. One way to do it is using javascript, for example like this:
<script type="text/javascript" target="body">
$j = jQuery;
$j(document).ready( function() {
PF('myDTable').filter();
});
</script>
Update:
Another way is to execute the filter function from the backing bean:
public void executeFilter() {
RequestContext rc = RequestContext.getCurrentInstance();
rc.execute("PF('myDTable').filter();");
}
I generated a Primefaces based CRUD website starting from JPA Entities with netbeans and after adjusting the Update dialog to fit my needs I am experiencing several problems. The domain Model is quite easy: I have an entity Invitation which contains several Guests.
#Entity
public class Invitation implements Serializable {
...
#OneToMany(cascade = CascadeType.ALL, orphanRemoval = true, mappedBy = "invitationId")
private List<Guest> guestList;
public List<Guest> getGuestList() {
return guestList;
}
...
}
I have an overview page (list.xhtml) where all the invitations are listed and the user can pick one to edit it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="/template/layout.xhtml">
<ui:define name="content">
<h:form id="InvitationListForm">
<p:dataTable var="invitation" id="datalist"
value="#{invitationController.invitations}" resizableColumns="true"
selectionMode="single" selection="#{invitationController.selected}"
rowKey="#{invitation.invitationId}" paginator="true" rows="10"
rowsPerPageTemplate="10,30,50,100" draggableColumns="true">
<p:ajax event="rowSelect" update="createButton editButton " />
<p:ajax event="rowUnselect" update="createButton editButton " />
<p:column headerText="Name">
<h:outputText id="invitationName" value="#{invitation.name}" />
</p:column>
...
<f:facet name="footer">
<p:commandButton id="createButton" icon="ui-icon-plus"
value="#{msgs.lbl_add_new}" update=":InvitationCreateForm"
oncomplete="PF('InvitationCreateDialog').show()" />
<p:commandButton id="editButton" icon="ui-icon-pencil"
value="#{msgs.lbl_edit}" update=":InvitationEditForm"
oncomplete="PF('InvitationEditDialog').show()"
disabled="#{empty invitationController.selected}" />
</f:facet>
</p:dataTable>
</h:form>
<ui:include src="create.xhtml" />
<ui:include src="edit.xhtml" />
</ui:define>
</ui:composition>
Note that layout.xhtml doesn't contain any form (no nested forms).
The dialog edit.xhtml is divided into 2 parts: one where the user can enter the invitation "head" information and another one with a datatable where she can edit / add / delete guests.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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">
<h:head></h:head>
<body>
<ui:composition>
<h:form id="InvitationEditForm">
<p:dialog id="InvitationEditDlg" widgetVar="InvitationEditDialog"
modal="true" resizable="false" appendTo="#(body)"
header="#{msgs.lbl_add_new}">
<h:panelGroup id="display">
<p:panelGrid columns="2"
rendered="#{invitationController.selected != null}">
<p:outputLabel value="#{msgs.lbl_name}" for="name" />
<p:inputText id="name"
value="#{invitationController.selected.name}" required="true"/>
...
</p:panelGrid>
<p:dataTable var="aGuest" id="guestTable" style="width: 1200px;"
value="#{invitationController.selected.guestList}"
resizableColumns="false" rowIndexVar="idx" draggableColumns="true">
<p:column width="80" headerText="#{msgs.lbl_name}">
<p:inputText id="guestName" value="#{aGuest.name}" />
</p:column>
...
<p:column width="20">
<p:commandButton
actionListener="#{invitationController.addNewGuest}"
id="addGuestButton" update="guestTable" icon="ui-icon-plusthick"
title="+" />
<p:commandButton
actionListener="#{invitationController.deleteGuest(idx)}"
id="deleteGuestButton" update="guestTable"
icon="ui-icon-minusthick" title="-" immediate="true"
rendered="#{invitationController.selected.guestList.size()>1}" />
</p:column>
</p:dataTable>
<p:commandButton actionListener="#{invitationController.save}"
value="#{msgs.lbl_save}"
update="display,:InvitationListForm:datalist,:growl"
oncomplete="handleSubmit(args,'InvitationEditDialog');" />
<p:commandButton value="#{msgs.lbl_cancel}" immediate="true"
actionListener="#{invitationController.cancel}"
onclick="PF('InvitationEditDialog').hide()" />
</h:panelGroup>
</p:dialog>
</h:form>
</ui:composition>
</body>
</html>
And the Controller
#SessionScoped
#Named
public class InvitationController implements Serializable {
private Invitation selected; //with getter and setter
}
Now, I think my problem should be in the combination of p:dialog and h:form.
The original generated version of edit.xhtml had the form InvitationEditForm nested within the dialog and not the contrary as I posted above. The problem with that was after clicking editButton the dialog was loaded, but the dataTable was always filled with guests of the first Invitation I selected in my session (more strangely, suppose the first invitation in the session had just a guest A: after selecting an Invitation with 2 guests B and C I got A and B displayed). As the controller was returning the right guestList(), I supposed there was a problem with update and inverting form and display solved this problem..
Unfortunately this didn't solve all the problems, as now the actionListener for addGuestButton and deleteGuestButton doesn't get invoked anymore..
I am really confused: can you please help me to fix my code? Thanks in advance!
I am using the bar chart example like in the show case:
http://www.primefaces.org/showcase/ui/barChart.jsf
but I am getting an issue that the chart is drawn correctly except that the values of the x-axis and y-axis doesn't appear, as illustrated in the following image:
my only difference is that I am displaying the chart in a dynamic dialog.
I tried adding onShow method to the dialog, but I got the same effect:
onShow="barChartWidget.plot.replot();"
My xhtml code is as follows:
1- report_panel.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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:pretty="http://ocpsoft.com/prettyfaces"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<body>
<ui:composition>
<h:panelGroup layout="block"
<p:commandLink id="show_created_report" title="Show Report Dialog"
action="#{myBean.generateReport}"
oncomplete="report_dialog_widget.show();">
<h:graphicImage value="/resources/images/report.png" width="50"
height="50" />
</p:commandLink>
</h:panelGroup>
<ui:insert name="report_dialog">
<ui:include src="/pages/compositions/report_dialog.xhtml" />
</ui:insert>
</ui:composition>
</body>
</html>
2- report_dialog.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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:pretty="http://ocpsoft.com/prettyfaces"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<body>
<ui:composition>
<p:dialog id="report_dialog" showEffect="puff" height="500"
width="800" resizable="false" dir="rtl"
header="report" widgetVar="report_dialog_widget"
dynamic="true">
<h:panelGroup id="report_details" layout="block">
<p:dataTable styleClass="content_font" id="report_table"
var="record" value="#{myBean.report.tableRecords}">
<p:column headerText="Dept Name">
<h:outputText value="#{record.responsibleName}" />
</p:column>
<p:column headerText="Num Of Tasks" style="text-align:center">
<h:outputText value="#{record.tasksCount}" />
</p:column>
<p:column headerText="Num Of Finished Tasks" style="text-align:center">
<h:outputText value="#{record.finishedtasksCount}" />
</p:column>
<p:column headerText="Num Of Un Finished Tasks" style="text-align:center">
<h:outputText value="#{record.unFinishedtasksCount}" />
</p:column>
</p:dataTable>
<p:barChart widgetVar="barChartWidget" id="barChart" value="#{myBean.report.categoryModel}" legendPosition="ne" style="width:400px;height:300px;"
title="Tasks Chart" min="0" max="200" />
</h:panelGroup>
</p:dialog>
</ui:composition>
</body>
</html>
3- managedBean:
public void generateReport(){
report=new Report();
//other report stuff goes here
report.setCategoryModel(createCategoryModel());
}
private CartesianChartModel createCategoryModel() {
categoryModel = new CartesianChartModel();
ChartSeries boys = new ChartSeries();
boys.setLabel("Boys");
boys.set("2004", 120);
boys.set("2005", 100);
boys.set("2006", 44);
boys.set("2007", 150);
boys.set("2008", 25);
ChartSeries girls = new ChartSeries();
girls.setLabel("Girls");
girls.set("2004", 52);
girls.set("2005", 60);
girls.set("2006", 110);
girls.set("2007", 135);
girls.set("2008", 120);
categoryModel.addSeries(boys);
categoryModel.addSeries(girls);
return categoryModel;
}
I am using PrimeFaces 3.5 with Mojarra 2.1.20
UPDATE: sampe use case project is uploaded in this link:
https://docs.google.com/file/d/0B10CrX5WSm-IakNWWHEteFlfalk/edit
- it can be downloaded via file > download
- then extract the file and build the project with maven.
UPDATE2:
I found the issue, it's related to that I have rtl direction on the body tag and on the dialog component, any ideas for fixing that ?
The issue was that the bar chart component inherits rtl direction from the body, so i had to override the bar chart style and gives it direction ltr.
I am trying to change the language using p:commandLink.
I have a template (template.xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile"
xmlns:p="http://primefaces.org/ui">
<f:loadBundle
basename="labels.ClientLabels"
var="labels" />
<h:head>
<title><ui:insert name="windowTitle" /></title>
</h:head>
<h:body>
<f:view locale="#{localeChanger.locale}">
<pm:page title="aaaa" swatch="a">
<pm:view id="main">
<!-- HEADER -->
<ui:insert name="header">
<!-- the default header is used if no replacement for header is specified when the template is used -->
<pm:header fixed="true" title="Header" swatch="a">
<f:facet name="left">
<p:commandLink action="#{localeChanger.setEnglish}" onchange="submit()">
<h:graphicImage value="image/uk.png" />
</p:commandLink>
</f:facet>
<f:facet name="right">
<p:commandLink action="#{localeChanger.setGerman}" onchange="submit()">
<h:graphicImage value="image/de.png" />
</p:commandLink>
</f:facet>
</pm:header>
</ui:insert>
<!-- CONTENT -->
<ui:insert name="content">
<!-- default content -->
<pm:content>
<h:form></h:form>
</pm:content>
</ui:insert>
<!-- FOOTER -->
<ui:insert name="footer">
<!-- the default footer -->
<pm:footer fixed="true" swatch="a">
<pm:navBar>
<p:button outcome="info" value="#{labels.Info}" icon="info" />
<p:button outcome="userlogin" value="#{labels.User}" icon="star" />
</pm:navBar>
</pm:footer>
</ui:insert>
</pm:view>
</pm:page>
</f:view>
</h:body>
</html>
The userlogin.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile"
xmlns:p="http://primefaces.org/ui">
<head></head>
<body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<pm:content>
<h:outputText value="#{labels.IntroductionText}" />
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="#{labels.UserName}" />
<p:inputText value="#{login.username}" id="username"
required="true" />
<h:outputLabel for="password" value="#{labels.Password}" />
<h:inputSecret value="#{login.password}" id="password"
required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="#{labels.Login}" />
</f:facet>
</h:panelGrid>
</h:form>
</pm:content>
</ui:define>
</ui:composition>
</body>
</html>
The LocaleChanger.java:
#ManagedBean
#SessionScoped
public class LocaleChanger implements Serializable{
private Locale locale = FacesContext.getCurrentInstance().getViewRoot().getLocale();
public Locale getLocale() {
return locale;
}
public String getLanguage() {
System.out.println(locale.getLanguage());
return locale.getLanguage();
}
public void setLanguage(String language) {
locale = new Locale(language);
FacesContext.getCurrentInstance().getViewRoot().setLocale(locale);
}
public void setEnglish(){
System.out.println("english");
setLanguage("en");
}
public void setGerman(){
System.out.println("german");
setLanguage("de");
}
}
The faces-config.xml:
<managed-bean>
<managed-bean-name>localeChanger</managed-bean-name>
<managed-bean-class>test.LocaleChanger</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>de</supported-locale>
</locale-config>
<default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
</application>
When I am clicking the commandLinks nothing happens.The two methods setEnglish and setGerman are invoked but no change in labels.
My property files are:
ClientLabels_en.properties and
ClientLabels_de.properties
I am using embedded Jetty, JSF 2.0, PrimeFaces 3.3 and PrimeFaces Mobile 0.9.3.
Thank you very much.
UPDATE
The file ClientLabels_en.properties:
Info = Info
User = User
IntroductionText = Please enter your username and password
UserName = Username:
Password = Password:
Login = Login
The file ClientLabels_de.properties is the same but with german text for the values.
I also changed the name of the file in ClientLabels_de_DE.properties but the problem still remains.