HighCharts configuration missing. #1012

bytecode-seller · 2018-09-30T23:38:50Z

What exactly is needed to integrate HighCharts into BootFaces?

I can't make it work.
Your documentation page about configuring Highcharts is truncated. It reads:

HighFaces works with BootsFaces out-of-the-box. Just add the library to your project, add the

Add the what? When I try to replicate the example about boys and girls births, I receive an error:

18:09:29,390 SEVERE [javax.enterprise.resource.webcontainer.jsf.context] (default task-22) java.lang.NullPointerException
	at org.highfaces.component.chart.ChartRenderer.renderScript(ChartRenderer.java:181)
	at org.highfaces.component.chart.ChartRenderer.processEvent(ChartRenderer.java:215)

I've analyzed a little the class org.highfaces.component.chart.ChartRenderer and the error is due to wrapper can't find Jquery because there's no 'name' attributes in HEAD or the attribute doesn't endsWith 'jquery.js' but with 'jquery-3.2.1.min.js'.

This is my HEAD tag:

    <h:head>
        <title>ORBi</title>
        <meta http-equiv="refresh" content="#{session.maxInactiveInterval}; url=#{request.contextPath}/timeout.html"/>
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
        <meta name="format-detection" content="telephone=no"></meta>
        <meta name="msapplication-tap-highlight" content="no"></meta>
        <meta name="apple-mobile-web-app-capable" content="yes"></meta>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"></meta>

        <h:outputScript name="jquery-3.2.1.min.js" library="js" />
        <h:outputScript name="jquery-ui.min.js" library="js" />
        <h:outputScript name="datatables.min.js" library="js" />
                
        <h:outputStylesheet name="datatables.min.css" library="css"/>
        ...

Thank you so much.

The text was updated successfully, but these errors were encountered:

bytecode-seller · 2018-09-30T23:43:00Z

Forgetting something: I've tried using CDNs for Jquery, creating a fake meta name with attribute jQuery.js and repositioning title tag to bottom with no success. Thank you.

stephanrauh · 2018-10-02T21:09:17Z

Oops - you're right, the text is truncated. Weird - it looks as if adding the library should do the trick, so why did I (if I was the author) add the "and" fragment?

As for the name-of-the-library bit: oops, again. You're right. It doesn't make sense to add jQuery twice. So that's clearly an issue to address.

stephanrauh · 2018-10-02T21:16:40Z

I've contacted the author of HighFaces, hoping to find a way to solve the issue together.

bauerlive · 2018-10-03T12:32:37Z

Hi,

I think there are multiple issues. First of all, please make sure you are using highfaces version 1.2.

Then please paste the complete content of your head tag; it seems like you added a jsf tag (not html tag) which does not provide/contain a name attribute. (Which should be invalid). The detection checks the child components of the head tag to identify if one of them is loading jquery. Meta tags or other HTML Tags get handled differently in JSF, so they are not required to have a name tag. (You can validate this in the highfaces-showcase where also html tags are contained within h:head without name tag)

Having that said, version 1.3 is already in progress and will contain an improved version of jquery detection plus context-parameter based deactivation method.

Cheers

stephanrauh · 2018-10-03T13:10:01Z

I just looked up how BootsFaces detects jQuery. By default, it uses its own copy. Luckily, it matches the name pattern required by HighFaces, so it works fine.

In your case, you'd have to rename your copy of jQuery. BTW, starting with BootsFaces 1.4.0, the bundled version of jQuery is jQuery-3.3.1.

bytecode-seller · 2018-10-03T14:32:10Z

@bauerlive I'm using Highcharts v1.2. Below is my complete HEAD tag. Yes, I'm using jsf tags, but as I mentioned in my second comment above, I tested several configurations, one of which was to use plain HTML <script></script>, but it didn't work either (I don't see SCRIPT tag using name attribute, by the way); I even used this fake tag: <meta name="jquery.js"></meta>. Take a look, please, at chart.ChartRenderer.renderScript(ChartRenderer.java:181) fragment below. That line expects a name attribute endingWith jQuery.js. unfortunately, no jQuery library ends like that because version number is appended to the name like so: jquery-3.2.1.min.js. Then, in my opinion, even finding some name tag, another error will arise:

