primefaces dynamic tab render - jsf

I have some tabs and rendered attiributes. My problem is how can i set this tab's rendered attiributes to false when i close the tab. I set with setRendered method but the problem is renderTab1 variable still holds True. What i want to do is; setting renderTab1 variable to "False". By the way i have many tabs like 20-25. If you have any better solution you can share.
my xhtml;
<p:ajax event="tabClose" listener="#{myController.onTabClose}"/>
<p:tab id="firstTab" closable="true"
rendered="#{myController.renderTab1}"/>
my tabclose method;
public void onTabClose(TabCloseEvent event) {
event.getTab().setRendered(false);
}

I was find a solution and i need to did this to solve my problem.
My solution not only did with rendered, i needed to use one variable to render tab, and one to send you to position that will be my tab inside of my tabView
some like this.
in the tabView set parameters like this...
<p:tabView id="idTabView" widgetVar="tabView" dynamic="true" cache="false">
in tab
<p:tab rendered="#{mb.valiable == 1}"><!--the number 1 is an example-->
</p:tab>
</p:tabView>
On commandButton where i suppose is on the first tab i put this:
<p:commandButton
actionListener="mb.activeTab()"
update="#form"
oncomplete="PF('tabView').select(1);" <!--this line send to tab that you are rendering with your flag in mb "variable" if you are render TAB in position three you need to put PF('tabView').select(2);-->
on my MAnagedBean method:
mb{
private int valiable;
public voi activeTab(){
setValiable(1);
}
//setter y getters
}
i hope help you my solution.
regards

The rendered property of a JSF component is resolved multiple times throughout the JSF lifecycle, so setting it manually on an event is unlikely to work by the time JSF actually begins rendering. The rendered attribute however can take the following values:
A boolean property: Eg. rendered="#{myController.booleanProperty}"
A method that returns a boolean: Eg. rendered="#{myController.doStuffAndReturnBoolean()}"
An EL expression that resolves to a boolean value: Eg. rendered="#{myController.intValue gt 3}"

Related

Primeface wizard problem showing and hidding tabs

