My project is a dynamic report app similar to JasperReport and am using JSF 2.2.7 (Mojara) and primefaces 5.0. When a user logs in, he/she sees just the reports assigned to him/her which is dynamically loaded from the database. Everything else is working properly except that when they select a report, the page doesnt load the entire report until a second click.
My problem is the report doesnt load properly until a second click. Here are my code.
@Named(value = "userController")
@SessionScoped
public class ReportUserController implements Serializable {
private HtmlPanelGroup panelGroup; // with getter and setter
@PostConstruct
public void init() {
values = new ArrayList<>();
// Retrieve user's details and reports here
MenuModel model = new DefaultMenuModel();
Application application = FacesContext.getCurrentInstance().getApplication();
panelGroup = (HtmlPanelGroup) application.createComponent(HtmlPanelGroup.COMPONENT_TYPE);
PanelGrid panelGrid = (PanelGrid) application.createComponent(PanelGrid.COMPONENT_TYPE);
panelGrid.setColumns(2);
// Retrieve reports for d group the logged-in user belong
List<Report> repts = setupController.getExistingReports();
DefaultSubMenu reports = new DefaultSubMenu("Reports");
for (Report rep : repts) {
DefaultMenuItem menuItem = new DefaultMenuItem(rep.getReportName());
menuItem.setId(rep.getReportName().replaceAll("\\s+", ""));
menuItem.setAjax(true);
menuItem.setUpdate(":reportForm");
menuItem.setProcess("@form");
menuItem.setCommand("#{userController.loadReport(" + rep.getId() + ")}");
reports.addElement(menuItem);
reports.addElement(new DefaultSeparator());
}
model.addElement(reports);
Menubar menubar = (Menubar) application.createComponent(Menubar.COMPONENT_TYPE);
menubar.setModel(model);
panelGroup.getChildren().add(menubar);
}
public void loadReport(Long id) {
selectedReport = reportFacade.find(id);
if (parameters != null) {
parameters.clear();
}
if (values != null) {
values.clear();
}
queryColumns = selectedReport.getColumns();
queryParams = selectedReport.getReportParameters();
query = selectedReport.getReportQuery();
// This method is called to build the components of the page to be rendered dynamically.
// And it's every time a new report is selected
buildPage();
}
}
And here is the buildPage()
method in the same class. (Please bear with me its a stupidly long code)
public void buildPage() {
Application application = FacesContext.getCurrentInstance().getApplication();
reportPanelGroup = (HtmlPanelGroup) application.createComponent(HtmlPanelGroup.COMPONENT_TYPE);
PanelGrid panelGrid = (PanelGrid) application.createComponent(PanelGrid.COMPONENT_TYPE);
panelGrid.setColumns(2);
for (ReportParameter param : queryParams) {
String parameterLabel = param.getLabel();
String componentType = param.getComponentType();
String calendarPattern = param.getCalendarPattern();
boolean required = param.isRequired();
boolean userProperty = param.isUserProperty();
String queryPosition = param.getQueryPosition();
String sqlDatePattern = param.getSqlDatePattern();
String dataType = param.getDataType();
String userPropertyName = param.getUserPropertyName();
List<DropDown> dropDowns = param.getDropDowns();
if ((userProperty)) {
// Retrieve some info from the logged-in user
} else {
OutputLabel label = (OutputLabel) application.createComponent(OutputLabel.COMPONENT_TYPE);
label.setId(parameterLabel.replaceAll("\\s+", "") + "label");
label.setValue(parameterLabel + ":");
if (componentType.equalsIgnoreCase("Calendar")) {
Calendar cal = (Calendar) application.createComponent(Calendar.COMPONENT_TYPE);
cal.setId(parameterLabel.replaceAll("\\s+", ""));
cal.setShowButtonPanel(true);
cal.setPattern(calendarPattern);
cal.setRequired(required);
cal.setValueExpression("value",
getExpressionFactory()
.createValueExpression(getELContext(), "#{userController.parameters['"
+ queryPosition.trim() + "']}", Date.class));
label.setFor(parameterLabel.replaceAll("\\s+", ""));
panelGrid.getChildren().add(label);
panelGrid.getChildren().add(cal);
} else if (componentType.equalsIgnoreCase("TextField")) {
InputText input = (InputText) application.createComponent(InputText.COMPONENT_TYPE);
input.setRequired(required);
input.setId(parameterLabel.replaceAll("\\s+", ""));
input.setValueExpression("value",
getExpressionFactory()
.createValueExpression(getELContext(), "#{userController.parameters['"
+ queryPosition.trim() + "']}", String.class));
label.setFor(parameterLabel.replaceAll("\\s+", ""));
panelGrid.getChildren().add(label);
panelGrid.getChildren().add(input);
} else if (componentType.equalsIgnoreCase("DropDown")) {
SelectOneMenu selectOneMenu = (SelectOneMenu) application.createComponent(SelectOneMenu.COMPONENT_TYPE);
UISelectItems selectItems = (UISelectItems) application.createComponent(UISelectItems.COMPONENT_TYPE);
selectOneMenu.setRequired(required);
selectOneMenu.setId(parameterLabel.replaceAll("\\s+", ""));
selectItems.setId(parameterLabel.replaceAll("\\s+", "") + "selectItems");
List<SelectItem> items = new ArrayList<>();
items.add(new SelectItem("", "Select..."));
if (dropDowns != null && !dropDowns.isEmpty()) {
for (DropDown d : dropDowns) {
items.add(new SelectItem(d.getValue(), d.getLabel()));
}
}
selectItems.setValue(items);
selectOneMenu.getChildren().add(selectItems);
selectOneMenu.setValueExpression("value",
getExpressionFactory()
.createValueExpression(getELContext(), "#{userController.parameters['"
+ queryPosition.trim() + "']}", String.class));
label.setFor(parameterLabel.replaceAll("\\s+", ""));
panelGrid.getChildren().add(label);
panelGrid.getChildren().add(selectOneMenu);
}
}
}
reportPanelGroup.getChildren().add(panelGrid);
HtmlCommandButton searchBtn = (HtmlCommandButton) application.createComponent(HtmlCommandButton.COMPONENT_TYPE);
searchBtn.setId("searchBtnID");
searchBtn.setValue("Search");
//searchBtn.setIcon("icon ui-icon-search");
//searchBtn.setAjax(false);
ExpressionFactory ef = getApplication().getExpressionFactory();
MethodExpression performSearch = ef.createMethodExpression(getELContext(),
"#{userController.performSearch}", null, new Class[]{ActionEvent.class});
MethodExpressionActionListener meal = new MethodExpressionActionListener(performSearch);
searchBtn.addActionListener(meal);
searchBtn.setType("submit");
//searchForm.getChildren().add(searchBtn);
reportPanelGroup.getChildren().add(searchBtn);
Spacer spacer = (Spacer) application.createComponent(Spacer.COMPONENT_TYPE);
spacer.setHeight("30");
reportPanelGroup.getChildren().add(spacer);
HtmlForm downloadForm = (HtmlForm) application.createComponent(HtmlForm.COMPONENT_TYPE);
downloadForm.setId("downloadForm");
CommandLink downloadBtn = (CommandLink) application.createComponent(CommandLink.COMPONENT_TYPE);
downloadBtn.setId("downloadBtnID");
downloadBtn.setValue("Test Download");
//downloadBtn.setIcon("icon ui-icon-search");
downloadBtn.setAjax(false);
String reportName = this.selectedReport.getReportName().trim().replaceAll("\\s+", "").trim();
MethodExpression downloadAnyReport = ef.createMethodExpression(getELContext(),
"#{userController.downloadAnyReport(userController.values, "
+ "userController.headings, '" + reportName + "')}", null, // Replace report name
new Class[]{List.class, Collection.class, String.class});
downloadBtn.setType("submit");
downloadBtn.setActionExpression(downloadAnyReport);
downloadForm.getChildren().add(downloadBtn);
reportPanelGroup.getChildren().add(downloadForm);
DataTable dynamicTable = (DataTable) application.createComponent(DataTable.COMPONENT_TYPE);
dynamicTable.setValueExpression("value", getExpressionFactory()
.createValueExpression(getELContext(), "#{userController.values}", List.class));
dynamicTable.setVar("val");
dynamicTable.setRows(20);
List cols = new ArrayList<>();
for (int i = 0; i < queryColumns.size(); i++) {
Column col = (Column) application.createComponent(Column.COMPONENT_TYPE);
col.setHeaderText(queryColumns.get(i).getPrefferedName());
if (queryColumns.get(i).isLink()) {
HtmlForm linkForm = (HtmlForm) application.createComponent(HtmlForm.COMPONENT_TYPE);
linkForm.setId("linkForm");
CommandLink link = (CommandLink) application.createComponent(CommandLink.COMPONENT_TYPE);
if (queryColumns.get(i).isDataMasked()) {
link.setValueExpression("value", getExpressionFactory().createValueExpression(getELContext(),
"#{userController.maskStringValue(val[" + i + "]," + queryColumns.get(i).getLeftDigit() + "," + queryColumns.get(i).getRightDigit() + ")}", String.class));
} else {
link.setValueExpression("value", getExpressionFactory().createValueExpression(getELContext(),
"#{val[" + i + "]}", String.class));
}
link.setStyle("text-decoration: underline; color: blue;");
MethodExpression action = ef.createMethodExpression(getELContext(),
"customizeColumns?faces-redirect=true", null, new Class[]{String.class});
link.setAjax(false);
link.setActionExpression(action);
linkForm.getChildren().add(link);
col.getChildren().add(linkForm);
} else {
HtmlOutputText out = (HtmlOutputText) application.createComponent(HtmlOutputText.COMPONENT_TYPE);
if (queryColumns.get(i).getFormatAs() != null && queryColumns.get(i).getFormatAs().equals("Amount")) {
out.setValueExpression("value", getExpressionFactory().createValueExpression(getELContext(),
"#{userController.formatAsAmount(val[" + i + "])}", String.class));
} else if (queryColumns.get(i).getFormatAs() != null && queryColumns.get(i).getFormatAs().equals("Number")) {
out.setValueExpression("value", getExpressionFactory().createValueExpression(getELContext(),
"#{userController.formatAsNumber(val[" + i + "])}", String.class));
} else if (queryColumns.get(i).isDataMasked()) {
out.setValueExpression("value", getExpressionFactory().createValueExpression(getELContext(),
"#{userController.maskStringValue(val[" + i + "]," + queryColumns.get(i).getLeftDigit() + "," + queryColumns.get(i).getRightDigit() + ")}", String.class));
} else {
out.setValueExpression("value", getExpressionFactory().createValueExpression(getELContext(),
"#{val[" + i + "]}", String.class));
}
col.getChildren().add(out);
}
cols.add(col);
}
dynamicTable.setColumns(cols); //renderReport
dynamicTable.setValueExpression("rendered", getExpressionFactory()
.createValueExpression(getELContext(), "#{userController.values.size() > 0}", Boolean.class));
dynamicTable.setPaginator(true);
dynamicTable.setRowsPerPageTemplate("20,50,100");
reportPanelGroup.getChildren().add(dynamicTable);
}
And here is my page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="./usersTemplate.xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="usersTitle">
usersTitle
</ui:define>
<ui:define name="usersContent">
<div class="container-fluid">
<p:growl id="growl" life="3000" sticky="true"/>
<h:form id="menuForm">
<!-- This panelGroup is for the menubar of reports -->
<h:panelGroup binding="#{userController.panelGroup}"/>
</h:form>
<h:form id="reportForm">
<!-- This panelGroup is to show the components and datatable of the selected report -->
<h:panelGroup id="reportPanel" binding="#{userController.reportPanelGroup}"/>
</h:form>
</div>
</ui:define>
Please let me say it again, everything else is working fine except that when i select a report from the list of reports in the menubar, the page is not updated until a second click and i tried both full page submission as well as Ajax. Please i will greatly appreciate any help one can sugest. Thanks in advance.