<a:growl id="growl" showSummary="true" showDetail="false" autoUpdate="true"/> <div style="float:left; width: 130px;"> <strong>Drag and drop events</strong> <p/> <a:dataList id="eventsList" value="#{dndTimelineView.events}" var="event" itemType="circle"> <h:panelGroup id="eventBox" layout="box" style="z-index:9999; cursor:move;"> #{event.name} </h:panelGroup> <a:draggable for="eventBox" revert="true" helper="clone" cursor="move"/> </a:dataList> </div> <a:timeline id="timeline" value="#{dndTimelineView.model}" var="event" editable="true" eventMargin="10" eventMarginAxis="0" minHeight="250" start="#{dndTimelineView.start}" end="#{dndTimelineView.end}" style="margin-left:135px;" dropActiveStyleClass="ui-state-highlight" dropHoverStyleClass="ui-state-hover"> <a:ajax event="drop" listener="#{dndTimelineView.onDrop}" global="false" update="eventsList"/> <h:panelGrid columns="1"> <h:outputText value="#{event.name}"/> <h:outputText value="#{event.start}"> <f:convertDateTime dateStyle="short" type="time"/> </h:outputText> <h:outputText value="#{event.end}"> <f:convertDateTime dateStyle="short" type="time"/> </h:outputText> </h:panelGrid> </a:timeline>
import java.io.Serializable; import java.util.ArrayList; import java.util.Calendar; import java.util.Date; import java.util.List; import java.util.TimeZone; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import javax.faces.context.FacesContext; import javax.faces.event.AjaxBehaviorEvent; import org.primefaces.component.timeline.TimelineUpdater; import org.primefaces.event.timeline.TimelineDragDropEvent; import org.primefaces.model.timeline.TimelineEvent; import org.primefaces.model.timeline.TimelineModel; import org.primefaces.showcase.domain.Event; @ManagedBean(name = "dndTimelineView") @ViewScoped public class DndTimelineView implements Serializable { private TimelineModel model; private Date start; private Date end; private List<Event> events = new ArrayList<Event>(); @PostConstruct public void init() { Calendar cal = Calendar.getInstance(TimeZone.getTimeZone("UTC")); Date now = new Date(); cal.setTimeInMillis(now.getTime() - 4 * 60 * 60 * 1000); start = cal.getTime(); cal.setTimeInMillis(now.getTime() + 8 * 60 * 60 * 1000); end = cal.getTime(); model = new TimelineModel(); for (int i = 1; i <= 10; i++) { events.add(new Event("Event " + i)); } } public void onDrop(TimelineDragDropEvent e) { // get dragged model object (event class) if draggable item is within a data iteration component, // update event's start and end dates. Event dndEvent = (Event) e.getData(); dndEvent.setStart(e.getStartDate()); dndEvent.setEnd(e.getEndDate()); // create a timeline event (not editable) TimelineEvent event = new TimelineEvent(dndEvent, e.getStartDate(), e.getEndDate(), false, e.getGroup()); // add a new event TimelineUpdater timelineUpdater = TimelineUpdater.getCurrentInstance("timeline"); model.add(event, timelineUpdater); // remove from the list of all events events.remove(dndEvent); FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "The " + dndEvent.getName() + " was added", null); FacesContext.getCurrentInstance().addMessage(null, msg); } public void onSwitchTimeZone(AjaxBehaviorEvent e) { model.clear(); } public TimelineModel getModel() { return model; } public List<Event> getEvents() { return events; } public Date getStart() { return start; } public Date getEnd() { return end; } }
import java.io.Serializable; import java.util.Date; public class Event implements Serializable { private String name; private Date start; private Date end; public Event(String name) { this.name = name; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Date getStart() { return start; } public void setStart(Date start) { this.start = start; } public Date getEnd() { return end; } public void setEnd(Date end) { this.end = end; } @Override public boolean equals(Object o) { if (this == o) { return true; } if (o == null || getClass() != o.getClass()) { return false; } Event event = (Event) o; if (name != null ? !name.equals(event.name) : event.name != null) { return false; } return true; } @Override public int hashCode() { return name != null ? name.hashCode() : 0; } }