如何动态更改和加载javafx webview中的内容?

时间:2017-04-21 23:40:40

标签: java javafx javafx-2 javafx-8 javafx-webengine

我正在尝试使用JavaFX WebView使其成为富文本编辑器,可以设置为可编辑(真/假),并且可以设置其内容的样式。我有一个EditableWebView类,其中StackPane延伸,WebView作为孩子添加到其中。现在我继承了另外两个类ChatInputEditorTranscriptWindow这个类。在主应用程序类中,我将它们添加到SplitPane中,我希望相应地将它们作为发送方和接收方。但loadContent("")无法帮助将内容加载到接收者。以下是我的代码......

public class EditableWebView extends StackPane {

    private final WebView editor = new WebView();
    private final WebEngine engine = editor.getEngine();
    private final BooleanProperty editable = new SimpleBooleanProperty();
    private final StringProperty textProperty = new SimpleStringProperty();

    private String contentEditable = "<body bgcolor='cornsilk' "
            + "onLoad='document.body.focus();' "
            + "contenteditable='true'/>";

    private String content = "<body bgcolor='aqua' "
            + "onLoad='document.body.focus();' />";

    private String contents = "";

    public EditableWebView() {
        editable.addListener((obs, old, newValue) -> {
            if (newValue) {
                engine.loadContent(contentEditable);
                engine.executeScript("document.body.focus()");
                editor.requestFocus();
            }
        });

        textProperty.addListener((observable, oldString, newString) -> {

        });

        engine.getLoadWorker().stateProperty().addListener((ov, oldState, newState) -> {
            if (newState == Worker.State.SUCCEEDED) {

            }
        });

        getChildren().add(editor);
    }

    public WebView getEditor() {
        return editor;
    }

    public WebEngine getEngine() {
        return engine;
    }

    public void clearEditor() {
        engine.loadContent(contentEditable);
    }

    public void clearView() {
        engine.loadContent(content);
    }

    public String getContent() {
        return (String) engine.executeScript("document.documentElement.innerHTML");
    }

    public void setContent(String content) {
        engine.loadContent(content);
    }

    public final void setEditable(Boolean value) {
        editable.set(value);
    }

    public final Boolean getEditable() {
        return editable.get();
    }

    public final BooleanProperty editableProperty() {
        return editable;
    }
}

以下是我的可编辑编辑器类,其行为类似于发件人

public class ChatInputEditor extends EditableWebView{
    private Message msg = Message.getInstance();
    private TranscriptWindow tw = TranscriptWindow.getInstance();

    public ChatInputEditor(){
        this.setEditable(true); 

        this.setOnKeyPressed((KeyEvent event) -> {
            if(event.getCode() == KeyCode.ENTER){
                String mesg = getContent();
                msg.setMessage(mesg); 
                tw.setRcvd(true); 
                this.clearEditor();
            }
        });
    }
}

这是不可编辑的编辑器,其作用类似于接收器

public class TranscriptWindow extends EditableWebView{

    private Message msg = Message.getInstance();
    private BooleanProperty rcvd = new SimpleBooleanProperty();

    private static TranscriptWindow singleton;
    private static final Object LOCK = new Object();

    public static TranscriptWindow getInstance() {
        // Synchronize on LOCK to ensure that we don't end up creating two singletons.
        synchronized (LOCK) {
            if (null == singleton) {
                TranscriptWindow controller = new TranscriptWindow();
                singleton = controller;
            }
        }
        return singleton;
    }

    public TranscriptWindow(){        
        rcvd.addListener((obs,old,newValue)->{
            if(newValue){
                System.out.println("receiving");
                String mesg = msg.getMessage();
                setContent(mesg);
                rcvd.set(false); 
            }
        });
    }

    public final void setRcvd(Boolean value) {
        rcvd.set(value);
    }

    public final Boolean getRcvd() {
        return rcvd.get();
    }

    public final BooleanProperty rcvdProperty() {
        return rcvd;
    }
}

Message是一个带有getter和setter的简单POJO类

public class Message {
    private String message;

    private static Message singleton;
    private static final Object LOCK = new Object();

    public static Message getInstance() {
        // Synchronize on LOCK to ensure that we don't end up creating two singletons.
        synchronized (LOCK) {
            if (null == singleton) {
                Message controller = new Message();
                singleton = controller;
            }
        }
        return singleton;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

最后这是我的应用程序类

public class EditableWebViewTry extends Application{

    @Override
    public void start(Stage stage) throws Exception {
        SplitPane pane = new SplitPane(); 
        pane.setDividerPositions(0.70); 
        pane.setOrientation(Orientation.VERTICAL); 
        pane.getItems().add(new TranscriptWindow());
        pane.getItems().add(new ChatInputEditor());
        Scene scene = new Scene(pane);
        stage.setScene(scene); 
        stage.setHeight(300); 
        stage.setWidth(200); 
        stage.show();   
    }

    public static void main(String args[]){
        launch(args);
    }

}

我现在面临的问题是我无法从其中的一个实例中将内容设置为另一个WebView实例。我已经在网上浏览了很多内容,但没有找到任何帮助。我是这里的新手,也是javafx。所以请帮助我。提前谢谢。

0 个答案:

没有答案