Hi I have this code ...
<p:tab title="Explore More" >
<ui:insert name="sideMenu">
<ui:include src="../ST/InterestingNumberList.xhtml" />
</ui:insert>
and
InterestingNumberList.xhtml
Contain a Datatable. How can i align this whole Datatable left side inside Tab?My Interesting Numberlist page
<div class="col1" 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 prependId="false">
<p:dataTable id="companyList" rows="10" style="text-align:left"
value="${bean_numbers_list}" var="num_feature">
<p:column >
<h:outputLink styleClass="morelinks"
value="${facesContext.externalContext.requestContextPath}/topStocks/${num_feature.name}">
<h:outputText value="#{num_feature.shortDesc}" />
<f:ajax event="click" immediate="true" />
</h:outputLink>
</p:column>
</p:dataTable>
</h:form>
</div>
Screen i added red rectangle on the listbox which i will want to aligh left.
Related
Some, but not all UI Components are not responding.
Restart, rebuild code and clean caches.
Part of the template file
<!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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="title">JKPGBooking /.::.\ Boka online på ED</ui:insert></title>
</h:head>
<h:body>
<h:panelGrid columns="3">
<ui:insert name="menu">
<ui:include
src="/WEB-INF/template/header_#{userbean.currUser.role}.xhtml"></ui:include>
</ui:insert>
<p:spacer style="width: 100px; height: 10px;"></p:spacer>
<ui:insert name="content_row1_col2" />
</h:panelGrid>
<ui:insert name="content_row2_col1">
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/template/footer.xhtml"></ui:include>
</ui:insert>
</h:body>
</html>
part of the .xhtml
<ui:define name="content_row1_col2">
<h:form>
<p:growl id="growl" showDetail="true" sticky="false" />
<br />
<br />
<p:panelGrid columns="5" id="userform">
<f:facet name="header">
<p:outputLabel value="Vem har bokat salen?" />
</f:facet>
<h:outputText value="vecka" />
<p:selectOneMenu value="#{infobean.week}" autoWidth="true" >
<f:selectItems value="#{infobean.allWeeks}" >
</f:selectItems>
</p:selectOneMenu>
<h:outputText value="Dag" />
<p:selectOneMenu value="#{infobean.day}">
<f:selectItems value="#{infobean.days}">
</f:selectItems>
</p:selectOneMenu>
<h:commandButton value="Sök"
action="#{infobean.getHouseSchedule}" update="resultTab">
</h:commandButton>
</p:panelGrid>
</h:form>
</ui:define>
Everything renders nicely but in this case only the button of the form is responding will says is fired. If I enlarge the page in the browser by changing the zoom the SelectOneMenu for the day is responding too, but never the the SelectOneMenu for the week. If I remove the panelGrid the form works as intended.
this is one example of the problem. On another page are tabs generatered by a script, in most cases 12-14. Often the last two or three are not responding/firing and there is no mouseover/hiver response. What really fiddles me is that is not always the case.
Here is the code which i am trying to run
ChildTemplate.xhtml
<ui:composition template="../templates/home-template-new.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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h:outputStylesheet library="css" name="primeface_default.css" />
<p:tabView dynamic="true" cache="true" id="tabView">
<p:tab title="A">
<ui:insert name="equipList">
<ui:include src="../AList.xhtml" />
</ui:insert>
</p:tab>
<p:tab title="B">
<ui:insert name="terminationList">
<ui:include src="../BList.xhtml" />
</ui:insert>
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
Here is the BList.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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<p:dataTable value="#{bean.fetchTemp()}" var="temp" reflow="true" resizableColumns="true" liveResize="true"
id="table2">
<p:column>
........
........
</p:column>
<f:facet name="footer">
<div class="divTableFooter" align="right" id="footerDiv6">
<p:panelGrid>
<p:commandLink id="create"
action="#{bean.methodName()}">
</p:commandLink>
<h:link value="LinkName" outcome="AddRecord" />
</p:panelGrid>
</div>
</f:facet>
</p:dataTable>
</ui:composition>
Now let me define the problem
Right now my active tab is B and when i am clicking the <p:commandLink/> or <h:link /> It is redirecting and showing tab A while it should show AddRecord.xhtml page in current active tab B.
What is wrong with my code ? Can someone suggest it?
You can add activeIndex attribute to your tabview component and write a tabchange event using p:ajax .Please check the below code
<h:outputStylesheet library="css" name="primeface_default.css" />
<p:tabView dynamic="true" cache="true" id="tabView" activeIndex="#{bean.tabIndex}">
<p:ajax event="tabChange" listener="#{bean.onTabChange}" />
<p:tab title="Equipment" >
<ui:insert name="equipList">
<ui:include src="../AList.xhtml" />
</ui:insert>
</p:tab>
<p:tab title="Termination">
<ui:insert name="terminationList">
<ui:include src="../BList.xhtml" />
</ui:insert>
</p:tab>
</p:tabView>
in your bean define tabIndex variable and implement the onTabChange method
private boolean popupEdit;
public final void onTabChange(final TabChangeEvent event) {
TabView tv = (TabView) event.getComponent();
this.tabIndex = tv.getChildren().indexOf(event.getTab());
}
Hope this will help you
I have a p:dataTable and the selected value is throwing null pointer when Im tring to get it,this situation is after put the datatable inside a modal p:dialog, but if remove the modal atribute works fine.
PD:the modal p:dialog was behid the overlay like this question
Primefaces - AjaxStatus - Dialog is behind the overlay
the answer is not working for me, because Im using primefaces 5.1, so I have to use appendTo="#(body)"
I don´t know if that is important for my problem.
Resume: the null pointer exist if the p:dialog is modal.
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition template="/resources/sysged.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"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="vDoc">
<h:form id="form">
<p:panel header="Document">
<h:panelGrid columns="4">
<p:commandButton id="prev"
actionListener="#{DocumentController.priviousPage()}"
icon="ui-icon-circle-triangle-w" update="docImage next prev"
disabled="#{DocumentController.inicioLista}" />
<p:commandButton id="next"
actionListener="#{DocumentController.nextPage()}"
icon="ui-icon-circle-triangle-e" update="docImage prev next"
disabled="#{DocumentController.finalLista}" />
<p:commandButton id="anotacoes" value="Anotaçoes"
onclick="PF('dialogAnotacao').show();" />
<p:button id="voltar" outcome="pesquisaDocumento.xhtml"
value="Voltar" />
</h:panelGrid>
</p:panel>
</h:form>
<h:form id="panotation">
<p:dialog id="dialogAnotacao" closeOnEscape="true" header="Anotaçoes"
widgetVar="dialogAnotacao" modal="true" resizable="false"
appendTo="#(body)" draggable="true">
<p:dataTable id="tanotation" var="anotation"
value="#{DocumentController.arquivo.anotacaoList}"
selectionMode="single"
selection="#{DocumentController.selected}"
rowKey="#{anotation.i}">
<p:column headerText="Indice" style="text-align:left">
<h:outputText value="#{anotation.i}" />
</p:column>
<p:column headerText="text" style="text-align:left">
<h:outputText value="#{anotation.text}" />
</p:column>
</p:dataTable>
<p:contextMenu for="tanotation">
<p:menuitem value="do" update="tanotation"
icon="ui-icon-close" actionListener="#{DocumentController.doit}">
</p:menuitem>
</p:contextMenu>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
My method in the managedBean
public void doit() {
System.out.println(selected);
}
You append your <p:dialog> to the body of the html page(see appendTo attribute), as a result it is not included in any <h:form>.
This could be a problem for your <p:dataTable>
Could you place your <h:form id="panotation"> inside of your <p:dialog> and not outside ?
I have implemented a composite component in JSF using primefaces.
<ui:component ...>
<cc:interface>
<cc:facet name="header"/> ...
<cc:interface>
<cc:implementation>
<p:dataTable>
<f:facet name="header">
<c:choose>
<c:when test="#{empty cc.attrs.metadata.headerText}">
<cc:insertFacet name="header" required="true"/>
</c:when>
<c:otherwise>
#{cc.attrs.headerText}
</c:otherwise>
</c:choose>
</f:facet> ...
</dataTable>
</cc:implementation>
When I use it in a normal page it works fine as expected rendering the datatable.
<ui:composition>
<nav:dataTable/>
<f:facet name="header">
<h:outputText value="headerText" />
</f:facet>
</ui:composition>
But when I use it inside a dialog which uses the above composite component, it throws
component.xhtml #28,54
Unable to find facet named 'header' in parent
composite component with id 'j_idt129'
I am making a ajax call to invoke this dialog on click of a link. The dialog comes in different shape and throwing this error in console. Has anyone faced it ? Any help is really appreciable.
cc:insertFacet inserts the whole f:facet tag, so you shouldn't wrap it into another f:facet tag within the composite implementation. As you are writing a custom p:dataTable I think it's easier to overwrite the already existing header facelet as an interface declaration and conditionally render it using JSTL utilities:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<composite:interface>
<composite:facet name="header" />
<composite:attribute name="title" />
</composite:interface>
<composite:implementation>
<p:dataTable>
<!-- If the facet is given at parent, insert it.
Otherwise, provide the title given by the attribute -->
<c:choose>
<c:when test="#{not empty cc.facets.header}">
<composite:insertFacet name="header" />
</c:when>
<c:otherwise>
<f:facet name="header">
#{cc.attrs.title}
</f:facet>
</c:otherwise>
</c:choose>
<p:column headerText="column" />
</p:dataTable>
</composite:implementation>
</h:body>
</html>
Using it as:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:comp="http://java.sun.com/jsf/composite/comp">
<f:view>
<h:head />
<h:body>
<h:form>
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
<comp:myTable title="Custom header" />
<p:commandButton type="button" onclick="dialog.show()"
value="show in dialog" />
<p:dialog widgetVar="dialog">
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
</p:dialog>
</h:form>
</h:body>
</f:view>
</html>
I'm trying to add a contextMenu to a dataTable contained inside a tab. I have been able to get the menu to show up on a dataTable which is not inside a tab and was also to get it to show up on the entire tab...but not specifically on the dataTable.
I've tried several different references in the 'for' attribute of the contextMenu...some blow up, some do not but the menu doesn't show up on right-click.
I'm using PrimeFaces 4.0. Any suggestions?
<!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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="someForm">
<p:tabView id="tv" var="tb" value="#{TempBeans.tabs}">
<p:ajax event="tabClose" listener="#{TempBeans.tabClose}"
update="#form" />
<p:tab id="tempTab" title="#{tb.name}" closable="true">
<p:dataTable id="dTable" var="d" value="#{tb.dtbs}">
<p:column id="column1" headerText="name">
<h:outputText value="#{d.name}" />
</p:column>
<p:column id="column2" headerText="id">
<h:outputText value="#{d.id}" />
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
<p:contextMenu for=":someForm:tv:dTable">
<p:menuitem value="TableView" update="#form" icon="ui-icon-search" />
<p:menuitem value="TableDelete" update="#form" icon="ui-icon-close" />
</p:contextMenu>
</h:form>
</h:body>
</html>
Well, I was able to get the context menu to appear by changing the table to be selectable...which is sort of what I wanted anyway. However, now I have another problem...If I make the selectionMode "multiple" and use ctrl-clicks to select rows it seems to register the last right-click as a single click.
click one row
ctrl-click second row
ctrl-click third row
right-click one of the rows...deselects other rows
So it seems I would have to force my users to:
click one row
ctrl-click second row
ctrl-right-click third row
AAAAAAAAAAAAAAAAAAAAAAAAAAARRRRGH!! Deal-breaker...looks like I'm going back to prehistoric ui times and implementing multiple selection with checkboxes.
Please someone tell me I'm wrong and there's a simple way to make it not behave like this.
Anyway, here is how I eventually managed to get a contextMenu to show up:
<!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:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="someForm">
<p:tabView id="tv" var="tb" value="#{TempBeans.tabs}">
<p:ajax event="tabClose" listener="#{TempBeans.tabClose}" update="#form" />
<p:tab id="tempTab" title="#{tb.name}" closable="true">
<p:dataTable id="dTable" var="d" value="#{tb.dtbs}" selection="#{tb.selectedDTBs}" selectionMode="multiple" rowKey="#{d.name}">
<p:column id="column1" headerText="name">
<h:outputText value="#{d.name}" />
</p:column>
<p:column id="column2" headerText="id">
<h:outputText value="#{d.id}" />
</p:column>
</p:dataTable>
<p:contextMenu id="cMenuId" for="dTable">
<p:menuitem value="TableView" update="#form" icon="ui-icon-search" />
<p:menuitem value="TableDelete" update="#form" icon="ui-icon-close" />
</p:contextMenu>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>