Hi Guys,
This topic has been in discussion and till date I have not found a solution for this that works- viewtopic.php?f=3&t=1251
My requirement is simple, that I have a Tree node on the left side of the page. The Tree node's model is generated dynamically from a set of data from the database.
On the selection on of a node, I need open a tab loaded with a facelet page in it as its content. The node selection event would tell me which xhtml needs to be opened and on the basis of that I need to show a tab with the content of the appropriate xhtml dynamically.
Questions:
- Whats the best way to approach this solution, given that ui:include doesn't work dynamically and applying using faceletfactory is problematic?
- Can I create tabview's and tab programatically with Prime faces 3.0. I seem not to be able to achieve this using new TabView() and new Tab() and setting the tab is a child to TabView.
These are fundamental requirements and they just don't seem to be fulfilled with the limitation of the ui:include..Any pointers guys.
I'm using Mojarra 2.1.3 with Prime faces 3.0 M4.
Thanks,
Prateek
Dynamic pages with tabs
Hi,
ui:include is dynamic with your Mojarra version. Have you tried it?
ui:include is dynamic with your Mojarra version. Have you tried it?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Posts: 6
- Joined: 02 Nov 2011, 11:40
Hi Oleg,
Yes I tried that, but it didn't work.
Here is the code:
View:
Any idea what may be wrong?
Yes I tried that, but it didn't work.
Here is the code:
View:
Code: Select all
<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:p="http://primefaces.org/ui"
xmlns:corejsf="http://corejsf.com" xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true" />
<p:tree var="node" value="#{treeBean.root}" dynamic="true" cache="false" selectionMode="single" >
<p:ajax event="select" update=":form" listener="#{treeBean.nodeSelect}" />
<p:treeNode>
<h:outputText value="#{node}"/>
</p:treeNode>
</p:tree>
<p:tabView id="tabView" var="vf" value="#{treeBean.tabModel}" dynamic="true">
<p:tab title="#{vf.viewName}">
<ui:include src="#{vf.pageView}" />
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
Code: Select all
public class TreeBean extends FrameBean implements Serializable {
private TreeNode root;
private TreeNode selectedNode;
private List<ViewModel> tabModel;
private TabView tabView;
/**
*
*/
@Override
public TreeBean {
root = new DefaultTreeNode("Root", null);
TreeNode node0 = new DefaultTreeNode("Test 1", root);
TreeNode node1 = new DefaultTreeNode("Test 2", root);
TreeNode node2 = new DefaultTreeNode("Test 3", root);
TreeNode node00 = new DefaultTreeNode("Test1View", node0);
TreeNode node10 = new DefaultTreeNode("Test2View", node1);
TreeNode node20 = new DefaultTreeNode("Test3View", node2);
tabModel = new ArrayList<ViewModel>();
}
public void nodeSelect(NodeSelectEvent event) throws IOException {
System.out.println("onNodeSelect");
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected", event.getTreeNode().getData().toString());
FacesContext.getCurrentInstance().addMessage(null, msg);
String viewName =event.getTreeNode().getData().toString().trim();
tabModel.add(new ViewModel(viewName,viewName+".xhtml"));
}
I'm not sure how p:tabView works. Can you try withput p:tabView please?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Posts: 6
- Joined: 02 Nov 2011, 11:40
Hi Oleg,
I figured the problem. It seems that tabview var attribute, which points to the current object in the iterated datamodel does not get available in the ui:include value expression for some reason. I stored the variable of the ui:include in the backing bean instead and it now works dynamically.
Thanks for the help!
Prateek.
I figured the problem. It seems that tabview var attribute, which points to the current object in the iterated datamodel does not get available in the ui:include value expression for some reason. I stored the variable of the ui:include in the backing bean instead and it now works dynamically.
Thanks for the help!
Prateek.
Yes, that's right. Dynamic tabs are generated at render response phase. Your ui:include is inside of such tab. I guess, ui:inlcude should be available at build component tree time and be not inside of dynamic generated content. Your variable can't be available in ui:include at the render response time because ui:include is not a component and doesn't get evaluated at this time This is a JSF specific and has nothing to do with PrimeFaces. Think about JSTL tags - that's exactly the same.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
This is a typically misunderstanding if you don't work a lot with JSF. http://www.ninthavenue.com.au/blog/c:fo ... n-facelets
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Posts: 6
- Joined: 02 Nov 2011, 11:40
Hi Oleg,
Thanks for the article.. The information was insightful...
Given the above requirement, what would be the way to solve it ?
Thanks,
Prateek
Thanks for the article.. The information was insightful...
Given the above requirement, what would be the way to solve it ?
Thanks,
Prateek
You should force explicit navigation to the same view to force re-building of the view programmatically:
Or maybe try to raise an PostAddToViewEvent with FacesContext.getCurrentInstance().getApplication().publishEvent(....). Publishing of PostAddToViewEvent leads to a rebuild of component (sub)tree. Note: I have never tried it.
Code: Select all
FacesContext ctx = FacesContext.getCurrentInstance();
ViewHandler viewHandler = ctx.getApplication().getViewHandler();
UIViewRoot viewRoot = viewHandler.createView(ctx, ctx.getViewRoot().getViewId());
ctx.setViewRoot(viewRoot); ctx.getApplication().getNavigationHandler().handleNavigation(ctx, null, null);
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin
-
- Posts: 43
- Joined: 16 Nov 2010, 17:52
May you put your final code?
Thanks.
Thanks.
Eclipse Helios.
JSF-2.0 (Mojarra 2.1.0-b11).
GlassFish 3.1.
PrimeFaces 2.2.1
EclipseLink 2.1.x - EclipseLink 2.1.x.
PostgreSQL 9.0
JSF-2.0 (Mojarra 2.1.0-b11).
GlassFish 3.1.
PrimeFaces 2.2.1
EclipseLink 2.1.x - EclipseLink 2.1.x.
PostgreSQL 9.0
-
- Information
-
Who is online
Users browsing this forum: No registered users and 24 guests