Search code examples
primefacesjsf-2sidebar

primefaces tag <p:sidebar> error

i am creating JSF web application in which i am trying to run the p:sidebar code available of primefaces official website, but i am getting error.

<p:sidebar> Tag Library supports namespace: http://primefaces.org/ui, but no tag was defined for name: sidebar

i am using primefaces 6.0

enter image description here

Code i am trying to run

<!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>
    <title>carouselExample</title>
</h:head>
<h:body>

<p:sidebar widgetVar="sidebar1" baseZIndex="10000">
    <h1 style="font-weight:normal">Left Sidebar</h1>
    <p:commandButton value="Cancel" oncomplete="PF('sidebar1').hide()"/>
</p:sidebar>

<p:sidebar widgetVar="sidebar2" position="right" baseZIndex="10000">
    <h1 style="font-weight:normal">Right Sidebar</h1>
    <p:commandButton value="Cancel" oncomplete="PF('sidebar2').hide()"/>
</p:sidebar>

<p:sidebar widgetVar="sidebar3" position="top" baseZIndex="10000">
    <h1 style="font-weight:normal">Top Sidebar</h1>
    <p:commandButton value="Cancel" oncomplete="PF('sidebar3').hide()"/>
</p:sidebar>

<p:sidebar widgetVar="sidebar4" position="bottom" baseZIndex="10000">
    <h1 style="font-weight:normal">Bottom Sidebar</h1>
    <p:commandButton value="Cancel" oncomplete="PF('sidebar4').hide()"/>
</p:sidebar>

<p:sidebar widgetVar="sidebar5" fullScreen="true" baseZIndex="10000">
    <h1 style="font-weight:normal">Full Screen Sidebar</h1>
    <p:commandButton value="Cancel" oncomplete="PF('sidebar5').hide()"/>
</p:sidebar>

<p:commandButton icon="fa fa-arrow-right" oncomplete="PF('sidebar1').show()" />
<p:commandButton icon="fa fa-arrow-left" oncomplete="PF('sidebar2').show()" />
<p:commandButton icon="fa fa-arrow-down" oncomplete="PF('sidebar3').show()" />
<p:commandButton icon="fa fa-arrow-up" oncomplete="PF('sidebar4').show()" />
<p:commandButton icon="fa fa-arrows-alt" oncomplete="PF('sidebar5').show()" />

</h:body>

</html>
Solution

  • Sidebar is currently only available in the elite releases (6.1.7 and 6.0.25) or in the upcoming 6.2, which is not released yet.