/* renderes jQuery-Script inclusion conditionally. After the jQuery Script, it includes HighCharts script */
    public void renderScript(FacesContext context) {
        UIComponent headFacet = context.getViewRoot().getFacet("javax_faces_location_HEAD");
        if (headFacet == null) {
            return;
        }
        boolean needjQuery = true;
        for (UIComponent c : headFacet.getChildren()) {
            if (c.getAttributes().get("name").toString().endsWith("jquery.js")) {
                needjQuery = false;
            }
        }
...

<h:head>
        <title>ORBi</title>
        <meta http-equiv="refresh" content="#{session.maxInactiveInterval}; url=#{request.contextPath}/timeout.html"/>
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
        <meta name="format-detection" content="telephone=no"></meta>
        <meta name="msapplication-tap-highlight" content="no"></meta>
        <meta name="apple-mobile-web-app-capable" content="yes"></meta>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"></meta>

        <!-- JS Libraries -->
        <h:outputScript name="jquery-3.2.1.min.js" library="js" />
        <h:outputScript name="jquery-ui.min.js" library="js" />
        <h:outputScript name="datatables.min.js" library="js" />
        <h:outputScript name="highcharts.js" library="js" />
        <h:outputScript name="orbiJS.js" library="js" />

        <!-- CSS Libraries -->
        <h:outputStylesheet name="datatables.min.css" library="css"/>
        <h:outputStylesheet name="orbi.css" library="css"/>

        <!-- External MapBox Library -->
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet'/>
    </h:head>

Thank for you interest in this issue.

@stephanrauh I renamed jQuery as you suggest but it doesn't work.

Thank you.

bauerlive · 2018-10-04T07:24:45Z

@bytecode-seller As highfaces version 1.3 is not yet out, please do the following:

remove the comment tags from the head tag (this will be fixed with version 1.3)
if there is no specific reason for loading highcharts.js manually, you should not do this but instead rely on the highcharts version that gets loaded by HighFaces automatically. Loading manually is only necessary if you want to load a newer version than the one bundled within HighFaces. However, there is of course no guarantee that nothing breaks - you might have to even use the extender logic to fix broken integration.
to fix jQuery detection (this is also improved on highfaces 1.3), you should rename your jquery library to "jquery.js"

bauerlive · 2018-10-04T07:27:38Z

As side information: jQuery needs to be loaded before highfaces.js gets pulled in. This can only be assured, if you rely on JSF to sort and put the script tags by its internal logic. The more JavaScript libraries you load manually, the more likely it gets, that on the frontend side something gets messed up. So if you don't need specifically a newer version of jQuery, you should not even load this one manually, because most JSF libraries already bring a bundled one with them.

bytecode-seller · 2018-10-04T15:44:46Z

I've done according to your recommendations: dropped comments, dropped my own jquery, dropped my own highcharts.js, dropped my own datatables.js, modified web.xml net.bootsfaces.get_jquery_from_cdn to false, and it does not work yet. java.lang.NullPointerException
at org.highfaces.component.chart.ChartRenderer.renderScript(ChartRenderer.java:181) is still making me ill.

I've decided to step back from HighFaces wrapper library and use plain highcharts.js. It really needs more coding, but at least that's not like a NullPointerException out of my reach.

I'll give HighFaces a try in next versions.

Thank you all.

HEAD TAG

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <title>ORBi</title>
        <meta http-equiv="refresh" content="#{session.maxInactiveInterval}; url=#{request.contextPath}/timeout.html"/>
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
        <meta name="format-detection" content="telephone=no"></meta>
        <meta name="msapplication-tap-highlight" content="no"></meta>
        <meta name="apple-mobile-web-app-capable" content="yes"></meta>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"></meta>

        <h:outputScript name="orbi.js" library="js" />

        <h:outputStylesheet name="orbi.css" library="css"/>

        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet'/>
    </h:head>

    <h:body>

WEB.XML

    <context-param>
        <param-name>net.bootsfaces.get_jquery_from_cdn</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>net.bootsfaces.get_jqueryui_from_cdn</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>net.bootsfaces.get_bootstrap_from_cdn</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>net.bootsfaces.get_fontawesome_from_cdn</param-name>
        <param-value>false</param-value>
    </context-param>

MY PROJECT LIBRARIES (JARS)
https://monosnap.com/file/0MiXWxZiljxcZayA49k4lzUWNStIyA

ERROR

10:21:43,507 INFO  [stdout] (default task-59) Hibernate: select concat(unidad2_.nombre, ' [', transporti4_.nombre, ']') as col_0_0_, count(*) as col_1_0_, sum(flete0_.total) as col_2_0_, sum(cartaporte1_.total) as col_3_0_ from flete flete0_ inner join cartaporte cartaporte1_ on flete0_.id_flete=cartaporte1_.id_flete, unidad unidad2_, transportista transporti4_ where flete0_.id_unidad=unidad2_.id_unidad and unidad2_.id_transportista=transporti4_.id_transportista and flete0_.id_compania=? and (flete0_.fechaini between ? and ?) group by 1
10:21:43,528 INFO  [stdout] (default task-59) : ----- Commit Transaction... ----- :
10:21:43,528 INFO  [stdout] (default task-59) : ----- Close Session... ----- :
10:25:05,974 ERROR [io.undertow.request] (default task-37) UT005023: Exception handling request to /orbi/views/main.xhtml: javax.servlet.ServletException
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:671)
	at io.undertow.servlet.handlers.ServletHandler.handleRequest(ServletHandler.java:86)
	at io.undertow.servlet.handlers.FilterHandler$FilterChainImpl.doFilter(FilterHandler.java:130)
	at mx.bytecode.orbi.filter.HibernateFilter.doFilter(HibernateFilter.java:31)
	at io.undertow.servlet.core.ManagedFilter.doFilter(ManagedFilter.java:60)
	at io.undertow.servlet.handlers.FilterHandler$FilterChainImpl.doFilter(FilterHandler.java:132)
	at mx.bytecode.orbi.filter.AuthenticationFilter.doFilter(AuthenticationFilter.java:51)
	at io.undertow.servlet.core.ManagedFilter.doFilter(ManagedFilter.java:60)
	at io.undertow.servlet.handlers.FilterHandler$FilterChainImpl.doFilter(FilterHandler.java:132)
	at mx.bytecode.orbi.filter.CacheFilter.doFilter(CacheFilter.java:41)
	at io.undertow.servlet.core.ManagedFilter.doFilter(ManagedFilter.java:60)
	at io.undertow.servlet.handlers.FilterHandler$FilterChainImpl.doFilter(FilterHandler.java:132)
	at io.undertow.servlet.handlers.FilterHandler.handleRequest(FilterHandler.java:85)
	at io.undertow.servlet.handlers.security.ServletSecurityRoleHandler.handleRequest(ServletSecurityRoleHandler.java:62)
	at io.undertow.servlet.handlers.ServletDispatchingHandler.handleRequest(ServletDispatchingHandler.java:36)
	at org.wildfly.extension.undertow.security.SecurityContextAssociationHandler.handleRequest(SecurityContextAssociationHandler.java:78)
	at io.undertow.server.handlers.PredicateHandler.handleRequest(PredicateHandler.java:43)
	at io.undertow.servlet.handlers.security.SSLInformationAssociationHandler.handleRequest(SSLInformationAssociationHandler.java:131)
	at io.undertow.servlet.handlers.security.ServletAuthenticationCallHandler.handleRequest(ServletAuthenticationCallHandler.java:57)
	at io.undertow.server.handlers.PredicateHandler.handleRequest(PredicateHandler.java:43)
	at io.undertow.security.handlers.AbstractConfidentialityHandler.handleRequest(AbstractConfidentialityHandler.java:46)
	at io.undertow.servlet.handlers.security.ServletConfidentialityConstraintHandler.handleRequest(ServletConfidentialityConstraintHandler.java:64)
	at io.undertow.security.handlers.AuthenticationMechanismsHandler.handleRequest(AuthenticationMechanismsHandler.java:58)
	at io.undertow.servlet.handlers.security.CachedAuthenticatedSessionHandler.handleRequest(CachedAuthenticatedSessionHandler.java:72)
	at io.undertow.security.handlers.NotificationReceiverHandler.handleRequest(NotificationReceiverHandler.java:50)
	at io.undertow.security.handlers.SecurityInitialHandler.handleRequest(SecurityInitialHandler.java:76)
	at io.undertow.server.handlers.PredicateHandler.handleRequest(PredicateHandler.java:43)
	at org.wildfly.extension.undertow.security.jacc.JACCContextIdHandler.handleRequest(JACCContextIdHandler.java:61)
	at io.undertow.server.handlers.PredicateHandler.handleRequest(PredicateHandler.java:43)
	at io.undertow.server.handlers.PredicateHandler.handleRequest(PredicateHandler.java:43)
	at io.undertow.servlet.handlers.ServletInitialHandler.handleFirstRequest(ServletInitialHandler.java:282)
	at io.undertow.servlet.handlers.ServletInitialHandler.dispatchRequest(ServletInitialHandler.java:261)
	at io.undertow.servlet.handlers.ServletInitialHandler.access$000(ServletInitialHandler.java:80)
	at io.undertow.servlet.handlers.ServletInitialHandler$1.handleRequest(ServletInitialHandler.java:172)
	at io.undertow.server.Connectors.executeRootHandler(Connectors.java:199)
	at io.undertow.server.HttpServerExchange$1.run(HttpServerExchange.java:774)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
	at java.lang.Thread.run(Thread.java:748)
