PrimeFaces Extensions Showcase

SlideOut

Advanced example demonstrates using of ajax events, callbacks and interesting settings.

Examples include:

Javascript callbacks for "onOpen" and "onClose" events
p:ajax server side events for "open" and "close" events
CSS styling is different for open vs closed states by check for "ui-slideouttab-open" style.

Message

Email address (optional)

If you provide your email address above, then by submitting
this form you agree that we may contact you by email
to follow up on your feedback.

Javascript Callback Result: Event Result

Source


<pe:slideout id="slideoutFeedback" title="Feedback" icon="pi pi-thumbs-up" location="top" widgetVar="slideout"
        handleStyleClass="feedback-handle" panelStyleClass="feedback-panel" offset="475px" bounceTimes="5"
        bounceDistance="100px" onopen="$('#lblOnOpenClose').text('Open Event!');"
        onclose="$('#lblOnOpenClose').text('Close Event!');">
        
        <p:ajax event="open" listener="#{slideOutController.openListener}" update="growl"/> 
        <p:ajax event="close" listener="#{slideOutController.closeListener}" update="growl"/> 
        
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtMessage" value="Message"></p:outputLabel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputTextarea id="txtMessage" rows="5" cols="43" autoResize="false" placeholder="Send us a message if you have something to say." />
                </p:column>
            </p:row>
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtEmail" value="Email address (optional)"></p:outputLabel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputText id="txtEmail" size="40"  placeholder="Email address (optional)"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column style="font-style: italic;">
             If you provide your email address above, then by submitting<br />
             this form you agree that we may contact you by email<br />
             to follow up on your feedback.<br />
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:outputPanel style="text-align:right;">
                        <p:commandButton value="Send" type="button" onclick="PF('slideout').close();" />
                    </p:outputPanel>
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>

    <p>
        <h:outputText id="lblResult" value="Javascript Callback Result: " />
        <h:outputText id="lblOnOpenClose" value="Event Result" style="font-weight:bold; color: DeepPink;" />
    </p>


@Named
@ViewScoped
public class SlideOutController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    public void closeListener(final CloseEvent closeEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Close fired",
                    "Component id: " + closeEvent.getComponent().getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void openListener(final OpenEvent openEvent) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Open fired",
                    "Component id: " + openEvent.getComponent().getId());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

}


/* Custom styles for the SlideOut */
.feedback-panel {
    border-color: DeepPink;
    border-width: 1px;
}
/*  Handle defaults and "closed" state */
.feedback-handle {
    padding: 8px;
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
    border-color: #FF3366;
    color: DeepPink !important;
    background-color: white;
}
/*  Style applied to handle "open" state */
.ui-slideouttab-open>.feedback-handle {
    color: white !important;
    background-color: DeepPink;
}

Use Cases

Documentation pe:slideout

Attributes (move mouse over the names to see data types)

Name	Description
animateSpeed	Animation speed in ms.Default is 300.
autoOpen	If true, the panel auto opens on load.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
bounceDistance	Distance for bounce effect.Default is 50px.
bounceTimes	Number of bounces.Default is 4.
clickScreenToClose	If true, clicking the screen closes the panel.Default is true.
handleOffset	Handle offset distance from edge.
handleOffsetReverse	If true, handle offset is reversed (align with right/bottom).Default is false.
handleStyle	Style of the handle.
handleStyleClass	Style class of the handle.
icon	Icon for the handle.
id	Unique identifier of the component in a namingContainer.Default is generated.
location	Location: left, right, top or bottom.Default is right.
offset	Offset distance of the panel from the edge.Default is 200px.
offsetReverse	If true, offset is reversed (align with right/bottom).Default is false.
onbeforeclose	Callback javascript executed before close.
onbeforeopen	Callback javascript executed before open.
onbeforeslide	Callback javascript executed before slide.
onclose	Callback javascript executed after close.
onopen	Callback javascript executed after open.
onslide	Callback javascript executed on slide.
panelStyle	Style of the slideout panel.
panelStyleClass	Style class of the slideout panel.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showOn	Show on 'click' or 'hover'.Default is click.
sticky	If true, the panel is positioned fixed (sticky).Default is false.
title	Text title of the handle.
widgetVar	Name of the client side widget.