Keynote fires the Ajax events slideChanged and slideTransitionEnd while the user navigates through a presentation. Presentations are made with reveal.js.
The listeners of slideChanged and slideTransitionEnd show a message and enable the button below once the last slide is reached. Navigate to the last slide to enable it.
<div class="card">
<h5>Event</h5>
<p>
The listeners of <i>slideChanged</i> and <i>slideTransitionEnd</i> show a message and enable the button below once the last slide is
reached. Navigate to the last slide to enable it.
</p>
<h:form id="formEvent">
<p:messages id="messages" showSummary="true" showDetail="true"/>
<pe:keynote width="480" height="350" style="width: 50vw; height: 50vh;">
<p:ajax event="slideChanged" listener="#{keynoteController.onSlideChanged}" update="btnSubmit messages"/>
<p:ajax event="slideTransitionEnd" listener="#{keynoteController.onSlideTransitionEnd}" update="btnSubmit messages"/>
<pe:keynoteItem>
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</pe:keynoteItem>
<pe:keynoteItem>
<pe:keynoteItem>
<h2>Vertical Slide 1</h2>
</pe:keynoteItem>
<pe:keynoteItem>
<h2>Vertical Slide 2</h2>
</pe:keynoteItem>
</pe:keynoteItem>
<pe:keynoteItem>
<h2>Slide 3</h2>
</pe:keynoteItem>
</pe:keynote>
<p:commandButton id="btnSubmit" value="Submit" disabled="#{keynoteController.disabled}" styleClass="mt-3"/>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller.keynote;
import java.io.Serial;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.event.KeynoteEvent;
import org.primefaces.extensions.model.keynote.KeynoteItem;
@Named
@ViewScoped
public class KeynoteController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
private List<KeynoteItem> items;
private boolean disabled = true;
@PostConstruct
protected void initialize() {
items = new ArrayList<>();
for (int i = 1; i <= 10; i++) {
items.add(new KeynoteItem(new KeynoteItemContent("Section " + i, "Lorem ipsum content " + i)));
}
}
public void onSlideChanged(final KeynoteEvent event) {
disabled = !event.isLastSlide();
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_WARN,
"Trigger: " + new Date(),
"Slide changed: " + event.isCompleted() + ", last slide: " + event.isLastSlide());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onSlideTransitionEnd(final KeynoteEvent event) {
disabled = !event.isLastSlide();
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_WARN,
"Trigger: " + new Date(),
"Slide transition end: " + event.isCompleted() + ", last slide: " + event.isLastSlide());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public List<KeynoteItem> getItems() {
return items;
}
public boolean isDisabled() {
return disabled;
}
public class KeynoteItemContent implements Serializable {
private String headline;
private String content;
public KeynoteItemContent(final String headline, final String content) {
this.headline = headline;
this.content = content;
}
public String getHeadline() {
return headline;
}
public void setHeadline(final String headline) {
this.headline = headline;
}
public String getContent() {
return content;
}
public void setContent(final String content) {
this.content = content;
}
}
}