I am creating a portal in jsf with a left menu(rich:panelMenu) and with a content area on the right side. I want to refresh only the content area with different forms on clicking the menu items in the left menu. The menu selection needs to retained. Which is the proper technique to handle this ?
Do you mean aside from specifying the ID of the content panel in the reRender attribute of your a4j commandButton/commandLink/support tag (or whatever you use as your menu) ?
UPDATE:
Well you could use an a4j include like this:
<rich:panel id="menu">
<a4j:commandLink id="link1" action="#{myBean.setContentViewIdLink1}" reRender="content">Link 1</a4j:commandLink>
</rich:panel>
<rich:panel id="content">
<a4j:include viewId="#{myBean.viewId}"/>
</rich:panel>
UPDATE#2:
The setContenViewIdLink1 might look something like this:
public void setContenViewIdLink1() {
this.contentView = "/page1.xhtml";
}
Related
Our project use JSF 2.2 primeface 5.1.
I have a toggleable panel, the collapse attribute set to true.
<p:panel id="panel1" toggleable="true" collapsed="true">
...
</p:panel>
How can I set a p:hotkey in the jsf page to change the attribute collapsed to false ?
At a basic level, you can expand the pane with:
<p:hotkey bind="ctrl+s" handler="thePanelWidgetVar.expand();" />
If what you really want is to toggle the state of the panel, you could just call the collapse() and expand() on the panel directly. Obviously, you need to check the current state of the panel to determine what to call. You can collapse it all into the following script:
<script>
function togglePanelState (thePanel){
if(thePanel.cfg.collapsed){
thePanel.expand();
}else{
thePanel.collapse();
}
}
</script>
You could then use togglePanelState thus
<p:hotkey bind="ctrl+s" handler="togglePanelState(thePanelWidgetVar);" />
EDIT:
Thanks to Hatem Alimam for pointing out that a convenience method similar to my implementation of togglePanelState exists out of the box in PF 5.1, in the form of a toggle() function. Using that, you could then have instead:
<p:hotkey bind="ctrl+s" handler="PF('thePanelWidgetVar').toggle();" />
TL;DR
Is there something like composite's cc.clientId that will give me the id of a custom tag?
Details:
I'd like a custom tag that will render a label, a value, and an icon. When the icon is clicked, a Bootstrap modal is supposed to open up that will edit the value.
<ui:composition>
<div> #{field.label}: #{field.value}
<a class="icon-pencil" data-target="#editForm" data-toggle="modal">
</div>
<h:form id="editForm" class="modal hide fade" role="dialog" ...>
... there's an input here linked to field.value ...
</h:form>
</ui:composition>
I can use the tag with <my:editor />. When I do so within a ui:repeat, an id is prepended to the editForm so that it renders with id j_idt104:editForm. So I need to modify the data-target to include the id.
This would be really easy with a composite component because I have access to the id via cc.clientId:
data-target="\##{cc.clientId}\:editForm"
However, I can't get it to work with a custom tag because I don't know of an EL expression (or something) that will give me access to the id. I could probably wait until after the page is loaded, then use jQuery to inspect the id and set the data-target after the fact, but I was hoping for a more pure-JSF solution.
I'm using JSF 2.1 and Bootstrap 2.3, at the moment.
Answer seems to be no. BalusC says you should replace things like custom tags with "normal" JSF components. In this case, that would mean using the composite component.
If you're deadset on using custom tag, I worked around the issue (with lots of help from the answer here) by using an index in the form's id:
I replaced the ui:repeat with a c:forEach that has access to the item's index:
<table>
<c:forEach items="#{bean.items}" var="item" varStatus="status">
<my:editor index="#{status.index}" ... />
</c:forEach>
</table>
And in the custom tag, I used the index in the data-target:
<tr>
<td>#{label}: #{value}</td>
<td>
<a data-target="\#editForm-#{index}" ... ></a>
<h:form id="editForm-#{index}" ... >
...
</h:form>
</td>
</tr>
The only catch is that c:forEach is a build-time construct (see details in this answer), which is a problem if you need any render-time data (like if you build information up in preRenderView). If you do, then you're better off using ui:repeat with a custom component, and relying on the cc.clientId.
I am trying to toggle a page that shows a <rich:dataTable>. Before I just included the <ui:include> template and it would just show the table the whole time.
<ui:include src="../log/viewDlg.xhtml"/>
Now I want to be able to toggle it on/off on the web-page. Showing on the page with maybe a button or link. How can I achieve it?
Update 1: I am unable to get it to show up for some odd reason, Here is what I wrote so far based on feed back
View:
<a4j:commandLink value="View"
action="#{bean.showview}" render="viewPanel"/>
<h:panelGroup id="viewPanel">
<h:panelGroup id="tableRenderPanel" rendered="#{bean.showPolicyView}">
<ui:include src="../log/viewDlg.xhtml"/>
</h:panelGroup>
</h:panelGroup>
Backing bean:
private boolean showPolicyView = false;
public void showView() {
showPolicyView = !showPolicyView;
}
public boolean isShowPolicyView(){
return showPolicyView;
}
Wrap your <ui:include> inside two <h:panelGroup> elements. There's a catch here, you can't rerender a conditional component. Why's this? because when the element's rendered attribute resolves to false, it will not be considered while rendering the view so it can't be the target of an operation (in this case, related to renderization).
Jumping to the code, you'll have this:
<h:panelGroup id="wrapperPanel">
<h:panelGroup id="tableRenderPanel" rendered="#{yourBean.renderTable}">
<ui:include src="../log/viewDlg.xhtml"/>
</h:panelGroup>
</h:panelGroup>
yourBean#renderTable is a Boolean property that determines if the component will be rendered. When it evaluates to false, the component is not included in the component tree.
Toggling the view
To toggle the view, simply create a bean method that either refreshes the page
<h:commandLink action="#{yourBean.toggleTableView}"/>
or the particular panel through AJAX. To do this in JSF 1.2, rely on extensions like RichFaces to introduce AJAX, if you can. For example, should you choose RichFaces, you can use <a4j:commandLink/> and its handy render (or reRender in older versions) attribute to achieve what you could do normally with an <f:ajax/> in JSF 2
<a4j:commandLink action="#{yourBean.toggleTableView}" reRender="wrapperPannel"/>
Or, another alternative is
<a4j:commandLink action="#{yourBean.toggleTableView}">
<a4j:support event="oncomplete" reRender="wrapperPannel"/>
</a4j:commandLink>
Please note that the reRender attribute may vary depending on the structure of your page, but it should always reference the id of the wrapping panel in the end. Also, reRender was renamed to simply render in late RichFaces versions.
So, assuming you have a renderTable property (getter + setter) in yourBean, the toggleTableView must change it, in order to dinamically define if the component is to be rendered or not (renderTable = false).
Introducing RichFaces
Check this link for help in setting up RichFaces in your project.
I like the use of ui:include better than inserting h:panelBoxes like here:
<ui:fragment rendered="#{myBean.yourCondition()}">
<ui:include src="viewA.xhtml"/>
</ui:fragment>
<ui:fragment rendered="#{not myBean.yourCondition()}">
<ui:include src="viewB.xhtml"/>
</ui:fragment>
Advantage: Tag handlers do not represent components and never become a part of the component tree once the view has been built. It won't interefere with your CSS - the h:panelBox, in contrary, inserts a div or span.
... Another approach would be c:choose, which works but can cause render phases issues.
<c:choose>
<c:when test="#{myBean.yourCondition()}">
<ui:include src="viewA.xhtml"/>
</c:when>
<c:otherwise>
<ui:include src="viewB.xhtml"/>
</c:otherwise>
</c:choose>
Caution: When fiddling with tag handlers (like any c:xxx), be sure to know the difference between UI Components and Tag Handlers. Namely that UI Components and Tag Handlers are renderend in different phases. That implies that you cannot create a variable in a composite component and use it in a nested tag handler. c:choose and ui:include are both tag handlers, so normally it's not a problem. Read the link, it's a very short example and very insightful.
I would like my page to be user friendly as much as possible and I have an idea but its a little bit harder in the way I want to solve it.
I'm using primefaces and I would like to have a selectOneMenu element which changes to just an outputText with the value of the selected variable in the selectOneMenu. Anyone have some nifty ideas?
This can be done with ajax and partial rendering. Here is a sketch of my idea (untested and in plain JSF):
<h:panelGroup id="wrapper">
<h:selectOneMenu value="#{myBean.myValue}"
rendered="#{myBean.myValue == someInitialValue}" ...>
<f:ajax render="wrapper"/>
... (your select items here)
</h:selectOneMenu>
<h:outputText value="#{myBean.myValue}"
rendered="#{myBean.myValue != someInitialValue}" .../>
</h:panelGroup>
And that's what it does:
The value of h:selectOneMenu will be initialized and the menu will be rendered only if it is the initial value.
On change of the value, the surrounding panelgroup will be re-rendered, hides the menu and lets the h:outputText appear.
You need a wrapping panelGroup for this because the outputText is not there at page load. If your form is small you could also render=#form or any other surrounding container instead. Then you wouldn't need the wrapper.
PrimeFaces's CommandButton allows to specify an icon:
<p:commandButton value="Press me" icon="redBall" ... />
However, I need to enable/disable the icon depending on a JSF managed bean property.
I tried
<p:commandButton value="Press me" icon="#{bean.iconClass}" ... />
This works for choosing different icons, but does not allow to disable the icon altogether (i.e. get the same rendering like without the icon= attribute). I can return an empty string in getIconClass(), but PrimeFaces will still render the extra <span> for the icon inside the button, and CSS styling causes this span to be visible with a default icon.
Is there a way to tell PrimeFaces "I want no icon at all" (other than taking out the icon= attribute altogether)?
I can think of 2 ways without duplicating the button.
Supply the icon as <f:attribute> which is conditionally added by <c:if>.
<p:commandButton ...>
<c:if test="#{not empty bean.icon}"><f:attribute name="icon" value="#{bean.icon}" /></c:if>
</p:commandButton>
Set a style class which hides the icon altogether and supply it conditionally.
.hideicon .ui-icon { display: none; }
.hideicon .ui-button-text { padding-left: 1em; }
with
<p:commandButton ... icon="#{bean.icon}" styleClass="#{empty bean.icon ? 'hideicon' : ''}" />
A lame workaround would be to have 2 commandbuttons. One with icon definition and one without. And then render the correct one.