I am trying to dispose a p:dataTable beside a p:button. They need to lay in a p:tab that is contained in a p:tabView. The tabView is contained in the central p:layoutUnit of a p:layout.
I also need to put the dataTable inside a form for producing an ajax update of another component.
Before trying to add the button on the left of table, everything was fine:
<p:layout ...
<p:layoutUnit ....
<p:tabView ....
<p:tab ....
<h:form ....
<p:dataTable .....
But when adding an outer h:dataTable just out of the h:form, the tabView appears empty. If I try to use an outer p:dataTable, only one table is displayed without items.
Are there any limitations in putting a dataTable into another dataTable? If yes, are there other ways to reach this goal?
UPDATE
I have found that the right way is to use nested Layouts, a feature available since Primefaces 3.0 which is not yet fully documented.
Here is the link to the feature request and links to the showcase-lab.
Related
Let's say that I have a list of objects in my bean and I want to paint them in my page, for that I'm using an <a4j:repeat>, this objects need to be wrapped inside a <h:form> because each one of this objects needs to run a poll to execute some Futures Java objects in the bean to perform some heavy tasks and update them later on.
<a4j:repeat value="#{bean.objectsList}" var="obj">
<h:form id="pollForm">
<a4j:poll id="myPoll" interval="2000"
action="#{myBean.foo1}"
enabled="#{myBean.foo2}"
render="pollForm,myPoll" />
<p>#{obj}</p>
</h:form>
</a4j:repeat>
The code isn't really relevant I think. My code works as excepted in all elements except the first one. All the elements inside the loop render as an html form element except the first one, and for that reason the first one can't never be reRendered by the poll.
I have read in other posts that it seems to be a bug, but I'm also new to JSF 2.2 and RichFaces and maybe I'm misunderstanding something.
I am trying to layout a page with Bootsfaces and JSF 2.2. I like to show only three column in a row and then start new row but don't know, how to implement this.
<h:form>
<b:container>
<b:row>
<ui:repeat value="#{ClientBean4.custs}" var="custs">
<b:column col-md="4"><h:outputText id="output" value="#{ClientBean4.counter}" /> </b:column>
<h:panelGroup rendered="#{ClientBean4.counter == 0}">
</b:row><b:row>
</h:panelGroup>
</ui:repeat>
</b:row>
</b:container>
</h:form>
after a long time, I wrote above code, but it's givng error like 'h:panelgroup' should be properly closed. It's giving meaning, that I started panelGroup and then closing a row, starting a new row, and then close panelGroup.
So, Is anyone have idea, how to implement a layout, where a row will have three columns (showing customer's object details per column), then close the row and start a new row. obvisouly, I dont know, how many objects will be in the list.
BootFaces offers a component that handles this. More specifically you can use <b:panelGrid columns="3"> to achieve this. This will give you a dynamic grid system that will grow vertically as you populate it but retain the number of rows that you specify.
You can see the component in action here, https://showcase.bootsfaces.net/layout/panelgrids.jsf
PrimeFaces also has a component for this, but I assume you want to use BootFaces as your original code uses it. If you prefer PrimeFaces, you can use the <p:dataGrid> component, which does something similar. This component even handles pagination.
I want to change a tab by clicking in commandButton. I'm controlling activeIndex on my bean and doing an update on tabView component. Everything works fine.
My problem is that I want to change the activeIndex without need doing an update on tabView, because update of that component is a bit slow.
Is it possible to change a tab by clicking on button, and do that without update?
Here is my actual code.
TabView component
<p:tabView id="tvFoo" dynamic="true" activeIndex="#{fooBean.activeIndex}">
<p:tab title="Title" id="someTab">
<ui:include src="someTabName.xhtml" />
</p:tab>
<p:tab title="Title2" id="anotherTab">
<ui:include src="anotherTabName.xhtml" />
</p:tab>
</tabView>
inside someTabName.xhtml
<p:commandButton value="go to anotherTab" actionListener="#{fooBean.tabChange('anotherTabName')}" />
fooBean, that controls tabs change
public void tabChange(String tabId) {
switch (tabId) {
case "anotherTabName":
activeIndex = 2;
RequestContext.getCurrentInstance().update("tvFoo"); //here is the line that I don't want to call
break;
}
Can I remove that line, RequestContext.getCurrentInstance().update("tvFoo");? Of course, if simply remove, the tab is not changed.
To resume, basically I want change the opened tab. I think that I can achieve this calling the changeTab event manually, but I don't know how do that.
Why don't you do an update on the tabview component by your command button?
I think you have to do an update somewhere, otherwise, how should the tabview notice the change? Moreover, as far as I know, the update function isn't slow at all.
To get the current index of the tabview you could play with the Faces Context:
TabView tabView = FacesContext.getCurrentInstance().getViewRoot().findComponent(aComponentId);
On tabView you can get and set the active tab individually.
I hope this helps, good luck!
Have you tried using the wizard component? I believe the behaviour you're looking for is similar to this primefaces wizard.
http://www.primefaces.org/showcase/ui/panel/wizard.xhtml
I have a Primefaces JSF view myView.xhtml with a form (with id 'myformID') and datatable (with id 'myDataTableId') in it. I also have a dialog box (myDialog.xhtml). I am including the myDialog.xhtml in myView.xhtml. When we click on the commandButton in 'myDialog.xhtml', it will update a datatable after executing the method specified in action listener. I am updating the datatable with update=":myFormId:myDataTableId"and it is working fine.
But I would like to use the same dialog in different view. The form id and datatable id are different in that view. So, how can I reuse the dialog and update datatables with different id's (currently I am creating one more dialog by duplicating the code and changed the value in the update attribute of commandButton accordingly)?
You can pass parameters with ui:include example :
master.xhtml
<ui:include src="include.xhtml">
<ui:param name="customId" value="4567" />
</ui:include>
include.xhtml
<ui:composition>
<p:dialog id="#{customId}" ...>
</p:dialog>
</ui:composition>
Firstly, sorry for my english ^^
I've got problems with dynamic includes in my structure.
I've got a tabview, and the tabs are built dynamically..
The tabs are createed by different commandbuttons, and in one of my beans, are putted in one ArrayList of tab
This is the tabview:
<p:tabView value="#{indexBean.tabs}" var="tab" id="tabView" activeIndex="#{indexBean.selectedNewTab}"
And these are the tabs:
<p:tab title="#{tab.title}" closable="#{tab.closable}">
In the tab, I've got different .
I've got only one tab that is so defined:
<ui:include src="content/accordion.xhtml"/>
<ui:include src="content/toolbar.xhtml"/>
<ui:include src="content/dataTableRawResults.xhtml"/>
<ui:include src="content/dataTableCurves.xhtml"/>
<ui:include src="content/dataTableReports.xhtml"/>
<ui:include src="content/dataTableAdvancedStatistics.xhtml"/>
Every single page that is included has a rendered tag (in my bean I set different booleans so that I can specialize every that as I desire..)
That's work fine.. Except for one problem...
It is too slow!!
I suppose because of the rendering.. So I've tried different ways to solve it..
I tried with .. With query in src tag of .. But nothing seems to work fine..
With query, I open correctly the first tab.. But when I open the second one, the first one takes the same include of the second one (like if its attributes have been overrided)..
Thanks to all!
If I haven't explain well, please ask me and I'll try to be more precise!
If it is too slow maybe you could try to load the tabs dynamically by adding to your p:tabView the attribute dynamic="true":
<p:tabView dynamic=true ... >