Im working with Primefaces wizard component and I need to show or hide a tab depending a variable.
Im doing this:
<p:wizard id="solWizard"
flowListener="#{wizardBean.onFlowProcess}"
widgetVar="wizardWidget"
>
<p:tab id="tab1" title="Tab 1">
...
</p:tab>
<p:tab id="tab2" title="Tab 2">
...
</p:tab>
<p:tab id="tab3" rendered=#{wizardBean.renderTab} title="Tab 3">
...
</p:tab>
</p:wizard>
Tab number 3 has a render condition. RenderTab is a boolean of wizardBean.
There are two ways to change the value of renderTab, one option is with a checkbox in the first tab, and that works great, every change to renderTab show and hide the tab (the checkbox has an ajax so I could update the tab).
The second way is in the bean, inside the onFlowProcess method, in the logic of the method when you go from tab 1 to tab 2 the boolean renderTab is changed, but the tab doesnt suffer any change
This is the onflowProcess method:
public String onFlowProcess(FlowEvent event) {
this.wizardStep = event.getNewStep();
try{
switch (event.getOldStep()) {
case "tab1":{
rendeTab=Boolean.TRUE;
PrimeFaces.current().ajax().update("#form");
}
...
As you can see, im updating the form with PrimeFaces.current().ajax().update("#form"), but the wizard doesnt show the tab.
What im doing wrong? is there a way to achieve what im trying to do? How could I show and hide the tab from the bean?
Thanks

How can I initially hide columns in a p:dataTable with p:columnToggler

I'm using PrimeFaces v.5 with this version a new component is released that ColumnToggler, when view is rendered, refreshed all checkbox are checked as a default operation.
What I need to do is;
to uncheck some columns when I initialize the view,
make p:columnToggler remember checked and unchecked options when a refresh operation occurs on p:dataTable
In Primefaces 5.2 you can set the p:column visible attribute to false
<p:column ... visible="false">
You can ofcourse use EL in the visible attribute by colum index (reordering becomes more difficult)
<p:column ... visible="#{visibilityModel.visibleList[1]}">
It hides the column at the beginning depending on the return value and you can show/hide the column through the columnToggler checkbox
By using the ajax toggle event
<p:ajax event="toggle" listener="#{viewBean.onToggle}" />
You can update the state of the visibilityModel server side
public void onToggle(ToggleEvent e) {
list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE);
}
See this PrimeFaces blog entry for full example to actually keep/store the state of the visibility server side so it can be reused later
The best solution depends on the PrimeFaces version you are using.
PrimeFaces >= 5.2
See the other answer in this question.
workaround for < 5.2
You need to solve the first problem manually by overriding Primefaces' own ColumnToggler.prototype.render() function
first add styleClass="not-show-at-start" to your column that you want to insvisibe at start to access in javascript render() function;
<!--This column will not be shown at start-->
<p:column headerText="Cloumn to hide initially" width="70" styleClass="not-show-at-start">
<h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>
<!--This column will be shown at start-->
<p:column headerText="Column to show initially" width="70">
<h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>
secondy create a javascript file and paste code below in it, this function will re assign render function of ColumnToggler
PrimeFaces.widget.ColumnToggler.prototype.render = function() {
//variable for creating id referance for each checkbox in ColumnToggler
var id=0;
this.columns = this.thead.find("> tr > th:visible:not(.ui-static-column)");
this.panel = $("<div></div>").attr("id", this.cfg.id).addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('<ul class="ui-columntoggler-items"></ul').appendTo(document.body);
this.itemContainer = this.panel.children("ul");
for (var a = 0; a < this.columns.length; a++) {
id++;
var b = this.columns.eq(a);
$('<li class="ui-columntoggler-item"><div class="ui-chkbox ui-widget"><div id="cb'+id /*creating id for each checkbox for accessing later*/+'" class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active"><span class="ui-chkbox-icon ui-icon ui-icon-check"></span></div></div><label>' + b.children(".ui-column-title").text() + "</label></li>").data("column", b.attr("id")).appendTo(this.itemContainer);
//access clumns using class reference(not-show-at-start) created in jsf page
if(b.hasClass( "not-show-at-start")){
//access checkbox using id attribute created above and uncheck it
//this will hide columns that have "not-show-at-start" class
this.uncheck($('#cb'+id));
}
}
this.hide();
}
An alternative solution could be to set directly the checkbox you want to uncheck after you load the page. It's a less elegant solution but it works. I did it this way:
<h:body onload="javascript:
$('.ui-chkbox-box')[18].click();">
By this way, after loading the page, javascript hide the column referenced by chechbox number 18 but the checkbox is still present on the columnToggler for the user to check it and show the column again if he wants to.
Greetings
Complementing Damián answer:
$(function() {
$('.ui-columntoggler-items .ui-chkbox .ui-chkbox-box').click();
});
This will do the job, clicking the columntoggler chkbox after page load..
#Edit
You should set as toggleable="false" the columns you don't want to hide (always displayed)
Reason: if you use the javascript method to "override" primefaces toggler, sometimes the datatable column shown can be displayed wrong in the layout (out of the table size, for an example, like happened with me), that's why i decided to use the method described above..

How to select first item of a list in <h:selectOneMenu> and render the page during initial load for the first selected item

I have following code:
<h:selectOneMenu value="#{AssetSummaryPageModel.selectedSensorId}" styleClass="facility_dropDown_list" required="true" >
<f:selectItems value="#{AssetSummaryPageModel.childFacilitySelectionList}" required="true" />
<a4j:ajax event="valueChange" execute="#this" status="nameStatus"
render="assetSummaryMainPanel"/>
</h:selectOneMenu>
When I select one item from the dropdown, it is rendering the page for the selected item. But, I want to render the page (with the first item of the dropdown list) during initial load. How can I do that. Any help please!!!!
That's easy. in your AssetSummaryPageModel-Bean you will add a new method with the #PostConstruct annotation so it will be called after the bean has been constructed. In this method you will set selectedSensorId to the first item of your childFacilitySelectionList.
When your page is being rendered, JSF will see that a value was already selected and will set this one as the selected one.
#PostConstruct
public void init() {
selectedSensorId = childFacilitySelectionList.get(0);
}
I got the answer of the question. I decleared the following code in init() method in Pagemodel-Bean and it is being loaded during its initial load:
selectedSensor = getAsset().getCompanyModuleAssets().get(0);
selectedSensorId = selectedSensor.getCoModAssetId();
Thanks :-)

JSF PrimeFaces inputText inside dataTable

JSF-2.0, Mojarra 2.1.19, PrimeFaces 3.4.1
Summary of the problem: Have a p:inputText inside p:dataTable and inputText action fired by p:remoteCommand which passes the dataTable row index as a parameter with f:setPropertyActionListener. But it always passes the last row of the dataTable, not the index of the row which includes currently clicked p:inputText.
As it can be seen from my previous questions, I am trying to use p:inputText as a comment taker for a status like in Facebook or etc. Implementation includes a p:dataTable. It's rows represents each status. Seems like:
<p:dataTable id="dataTable" value="#{statusBean.statusList}" var="status"
rowIndexVar="indexStatusList">
<p:column>
<p:panel id="statusRepeatPanel">
<p:remoteCommand name="test" action="#{statusBean.insertComment}"
update="statusRepeatPanel">
<f:setPropertyActionListener
target="#{statusBean.indexStatusList}"
value="#{indexStatusList}">
</f:setPropertyActionListener>
</p:remoteCommand>
<p:inputText id="commentInput" value="#{statusBean.newComment}"
onkeypress="if (event.keyCode == 13) { test(); return false; }">
</p:inputText>
</p:panel>
</p:column>
</p:dataTable>
Upper code says when the press enter key, fire p:remoteCommand which calls the insert method of the managed bean.
#ManagedBean
#ViewScoped
public class StatusBean {
List<Status> statusList = new ArrayList<Status>();
public int indexStatusList;
public String newComment
//getters and setters
public void insertComment() {
long statusID = findStatusID(statusList.get(indexStatusList));
statusDao.insert(this.newComment,statusID)
}
Let's debug together; assuming there are three statuses shown in the p:dataTable, click in the p:inputText which in the second status(index of 1), type "relax" and press the enter key.
In the debug console, it correctly shows "relax", but it finds the wrong status because indexStatusList has the value of 2 which belongs the last status in the p:statusList. It must be 1 which is the index of p:inputText that clicked on the dataTable row.
I think problem is about p:remoteCommand which takes the last index on the screen.
How it works?
Let's imagine there is a p:commandLink instead of p:remoteCommand and p:inputText:
<p:commandLink action=#{statusBean.insertComment>
<f:setPropertyActionListener target="#{statusBean.indexStatusList}"
value="#{indexStatusList}"></f:setPropertyActionListener>
This component successfully passes the indexStatusList as currently clicked one.
Conceptual problem in this solution lies in way how p:remoteCommand works. It creates JavaScript function whose name is defined in name attribute of p:remoteCommand. As you putted this in dataTable it will iterate and create JavaScript function called test as many times as there is rows in this table, and at the end last one will be only one. So, solution can be in appending index at the name of the remoteCommand but that is bad, because you will have many unnecessary JavaScript functions. Better approach would be to create one function an pass argument to it. So define remoteCommand outside of datatable:
<p:remoteCommand name="test" action="#{statusBean.insertComment}" update="statusRepeatPanel">
and call test function like this in your onkeypress event:
test([{ name: 'rowNumber', value: #{indexStatusList} }])
This will pass rowNumber parameter in your AJAX request. In backing bean's insertComment() method you can read this parameter and do with it anything you want:
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
Integer rowNumber = Integer.parseInt(map.get("rowNumber").toString());
NOTE: as you are updating panel in each row, maybe you can change update attribute of remoteCommand to #parent so this will work for all rows.
EDIT: You can update the specific panel in specific row with following code in Java method:
RequestContext.getCurrentinstance().update("form:dataTable:" + rowNumber + ":statusRepeatPanel")

pagination in jsf

I would like your comments and suggestion on this. I am doing the pagination for a page in jsf. The datatable is bound to a Backing Bean property through the "binding" attribute. I have 2 boolean variables to determine whether to render 'Prev' and 'Next' Button - which is displayed below the datatable. When either the 'Prev' or 'Next' button is clicked, In the backing bean I get the bound dataTable property and through which i get the "first" and "rows" attribute of the datatable and change accordingly. I display 5 rows in the page. Please comment and suggest if there any better ways. btw, I am not interested in any JSF Component libraries but stick to only core html render kit.
public String goNext()
{
UIData htdbl = getBrowseResultsHTMLDataTable1();
setShowPrev(true);
//set Rows "0" or "5"
if(getDisplayResults().size() - (htdbl.getFirst() +5)>5 )
{
htdbl.setRows(5);//display 5 rows
}else if (getDisplayResults().size() - (htdbl.getFirst() +5)<=5) {
htdbl.setRows(0);//display all rows (which are less than 5)
setShowNext(false);
}
//set First
htdbl.setFirst(htdbl.getFirst()+5);
return "success";
}
public String goPrev()
{
setShowNext(true);
UIData htdbl = getBrowseResultsHTMLDataTable1();
//set First
htdbl.setFirst(htdbl.getFirst()-5);
if(htdbl.getFirst()==0)
{
setShowPrev(false);
}
//set Rows - always display 5
htdbl.setRows(5);//display 5 rows
return "success";
}
Please comment and suggest if there any better ways.
Well, that gives not much to answer on. It's at least not the way "I" would do, if you're asking for that. Long story short: Effective datatable paging and sorting. You only need Tomahawk (face it, it has its advantages). But if you're already on JSF2+Facelets instead of JSF1+JSP, then you can in fact also use ui:repeat and #ViewScoped instead of t:dataList and t:saveState.
We can use 'Repeat' component - this is similar to dataList or dataTable component in Primefaces
<p:repeat id="repeatComponent" var="education" value="#{backingBean.educationList}" emptyMessage="No records found">
<h:panelGroup>
<p:outputLabel for="center" value="Education Center:" />
<br />
<h:panelGroup>
<h:outputText id="center" value="#{education.centerName}">
</h:outputText>
</h:panelGroup>
</h:panelGroup>
</p:repeat>
This is similar to for loop in java
var - this act as loop iterator
value - takes list object
emptyMessage - takes String value, will get displayed when passed list object is empty

Resources