I have to make a webpage with jsf and primafecas, but I don't have to much experience with it. I have to change the content of the page without reloading everything( the background is quite large).
I made a menu(with toolbar) and an iframe to easily change the content (gmap, text, forms, datatable etc). I know it is one of the worst solution, but I couldn't find better.
Now I have to change the menu from the iframe, but it looks impossible, so I'd like to use a nice method instead of the iframe. I tried a few things, but nothing worked well, sometimes i got duplicate id error or nothing worked, but sometimes nothing rendered except the menu.
Now the code looks like this:
<ui:define name="menu">
<h:form id="menuForm">
<p:toolbar activeIndex="#{navigationBean.pageCount}">
<p:toolbarGroup align="right">
<p:commandButton value="menu1" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm" />
<p:commandButton value="menu2" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm" />
<p:commandButton value="menu3" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm" />
<p:commandButton value="menu3" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm"/>
</p:toolbar>
</h:form>
</ui:define>
<ui:define name="content">
<h:form id="frmContent" style="height:100%;width:100%" height="100%" width="100%">
<iframe src="#{navigationBean.url}" id="frame" frameborder="0" style="height:100%;width:100%" height="100vh" width="100%"/>
</h:form>
I need a working method to change the content or the whole page without the background.
Try using
<ui:include src="#{navigationBean.url}" />
instead of the iframe.
Related
I want to include the content of a primefaces dialog from another page with ui:include. The included page must be set dynamic depending on which button user clicked. I used the very helpful answer from BalusC from JSF dynamic include using Ajax request.
It works very fine as in the example. But problems come if I use a p:dialog instead of h:panelGroup:
<h:form>
<f:ajax render=":dialog">
<p:commandButton value="page1" action="#{productBean.setDialogPage('/page1.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
<p:commandButton value="page2" action="#{productBean.setDialogPage('/page2.xhtml')}" oncomplete="dialogWidget.show()"></p:commandButton>
</f:ajax>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget" >
<ui:include src="#{productBean.dialogPage}" />
</p:dialog>
1st problem: Sometimes, I have to click a button several times before dialog appears. It seems not to follow any pattern but is a random effect. Sometimes I need to click twice, sometimes I need to click four times on the button.
2nd problem: Sometimes, the dialog appears not with the selected page but with the old one. When I close dialog and select again, the current page is loaded. It seems to be a random effect, too.
Why do I get this problems with dialog?
hy,
i don't know why you are using this mode to display dynamique dialog,
for me, i like use this mode:
<h:form>
<p:commandButton value="page1"
actionListener="#{productBean.setDialogPage('page1')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
<p:commandButton value="page2"
actionListener="#{productBean.setDialogPage('page2')}" oncomplete="PF('dialogWidget').show()" update="dialog"/>
</h:form>
<p:dialog id="dialog" widgetVar="dialogWidget">
<ui:include src="/#{productBean.dialogPage}.xhtml" />
</p:dialog>
and:
page1.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:p="http://primefaces.org/ui">
<h:form>
<!-- your code -->
</h:form>
</ui:composition>
it's working fine :)
If you reverse engineer existing tables with Netbeans 8 (generate entities + generate jsf pages), it will do something very similar out of the box; on the list page there is a create-button, which shows a dialog included from another page. You should try it, be sure to select "primefaces" in the last page in the guide for generating jsf pages. They do it like this:
List.xhtml:
<p:commandButton id="createButton" icon="ui-icon-plus" value="#{bundle.Create}" actionListener="#{kornstoranalyseStdController.prepareCreate}" update=":KornstoranalyseStdCreateForm" oncomplete="PF('KornstoranalyseStdCreateDialog').show()" />
Create.xhtml is included with <ui:include src="Create.xhtml"/> below </h:form> in the list-page.
Create.xhtml starts with:
<ui:composition>
<p:dialog id="KornstoranalyseStdCreateDlg" width="500px" widgetVar="KornstoranalyseStdCreateDialog" modal="true" resizable="true" showEffect="clip" appendTo="#(body)" header="#{bundle.CreateKornstoranalyseStdTitle}" hideEffect="clip" position="top">
<h:form id="KornstoranalyseStdCreateForm">
Hopefully you can tweak to suit your needs.
I'm using RichFaces with JSF to develop a simple app. One page of this app contains several collapsiblePanel elements. Some of the collapsiblePanel elements are nested, but never more than a second layer.
I would like to provide links or buttons on the page to expand all and collapse all collapsiblePanel elements on the page. How can I do that?
The elements currently use the switchType="client" attribute to let the client handle the expanding and collapsing. I suspect that using a type of ajax instead may help, but I'm not sure nor do I know how I would take advantage of it.
Update: My question may be easier to understand if I include an example of what I'm trying to do:
<h:form>
<a4j:commandButton actionListener="#{bean.setDefaultExpanded(true)}"
render="reportPanel" value="Expand all" />
<a4j:commandButton actionListener="#{bean.setDefaultExpanded(false)}"
render="reportPanel" value="Collapse all" />
<h:panelGrid id="reportPanel">
<ui:repeat var="account" value="#{bean.results.entrySet().toArray()}">
<rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
<ui:repeat var="chargeGroup" value="#{account.value.entrySet().toArray()}">
<rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
<h:outputText value="content: #{chargeGroup.value}" />
</rich:collapsiblePanel>
</ui:repeat>
</rich:collapsiblePanel>
</ui:repeat>
</h:panelGrid>
</h:form>
The <rich:collapsiblePanel> has the expanded attribute, you can bind it to bean property and control the expansion from there. Something like this
<rich:collapsiblePanel id="panel1" expanded="#{bean.expanded}" …>
<a4j:commandButton actionListener="#{bean.togglePanels()}"
… render="panel1, panel2, …"/>
The switchType controls where the content is pulled from, not how you expand/collapse the panel.
I had the same problem when click individual panels and then expand/collapse all. This work for me (richfaces 4.2.3):
<h:commandButton immediate="true" action="#{controllerBean.toggleMin}" value="collapse all" >
<a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
<h:commandButton immediate="true" action="#{controllerBean.toggleMax}" value="expand all">
<a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
...
<rich:collapsiblePanel id="panel1" immediate="true" expanded="#{modelBean.expanded}" header="Title text" switchType="client">
...
</rich:collapsiblePanel>
...
I'm working with jsf2 and want to use the ajax-functionality of it. Problem: I've already seen some ajax refresh things. But nothing to refresh a whole div...
I have a xhtml page with data from my bean, and i don't really want to refresh all fields of it, it would be easier to refresh the whole ui:include...
does anybody knows a solution? Or do I have to refresh all fields manually?
best regards
Just put them in some container component with an ID and use it in render attribute of f:ajax.
<h:form>
<h:commandButton value="submit" action="#{bean.submit}">
<f:ajax render=":foo" />
</h:commandButton>
</h:form>
<h:panelGroup id="foo" layout="block">
<ui:include src="include.xhtml" />
</h:panelGroup>
Note that <h:panelGroup layout="block"> renders a <div>. If you omit the layout attribute, it defaults to <span> (only whenever there are any attributes which needs to be rendered to HTML, like id).
Okay BalusC, but I'm still having a problem with the includes and ajax.
my index.xhtml includes a search.xhtml and a results.xhtml
the ajax-part is in search.xhtml and the toRender-id is in results.xhtml...
so at rendering the jsf-tags there's the problem that there's no toRender-Id at this time...
EDIT:
Okay the problem was not the arrangement of the includes, it was that the ajax-parts must be in the same form tag like this:
<h:form>
<div id="search" class="search">
<ui:insert name="search" >
<ui:include src="search.xhtml" />
</ui:insert>
</div>
<h:panelGroup id="ajaxResult" layout="block">
<ui:insert name="searchResults" >
<ui:include src="searchResults.xhtml" />
</ui:insert>
</h:panelGroup>
</h:form>
search contains f:ajax tag, ajaxResult is toRenderId
best regards, emre
Here is my code. When I click the link Comment, a inputTextarea and commandButton suppose to appear
<h:outputLink id="link" value="javascript:void(0)">
<h:outputText value="Comment"/>
<p:effect type="fade" event="click" for="reply">
<f:param name="mode" value="'show'"/>
</p:effect>
</h:outputLink>
<h:panelGrid id="reply" style="display:none;">
<h:inputTextarea id="keyword" rows="2" />
</h:panelGrid>
</h:outputLink>
When I click on the link, nothing seem to happen, nothing appear. Any idea. I run this on Glassfish. The showcase from primeface.org is running under Tomcat.
There are two problems:
First, according to the PrimeFaces User Guide the appear effect is not supported.
Following is the list of effects supported by PrimeFaces.
blind
clip
drop
explode
fold
puff
slide
scale
bounce
highlight
pulsate
shake
size
transfer
So change the p:effect to:
<p:effect type="blind" event="click" for="reply">
<f:param name="mode" value="'show'" />
</p:effect>
Second, the generated source of the link tells the following:
<a href="javascript:void(0)">Comment<script type="text/javascript">
YAHOO.util.Event.addListener('j_idt6:j_idt7', 'click', function(e) {
jQuery(PrimeFaces.escapeClientId('j_idt6:reply')).effect('blind',{mode:'show'},1000);
});</script></a>
The client ID j_idt6:j_idt7 doesn't appear anywhere in the source. It has to be the link itself. So adding an id to the h:outputLink should fix it. Look like a bug in PrimeFaces.
i've got this jsf code
<f:view>
<rich:page pageTitle="My Page" markupType="xhtml">
...
<rich:panel id="content">
<a4j:include viewId="#{MyBacking.viewId}" />
</rich:panel>
and after trying a number of different ways, I've still not managed to place the following correctly in my code:
<rich:effect for="window" event="onload" type="BlindDown" params="targetId:'<different tags depending on where I place this tag>',duration:2.8" />
My aim is to have the changed element in the a4j:included part of the page change but with the effect in use. I've tried putting it in my included page, or just after the f:view and rich:page tags in the calling page but to no avail. The demo doesn't take includes into account so I'm a bit stuck. Thanks
Just target the a panel inside the rich:panel: targetId:'contentPanel'
and then
<rich:panel ..>
<h:panelGroup layout="block" id="contentPanel">
<a4j:include viewId="#{MyBacking.viewId}">
<ui:param name="targetIdParam" value="putYourTargetIdHere" />
</a4j:include>
<h:panelGroup>
</rich:panel>