ace:dataTable - Clear selection in rowSelectListener - jsf

I'm using a ace:dataTable to display a list. When the user clicks a row, a detail popup is shown. What I'm trying to achieve is that the click has no effect on the selection of rows.
This is my code:
public void rowSelected(SelectEvent event) {
DataTable dataTable = (DataTable)event.getComponent();
dataTable.getStateMap().setAllSelected(false);
// Show Popup etc
// Prints an empty list
System.out.println(dataTable.getStateMap().getSelected());
}
The popup is shown, but the selection ist still there. Any Ideas?

<ace:dialog id="dialogid"
header="Header" widgetVar="nodeDialog"
modal="true" draggable="false" showEffect="true" hideEffect="true"
relativePosition="center center">
---dialog contnent---
</ace:dialog>
public void rowSelected(SelectEvent event) {
DataTable dataTable = (DataTable)event.getComponent();
dataTable.getStateMap().setAllSelected(false);
// Show Popup etc
JavascriptContext.addJavascriptCall(facesContext(), "nodeDialog.show();");
// Prints an empty list
---writwe to the dialog contnent---
System.out.println(dataTable.getStateMap().getSelected());
}

Related

ICEfaces (JSF) 3.3.0 SelectInputText Enter Key doesn't select the Item from the list

I am having some issues with ICEfaces 3.3.0 SelectInputText.
Following scenarios:
scenario 1:
typing "d" in the entry
I get the list of the SelecItems. (Dummy, dummy2 ...)
now when I select "Dummy" by clicking it with the left mouse key, the value aissigned to selectInputText.value is set to Dummy (expected behavior)
scenario 2:
typing "d" in the entry
I get the list of the SelecItems. (Dummy, dummy2 ...)
now when I select "Dummy" by scrolling with the courser-key on it and press Enter Key, I get the value set to "d" and not Dummy.?
scenario 3:
typing "d" in the entry
I get the list of the SelecItems. (Dummy, dummy2 ...)
now when I select "Dummy" by scrolling with the courser-key on it and press Ctrl + Enter Key, I get the value set to "Dummy". expected behavior.
I also add a actionListener to the selectInputText.actionListener to see what is going on:
in case of scenario 2 the actionListener called two times: checking the value in the first actionListener contains "d" and second following call contains "Dummy"
I know when you don't select anything from the drop-list and press the Enter-key, the value is set to the text entered in the selectInputText, which is also a expected behavior and is as documented, but in my case scenario 2
Why does the actionListener called two times? That is, the item is not selected by pressing Enter key at the first call?
Is this a Bug or did I miss something?
Thanks in advance!
Here is the code:
<ice:selectInputText
value="#{controller.selectedText}"
actionListener="#{controller.doSubmitText}"
textChangeListener="#{controller.textChangedEvent}"
rows="0"
width="300"
listVar="person"
listValue="#{controller.persons}">
<f:facet name="selectInputText">
<h:panelGrid id="f"
columns="2" width="100%"
columnClasses="col75,col25">
<ice:outputLabel value="#{person.name}"/>
<ice:outputLabel value="#{person.username}"/>
</h:panelGrid>
</f:facet>
</ice:selectInputText>
and here is the related part of the Bean (scope=session)
private List<SelectItem> persons;
public List<SelectItem> getPersons() {
return persons;
}
public void setPersons(List<SelectItem> persons) {
this.persons= persons;
}
private String selectedText = null;
public String getSelectedText() {
return selectedText;
}
public void setSelectedText(String selectedText) {
this.selectedText = selectedText;
}
public void textChangedEvent(TextChangeEvent ev) {
personlist = getfilteredList(ev.getNewValue().toString());
}
public void doSubmitText(ActionEvent event) {
System.out.println(selectedText);
}
The reason for your Scenario 2 behavior are the IceFaces Life Cycles and how events are processed. Listeners are alwayes called two times.
Considering you are using this code in a listener, its execution has been triggered by an event. Events have a phase which tell the framework in which part of the lifecycle you want them to be processed
You can read some more about the Lifecycles by googleing "JSF lifecycle"
For your special "problem" you have to check correct phase and set the value (put this at the beginnig of your listener method):
if (!event.getPhaseId().equals(PhaseId.INVOKE_APPLICATION)) {
event.setPhaseId(PhaseId.INVOKE_APPLICATION);
event.queue();
return true;
}

dataTable does not show newly added item after save

I have a simple form using primefaces and JSF. On clicking save, it displays another jsf page where I have a primefaces datatable. It should display the newly created record in the datatable which is not the case. In order to see the new record, I have to go back to another page, then reopen the page where I have the datatable. And I can see the new record. How to solve this issue such that on clicking save I can see the new record?
<p:dataTable id="dta" value="#{CarComponent.listCars}" var="current" rows="15" paginator="true" paginatorPosition="bottom">
</dataTable>
//method where listCars is populated
public String carLists(){
listCars = new arrayList(carDao.findAll());
return "/jsf/listOfcars.xhtml";
}
//save method - on clicking save it should display the datatable
public String save(Cars car){
carService.save(car);
return "/jsf/listOfcars.xhtml";
}
public String getlistCars() {
return listCars;
}
public void setlistCars(String listCars) {
this.listCars = listCars;
}
I can only guess, but I assume that the CarService class is at least ViewScoped or even SessionScoped? In either way, as Fritz said in the comment, the list of cars is obviously not updated since the view is not re-rendered.
You can either do a redirect with return "/jsf/listOfCars.xhtml?faces-redirect=true" if the bean is #ViewScoped, or you have to add the newly generated car to the list of cars like
public String saveCar(Car car) {
carService.save(car);
listCars.add(car);
return "/jsf/listOfCars.xhtml";
}

