I'm struggling using dynamic dialogs compared to static dialogs because the look and feel is different when I'm using a dynamic dialogin regard to the Roma Layout I'm using.
1. First thing, let's look at how I implement a static dialog using the layout
Create.xhtml
Code: Select all
<?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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:a="http://java.sun.com/jsf/composite/allaxis">
<ui:composition>
<p:dialog id="AnalysisTypeCreateDlg" widgetVar="AnalysisTypeCreateDialog" modal="true" resizable="false" appendTo="@(body)" header="#{msg.CreateAnalysisTypeTitle}"
closeOnEscape="true"
width="640">
<h:form id="AnalysisTypeCreateForm">
<p:focus for="name"/>
<h:panelGroup id="display" rendered="#{analysisTypeController.selected != null}">
<div class="p-grid ui-fluid">
<div class="p-col-12">
<p:panelGrid columns="2" columnClasses="ui-g-12 ui-md-4,ui-g-12 ui-md-8" layout="grid" styleClass="ui-panelgrid-blank">
<p:outputLabel value="#{msg.FieldCode_label}" for="code" />
<a:code id="code" controller="#{analysisTypeController}" title="#{msg.FieldCode_title}"/>
<p:outputLabel value="#{msg.CreateAnalysisTypeLabel_name}" for="name" />
<p:inputText id="name" value="#{analysisTypeController.selected.name}" title="#{msg.CreateAnalysisTypeTitle_name}" required="true" requiredMessage="#{msg.CreateAnalysisTypeRequiredMessage_name}" maxlength="100"/>
<p:outputLabel value="#{msg.CreateAnalysisTypeLabel_description}" for="description" />
<p:inputTextarea id="description" value="#{analysisTypeController.selected.description}" title="#{msg.CreateAnalysisTypeTitle_description}" maxlength="255"/>
</p:panelGrid>
</div>
</div>
<a:save actions="#{analysisTypeController}" widgetVar="AnalysisTypeCreateDialog" update="@form,:AnalysisTypeListForm,:growl"/>
</h:panelGroup>
</h:form>
</p:dialog>
</ui:composition>
</html>
DynamicDialog.xhtml
Code: Select all
<?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://xmlns.jcp.org/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:a="http://java.sun.com/jsf/composite/allaxis"
lang="#{localeManager.locale.language}">
<f:view contentType="text/html" locale="#{localeManager.locale.language}">
<h:head>
<title>Select Input Points</title>
<h:outputStylesheet name="css/primeflex.css" library="roma-layout" />
<h:outputStylesheet name="css/nanoscroller.css" library="roma-layout" />
<h:outputStylesheet name="css/layout-indigo.css" library="roma-layout" />
<style type="text/css">
body {
background-color: transparent;
}
body .ui-panel .ui-panel-content {
border: none;
}
body .ui-panel .ui-panel-footer {
border: none;
}
</style>
</h:head>
<h:body>
<h:form id="FacilityLocationSelectForm">
<p:panel>
<p:dataTable id="datalist"
widgetVar="datalistVar"
value="#{facilityLocationController.items}"
lazy="false"
rowKey="#{item.id}"
var="item"
paginator="true" paginatorPosition="bottom"
rows="12"
selection="#{facilityLocationController.selectedItems}"
filteredValue="#{facilityLocationController.filteredItems}">
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<f:facet name="header">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-search"></i></span>
<p:inputText id="globalFilter" onkeyup="PF('datalistVar').filter()" placeholder="#{msg.Search}" style="width:100%"/>
</div>
</f:facet>
<p:column headerText="#{msg.FieldCode_header}" sortBy="#{item.code}" styleClass="col-code"
filterBy="#{item.code}" filterMatchMode="contains" filterStyle="display:none">
<h:outputText value="#{item.code}"/>
</p:column>
<p:column headerText="#{msg.ListFacilityLocationTitle_name}" sortBy="#{item.name}"
filterBy="#{item.name}" filterMatchMode="contains" filterStyle="display:none">
<h:outputText value="#{item.name}"/>
</p:column>
<p:column headerText="#{msg.ListFacilityLocationTitle_facility}" sortBy="#{item.facility.name}"
filterBy="#{item.facility.name}" filterMatchMode="contains" filterStyle="display:none">
<h:outputText value="#{item.facility.name}"/>
</p:column>
</p:dataTable>
</p:panel>
<p:panel style="padding-bottom: 40px;">
<p:commandButton id="selectButton"
value="Select"
actionListener="#{facilityLocationController.onSelectItems}"
icon="fa fa-check"
style="float:right; margin-bottom: 10px; margin-right: 6px; min-width: 140px;"/>
<p:commandButton id="cancelButton"
value="Cancel"
actionListener="#{facilityLocationController.onSelectItems}"
styleClass="secondary-button"
style="float:right; margin-bottom: 10px; margin-right: 6px; min-width: 140px;"/>
</p:panel>
</h:form>
</h:body>
</f:view>
</html>
Code: Select all
Map<String, Object> options = new HashMap<>();
options.put("modal", true);
options.put("draggable", true);
options.put("resizable", false);
options.put("closeOnEscape", true);
options.put("contentWidth", 1024);
options.put("includeViewParams", true);
My questions are:
1. How do I use my Roma layout styling the same way as in a static dialog?
2. How do I handle the buttons and place them right in the footer facet?
3. How do I prevent the datatable from shrinking when I filter data, so my dialog have fixed heigth and buttons stay in their place at the bottom?
Thank you so much
Pierre Francis