Difficulty handling NULL exceptions and changing HTML within JXBrowser

Question

I have recently started using JXBrowser to build a Visualisation of Edit Distances (Levenshtein). I am using JXBrowser to integrate JAVA with HTML, CSS and JS.

My application starts with the MainFrame class by loading up my start screen, specifically hello.html.

public MainFrame() {

    final Browser browser = new Browser();
    BrowserView view = new BrowserView(browser);

    JFrame frame = new JFrame("JxBrowser - EditDistance");
    frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    frame.add(view, BorderLayout.CENTER);
    frame.setSize(500, 400);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);

    InputStream urlStream = getClass().getResourceAsStream("../web/hello.html");
    String html = null;
    try (BufferedReader urlReader = new BufferedReader(new InputStreamReader (urlStream))) {
        StringBuilder builder = new StringBuilder();
        String row;
        while ((row = urlReader.readLine()) != null) {
            builder.append(row);
        }
        html = builder.toString(); 
    }  catch (IOException e) {
        throw new RuntimeException(e);
    }

    browser.loadHTML(html);

    DOMDocument document = browser.getDocument();
    final DOMElement documentElement = document.getDocumentElement();
    if (documentElement != null) {
        try{
            DOMElement element = documentElement.findElement(By.id("button"));
            element.addEventListener(DOMEventType.OnClick, new DOMEventListener() {
                public void handleEvent(DOMEvent event) {
                    new UserInput();
                }
            }, false);
        }catch(NullPointerException e){
            System.out.println("NULLL on Entry");
        }

    }        

}

I then call UserInput() and no Null error is thrown. I then load my UserInputForm class using the same methodology as above, instead using UserInputForm.html as my view.

 InputStream urlStream = getClass().getResourceAsStream("../web/UserInputForm.html");
    String html = null;
    try (BufferedReader urlReader = new BufferedReader(new InputStreamReader (urlStream))) {
        StringBuilder builder = new StringBuilder();
        String row;
        while ((row = urlReader.readLine()) != null) {
            builder.append(row);
        }
        html = builder.toString(); 
    }  catch (IOException e) {
        throw new RuntimeException(e);
    }

    browser.loadHTML(html);


    final DOMDocument document = browser.getDocument();
    final DOMElement documentElement = document.getDocumentElement();
    if (documentElement != null) {
        DOMElement submitElement = documentElement.findElement(By.id("enterButton"));
        if (submitElement != null) {
            submitElement.addEventListener(DOMEventType.OnClick, new DOMEventListener() {
                public void handleEvent(DOMEvent event) {
                    DOMElement source = document.findElement(By.id("sourceString"));
                    DOMElement target = document.findElement(By.id("targetString"));

                }}, false);
        }
        else{
            System.out.println("NULL on Sub Form");
        }
    }

}   

The problem occurs mainly when the UserInputForm loads. I get a NULL returned by the submitElement document element. Sometimes I get a NULL returned as the application starts. I feel like I am missing a fundamental procedure when loading these forms up. Does anyone have any insight into making sure that document elements don't return NULL? Is this an issue with my HTML loading techniques?

Answer 1

The Browser.loadHTML() method is executed asynchronously as a request to load a specific HTML. Therefore, there is no guarantee that the web page is loaded completely when this method returns.

Before accessing the DOM document on the loaded web page, it is necessary to wait until the web page is loaded completely. If the web page is not loaded completely, the DOM document or some DOM elements may appear broken or missing.

The following sample code demonstrates how to load an HTML and wait until it's loaded completely:

// Blocks current thread execution and waits until the web page is loaded completely
Browser.invokeAndWaitFinishLoadingMainFrame(browser, new Callback<Browser>() {
    @Override
    public void invoke(Browser value) {
        value.loadHTML("<html><body>Your HTML goes here</body></html>");
    }
});

Note: use this approach for loading the web pages only.

The following article describes how to load a web page and wait until it is loaded completely: https://jxbrowser.support.teamdev.com/support/solutions/articles/9000013107-loading-waiting