PrimeFaces - Timeline Component Example

This example shows how to use Primefaces Timeline component.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>Java Version Timeline</h2>
    <p:timeline value="#{timelineBean.model}"
                start="${timelineBean.startDate}"
                end="${timelineBean.endDate}"/>
</h:body>

@ManagedBean
@ViewScoped
public class TimelineBean {
  private TimelineModel model;
  private Date startDate;
  private Date endDate;

  @PostConstruct
  protected void init() {
      model = new TimelineModel();
      addVersion(1996, 1, 23, "JDK 1.0 - Oak");
      addVersion(1997, 2, 19, "JDK 1.1");
      addVersion(1998, 12, 8, "J2SE 1.2 - Playground");
      addVersion(2000, 5, 8, "J2SE 1.3 - Kestrel");
      addVersion(2002, 2, 6, "J2SE 1.4 - Merlin");
      addVersion(2004, 9, 30, "J2SE 5.0 - Tiger");
      addVersion(2006, 12, 11, "Java SE 6 - Mustang");
      addVersion(2011, 12, 7, "Java SE 7 - Dolphin");
      addVersion(2014, 3, 18, "Java SE 8 - Spider");
      startDate = getDate(1995, 1, 1);
      endDate = getDate(2017, 9, 15);
  }

  private void addVersion(int year, int month, int day, String desc) {
      model.add(new TimelineEvent(desc, getDate(year, month, day)));
  }

  private Date getDate(int year, int month, int day) {
      Instant instant = LocalDate.of(year, month, day)
                                 .atStartOfDay(ZoneId.systemDefault())
                                 .toInstant();
      return Date.from(instant);
  }

  public TimelineModel getModel() {
      return model;
  }

  public Date getStartDate() {
      return startDate;
  }

  public Date getEndDate() {
      return endDate;
  }
}

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