• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Keynote Dynamic

Keynotes can be rendered dynamically from a list, as in data iteration components. Presentations are made with reveal.js.

Keynote Tag Documentation

Keynote is a presentation component based on Reveal.js.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
autoSlide int false 0 Auto-slide interval in milliseconds; 0 disables.
backgroundTransition String false fade Background transition: 'fade', 'slide', 'convex', 'concave', 'zoom'.
center boolean false true Whether to vertically center the content.
controls boolean false true Whether to show navigation controls.
disableLayout boolean false false Whether to disable layout changes.
embedded boolean false false Whether the presentation is embedded (e.g. in an iframe).
height int false 700 Presentation height in pixels.
library String false primefaces-extensions Resource library for theme CSS.
loop boolean false false Whether to loop the presentation.
margin Double false 0.04 Factor of the display size that should remain empty around the content.
maxScale Double false 2.0 Maximum scale factor.
minScale Double false 0.2 Minimum scale factor.
navigationMode String false default Navigation mode: 'default' or 'linear'.
progress boolean false true Whether to show progress bar.
showNotes boolean false false Whether to show speaker notes.
slideNumber String false false Slide number display: 'true', 'false', or a CSS selector.
style String false Inline style of the component.
styleClass String false Style class of the component.
theme String false none Theme name; 'none' to disable.
touch boolean false true Whether to enable touch navigation.
transition String false slide Transition style: 'none', 'fade', 'slide', 'convex', 'concave', 'zoom'.
transitionSpeed String false default Transition speed: 'default', 'fast', 'slow'.
value Object true The dynamic data model (e.g. DynaFormModel).
var String false Name of the request-scoped variable that exposes the current row/control data.
varContainerId String false Name of the request-scoped variable that exposes the current container client id.
width int false 960 Presentation width in pixels.

KeynoteItem Tag Documentation

Defines a slide/section template for a KeynoteItem type; used as a child of Keynote.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
backgroundColor String false Background color for the slide.
backgroundImage String false Background image URL for the slide.
backgroundOpacity Double false 1.0 Background opacity (0.0 to 1.0).
backgroundPosition String false center CSS background-position value.
backgroundRepeat String false no-repeat CSS background-repeat value.
backgroundSize String false cover CSS background-size value.
backgroundVideo String false Background video URL for the slide.
backgroundVideoLoop boolean false false Whether the background video loops.
backgroundVideoMuted boolean false false Whether the background video is muted.
markdown boolean false false Whether slide content is Markdown.
note String false Speaker note text for the slide.
separator String false ^---$ Regex for horizontal slide separator (Markdown).
separatorVertical String false Regex for vertical slide separator (Markdown).
styleClass String false Style class for the slide section.
type String false default Item type identifier; must match a KeynoteItem type in the model.
visibility String false Reveal.js visibility condition for the slide.
Tag Documentation Widget Source Basic Speaker View Theming Markdown Dynamic Event
Dynamic

value takes a list of KeynoteItem instances, which are exposed via var. This presentation loops and advances automatically every 3 seconds (loop="true", autoSlide="3000").

Section 1

Lorem ipsum content 1

Section 2

Lorem ipsum content 2

Section 3

Lorem ipsum content 3

Section 4

Lorem ipsum content 4

Section 5

Lorem ipsum content 5

Section 6

Lorem ipsum content 6

Section 7

Lorem ipsum content 7

Section 8

Lorem ipsum content 8

Section 9

Lorem ipsum content 9

Section 10

Lorem ipsum content 10

Usage


<div class="card">
    <h5>Dynamic</h5>
    <p>
        <code>value</code> takes a list of <code>KeynoteItem</code> instances, which are exposed via <code>var</code>. This presentation
        loops and advances automatically every 3 seconds (<code>loop="true"</code>, <code>autoSlide="3000"</code>).
    </p>
    <h:form id="formDynamic">
        <pe:keynote loop="true" autoSlide="3000" slideNumber="c/t" value="#{keynoteController.items}" var="item"
                    width="480" height="350" style="width: 50vw; height: 50vh;">
            <pe:keynoteItem>
                <h2>#{item.headline}</h2>
                <p>#{item.content}</p>
            </pe:keynoteItem>
        </pe:keynote>
    </h:form>
</div>