I have the following code in a xhtml page using PrimeFaces:
<h:panelGroup id="dropZoneId" layout="block"
style="height:500px;width:1210px;text-align:center;">
<h:outputLabel value="Drop here" style= "color: azure;" />
</h:panelGroup>
I would like to have the <h:outputLabel> "drop here" in the middle of the <h:panelGroup> but so far I can only put it at the center at the top of the <h:panelGroup> with no css.
Can someone please help ? Thank you
Maybe this will suffice:
<h:panelGroup id="dropZoneId" layout="block" style="height: 500px; text-align: center">
<h:outputText value="Drop here" style="color: azure; position: absolute; top: 240px" />
</h:panelGroup>
.myLabel {
float: center;
}
Official Resource #Primefaces: https://forum.primefaces.org/viewtopic.php?t=14611
Related
How do I separate the items inside selectOneListbox or selectManyMenu using a horizontal line ?
Here is my xhtml
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}"
style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X"
itemLabel="#{X}" itemValue="#{X}"/>
</p:selectOneListbox>
</p:panel>
<!-- mtcnc -->
<p:panel>
<h6 style="width: 10.4em; background-color: #ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1"
value="#{decisionTreeBean.option2}" showCheckbox="true"
style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X"
itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
I'm trying to offer some content dynamically, that is without dedicated pages, with the help of buttons. The aforementioned content is correctly loaded, but it's not working.
The layout is like this:
<p:outputPanel style="width: 100%; height: 100%; overflow: auto;" id="contentPanel">
<c:choose>
<c:when test="#{empty requestComposition}">
<ui:insert name="body">Content</ui:insert>
</c:when>
<c:otherwise>
<ui:include src="#{requestComposition}" />
</c:otherwise>
</c:choose>
</p:outputPanel>
The button to load content is like this (inside another outputPanel):
<p:commandButton value="Load Dynamic" update=":contentPanel" actionListener="#{applicationController.processActionButton('/dynamic')}" />
The action listener is like this:
public void processActionButton(String target){
if(target == null || target.isEmpty()){
return;
}
FacesContext context = FacesContext.getCurrentInstance();
HttpServletRequest req = (HttpServletRequest)context.getExternalContext().getRequest();
req.setAttribute("requestComposition", "/WEB-INF/templates" + target + ".xhtml");
}
The dynamic.xhtml is like this:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:outputPanel style="width: 100%; padding-top: 20px;">
<p:outputPanel style="width: 60%; margin: 0 auto;">
<p:outputPanel style="text-align: center; color: gold; font-weight: bold;">Dynamic</p:outputPanel>
<p:messages id="messages" />
<h:form>
<p:panelGrid columns="2" style="width: 100%;">
<p:outputLabel value="Item" for="idItem" />
<p:outputPanel style="display: block; padding-right: 10px;" layout="inline">
<p:inputText value="#{bean.item}" id="idItem" style="width: 100%;" required="true" />
</p:outputPanel>
</p:panelGrid>
<p:outputPanel style="text-align: center;">
<p:commandButton value="Process" style="margin: 5px;" update=":growl" onclick="PrimeFaces.widgets.widget_#{fn:replace(component.clientId, ':', '_')}.disable()" oncomplete="PrimeFaces.widgets.widget_#{fn:replace(component.clientId, ':', '_')}.enable()" actionListener="#{applicationController.dummyAction}" />
<p:commandButton value="Dummy" style="margin: 5px;" update=":growl" actionListener="#{applicationController.dummyAction}" process="#this" />
</p:outputPanel>
</h:form>
</p:outputPanel>
</p:outputPanel>
</ui:composition>
When any of the buttons is clicked the form apparently submits, but the action listener is not executed.
When dynamic.xhtml is loaded as page content the form submits, but the action listener is triggered only for the second button (labelled Dummy), because of process #this, in which case the form is no longer submitted. I can workaround the form not submitting with process#this by adding onchange to input elements, but I failed to understand why is not working when it is loaded dynamically.
Thank you
I have to apologize to BalusC, since the answer he suggested was actually correct. I was tricked by the #PostConstruct which performed an unnecessary initialization for me, but the key is to use a #ViewScoped bean. That however raises another question, since it is stated in the documentation that by default there will be maximum 20 such objects stored in the server, which can be configured to a different value, but if I understood correctly that would mean that the 21st connection to the server will result in reusing the first one, so the new connection will access data not meant for it, or in discarding it and creating a new one, which means the first will lose its data?
I am experiencing a very strange issue where the space before and after an rich:comboBox
differs from that for a h:inputText. See the screenshot below. Everything is fine for the datePicker and Application ID. The spacing gets weird for the comboBox. Any ideas? -Jan
Screenshot: http://i.stack.imgur.com/Fa5qv.jpg
<h:panelGrid columns="2">
<h:outputText value="#{bundle.lblsearchapplicationId}" />
<h:inputText id="inputapplicationId" value="#{searchBean.searchApplicationCriteria.LNGAPPLICATIONID}" />
<h:outputText value="#{bundle.lblsearchdealerName}" />
<rich:comboBox suggestionValues="#{XXXglobalHelperBean.dealerNames}" directInputSuggestions="true">
<!-- <f:selectItems value="#{searchBean.searchApplicationCriteria.TXTDEALERNAME}" /> -->
</rich:comboBox>
<h:outputText id="lblsearchbusinessManagerName" value="#{bundle.lblsearchbusinessManagerName}" />
<h:inputText id="inputbusinessManagerName" value="#{searchBean.searchApplicationCriteria.TXTBUSINESSMANAGERNAME}" />
sooooooooo, I figured it out. There is a rich-combobox-shel around each comboBox. One needs to set margin and padding for this shell to the same values as for h:inputText.
.rich-combobox-shell {
position : relative;
margin-top: 2px;
margin-bottom:2px;
padding-top: 1px;
padding-bottom: 1px;
}
I am trying to write some JSF code that centers an image in a panel grid. The simple approach would appear to be:
<h:panelGrid columns="1" style="text-align:center">
<h:graphicImage value="/path/to/image.png" />
</h:panelGrid>
but this approach does not seem to work.
Use div with align=center
Or use CSS:
JSF
<h:panelGrid styleClass="centered">
...
</h:panelGrid>
CSS
.centered {
margin: 0px auto;
}
In JSF is it possible to have a datatable displays records as follows?
[Name ][Last Name][Age]
1. John Doe 20
Extra info on record 1
2. John Smith 20
Extra info on record 2
Thank you
I'm sure there are a number of ways you could do this.
If you don't mind nesting tables, you can use the panelGrid tag and CSS.
View:
<f:view>
<h:dataTable value="#{peopleBean.people}" var="row">
<h:column id="column1">
<f:facet name="header">
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="First Name" />
<h:outputText value="Last Name" />
<h:outputText value="Age" />
</h:panelGrid>
</f:facet>
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="#{row.firstname}" />
<h:outputText value="#{row.lastname}" />
<h:outputText value="#{row.age}" />
</h:panelGrid>
<h:outputText styleClass="extra" value="#{row.extraInfo}" />
</h:column>
</h:dataTable>
</f:view>
Stylesheet:
TABLE {
width: 100%;
}
TABLE TR TD {
text-align: left;
}
.cell {
width: 40%;
}
.age {
width: 20%;
}
.extra {
background-color: silver;
padding: 4px;
display: block;
width: 100%;
}
Third libraries, such as RichFaces, allow you to do that with the principle of subTable.
You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...