Display a menu when clicking on an Image

I want to create a primefaces menu component programmatically, here is the xhtml tag:
<p:menu model="#{notificationMenu.model}" />
and here is the spring component associated:
#Component
#Scope("session")
#Qualifier("notificationMenu")
public class NotificationMenu {
#Autowired
NotificationService notificationService;
private MenuModel model;
#PostConstruct
public void createMenuModel() {
List<Notification> listNotifs = notificationService.getAllUnreadNotifsForUser(LoginBean.getConnectedUser());
model = new DefaultMenuModel();
DefaultSubMenu subMenu = new DefaultSubMenu();
for (Notification notification : listNotifs) {
DefaultMenuItem item = new DefaultMenuItem();
item.setValue(notification.getTypenotification().getTypenotif());
item.setUrl("/user/index.xhtml");
subMenu.addElement(item);
}
model.addElement(subMenu);
}
public MenuModel getModel() {
return model;
}
}
I'd like to programmatically associated this menu to a graphical image (like a notification image), so that when the user click on the image the menu is shown... is it possible?
EDIT :
I want the menu to be displayed under the image and disappear on Blur (clicking outside the image).
Overlay Menu
A dynamic menu is created by setting overlay option to true and defining a trigger to show the
menu. Location of menu on page will be relative to the trigger and defined by my and at options
that take combination of four values:
left
right
bottom
top
That said:
<p:menu overlay="true" trigger="img"
my="left top"
at="bottom left"
model="#{notificationMenu.model}" />
<p:graphicImage id="img" />

Anchor/JumpTo in JSF

I use JSF + Primefaces 3.2.1.
There is an p:datatable on the page, in each row I have button "Edit". When I click that button, in the footer of the page renders a form for editing that row. Then I need to scroll down there to change values..
But I need the browser to scroll there automatically after clicking on "Edit" button like Anchors in basic HTML work.
I found this decision:
FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");
It works, but with that my update="#form" not working.. So the form in the bottom not renders. It renders after refreshing page.
How can I do it with p:commandButton or h:commandButton ?)
My button:
<p:commandButton id="providerEdit" actionListener="#{providersPriceAppointment.setEditProvider(provider.id)}" icon="iconEdit" update="#form"/>
Bean method:
public void setEditProvider(int id) throws IOException {
for (int i = 0; i < providersList.size(); i++) {
ProvidersExt p = providersList.get(i);
if (p.getId() == id) {
providerForEdit = p;
break;
}
}
enableEdit = true;
FacesContext.getCurrentInstance().getExternalContext().redirect("pProvidersPriceAppointment.xhtml#anchor1");
}
Form in the footer:
<a name="anchor1"/>
<p:fieldset id="editFieldset" legend="blablabla" rendered="#{providersPriceAppointment.enableEdit}"/>
...
</p:fieldset>
There isn't something like this implemented in JSF or Primefaces yet. But since you have the jQuery Framework running in your application (Primefaces), you could use the jQuery Animate features.
To get a Hint on how to realize something like this, you could check out this answer:
jQuery scroll to Element
For your application that would be somehow like that:
Add this to your <head> element:
function scrollToAnchor() {
jQuery('html, body').animate({
scrollTop: jQuery("#editFieldset").offset().top
}, 2000);
}
And this would be the Button Part:
<p:commandButton id="providerEdit"
actionListener="# {providersPriceAppointment.setEditProvider(provider.id)}"
icon="iconEdit" onComplete="scrollToAnchor();" update="#form"/>
Use PrimeFaces RequestContext with scrollTo to target a component id:
https://www.primefaces.org/showcase/ui/misc/requestContext.xhtml
public void save() {
RequestContext context = RequestContext.getCurrentInstance();
...
//scroll to panel
context.scrollTo("form:panel");
Simple decision that I found on PrimeFaces ShowCase:
<p:fieldset id="edit" legend="Here you can edit.." rendered="#{providersPriceAppointment.enableEdit}">
<p:focus context="panel"/>
</p:fieldset>
When this fieldset is rendered, browser simply jump to this place)
https://www.primefaces.org/showcase/ui/misc/focus.xhtml
Hope, somebody will find this helpful (",)

Get tabs of Tabview in Javascript

I have a tabview on page and add tabs with javascript dynamically. At the same time add the opened tab names to a list(lstOpenedPages). But close a tab, I can't get name of this tab which is closed for delete from the list. Now I want to read remain tabs of tabview because I can find which tab is closed from the list (lstOpenedPages).
How to I get remain tabs of tabview in Javascript?
xhtml code
<p:tabView id="tw" widgetVar="tw">
<p:ajax event="tabClose" listener="#{MenuBean.onTabClose}"/>
</p:tabView>
<p:menuitem value="#{itemMenu.menuAck}"
action="#{MenuBean.OpenPage(itemMenu.pageName)}"
ajax="true"
oncomplete="handleTabViewEvent(args);"
/>
<script type="text/javascript">
function handleTabViewEvent(args) {
alert('Add tab here..');
}
</script>
bean
public void OpenPage(String pageName) {
lstOpenedPages.add(pageName);
}
public void onTabClose(TabCloseEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
TabView tw = (TabView)context.getViewRoot().findComponent("centerForm:tw");
String s = "I must delete tab here from lstOpenedPages which closed. But event does not give me tab information. It is always null. So I must be delete from javascript";
}

Resources