Как отображать всплывающие окна с помощью текстового поля и кнопки при нажатии кнопки в jsf?

Question

Как отобразить всплывающее диалоговое окно с полем ввода и кнопкой при нажатии кнопки. Вот моя реализация ...

    <h:form name="calcDistanceform" widgetVar="selectedRowValuesDlg" style="margin:5px;" > 

           <h:inputText name="sourceDistance" value="#{searchController.sourceDistance}" /> 

           <h:commandButton value="Caliculate" class="popdistance" id="popdistancecalc" style="background-color:red;font-size:10px;font-weight:600"> 

            <p:ajax process="@this" update="" listener="#{searchController.calculateDistance}" /> 

           </h:commandButton> 

       </h:form> 


       <p:commandLink value="Get Distance" actionListener="#{searchController.onDistanceClick}" oncomplete="PF('selectedRowValuesDlg').show();" process="@this">   
         <f:attribute name="clinic" value="#{clinic}"/> 
       </p:commandLink> 

Answer 1

Используйте p:dialog компонент http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml

<p:dialog header="My Dialog" widgetVar="selectedRowValuesDlg"> 
    <h:form name="calcDistanceform" style="margin:5px;" > 
     <h:inputText name="sourceDistance" value="#{searchController.sourceDistance}" /> 

     <h:commandButton value="Caliculate" class="popdistance" id="popdistancecalc" style="background-color:red;font-size:10px;font-weight:600" action="#{searchController.calculateDistance}" update="@form" /> 
    </h:form> 
</p:dialog> 

<p:commandLink value="Get Distance" actionListener="#{searchController.onDistanceClick}" oncomplete="PF('selectedRowValuesDlg').show()" process="@this">   
     <f:attribute name="clinic" value="#{clinic}"/> 
</p:commandLink>