Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Timeline: null value when used inside a composite

See original GitHub issue

Describe the defect Timeline shows no events

Environment:

PF Version: 8.0, 10RC1
JSF + version: Mojarra 2.3
Affected browsers: ALL_

To Reproduce Steps to reproduce the behavior:

create a composite component and put a timeline in it
enable lazy loading
use composite component attribute for timeline “value” (eg. value=“#{cc.attrs.model}”)
See error SEVERE: Exception invoking UIViewRoot PhaseListener org.primefaces.component.timeline.DefaultTimelineUpdater. and empty timeline

Expected behavior The timeline should load and display events

compositeTimeline.xhtml

<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
              xmlns:cc="http://xmlns.jcp.org/jsf/composite"
              xmlns:p="http://primefaces.org/ui">
    <cc:interface>
        <cc:attribute name="value" type="org.primefaces.model.timeline.TimelineModel" required="true" />
    </cc:interface>

    <cc:implementation>
        <p:timeline id="timeline" value="#{cc.attrs.value}"
                    preloadFactor="#{lazyTimelineView.preloadFactor}"
                    zoomMax="#{lazyTimelineView.zoomMax}" minHeight="170">
            <p:ajax event="lazyload" update="@none" listener="#{lazyTimelineView.onLazyLoad}"
                    onstart="$('#loadingText').css('visibility', 'visible')"
                    oncomplete="$('#loadingText').css('visibility', 'hidden')"/>
        </p:timeline>
    </cc:implementation>
</ui:component>

test.xhtml

<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:cc="http://java.sun.com/jsf/composite/cc">

    <h:head>
        <title>PrimeFaces Test</title>
        <h:outputScript name="test.js" />
    </h:head>
    <h:body>
        <div class="card">
            <h:form id="form">
                <p:growl id="growl" showSummary="true" showDetail="false">
                    <p:autoUpdate/>
                </p:growl>

                <div id="loadingText" style="font-weight:bold; margin:-5px 0 5px 0; visibility:hidden;">Loading ...
                </div>

                <cc:compositeTimeline id="compositeTimeline" value="#{lazyTimelineView.model}" />

                <h:panelGrid columns="2" style="margin-top:15px">
                    <p:spinner id="spinner" value="#{lazyTimelineView.preloadFactor}"
                               min="0" max="1" stepFactor="0.05"/>
                    <p:commandButton value="Update Preload Factor" process="@this spinner" update="compositeTimeline"
                                     action="#{lazyTimelineView.clearTimeline}"
                                     style="margin-left:5px"/>
                </h:panelGrid>
            </h:form>
        </div>
    </h:body>
</html>

LazyTimelineView

@Named
@ViewScoped
public class LazyTimelineView implements Serializable {

    private TimelineModel<String, ?> model;

    private float preloadFactor = 0;
    private long zoomMax;

    @PostConstruct
    protected void initialize() {
        // create empty model
        model = new TimelineModel<>();

        // about five months in milliseconds for zoomMax
        // this can help to avoid a long loading of events when zooming out to wide time ranges
        zoomMax = 1000L * 60 * 60 * 24 * 31 * 5;
    }

    public TimelineModel<String, ?> getModel() {
        return model;
    }

    public void onLazyLoad(TimelineLazyLoadEvent e) {
        try {
            // simulate time-consuming loading before adding new events
            Thread.sleep((long) (1000 * Math.random() + 100));
        } catch (InterruptedException ex) {
            // ignore
        }

        TimelineUpdater timelineUpdater = TimelineUpdater.getCurrentInstance(((Timeline)e.getSource()).getClientId());

        LocalDateTime startDate = e.getStartDateFirst(); // alias getStartDate() can be used too
        LocalDateTime endDate = e.getEndDateFirst(); // alias getEndDate() can be used too

        // fetch events for the first time range
        generateRandomEvents(startDate, endDate, timelineUpdater);

        if (e.hasTwoRanges()) {
            // zooming out ==> fetch events for the second time range
            generateRandomEvents(e.getStartDateSecond(), e.getEndDateSecond(), timelineUpdater);
        }
    }

    private void generateRandomEvents(LocalDateTime startDate, LocalDateTime endDate, TimelineUpdater timelineUpdater) {
        LocalDateTime curDate = startDate;
        Random rnd = new Random();
        PrimitiveIterator.OfInt randomInts = rnd.ints(1, 99999).iterator();

        while (curDate.isBefore(endDate)) {
            // create events in the given time range
            if (rnd.nextBoolean()) {
                // event with only one date
                model.add(TimelineEvent.<String>builder()
                        .data("Event " + randomInts.nextInt())
                        .startDate(curDate)
                        .build(), timelineUpdater);
            } else {
                // event with start and end dates
                model.add(TimelineEvent.<String>builder()
                        .data("Event " + randomInts.nextInt())
                        .startDate(curDate)
                        .endDate(curDate.plusHours(18))
                        .build(),
                        timelineUpdater);
            }

            curDate = curDate.plusHours(24);
        }
    }

    public void clearTimeline() {
        // clear Timeline, so that it can be loaded again with a new preload factor
        model.clear();
    }

    public void setPreloadFactor(float preloadFactor) {
        this.preloadFactor = preloadFactor;
    }

    public float getPreloadFactor() {
        return preloadFactor;
    }

    public long getZoomMax() {
        return zoomMax;
    }
}

Issue Analytics

State:
Created 3 years ago
Comments:18 (13 by maintainers)

Top GitHub Comments

2reactions

Rapstercommented, Nov 2, 2022

Arf doesn’t look good… specially if same problem happen with both impl… I tried without a composite and works fine.

Yes, don’t use composite 😄 But on a more serious note, I didn’t dig that much since last time, so that’s my best answer so far

1reaction

mellowarecommented, Feb 4, 2021

Thanks makes our lives much easier.

Top Results From Across the Web

How can I have null column value for a composite key column ...

Say i have a column family. CREATE TABLE cnt_test (time_slot text , comp1 text, comp2 text, field1 counter, field2 counter, PRIMARY KEY(time_slot,comp1, ...

Element: <oj-timeline> - Oracle Help Center

The undefined value is treated as unsetting of a property when passed to the property setter and will result in the component using...

Allow Null Update Property - Informatica Documentation

property is enabled on the column, the process can write the null value to the base object record. If the. Allow Null Update....

Create compound clips in Final Cut Pro - Apple Support

You can create a compound clip from existing clips in the timeline or the browser, or you can create a new, empty compound...

Interpolation - Datadog Docs

The default_zero() function fills empty time intervals using the value 0 or, ... or to affect the min/max/average of a timeseries in a...