I have the following popupPanel in my JSF Page.
<rich:popupPanel id="popup" modal="true" autosized="true"
resizeable="false" domElementAttachment="form">
<f:facet name="header">
<h:outputText value="Process Teller Transaction" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
x
</h:outputLink>
</f:facet>
<h:panelGroup id="container" layout="block">
<div id="container">
<!--Popup Content -->
</div>
</h:panelGroup>
</rich:popupPanel>
Now if i remove the header facet, from the popup the header disappears. What i want is to have a custom header panel, that is more intune with my application. How can i do this. Secondly the popup should be drag gable. Is there anyway i can achieve this ?
Kind Regards,
Related
I'm using the component <p:panel>
If we take the Advanced Panel as an example, is there any way that makes me able to add an icon at the left of the text "About Barca"?
You can extend the header using <f:facet name="header">
<f:facet name="header">
<h:panelGrid columns="2">
<span class="ui-icon" />
<h:outputText value="About Barca" />
</h:panelGrid>
</f:facet>
You can use a span element plus CSS customization or the p:graphicImage component.
This is the way you can add an icon to a panel component:
<p:panel header="the header text you want">
<f:facet name="actions">
<p:commandLink
styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</p:commandLink>
</f:facet>
</p:panel>
Want to want to do is:
On my datatable, the last column has a view, edit and delete. the View has the following method to get the row data:
public String prepareView() {
current = (TimeLoggingDetail) getItems().getRowData();
selectedItemIndex = pagination.getPageFirstItem() + getItems().getRowIndex();
return "View";
}
When view is clicked it redirects me to a page where I can view the selected values.
I want to change that into showing the values in a popup and not get redirected to a page where its displayed.
So I have tried the following:
<a4j:commandLink id="myLink" value="Action" actionListener="#{timeLoggingDetailController.prepareView}" rendered="#{item.timeLoggingId eq AdminTimeLogging.filteredId}" styleClass="auto-style5">
<rich:componentControl event="complete" target="popup" operation="show"/>
</a4j:commandLink>
If I click the button the popup does not show, when I remove the event="complete" the popup does show but with no values. If I remove the popup code completely, click on view and then add the popup code again it displays but only the old value I selected without popup code, The values that's in memory.
I have also tried:
<a4j:commandLink id="myBut" action="#{timeLoggingDetailController.prepareView}" execute="#this" value="Test" styleClass="auto-style5" render="popup" oncomplete="#{rich:component('popup')}.show()">
</a4j:commandLink>
It also does not open the popup, I have tried using #{rich:component('popup')}.show() in numerous ways but it does not open, Should I change the method prepareView to return something specific? should I do a condition to display the popup with those values? it seems like the popup opens before the method finishes. the <a4j:commandLink/> is within the code:
<h:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
<a4j:commandLink id="myBut" action="#{timeLoggingDetailController.prepareView}" execute="#this" value="Test" styleClass="auto-style5" render="popup" oncomplete="#{rich:component('popup')}.show()">
</a4j:commandLink>
<h:column/>
My popup Panel:
<h:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
<a4j:commandLink id="myBut" action="#{timeLoggingDetailController.prepareView}" execute="#this" value="Test" styleClass="auto-style5" render="popup" oncomplete="#{rich:component('popup')}.show()">
</a4j:commandLink>
<rich:popupPanel id="popup" modal="true" autosized="true" resizeable="false" domElementAttachment="form">
<f:facet name="header">
<h:outputText value="TEST" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;">
Close
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="#{bundle.ViewTimeLoggingDetailLabel_date}"/>
<h:outputText value="#{timeLoggingDetailController.selected.date}" title="#{bundle.ViewTimeLoggingDetailTitle_date}">
<f:convertDateTime pattern="MM/dd/yyyy" />
</h:outputText>
<h:outputText value="#{bundle.ViewTimeLoggingDetailLabel_description}"/>
<h:outputText value="#{timeLoggingDetailController.selected.description}" title="#{bundle.ViewTimeLoggingDetailTitle_description}"/>
<h:outputText value="#{bundle.ViewTimeLoggingDetailLabel_normalHours}"/>
<h:outputText value="#{timeLoggingDetailController.selected.normalHours}" title="#{bundle.ViewTimeLoggingDetailTitle_normalHours}"/>
<h:outputText value="#{bundle.ViewTimeLoggingDetailLabel_overtimeHours}"/>
<h:outputText value="#{timeLoggingDetailController.selected.overtimeHours}" title="#{bundle.ViewTimeLoggingDetailTitle_overtimeHours}"/>
<h:outputText value="#{bundle.ViewTimeLoggingDetailLabel_doubleTimeHours}"/>
<h:outputText value="#{timeLoggingDetailController.selected.doubleTimeHours}" title="#{bundle.ViewTimeLoggingDetailTitle_doubleTimeHours}"/>
<h:outputText value="#{bundle.ViewTimeLoggingDetailLabel_approvalLevelsId}"/>
<h:outputText value="#{timeLoggingDetailController.selected.approvalLevelsId}" title="#{bundle.ViewTimeLoggingDetailTitle_approvalLevelsId}"/>
</h:panelGrid>value="#{approvalLevelsController.selected.description}" title="#{bundle.ViewApprovalLevelsTitle_description}"/>
<br />
<h:panelGrid class="auto-style4">
<h:commandLink action="#{timeLoggingDetailController.update}" value="#{bundle.EditTimeLoggingDetailSaveLink}" onclick="#{rich:component('popup')}.hide();" styleClass="linkbutton"/>
</h:panelGrid>
</rich:popupPanel>
</h:column>
how could I add an icon to a component p:panel?
<p:panel header="text" />
Unfortunately it does not support an "icon" attribute.
So I tried this:
<f:facet name="header">
<h:outputText value="text">
</h:outputText>
<p:commandLink styleClass="ui-icon ui-icon-comment" />
</f:facet>
But this adds a linebreak between the text and the command Link which only shows up as an icon.
Does someone know how I could else do this?
ty
The reason the icon is causing the text below it to shift downwards is because the ui-icon class has a display: block style that causes the image to greedily consume the line and push the text down. The following header facet will build a 2 column table around the image and text forcing the header to display them both side by side.
<f:facet name="header">
<h:panelGrid columns="2">
<span class="ui-icon ui-icon-comment" />
<h:outputText value="text" />
</h:panelGrid>
</f:facet>
This is the way you can add an icon to a panel component:
<p:panel header="the header text you want">
<f:facet name="actions">
<p:commandLink
styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
<h:outputText styleClass="ui-icon ui-icon-help" />
</p:commandLink>
</f:facet>
</p:panel>
I have bean struggling to understand how to use the rich:popupPanel component in the right way. There are (at least not that I could find) few post about how to use the rich:popupPanel and how to submit values from it.
To make matter worse the panel seams to add (when checking the html) a hard coded "_content" to its component id name (to the div generated). I have tried to use aj4:region tag to partial render the complete form. But that didn't seamed to work, cause nothing where posted to managed bean. So now I have one option left, where the panel has its own form, outside the main one on the page.
I can see that the evaluation of the form (popup) values is happening, but not the execution of the bean function that persist the values (I see the POST request of the command button). The only reason I can think of at the moment, is that the pop-up panel use another bean to persist the values that the main form on the page (both of them are session scoped).
I am thinking of omit the pop-up panel all together, since it seams so hard to make this work. Maybe its a well know secret, since it so few post about it. It behaves the same if if use componentController or only a a4j:commanLink.
How is it possible to submit values from a rich:popupPanel and invoke a backing bean function to persist the pop-up form values ?
Appreciate if someone can shed some light on this, greetings Chris.
I use Richfaces 4.0-final on Glassfish 3.1
<h:form id="main_form">
<!-- Command for popup -->
<a4j:commandLink actionListener="#{userController.prepareCreateSysRequest}" oncomplete="#{rich:component('popup_sys_user_req_form:popup_sys_user_req')}.show(); return false;"
execute="#this" value="Request New Sector/Category" />
...
<a4j:commandButton action="#{projectController.Create}" ...>
</h:form>
<h:form id="popup_sys_user_req_form">
<rich:popupPanel id="popup_sys_user_req" modal="true" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="New Project Request" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysRequestType}" required="true" requiredMessage="Request Type is required" title="Request Type">
<f:selectItems value="#{userController.getSysRequestTypeItems()}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest}" onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;" execute="#form" render="popup_sys_user_req_form" value="Send Request" />
</rich:popupPanel>
</h:form>
For what I have done I used to have the issue to got to submit twice only the first time.
To fix it the form got to be outside the popupPane. And also that the popupPanel should have the attibute domElementAttachment="form".
Example.
<h:form>
<rich:popupPanel id="shipmentItemUpdateDialog"
autosized="true"
domElementAttachment="form">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{shipmentBundle.shipmentItemDetailsHeader}" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:commandLink>
<h:graphicImage value="/core/images/modal/close.png"/>
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</f:facet>
<h:outputText for="shipmentItemName"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemName}"
/>
<h:inputText id="shipmentItemName"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.name}"
label="#{shipmentBundle.shipmentItemName}"
size="40" >
</h:inputText>
<h:outputText for="shipmentItemCode"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemCode}"
/>
<h:inputText id="shipmentItemCode"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.code}"
label="#{shipmentBundle.shipmentItemCode}"
size="40" >
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemAmount}"
/>
<h:inputText id="shipmentItemAmount"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.amount}"
label="#{shipmentBundle.shipmentItemAmount}"
size="4" >
<f:validateLongRange minimum="1"/>
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:selectBooleanCheckbox id="shipmentItemNeedsCooling"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.needsCooling}"
label="#{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:outputText for="shipmentItemDetails"
value="#{shipmentBundle.shipmentItemDetails}"
/>
<h:inputTextarea id="shipmentItemDetails"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.details}"
label="#{shipmentBundle.shipmentItemDetails}"
cols="38"
rows="5"
/>
</h:panelGrid>
<h:panelGrid columns="1" dir="LTR">
<h:panelGrid columns="2" dir="LTR">
<a4j:commandButton value="#{coreBundle.acceptButton}"
action="#{shipmentItemController.onUpdate()}"
render="shipmentItemsTable">
</a4j:commandButton>
<h:commandLink value="#{coreBundle.closeLink}"
immediate="true">
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</h:panelGrid>
<h:outputText value="#{coreBundle.requiredText}"/>
</h:panelGrid>
</rich:popupPanel>
</h:form>
I hope this helps.
I think you got it right.. think of the pop-up as a regular page. To submit and close the pop-up, do something like this:
<a4j:commandButton value="Save" onclick="#{rich:component('panelId}.hide();" render="..."/>
Hope this helps..
I have a form which contains a list in a datatable. To add a New record to the list, click "Add" and the dialog box <p:dialog> appears, in that any empty datatable with 2 columns having two input text boxes to fill. In the dialog box I have Save and Cancel buttons. Once we click on Save button, a new record should saved into the database and the list in the form should show with the new record. The datatable is of primefaces inline row editing functionality. I'm using growl to display the error messages. Once I update my record with empty data, it shows the required message. But when I click on the Add button, it is again showing the same required message. It is showing the previous error. I don't want to have that. Could anyone help me in this context. The "Add" is an ajax request.
<h:body>
<ui:composition template="/WEB-INF/facelets/template/adminLayout.xhtml">
<ui:define name="view">
<h:form id="myForm" prependId="false">
<div class="header" >
<div class="titleColor">
T_COD_Prefil
</div>
</div>
<div class="divPosition">
<p:dataTable var="profile" id="profileTable" value="#{profileView.profileModelList}" rowEditListener="#{profileView.rowEditListener}" onRowEditUpdate="buttonPanel" >
<p:column style="width:60px;">
<p:rowEditor/>
<h:commandButton style="padding-left:5px;" image="/resources/images/delete.jpeg" styleClass="spa" value="delete" immediate="true" actionListener="#{profileView.delete}" >
<f:attribute name="delteProfile" value="#{profile}" />
</h:commandButton>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="IDprefil" />
</f:facet>
<h:outputText value="#{profile.profileId}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="description" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{profile.profileDescription}" />
</f:facet>
<f:facet name="input">
<h:inputText required="true" requiredMessage="#{msg.desProfileEmpty}" maxlength="255" value="#{profile.profileDescription}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</div>
<div class="divButPosition">
<h:panelGroup id="buttonPanel">
<p:commandButton id="buttons" value="Add" actionListener="#{profileView.addEmptyProfile}"
async="true" update="myForm" rendered="#{!profileView.addNewRow}" oncomplete="profileDialog.show();" />
</h:panelGroup>
</div>
<p:growl id="growl" showDetail="false" />
<p:dialog id="profileDialog" header="Profile Detail" prependId="false" widgetVar="profileDialog" resizable="false" width="500" showEffect="explode" hideEffect="explode" modal="false" closable="false">
<h:dataTable var="newProfile" value="#{profileView.newProfile}">
<h:column>
<f:facet name="header">
<h:outputText value="IDprefil" />
</f:facet>
<h:inputText value="#{newProfile.profileId}" required="true" requiredMessage="not empty" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="description" />
</f:facet>
<h:inputText value="#{newProfile.profileDescription}" required="true" requiredMessage="Desctiption should not be empty" />
</h:column>
</h:dataTable>
<p:commandButton value="Save" actionListener="#{profileView.saveProfile}" async="true" update="growl,buttonPanel,profileTable" oncomplete="handleRequest(args ,document.getElementById('profileDialog'))" />
<p:commandButton value="Cancel" immediate="true" update="buttonPanel" async="true" actionListener="#{profileView.cancelProfile}" oncomplete="profileDialog.hide();" />
</p:dialog>
</h:form>
Try writing your growl at the top of the code, and update it when clicking on the button.
Well, doesn't work on IE8.
After submit button click, all fields will be validated first so, if some of them empty then requried message will be popup. So keep submit related data under different tag. Basically different forms for different submit buttons