PrimeFaces Extensions Showcase

Keynote

An HTML presentation component that enables to create fully-featured and beautiful presentations.

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vertical Slide 1

Vertical Slide 2

Slide 3

Source

XHTML page
Managed bean


<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="p-mt-3"/>


@Named
@ViewScoped
public class KeynoteController implements Serializable {

    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;
        }

    }

}