This may be a bit confusing but I will try to be clear.
I have three projects. One is a registry system which stores information shared between the two applications.
Using Application 1 and Application 2 you can access the registry which is supposed to have a bread crumb back to the specific applications home page.
So far what I have is a bean which can determine which app is active and returns the appropriate url for a page requested. Problem is my UI does not accept the url.
<ui:define name="breadcrumbContent">
<h:form id="headerForm">
<ol class="breadcrumb">
<li><h:link value="#{i18n.recordList}" immediate="true"
outcome="#{breadCrumbNavigator.navigatingPage}">
<f:param name="pageToGoTo" value="faces/produceManager/index.xhtml"></f:param>
</h:link></li>
<li><h:link value="#{i18n.businessRegistry}" immediate="true"
outcome="#{breadCrumbNavigator.navigatingPage}">
</h:link></li>
</ol>
</h:form>
</ui:define>
This gives me the two errors
This link is disabled because a navigation case could not be matched.
enter code here
Unable to find matching navigation case from view ID '/produceManager/list.xhtml' for outcome '/ss/faces/index.xhtml'
In the bean I have the URL hard coded. I have tried this with and without the 'localhost:9080' prefix. I am kind of lost on this one. Anyone else do anything like this with breadcrumbs?
Turned out to be really easy!
All I had to do was define a navigation case in the faces config and use command links.
<ui:define name="breadcrumbContent">
<h:form id="headerForm">
<ol class="breadcrumb">
<li><h:commandLink value="#{i18n.recordList}" immediate="true"
action="#{breadCrumbNavigator.getNavigatingPage}">
<f:param name="pageToGoTo" value="goToDashboard"></f:param>
</h:commandLink></li>
<li><h:commandLink value="#{i18n.businessRegistry}" immediate="true"
actions="#{breadCrumbNavigator.navigatingPage}">
<f:param name="pageToGoTo" value="goToProducerManager"></f:param>
</h:commandLink></li>
</ol>
</h:form>
</ui:define>
Related
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.
What I am trying to accomplish is being able to take a section of code / HTML and tell JSF to include it or not in the final render. I have messed around with the <ui:remove> tag, but that will always remove the contents.
Here is what I am trying to not include:
<li><h:commandLink value="Create an Account" action="createUser"/></li>
<li><h:commandLink value="Login" action="login"/></li>
I need something to wrap around this that will include it on a rendered = true/false basis. I want it to not include any bloated code like a div, table, etc.
Hope I understand your question right, have you tried these components with rendered attribute?
Example:
<h:panelGroup rendered="#{bean.display}">
<li><h:commandLink value="Create an Account" action="createUser"/></li>
<li><h:commandLink value="Login" action="login"/></li>
</h:panelGroup>
<h:panelGrid rendered="#{bean.display}">
<li><h:commandLink value="Create an Account" action="createUser"/></li>
<li><h:commandLink value="Login" action="login"/></li>
</h:panelGrid>
<rich:panel rendered="#{bean.display}">
<li><h:commandLink value="Create an Account" action="createUser"/></li>
<li><h:commandLink value="Login" action="login"/></li>
</rich:panel>
'display' is the boolean property defined in your JavaBean which you use to control the visibility of your XHTML code.
Another tag you can use is <ui:include>, it might help you better organize your code when the section of XHTML code is big enough to put in another .xhtml.
<ui:include src="yourPath.xhtml" rendered="#{bean.display}">
</ui:include>
For <ui:remove>, I usually use it to temporarily comment out the code as <!-- XHTML code -->.
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
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>