I try to make draggable components and to do this I am based on this example:
http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf
and i started with this example but the component does not give any indication that is draggable:
<!---------------- Indicator -------->
<rich:dragIndicator id="indicator" />
<h:form>
<table border="0">
<tr>
<td valign="top"><rich:panel>
<rich:tree>
...
</rich:tree>
</rich:panel></td>
<td valign="top"><rich:panel id="afficherTest">
<rich:dataGrid value="#{afficherTestBean.listTest}" var="test"
columns="2" elements="6" width="600px">
<rich:panel style="cursor: move">
<!---------------draggable Zone-------------------->
<rich:dragSupport dragIndicator=":indicator"
dragType="#{test.nomTest}" dragValue="#{test.nomTest}">
<rich:dndParam name="label" value="#{test.nomTest}" />
</rich:dragSupport>
<f:facet name="header">
<h:outputText value="#{test.categorie}"></h:outputText>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="Nom Test:" styleClass="label"></h:outputText>
<h:outputText value="#{test.nomTest}" />
<h:outputText value="Description Test:" styleClass="label"></h:outputText>
<h:outputText value="{test.description}" />
<a4j:commandLink value="Ajouter"></a4j:commandLink>
</h:panelGrid>
</rich:panel>
<f:facet name="footer">
<rich:datascroller></rich:datascroller>
</f:facet>
</rich:dataGrid>
</rich:panel></td>
</tr>
</table>
</h:form>
</html>
please help me to create draggable component,i need your help ):'
Related
I've tested the Example from Richfaces DragandDrop draging is working correctly, but every time i try to drop an element at the dropzone, it's being rejected.
<rich:dragIndicator id="indicator" />
<h:panelGrid columnClasses="panelc" columns="2" width="100%">
<rich:panel>
<f:facet name="header">
<h:outputText value="Verfügbare Spalten" />
</f:facet>
<h:dataTable id="src" columns="1"
value="#{columnBean.possibleColumns}" var="col">
<h:column>
<a4j:outputPanel
style="width:100px;border:1px solid gray;padding:2px"
onmouseover="this.style.cursor='move'" layout="block">
<rich:dragSupport dragIndicator=":indicator" dragType="#{columnBean.test}"
dragValue="#{col}">
<rich:dndParam name="label" value="#{col.label}" />
</rich:dragSupport>
<h:outputText value="#{col.label}" />
<!-- <br />
<h:selectBooleanCheckbox id="#{col.id}Possible"
value="#{col.rendered}"
style="width:100%;margin-left:auto; margin-right:auto" />-->
</a4j:outputPanel>
</h:column>
<f:facet name="footer">
<a4j:commandButton value="Reset" action="#{columnBean.reset}"
reRender="src,activeColumns" />
</f:facet>
</h:dataTable>
</rich:panel>
<h:panelGrid columns="3" width="100%">
<rich:panel style="width:90%">
<f:facet name="header">
<h:outputText value="Aktive Spalten" />
</f:facet>
<rich:dropSupport acceptedTypes="#{columnBean.test}"
dropListener="#{columnBean.processDrop}"
reRender="activeColumn,src">
</rich:dropSupport>
<h:dataTable id="activeColumns" columns="1"
value="#{columnBean.columns}" var="column">
<h:column>
<h:outputText value="#{column.label}"
style="border:1px solid gray" />
</h:column>
</h:dataTable>
</rich:panel>
</h:panelGrid>
</h:panelGrid>
When I look in my browsers-developertools i can see that acceptedType is empty.
Even if I set the dragType and the acceptedType as a String.
I speculate that this error has something to do with lifreay 6.2.3 interfering the setting. Am I right?
which pick data from DB (postgre),
this page first list the data in a list
then i have a commandlink "modificar" wich carry the data from the element clicked in a dialog
but i dont know why the commandbutton in this dialog doesnt invoke the method "DAOEventos.modificarEvento" ....
at the end i have a button that register data to the db from a dialog, this is OK works
the only problem i have is with the dialog comes from commandlink!
i made a debug and the problem is with "p:calendar" if i kick that, the method was invoked, but i need that value from the calendar!
<h:body>
<h:form id="form">
<p:dataTable style="width:100%" value="#{DAOEventos.listaEventos()}" var="even" >
<f:facet name="header">Listado de Eventos</f:facet>
<p:column filterBy="#{even.descripcion}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Evento"/>
</f:facet>
<h:outputText value="#{even.descripcion}"></h:outputText>
</p:column>
<p:column filterBy="#{even.fec}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Fecha"/>
</f:facet>
<h:outputText value="#{even.fec}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Modificar"/>
</f:facet>
<p:commandLink value="Modificar" oncomplete="dlg2.show();"
update="modalDialog2" action="#{beanEventos.traerDatos()}" style="color: black">
<f:setPropertyActionListener target="#{beanEventos.codEvento}" value="#{even.codEvento}" />
<f:setPropertyActionListener target="#{beanEventos.codSec}" value="#{even.codSec}" />
</p:commandLink>
<p:dialog id="modalDialog2" header="Modificar Eventos" widgetVar="dlg2" dynamic="true" resizable="false">
<h:form>
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento"/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento"/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha Evento"/>
<p:calendar value="#{beanEventos.fec}"
showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:selectBooleanCheckbox value="#{beanEventos.vigencia}"/>
<h:outputText value="Vigencia" style="font-weight:bold"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Modificar" action="#{DAOEventos.modificarEvento()}" />
</td>
</tr>
</table>
</h:form>
</p:dialog>
</p:column>
</p:dataTable>
<p/>
<p:commandButton id="showDialogButton" value="Agregar" oncomplete="dlg.show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false" id="dialogo" >
<h:form>
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento "/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento "/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha de Evento"/>
<p:calendar value="#{beanEventos.fec}" id="cal" showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Registrar Evento"
action="#{DAOEventos.insertarEvento()}"/>
</td>
</tr>
</table>
</h:form>
</p:dialog>
</h:form>
</h:body>
You are nesting one HTML form inside another HTML form which is not a valid concept in HTML. Even if you doing this in JSF ultimate rendering component will be HTML only.So, remove
<h:form id="form"> from your code or try to keep all the above code inside single form.
Check here :
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
As SrinivasR said, you shouldn't (although this may work fine) nest forms.
But I think the issue here is with the place where you are defining your:
<p:dialog id="modalDialog2">...</p:dialog>
You should put it outside the datatable.
<h:body>
<h:form id="form">
<p:dataTable style="width:100%" value="#{DAOEventos.listaEventos()}" var="even" >
<f:facet name="header">Listado de Eventos</f:facet>
<p:column filterBy="#{even.descripcion}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Evento"/>
</f:facet>
<h:outputText value="#{even.descripcion}"></h:outputText>
</p:column>
<p:column filterBy="#{even.fec}" filterMatchMode="contains">
<f:facet name="header">
<h:outputLabel value="Fecha"/>
</f:facet>
<h:outputText value="#{even.fec}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Modificar"/>
</f:facet>
<p:commandLink value="Modificar" oncomplete="dlg2.show();"
update=":padding" actionListener="#{beanEventos.traerDatos()}" style="color: black">
<f:setPropertyActionListener target="#{beanEventos.codEvento}" value="#{even.codEvento}" />
<f:setPropertyActionListener target="#{beanEventos.codSec}" value="#{even.codSec}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
<p/>
<h:panelGroup id="padding" layout="block">
<p:dialog id="modalDialog2" header="Modificar Eventos" widgetVar="dlg2" dynamic="true" resizable="false">
<h:form id="form2">
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento"/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento"/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha Evento"/>
<p:calendar value="#{beanEventos.fec}"
showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:selectBooleanCheckbox value="#{beanEventos.vigencia}"/>
<h:outputText value="Vigencia" style="font-weight:bold"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Modificar" action="#{DAOEventos.modificarEvento()}" />
</td>
</tr>
</table>
</h:form>
</p:dialog>
</h:panelGroup>
<h:form id="form3">
<p:commandButton id="showDialogButton" value="Agregar" oncomplete="dlg.show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false" id="dialogo" >
<table>
<tr>
<td>
<h:outputLabel value="Nombre Evento "/>
<h:inputText id="nombre" value="#{beanEventos.nombre}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Descripcion Evento "/>
<h:inputText id="desc" value="#{beanEventos.descripcion}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Fecha de Evento"/>
<p:calendar value="#{beanEventos.fec}" id="cal" showButtonPanel="true"/>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Registrar Evento"
action="#{DAOEventos.insertarEvento()}"/>
</td>
</tr>
</table>
</p:dialog>
</h:form>
I am having trouble updating components in primefaces. Here is one example:
<h:form>
<p:panel style="width: 350px;" header="Partial Process">
<p:dataTable id="tablaPersonas" var="per" value="#{manejador.lista}">
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Nombre" />
</f:facet>
<h:outputText value="#{per.nombre}" />
</p:column>
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Apellido" />
</f:facet>
<h:outputText value="#{per.apellido}" />
</p:column>
<p:column headerText="Editar" style="text-align: center;">
<p:commandButton value="Editar"/>
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton value="Abrir" onclick="widgetDlgAgregar.show();"/>
<p:dialog header="Agregar" widgetVar="widgetDlgAgregar" width="250" height="150" closable="true">
<h:panelGrid id="gridAdd" columns="2">
<h:outputLabel value="Nombre:"/>
<p:inputText value="#{manejador.auxiliarAgregar.nombre}"/>
<h:outputLabel value="Apellido:"/>
<p:inputText value="#{manejador.auxiliarAgregar.apellido}"/>
<p:commandButton oncomplete="widgetDlgAgregar.hide();" update="tablaPersonas,gridAdd" value="Agregar" actionListener="#{manejador.agregarPersona}"/>
</h:panelGrid>
</p:dialog>
</h:form>
As you see, I click on a CommandButton called "Abrir" and a Dialog opens with "Agregar" as title. I fill in the input boxes and when I click the CommandButton "Agregar", the DataTable isn't updated. Why is this happening?
Oh sorry i think you forgot this update
try this it should work
<h:form prependId="false">
<p:panel style="width: 350px;" header="Partial Process">
<p:dataTable id="tablaPersonas" var="per"
value="#{manejador.lista}">
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Nombre" />
</f:facet>
<h:outputText value="#{per.nombre}" />
</p:column>
<p:column style="text-align: center;">
<f:facet name="header">
<h:outputText value="Apellido" />
</f:facet>
<h:outputText value="#{per.apellido}" />
</p:column>
<p:column headerText="Editar" style="text-align: center;">
<p:commandButton value="Editar" />
</p:column>
</p:dataTable>
</p:panel>
<p:commandButton value="Abrir" onclick="widgetDlgAgregar.show();" update="gridAdd" />
<p:dialog header="Agregar" widgetVar="widgetDlgAgregar" width="250"
height="150" closable="true">
<h:panelGrid id="gridAdd" columns="2">
<h:outputLabel value="Nombre:" />
<p:inputText value="#{manejador.auxiliarAgregar.nombre}" />
<h:outputLabel value="Apellido:" />
<p:inputText value="#{manejador.auxiliarAgregar.apellido}" />
<p:commandButton oncomplete="widgetDlgAgregar.hide();"
update="tablaPersonas,gridAdd" value="Agregar"
actionListener="#{manejador.agregarPersona}" />
</h:panelGrid>
</p:dialog>
</h:form>
try to put your
<p:dialog header="Agregar" widgetVar="widgetDlgAgregar" width="250" height="150" closable="true">
outside the form and add prependId="false" to your form <h:form prependId="false" >
Command button onclick event is not working its not invoking Banking bean Method. There are some other commandButtons like
action="#{editBean.editQuestionAction}"
action="#{editBean.addNewQuestionAction}"
were working fine but its not in the case of `action="#{editBean.updateQuestionAction}"
<p:tab title="Questions">
<h:outputText value="Select a project to add questions: " />
<h:selectOneMenu id="projects_dpd" value="#{editBean.currentProject.projectId}" onchange="">
<f:selectItems value="#{projectBean.projects}" />
</h:selectOneMenu><br/>
<h:form id="listForm">
<p:panel id="listPanel" header="List of Questions" toggleable="false" closable="false">
<p:dataList paginatorAlwaysVisible="false" paginatorPosition="bottom" effect="slide"
value="#{editBean.editBeanList}" var="q"
paginator="true" rows="5" effectSpeed="fast"
paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:column>
<p:commandButton action="#{editBean.**editQuestionAction**}" update="editPanel" title="Edit Question" image="edit">
<f:setPropertyActionListener value="#{q}" target="#{editBean.editQuestion}" />
</p:commandButton>
<p:spacer width="30" height="30" />
<h:outputText value="#{q.question.questionId} -> #{q.question.questionText} ->"/> <b><h:outputText value="#{q.question.questionType}" /></b>
</p:column>
</p:dataList>
<p:commandButton value="New Question !!" action="#{editBean.**addNewQuestionAction**}" update="editPanel" />
<p:commandButton ajax="false" value="Home Page !!" action="#{indexBean.**gotoHomePage}**" />
</p:panel>
</h:form>
<p:layoutUnit position="center" scrollable="true">
<p:panel id="editPanel" header="Edit Section" toggleable="false" closable="false" >
<h:form id="form">
<table cellspacing="20">
<tr>
<td><h:outputLabel value="Question Text:" /></td>
<td><p:inputTextarea id="questionText" required="true" value="#{editBean.editQuestion.question.questionText}" autoResize="true" effectDuration="400" maxHeight="100" /></td> <td><p:message for="questionText" /></td>
</tr>
<tr>
<td>Review:</td>
<td><p:inputTextarea id="reviewText" required="true" value="#{editBean.editQuestion.question.reviewText}" autoResize="true" effectDuration="400" maxHeight="100" /></td>
<td><p:message for="reviewText" /></td>
</tr>
<tr>
<td>Option Type:</td>
<td>
<h:selectOneRadio label="Option Type" value="#{editBean.editQuestion.question.optionType}">
<f:selectItem itemLabel="Currency" itemValue="currency" />
<f:selectItem itemLabel="Hours" itemValue="hours" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>Question Type:</td>
<td>
<h:selectOneRadio label="Question Type" value="#{editBean.editQuestion.question.questionType}">
<f:selectItem itemLabel="Mandatory" itemValue="mandatory" />
<f:selectItem itemLabel="Linked" itemValue="linked" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td align="right">
<h:selectBooleanCheckbox label="Hide Weight until Review !!" value="#{editBean.editQuestion.question.hideWeight}" />
</td>
<td>Hide Weight Until Review</td>
</tr>
<tr>
<td>Options:</td>
<td>
<p:panel header="Add Option">
<h:panelGrid columns="2" id="grid">
<h:outputLabel value="Text : " for="txt_title"></h:outputLabel>
<p:inputText id="txt_title"
value="#{editBean.placeHolderForOption.optionText}" />
<h:outputLabel value="Weight : " for="txt_author"></h:outputLabel>
<p:inputText id="txt_author"
value="#{editBean.placeHolderForOption.weight}" />
<p:commandButton value="Reset" type="reset"/>
<p:commandButton value="Add" update="options #parent"
action="#{editBean.initOption}" >
<p:collector value="#{editBean.placeHolderForOption}"
addTo="#{editBean.editQuestion.options}" />
</p:commandButton>
</h:panelGrid>
</p:panel>
<p:outputPanel id="options">
<p:dataTable value="#{editBean.editQuestion.options}" var="opt">
<p:column headerText="Text" style="width:150px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{opt.optionText}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{opt.optionText}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Weight" style="width:150px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{opt.weight}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{opt.weight}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Linked Question" style="width:150px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{opt.linkedQuestionId}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{opt.linkedQuestionId}">
<f:selectItems value="#{editBean.linkedQuestionIds}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Display Order" style="width:150px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{opt.displayOrder}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{opt.displayOrder}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Operation" />
</f:facet>
<p:commandLink value="Remove" update="form:options" process="#this">
<p:collector value="#{opt}"
removeFrom="#{editBean.editQuestion.options}" />
</p:commandLink>
<p:spacer width="10" />
<p:rowEditor />
</p:column>
</p:dataTable>
</p:outputPanel>
</td>
</tr>
</table>
<p:commandButton ajax="false" value="Update Question" action="#{editBean.updateQuestionAction}"
rendered="#{editBean.operation eq 'edit'}" />
<p:commandButton ajax="false" value="Add Question" update="msgs listForm:listPanel" action="#{editBean.saveQuestion}"
rendered="#{editBean.operation eq 'add'}">
<p:collector value="#{editBean.editQuestion}"
addTo="#{editBean.editBeanList}" />
</p:commandButton>
<p:commandButton ajax="false" value="Delete Question" update="msgs listForm:listPanel" action="#{editBean.deleteQuestionAction}"
rendered="#{editBean.operation eq 'edit'}">
<p:collector value="#{editBean.editQuestion}"
removeFrom="#{editBean.editBeanList}" />
</p:commandButton>
</h:form>
</p:panel>
</p:layoutUnit>
</p:tab>
Its not getting executing when i click on button
#ManagedBean
#RequestScoped
public class EditBean {
#ManagedProperty(value = "#{questionDao}")
private QuestionDao questionDao;
private String operation;
private QuestionHelper editQuestion;
private SelectItem[] linkedQuestionIds;
private List<QuestionHelper> linkedQuestions = new ArrayList<QuestionHelper>();
private List<QuestionHelper> allQuestions = new ArrayList<QuestionHelper>();
public void editQuestionAction() {
operation = "edit";
}
public void deleteQuestionAction() {
questionDao.delete(editQuestion.getQuestion());
listBean.getListOfQuestions().remove(editQuestion);
addNewQuestionAction();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Question: ", "Question Deleted !"));
}
public void updateQuestionAction() {
editQuestion.getQuestion().getOptionses().clear();
for (Options o : editQuestion.getOptions()) {
o.setQuestions(editQuestion.getQuestion());
editQuestion.getQuestion().getOptionses().add(o);
}
getQuestionDao().update(editQuestion.getQuestion());
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Question: ", "Question Updated !"));
}
Hi I found answer for my question, The command button is not working because of rendered tag and Request scope of managed bean , as on every subsequent request after pressing command button my request scoped (iseditable ) is getting resetting. When i made it Session scoped its working Fine.
I use jsf 1.2, richfaces 3.3.2 .
For some reason my suggestionbox submits the value i typed (a.k.a suggestion string) and not what i clicked in the suggested list that opens. How do i fix this?
<h:panelGroup>
<a4j:region renderRegionOnly="false" >
<h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0">
<h:inputText value="#{ManualReportControl.street}" id="streetNames" style="width:120px;" >
<a4j:support event="onchange" reRender="streetGis" ></a4j:support>
</h:inputText>
<h:graphicImage value="/images/icons/arrow.png"
onclick="#{rich:component('suggestionBoxStreet')}.callSuggestion(true)"
alt="" />
</h:panelGrid>
<rich:suggestionbox id="suggestionBoxStreet" for="streetNames"
suggestionAction="#{ManualReportControl.autocomplete}"
var="street"
minChars="2" >
<h:column>
<h:outputText value="#{street}" />
</h:column>
</rich:suggestionbox>
</a4j:region>
</h:panelGroup>
Got it!
I moved a4j:support from inputText to suggestionBox and now it works.
The code:
<h:panelGroup id="streetNames">
<a4j:region renderRegionOnly="false" >
<h:panelGrid columns="3" border="0" cellpadding="0" cellspacing="0">
<coral:inputString value="#{ManualReportControl.street}" id="streetName" style="width:120px;" tabindexreal="13"/>
<h:graphicImage value="/images/icons/arrow.png"
onclick="#{rich:component('suggestionBoxStreet')}.callSuggestion(true)"
alt="" />
</h:panelGrid>
<rich:suggestionbox id="suggestionBoxStreet" for="streetName"
suggestionAction="#{ManualReportControl.autocomplete}"
var="street"
minChars="2" selfRendered="true" >
<h:column>
<h:outputText value="#{street}" />
</h:column>
<a4j:support event="onselect" reRender="streetGis" ></a4j:support>
</rich:suggestionbox>
</a4j:region>
</h:panelGroup>
Probably happening because onchange event is fired before the selection is made.