Primefaces Gojs Image Not Found

[ebaykal]

I'm trying to use gojs in Primefaces. While creating a node with gojs, I could not read/set the node's image from primefaces "resources" folder.

I keep getting a "404 Not found" error. Is there anyone help me to read image file with JS?

Here is my code:

I'm using "makeImagePath" function on JS side to find image path, but it keep getting below error:

http://localhost:8080/topologyTool/reso ... switch.jpg 404 (Not Found)

In the function of makeImagePath, I tried below methods, but non of them worked.

Code: Select all

return "#{request.contextPath}/resources/gojs/images/" + icon;

return "../resources/gojs/images/" + icon;

return "../gojs/images/" + icon;

GojsController

Code: Select all

@Named
@SessionScoped
public class GojsController implements Serializable {
    
    
    public void init() {
        PrimeFaces.current().executeScript("init()");
    }

}

gojs_node.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">GoJs Node Example</ui:define>

    <ui:define name="head">
        
        <h:outputScript library="goJs" name="release/go.js"/>
        
        <script type="text/javascript">
            function init() {
                if (window.goSamples)
                    goSamples();  // init for these samples -- you don't need to call this

                var $ = go.GraphObject.make;  // for conciseness in defining templates

                

                diagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
                        {
                            "undoManager.isEnabled": true  // enable undo  redo
                        });

                
                function makeIndicator(propName) {  // the data property name
                    return $(go.Shape,
                            "Circle",
                            {width: 8, height: 8, fill: "white", strokeWidth: 0, margin: 5},
                            new go.Binding("fill", propName));
                }

                function makeImagePath(icon) {
                    return "#{request.contextPath}/resources/gojs/images/" + icon;
                }

                diagram.nodeTemplate =
                        $(go.Node, "Vertical",
                                $(go.Panel, "Auto",
                                        {background: "white"},
                                        {portId: ""}, // this whole panel acts as the only port for the node
                                        $(go.Shape, // the border
                                                {fill: "transparent", stroke: "lightgray"}),
                                        $(go.Panel, "Vertical", // everything within the border
                                                $(go.Panel, "Horizontal", // the row of status indicators
                                                        makeIndicator("ind0"),
                                                        makeIndicator("ind1"),
                                                        makeIndicator("ind2")
                                                        ), // end Horizontal Panel
                                                $(go.Picture,
                                                        {width: 32, height: 32, margin: 4},
                                                        new go.Binding("source", "icon", makeImagePath)),
                                                $(go.TextBlock,
                                                        {stretch: go.GraphObject.Horizontal, textAlign: "center"},
                                                        new go.Binding("text", "number"),
                                                        new go.Binding("background", "color"))
                                                )  // end Vertical Panel
                                        ), // end Auto Panel
                                $(go.TextBlock,
                                        {margin: 4},
                                        new go.Binding("text"))
                                );

                diagram.model.nodeDataArray = [
                    {key: 1, text: "Device Type A", number: 17, icon: "switch.jpg", color: "moccasin",
                        ind0: "red", ind1: "orange", ind2: "mediumspringgreen"},
                    {key: 2, text: "Device Type B", number: 97, icon: "switch.jpg", color: "mistyrose",
                        ind0: "lightgray", ind1: "orange", ind2: "green"}
                ];
                diagram.model.linkDataArray = [
                    {from: 1, to: 2}
                ];
            }
        </script>
    </ui:define>


    <ui:define name="content">
        <f:metadata>
            <f:event type="preRenderView" listener="#{gojsController.init()}" />
        </f:metadata>
        <div class="p-grid">
            <div class="p-col">
                <div class="card">
                    <h4>Empty Page</h4>
                    <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>

[Melloware]

Please use https://github.com/primefaces/primefaces-test to provide a real reproducer and not just code snippets.

[ebaykal]

Dear Melloware,

Thanks for answer.

Please use https://drive.google.com/file/d/1_S79d4 ... sp=sharing link to get source files.

I took js sample from https://gojs.net/latest/intro/nodes.html#NestedPanels

The output must be like:



But in my sample it is like:



Error on chrome console:

[Melloware]

Yep its a case senstive issue. Change the directory from `goJs` to `gojs`.

Then change the import to match.

Code: Select all

<h:outputScript library="gojs" name="release/go.js"/>

[ebaykal]

Hi Melloware ,

What an easy problem

Thank you for your support, it works

Yep its a case senstive issue. Change the directory from `goJs` to `gojs`.

Then change the import to match.

Code: Select all

<h:outputScript library="gojs" name="release/go.js"/>

[Melloware]

No problem!