PrimeFaces - Sticky Component Example

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

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