Close

PrimeFaces - Sticky Component Example

[Last Updated: Aug 27, 2017]

Following example shows how to use Primefaces Sticky component. We can put any JSF component or plain html in the sticky component. In this example, we are going to show tieredMenu on the sticky part.

JSF page

src/main/webapp/index.xhtml

<div style="float:left;width:160px" >
    <p:tieredMenu
            id="theMenu"
             model="#{stickyContentBean.menuModel}"/>
    </div>

    <p:sticky target="theMenu"/>

    <div style="padding-left:200px;">
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur nec nisi risus. Praesent faucibus purus
      .....................
    </div>

The manage bean

@ManagedBean
@ViewScoped
public class StickyContentBean {
  private MenuModel menuModel;

  @PostConstruct
  public void postInit() {
      menuModel = new DefaultMenuModel();
      createSubMenu("File", "Open", "Save", "Exit");
      createSubMenu("Edit", "Undo", "Redo", "Delete");
      createSubMenu("View", "Summary", "Tools", "Settings", "Layout");
      createSubMenu("Help", "Help topics", "Support");
  }

  private void createSubMenu(String label, String... children) {
      DefaultSubMenu subMenu = new DefaultSubMenu();
      subMenu.setLabel(label);
      menuModel.addElement(subMenu);

      for (String child : children) {
          DefaultMenuItem childMenu = new DefaultMenuItem();
          childMenu.setValue(child);
          childMenu.setUrl("#");
          subMenu.addElement(childMenu);
      }
  }

  public MenuModel getMenuModel() {
      return menuModel;
  }
}

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war

Output


Example Project

Dependencies and Technologies Used:

  • primefaces 6.1 primefaces
  • jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • JDK 1.8
  • Maven 3.3.9

Sticky Component Example Select All Download
  • sticky-component-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also