i'm using jsf 2.2 primefaces 6.0 and i'm trying to add "pt:data-tooltip" on my commandButton but it seems that this attribute is unknown.I need help to make it acceptable.
Here the xhtml code of all the xhtml page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<ui:composition template="/facelets/template.xhtml">
<ui:define name="content">
<ul class="breadcrumb">
<li><i class="ace-icon fa fa-home home-icon"></i> Acceuil</li>
<li class="active">espace Administrateur</li>
</ul>
<!-- /.breadcrumb -->
</ui:define>
<ui:define name="pageContent">
<h:form id="form">
<p:panel header="ajouter Acte Médical">
<p:messages />
<p:panelGrid id="pan" columns="3">
<p:outputLabel value="Type acte medical *:" />
<p:inputText value="#{acteBean.acteMedical.typeActe}" id="input1"
placeholder="Type de l'acte médical" required="true"
requiredMessage="indiquez une valeur">
<f:validator validatorId="av" />
<p:ajax event="blur" update="button" process="#form"/>
</p:inputText>
<p:message id="m1" for="input1" />
<p:outputLabel value="Plafond *:" />
<p:inputNumber id="i1" value="#{acteBean.acteMedical.plafond}"
symbol=" DT" symbolPosition="s" placeholder="Plafond total"
decimalSeparator="," thousandSeparator="."
disabled="#{not empty acteBean.acteMedical.pourcentage}">
<f:ajax event="keyup" render="i2" />
</p:inputNumber>
<p:message id="m2" for="i1" />
<p:outputLabel value="Pourcentage des frais de remboursement *:" />
<p:inputNumber id="i2" value="#{acteBean.acteMedical.pourcentage}"
placeholder="% des frais de remboursements" symbolPosition="s"
symbol="%" disabled="#{not empty acteBean.acteMedical.plafond}">
<f:ajax event="keyup" render="i1" />
</p:inputNumber>
<p:message id="m3" for="i2" />
<p:commandButton value="Sauvegarder" id="button" disabled="#{not facesContext.postback or facesContext.validationFailed}"
style="background:#6FDC6F;color: #FFFFFF"
styleClass="customStyleButton" action="#{acteBean.doAddActe()}"
update="#form:pan">
<p:confirm header="Confirmation" message="Êtes-vous sûr?"
icon="ui-icon-alert" />
</p:commandButton>
<p:commandButton value="Actualiser" action="#{acteBean.reset()}"
style="background:#FF0000; color: #FFFFFF"
styleClass="customStyleButton" update="#form:pan" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
You forgot to add the 'pt' namespace declaration
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
And you are not using the jsf 2.2 namespace declarations for the jsf components either but the older ones
Related
the xhtml file is getting a Integer parameter which is saved as deck_id. In that xhtml file it is used normally and it works as in the header but when i want to combine it with a <p:commandbutton> the param goes to null. I dont know why and I have no idea how to solve it.
As i am new in programming and that is my first project I am lost right now and hours of google didnt help.
the deck_id works fine in #{deckListController.getDeckByDeckId(deck_id).name} but doesnt work anymore at
<p:commandButton oncomplete="PF('newCardDialog').show()"
icon="pi pi-plus" value="new card" title="New">
-->
By pressing the New Card Button i just added a function which prints the deck_id (as u can see in the newCardDialog) in the console and it prints 0 but it should be the ID of the given deck.
xhtml file deck-detail view
<ui:param name="deck_id" value="#{param['deck_id']}"/>
<ui:define name="content">
<h1>Cards of
#{deckListController.getDeckByDeckId(deck_id).name}</h1>
<div class="deck-detail">
<!-- TODO: ADD NEW CARD -->
<h:form id="newCardForm">
<div class="txt-r">
<!-- TODO: only see for the creator of the deck -->
<!-- one Problem -> deckId somehow is null -> exception becaus of unboxing null is wrong -->
<p:commandButton oncomplete="PF('newCardDialog').show()"
icon="pi pi-plus" value="new card" title="New">
<!-- rendered="#{deckListController.getDeckByDeckId(param['deck_id']).createUser == sessionInfoBean.currentUser}"> -->
</p:commandButton>
<p:commandButton oncomplete="PF('deckEditDialog').show()"
icon="pi pi-pencil" value="edit deck" title="Edit" styleClass="btn-light">
<f:setPropertyActionListener
value="#{deckListController.getDeckByDeckId(deck_id)}"
target="#{deckDetailController.deck}" />
</p:commandButton>
</div>
<br />
<!-- new Card dialog -->
<p:dialog header="Create new Card" id="newCardDialog"
widgetVar="newCardDialog" modal="true" showEffect="fade"
hideEffect="fade" resizable="false" width="400">
<p:outputPanel id="newCardData">
<p:messages id="messages" closable="true" autoUpdate="true" />
<h:panelGrid columns="2">
<p:outputLabel for="cardContentFront" value="Question: " />
<!-- TODO: required field check is not working yet -->
<p:inputTextarea id="cardContentFront"
value="#{newCardController.card.contentFront}" required="true"
requiredMessage="Question of card is required" />
<p:outputLabel for="cardContentBack" value="Answer: " />
<p:inputTextarea id="cardContentBack"
value="#{newCardController.card.contentBack}" required="true"
requiredMessage="Answer of card is required" />
</h:panelGrid>
<p:separator />
<h:panelGrid columns="2">
<p:outputLabel for="flipped" value="Flipped: " />
<p:selectBooleanCheckbox id="flipped"
value="#{newCardController.card.flipped}" />
</h:panelGrid>
<p:separator />
<h:panelGrid columns="3">
<p:commandButton value="Cancel"
onclick="PF('newCardDialog').hide()" styleClass="btn-light" />
<!-- TODO: after create refreshing of the table -->
<p:commandButton value="Create"
actionListener="#{cardListController.print(deck_id)}"
oncomplete="PF('newCardDialog').hide()" />
<!-- action="#{newCardController.doCreateCard(deck_id)}" -->
<!-- update="cardForm" /> -->
</h:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- Edit deck dialog -->
<p:dialog header="Edit #{deckListController.getDeckByDeckId(param['deck_id']).name}" id="deckEditDialog"
widgetVar="deckEditDialog" modal="true" showEffect="fade"
hideEffect="fade" resizable="false" width="400">
<p:outputPanel id="deckData" rendered="#{ empty deckDetailController.deck}">
<h:panelGrid columns="2">
<p:outputLabel for="name" value="Deck Name: " />
<p:inputText id="name" disabled="false" />
<p:outputLabel for="description" value="Desription: " />
<p:inputTextarea id="description" disabled="false" />
</h:panelGrid>
<h:panelGrid columns="2">
<p:outputLabel for="public" value="Public: " />
<p:selectBooleanCheckbox id="public" />
</h:panelGrid>
<h:panelGrid columns="3">
<p:commandButton value="Cancel"
onclick="PF('deckEditDialog').hide()" styleClass="btn-light" />
<p:commandButton value="Reload"
update=":cardForm:cardView"
styleClass="btn-light" />
<p:commandButton value="Save"
oncomplete="PF('deckEditDialog').hide()"
update=":cardForm:cardView" />
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
<h:form id="cardForm">
<p:dataGrid id="cardView" var="card"
value="#{cardListController.getEnabledCardsOfOneDeckByDeckId(deck_id)}"
columns="4" paginator="false">
<p:dataViewGridItem>
<h3 class="card-name">Question:</h3>
<div class="card-grid-item-content">
<p class="card-contentFront">#{card.contentFront}</p>
</div>
<div class="open-btns txt-r">
<!-- TODO: edit and delete button in Progress -->
<p:commandButton update=":cardForm:cardEditDialog"
oncomplete="PF('cardEditDialog').show()"
type="button" title="edit" value="edit" styleClass="btn-light"
rendered="#{card.createUser == sessionInfoBean.currentUser}">
<f:setPropertyActionListener value="#{card}"
target="#{cardDetailController.card}" />
</p:commandButton>
<p:commandButton title="delete"
action="#{cardDetailController.doDisableCard}"
rendered="#{card.createUser == sessionInfoBean.currentUser}">
<f:setPropertyActionListener value="#{card}"
target="#{cardDetailController.card}" />
<p:confirm header="Confirmation"
message="Are you sure you want do delete this card?"
icon="pi pi-exclamation-triangle" />
</p:commandButton>
</div>
</p:dataViewGridItem>
</p:dataGrid>
<!-- Edit card dialog -->
<p:dialog header="Edit Card" id="cardEditDialog"
widgetVar="cardEditDialog" modal="true" showEffect="fade"
hideEffect="fade" resizable="false" width="400">
<p:outputPanel id="cardData"
rendered="#{not empty cardDetailController.card}">
<h:panelGrid columns="2">
<p:outputLabel for="contentFront" value="Question: " />
<p:inputText id="contentFront"
value="#{cardDetailController.card.contentFront}"
disabled="false" />
<p:outputLabel for="contentBack" value="Answer: " />
<p:inputTextarea id="contentBack"
value="#{cardDetailController.card.contentBack}"
disabled="false" />
</h:panelGrid>
<h:panelGrid columns="3">
<p:commandButton value="Cancel"
onclick="PF('cardEditDialog').hide()" styleClass="btn-light" />
<p:commandButton value="Reload"
action="#{cardDetailController.doReloadCard()}"
update=":cardsForm:cardView" styleClass="btn-light" />
<p:commandButton value="Save"
action="#{cardDetailController.doSaveCard()}"
oncomplete="PF('cardEditDialog').hide()"
update=":cardForm:cardView" />
</h:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- Deletion confirmation dialog -->
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
width="300">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes btn-light" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</h:form>
</div>
</ui:define>
</ui:composition>
xhtml file where the param is given to deck-detail view
<ui:composition xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<div class="personal-decks">
<h:form id="newDeckForm">
<div class="txt-r">
<p:commandButton oncomplete="PF('newDeckDialog').show()"
icon="pi pi-plus" value="new deck" title="New" />
</div>
<br />
<!-- NEW deck dialog-->
<p:dialog header="Create new Deck" id="newDeckDialog"
widgetVar="newDeckDialog" modal="true" showEffect="fade"
hideEffect="fade" resizable="false" width="400">
<p:outputPanel id="newDeckData">
<p:messages id="messages" closable="true" autoUpdate="true" />
<h:panelGrid columns="2">
<p:outputLabel for="deckName" value="Deck Name: " />
<!-- TODO: required field check is not working yet -->
<p:inputText id="deckName" value="#{newDeckController.deck.name}"
required="true" requiredMessage="Name of deck is required" />
<p:outputLabel for="deckDescription" value="Description: " />
<p:inputTextarea id="deckDescription"
value="#{newDeckController.deck.description}" disabled="false" />
</h:panelGrid>
<h:panelGrid columns="3">
<p:commandButton value="Cancel"
onclick="PF('newDeckDialog').hide()" styleClass="btn-light" />
<p:commandButton value="Create"
action="#{newDeckController.doCreateDeck()}">
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
<!-- PRIVATE decks view-->
<h:form id="privateDecksForm">
<p:dataGrid id="decksView"
var="deck"
value="#{deckListController.userDecks}" columns="4"
paginator="false">
<p:dataViewGridItem>
<div class="edit-btns">
<p:commandButton update=":deckTabs:privateDecksForm:deckEditDialog"
oncomplete="PF('deckEditDialog').show()" icon="pi pi-pencil"
title="Edit">
<f:setPropertyActionListener value="#{deck}"
target="#{deckDetailController.deck}" />
</p:commandButton>
<p:commandButton action="#{deckDetailController.doDisableDeck}"
icon="pi pi-trash" title="Delete"
update=":deckTabs:privateDecksForm:decksView">
<f:setPropertyActionListener value="#{deck}"
target="#{deckDetailController.deck}" />
<p:confirm header="Confirmation"
message="Are you sure that you want to delete this deck? You cannot undo this operation."
icon="pi pi-exclamation-triangle" />
</p:commandButton>
</div>
<h3 class="deck-name">#{deck.name}</h3>
<div class="deck-grid-item-content">
<p class="deck-description">#{deck.description}</p>
<p class="deck-no-cards">
New cards: #{deckDetailController.getNewCardsCount(deck)}
<br />
Repeatable cards: #{deckDetailController.getRepeatableCardsCount(deck)}
</p>
</div>
<div class="open-btns txt-r">
<p:linkButton outcome="deck-detail" value="view"
styleClass="btn-light">
<f:param name="deck_id" value="#{deck.deckID}" />
</p:linkButton>
<p:linkButton outcome="learning-view" value="learn">
<f:param name="deck_id" value="#{deck.deckID}" />
</p:linkButton>
</div>
</p:dataViewGridItem>
</p:dataGrid>
<!-- Edit deck dialog-->
<p:dialog header="Edit Deck" id="deckEditDialog"
widgetVar="deckEditDialog" modal="true" showEffect="fade"
hideEffect="fade" resizable="false" width="400">
<p:outputPanel id="deckData"
rendered="#{not empty deckDetailController.deck}">
<h:panelGrid columns="2">
<p:outputLabel for="name" value="Deck Name: " />
<p:inputText id="name" value="#{deckDetailController.deck.name}"
disabled="false" />
<p:outputLabel for="description" value="Description: " />
<p:inputTextarea id="description"
value="#{deckDetailController.deck.description}" disabled="false" />
</h:panelGrid>
<h:panelGrid columns="2">
<p:outputLabel for="public" value="Public: " />
<p:selectBooleanCheckbox id="public"
value="#{deckDetailController.deck.publiclyShared}" />
</h:panelGrid>
<h:panelGrid columns="3">
<p:commandButton value="Cancel"
onclick="PF('deckEditDialog').hide()"
styleClass="btn-light" />
<p:commandButton value="Reload"
action="#{deckDetailController.doReloadDeck()}"
update=":deckTabs:privateDecksForm:decksView"
styleClass="btn-light" />
<p:commandButton value="Save"
action="#{deckDetailController.doSaveDeck()}"
oncomplete="PF('deckEditDialog').hide()"
update=":deckTabs:privateDecksForm:decksView" />
</h:panelGrid>
</p:outputPanel>
</p:dialog>
<!-- Deletion confirmation dialog -->
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
width="300">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes btn-light" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</h:form>
</div>
</ui:composition>
cardListController
package at.qe.skeleton.ui.controllers;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Collection;
import at.qe.skeleton.model.Deck;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
import at.qe.skeleton.model.Card;
import at.qe.skeleton.services.CardService;
/**
* Controller for the Card list view.
*
* This class is part of the skeleton project provided for students of the
* course "Software Architecture" offered by Innsbruck University.
*/
#Component
#Scope("view")
public class CardListController implements Serializable {
#Autowired
private CardService cardService;
/**
* Returns a list of all Cards.
*
* #return Collection
*/
public Collection<Card> getCards() {
return cardService.getAll();
}
/**
* Returns a list of all Cards.
*
* #return Collection
*/
public Collection<Card> getEnabledCardsOfOneDeckByDeckId(Integer deckId) {
if(deckId == null)
return new ArrayList<>();
return cardService.findAllEnabledCardsByDeckId(deckId);
}
public void print(int deckId) {
System.out.println("deckId is " + deckId);
}
/**
* Returns the current Deck.
*
* #return Deck
*/
public Deck getDeck(Integer deckId) {
return cardService.findDeck(deckId);
}
}
i tried to change action to actionListener as somebody said in a forum.
and i figured out it may has to do with Mojarra but dont really underdtand why.
I'm using Primefaces 6.0, jsf 2.2 and tomcat 9. I have a dialog box within a ui:composition which does not show up but it happens to show up when i place it in the template file.
Below is the code for the template:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<title>Title</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
App Name
</p:layoutUnit>
<p:layoutUnit position="west" size="250" collapsible="true">
<p:menu toggleable="true">
<p:submenu label="Setups">
<p:menuitem value="Department" url="/dept" icon="ui-icon-disk" />
<p:menuitem value="Company Clients" url="/companies" icon="ui-icon-contact" />
<p:menuitem value="Products" url="/products" icon="ui-icon-heart" />
<p:menuitem value="Doctors" url="/doctors" icon="ui-icon-person" />
<p:menuitem value="Suppliers" url="/suppliers" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="Kenko">
<p:menuitem value="Patient Data" url="/patientdata" icon="ui-icon-disk" />
<p:menuitem value="Point Of Sale" url="/pos" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Company Medicals" url="/companymedicals" />
<p:menuitem value="Reports" url="/reports" icon="ui-icon-home" />
<p:menuitem value="Consultation" url="/consultation" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="User Management">
<p:menuitem value="List Of Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Add Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Modify Permissions" url="/users" icon="ui-icon-star" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">WELCOME</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
and below is also the code for the facelet:
<ui:composition template="/WEB-INF/views/template/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<p:commandButton value="Add New User" icon="ui-icon-extlink" onclick="PF('addUserModal').show();" />
<p:dataTable var="user" value="#{usersList}">
<p:column headerText="Full Name">
#{user.get("fullName")}
</p:column>
<p:column headerText="User Name">
#{user.get("username")}
</p:column>
<p:column headerText="E-Mail">
#{user.get("email")}
</p:column>
<p:column headerText="Privileges">
#{user.get("privilege")}
</p:column>
<p:column headerText="Department">
#{user.get("department")}
</p:column>
<p:column headerText="Phone Number">
#{user.get("phoneNumber")}
</p:column>
</p:dataTable>
</ui:define>
<p:dialog header="Add New User" id="addUserModal" widgetVar="addUserModal" height="300">
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
</p:dialog>
I keep getting the error: TypeError: PF(...) is undefined and I've done a lot search but none seems to help me with my problem.
I really need someone to help me with this.
I wanted to use OneMenu inside a carousel to set a properties in managedBean, but its not working.
i test the OneMenu without Carousel and it work good , so i think that the problem is inside the carousel .
Any ideas as to what is going on here? plz help .
this is my xhtm page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="/template/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="pageContent">
<h:form id="form1">
<br />
<br />
<br />
<p:carousel value="#{homeBean.doInstances()}" headerText="Bootstrap VM " var="vm" itemStyle="text-align:center" responsive="true">
<p:panelGrid columns="2" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<f:facet name="header"><p:graphicImage name="images/instance.jpg" /></f:facet>
<p:panelGrid columns="2" style="margin: 0 auto;">
<h:outputText value="name" />
<h:outputText value="#{vm.name}" />
<h:outputLabel value="ip" />
<h:outputLabel value="#{vm.url}" />
<p:outputLabel value="Configuration" />
<p:selectOneMenu id="recepie3" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.selectItems}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapSelectedVm(vm.url)}" />
</p:panelGrid>
</p:panelGrid>
<f:facet name="footer" style="margin: 0 auto;">
<p:panelGrid columns="3" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<h:outputLabel>Bootstrap All VMs :</h:outputLabel>
<p:selectOneMenu id="recepie2" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.recipies}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapAllVMs()}" />
</p:panelGrid>
</f:facet>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
Tag library initialized incorrectly, please correct it and its work.
What I want is to display a lightbox right after the page is loaded. I mean, when the user receives the page, the lightbox automatically shows and stays on untill it is closed. How can I do this?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/include/template.xhtml">
<ui:define name="title">
<h:outputText value="#{jorBundle.AppName}"></h:outputText>
</ui:define>
<ui:define name="body">
<p:lightBox width="20%" height="80%" >
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
<p:panel header="#{jorBundle.Welcome}">
<p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
</p:panel>
<p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
<p><h:outputText value="Gráfico"></h:outputText></p>
</p:panel>
</ui:define>
</ui:composition>
</html>
Thanks in advance.
You could use the primefaces javascript, which requires an ID on the lightbox.
Component:
<p:lightBox width="20%" height="80%" id='myLightBox'>
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
PF('myLightBox').show();
});
</script>
A simple solution is to set the visible attribute to true:
<p:lightBox width="20%" height="80%" visible="true">
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
My listener method is not fired when I close the dialog box using the close button. I don't understand why happens this...
XHTML page where dialog is located
<?xml version="1.0" encoding="ISO-8859-1"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
template="/templates/template.xhtml">
<ui:define name="content">
<f:view>
<p:outputPanel id="opWindowsDlgViewUser">
<p:dialog id="dlgViewUser" widgetVar="wvDlgViewUser"
header="#{personaController.titleDlgViewUser}"
dynamic="true"
modal="true" closable="true" resizable="false">
<p:ajax event="close"
listener="#{sistemaController.onCloseDlgUsuario}"/>
<p:outputPanel id="opViewUser">
<ui:include src="/content.xhtml"></ui:include>
</p:outputPanel>
</p:dialog>
</p:outputPanel>
</f:view>
</ui:define>
</ui:composition >
Listener method
public void onCloseDlgUsuario(CloseEvent event){
System.out.println("onCloseDlgUsuario");
idRol = null;
this.fechaInicial = null;
this.fechaFinal = null;
}
[UPDATE]
Add XHTMl page content.xhtml
content.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" >
<script type="text/javascript">
function unloadPage(){
if(#{sistemaController.renderAutoCompletePersonas}){
cleanText('acUsuario_input');
document.getElementById('acUsuario_input').focus();
}
}
</script>
<p:messages showDetail="true" closable="true"/>
<h:panelGrid columns="2">
<p:outputLabel value="Usuario " for="acUsuario"
rendered="#{sistemaController.renderAutoCompletePersonas}"/>
<p:autoComplete id="acUsuario" widgetVar="wvAcUsuario" minQueryLength="3"
completeMethod="#{sistemaController.completeListPersonasDisponibles}" var="p"
value="#{sistemaController.selectedPerson}"
rendered="#{sistemaController.renderAutoCompletePersonas}" scrollHeight="200"
itemLabel="#{p.apePaterno} #{p.apeMaterno} #{p.nombre} #{p.nombre2}"
itemValue="#{p}" converter="personaConverter" >
</p:autoComplete>
</h:panelGrid>
<h:panelGrid columns="2">
<p:outputLabel value="Rol" for="sltUserRol"/>
<p:selectOneMenu id="sltUserRol" value="#{sistemaController.idRol}" >
<p:ajax event="change" update="sltUserRol" />
<f:selectItem itemLabel="--Seleccione un Rol--" noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{sistemaController.listRolesActivos}" var="r"
itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="3">
Acceso
<h:panelGroup>
<h:outputText value="Desde " />
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaInicial}" update="clnFechaInicial"/>
<p:calendar id="clnFechaInicial" value="#{sistemaController.fechaInicial}"
widgetVar="wvFechaInicial" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<h:panelGroup>
<h:outputText value=" Hasta "/>
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaFinal}" update="clnFechaFinal"/>
<p:calendar id="clnFechaFinal" value="#{sistemaController.fechaFinal}"
widgetVar="wvFechaFinal" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<p:commandButton id="btnGuardar" title="Guardar" icon="ui-icon-disk" value="Guardar"
rendered="#{sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.addUserToSystem}"
oncomplete="unloadPage()"
update="opDlgUsuario, dtUsersSystem"/>
<p:commandButton id="btnActualizar" title="Actualizar" icon="ui-icon-disk" value="Actualizar"
rendered="#{not sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.updateUserSystem}"
update="opDlgUsuario, dtUsersSystem"/>
</h:panelGrid>
</ui:composition>