java fx | Tech Tips & Tricks

There is no way in the API to do this. However, Frode Johansen made a custom class that inherited Region and placed a WebView control inside it, then adjusting its height based on the document height after it has loaded its content by executing a Javascript one-liner code in order to retrieve the height value.

A very big thank you because considering that the Label control cannot display formatted HTML content, the only way to work around this limitation is to create a custom class of it. Luckily, he has saved us all the trouble of making one.

Here is the custom class.

public final class WebViewFitContent extends Region {
    final WebView webview = new WebView();
    final WebEngine webEngine = webview.getEngine();
    public WebViewFitContent(String content) {    	
    	webview.setPrefHeight(5);
        widthProperty().addListener(new ChangeListener<Object>() {
            @Override
            public void changed(ObservableValue<?> observable, Object oldValue, Object newValue) { 
                Double width = (Double)newValue;
                webview.setPrefWidth(width);
                adjustHeight();
            }    
        });
        webview.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<State>() {
            @Override
            public void changed(ObservableValue<? extends State> arg0, State oldState, State newState)         {
                if (newState == State.SUCCEEDED) {
                    adjustHeight();
                }				
            }
        });        
        webview.getChildrenUnmodifiable().addListener(new ListChangeListener<Node>() {
            @Override
            public void onChanged(Change<? extends Node> change) {
                Set<Node> scrolls = webview.lookupAll(".scroll-bar");
                for (Node scroll : scrolls) {
                   scroll.setVisible(false);
                }
            }
    	});
        setContent(content);
        getChildren().add(webview);
    }
    public void setContent(final String content) {
        Platform.runLater(new Runnable(){
            @Override                                
            public void run() {
                webEngine.loadContent(getHtml(content));
                Platform.runLater(new Runnable(){
                    @Override                                
                    public void run() {
                        adjustHeight();
                    }               
                });
            }               
    	});
    }
    @Override 
    protected void layoutChildren() {
        double w = getWidth();
        double h = getHeight();
        layoutInArea(webview,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
    }
    private void adjustHeight() {
        Platform.runLater(new Runnable(){
            @Override                                
            public void run() {
                try {
                    Object result = webEngine.executeScript("document.getElementById('mydiv').offsetHeight");
                    if (result instanceof Integer) {
                        Integer i = (Integer) result;
                        double height = new Double(i);
                        height = height + 20;
                        webview.setPrefHeight(height);
                        webview.getPrefHeight());
                    }
                } catch (JSException e) { } 
            }               
        });
    }
    private String getHtml(String content) {
        return "<html><body>" +
                "<div id=\"mydiv\">" + content + "</div>" +
		"</body></html>";
    }
}

public final class WebViewFitContent extends Region {

final WebView webview = new WebView();

final WebEngine webEngine = webview.getEngine();

public WebViewFitContent(String content) {

webview.setPrefHeight(5);

widthProperty().addListener(new ChangeListener<Object>() {

@Override

public void changed(ObservableValue<?> observable, Object oldValue, Object newValue) {

Double width = (Double)newValue;

webview.setPrefWidth(width);

adjustHeight();

}

});

webview.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<State>() {

@Override

public void changed(ObservableValue<? extends State> arg0, State oldState, State newState) {

if (newState == State.SUCCEEDED) {

adjustHeight();

}

});

webview.getChildrenUnmodifiable().addListener(new ListChangeListener<Node>() {

@Override

public void onChanged(Change<? extends Node> change) {

Set<Node> scrolls = webview.lookupAll(".scroll-bar");

for (Node scroll : scrolls) {

scroll.setVisible(false);

}

});

setContent(content);

getChildren().add(webview);

}

public void setContent(final String content) {

Platform.runLater(new Runnable(){

@Override

public void run() {

webEngine.loadContent(getHtml(content));

Platform.runLater(new Runnable(){

@Override

public void run() {

adjustHeight();

}

});

}

});

}

@Override

protected void layoutChildren() {

double w = getWidth();

double h = getHeight();

layoutInArea(webview,0,0,w,h,0, HPos.CENTER, VPos.CENTER);

}

private void adjustHeight() {

Platform.runLater(new Runnable(){

@Override

public void run() {

try {

Object result = webEngine.executeScript("document.getElementById('mydiv').offsetHeight");

if (result instanceof Integer) {

Integer i = (Integer) result;

double height = new Double(i);

height = height + 20;

webview.setPrefHeight(height);

webview.getPrefHeight());

}

} catch (JSException e) { }

}

});

}

private String getHtml(String content) {

return "<html><body>" +

"<div id=\"mydiv\">" + content + "</div>" +

"</body></html>";

}

If ever this will happen to you, chances are you used a bean class as the object passed to the ObservableList. Hence, any update done will not update your TableView unless it is binded to that bean class.

To do so, replace your data types like long, int, double to use the Property class and instantiate it with SimpleProperty class. For String, use StringProperty and instantiate it with SimpleStringProperty.

Check this sample class:

public class MyClass {
    private StringProperty name = new SimpleStringProperty;
    public String getName() {
        return name.get();
    }
    public void setName(String name) {
        this.name.set(name);
    }
    public StringProperty nameProperty() {
        return name;
    }
}

public class MyClass {

private StringProperty name = new SimpleStringProperty;

public String getName() {

return name.get();

}

public void setName(String name) {

this.name.set(name);

}

public StringProperty nameProperty() {

return name;

}

Your bean class must have a Property method that will return the property class in order for binding to take effect with your TableView and ObservableList. This is so that the values of the individual entity fields can be observed for changes and any update action will take effect.

Tech Tips & Tricks

tech tips gadgets programming software

Category: java fx

How To Fit WebView Height Based On Its Content In Java FX 2.2

How To Create A DatePicker In Java FX 2

TableView Does Not Update ObservableList In Java FX 2.2