Caused by: java.lang.NullPointerException
	at org.highfaces.component.chart.ChartRenderer.renderScript(ChartRenderer.java:181)
	at org.highfaces.component.chart.ChartRenderer.processEvent(ChartRenderer.java:215)
	at javax.faces.component.UIComponent$ComponentSystemEventListenerAdapter.processEvent(UIComponent.java:2584)
	at javax.faces.event.SystemEvent.processListener(SystemEvent.java:108)

stephanrauh · 2018-10-13T12:39:16Z

I suppose we can close this ticket now.

stephanrauh self-assigned this Oct 2, 2018

stephanrauh added documentation under consideration labels Oct 2, 2018

stephanrauh added a commit to TheCoder4eu/BootsFacesWeb that referenced this issue Oct 5, 2018

TheCoder4eu/BootsFaces-OSP#1012 added new insights to the documentation

bfe3f80

stephanrauh closed this as completed Oct 13, 2018

TheCoder4eu added this to the v1.4.0 milestone Oct 13, 2018

TheCoder4eu removed the under consideration label Oct 13, 2018

TheCoder4eu mentioned this issue Oct 13, 2018

v1.4.0 Ship List #1015

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HighCharts configuration missing. #1012

HighCharts configuration missing. #1012

bytecode-seller commented Sep 30, 2018

bytecode-seller commented Sep 30, 2018

stephanrauh commented Oct 2, 2018

stephanrauh commented Oct 2, 2018

bauerlive commented Oct 3, 2018

stephanrauh commented Oct 3, 2018

bytecode-seller commented Oct 3, 2018

bauerlive commented Oct 4, 2018

bauerlive commented Oct 4, 2018

bytecode-seller commented Oct 4, 2018

stephanrauh commented Oct 13, 2018

HighCharts configuration missing. #1012

HighCharts configuration missing. #1012

Comments

bytecode-seller commented Sep 30, 2018

bytecode-seller commented Sep 30, 2018

stephanrauh commented Oct 2, 2018

stephanrauh commented Oct 2, 2018

bauerlive commented Oct 3, 2018

stephanrauh commented Oct 3, 2018

bytecode-seller commented Oct 3, 2018

bauerlive commented Oct 4, 2018

bauerlive commented Oct 4, 2018

bytecode-seller commented Oct 4, 2018

stephanrauh commented Oct 13, 2018