JavaFx |搜索并突出显示文字|为已加载的网页添加搜索栏

时间:2013-10-17 04:59:29

标签: html search user-interface javafx

我使用了SimpleSwingBrowser示例(http://docs.oracle.com/javafx/2/swing/SimpleSwingBrowser.java.htm)并添加了一些我自己的代码用于日志尾部。

我想为其添加搜索栏功能(搜索和突出显示文字)。

经过数小时的谷歌搜索和自我实验后,我找不到办法。 有人可以给我一个开始写这种能力的方向。

1 个答案:

答案 0 :(得分:5)

有关基于JavaScript的解决方案的建议

使用现有的JavaScript突出显示库,例如jQuery highlighthilitor.js

有关基于Java的解决方案的建议

在加载文档后,使用Java w3c DOM API对WebEngine文档对象执行操作。

在JavaFX WebView核心实施中获取Search API

我创建了功能请求RT-23383 Text search support for WebView。功能请求目前处于打开状态且未提及 - 您可以在问题跟踪器中创建一个帐户,并对功能请求进行投票或评论。

<强>示例

此示例使用jQuery高亮显示。用户在文本字段中键入要突出显示的单词,然后按突出显示按钮突出显示页面中所有出现的单词,或者删除突出显示按钮以清除所有标记的突出显示。您可以修改示例以允许进一步基于jQuery的搜索滚动到下一个和先前突出显示的单词。

我试图让它与任意网页一起工作,但这种逻辑打败了我。如果您控制要搜索的页面的源,并且可以添加对jQuery高亮插件的引用,并将它的样式类添加到您的页面,则此示例程序可能是一个选项。

highlight

import javafx.application.Application;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.web.*;
import javafx.stage.Stage;

public class WebViewSearch extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        final WebView webView = new WebView();
        final WebEngine engine = webView.getEngine();
        engine.load("http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html");

        final TextField searchField = new TextField("light");
        searchField.setPromptText("Enter the text you would like to highlight and press ENTER to highlight");
        searchField.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                if (engine.getDocument() != null) {
                    highlight(
                            engine,
                            searchField.getText()
                    );
                }
            }
        });

        final Button highlightButton = new Button("Highlight");
        highlightButton.setDefaultButton(true);
        highlightButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                searchField.fireEvent(new ActionEvent());
            }
        });
        final Button removeHighlightButton = new Button("Remove Highlight");
        removeHighlightButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                removeHighlight(
                        engine
                );

            }
        });
        removeHighlightButton.setCancelButton(true);

        HBox controls = new HBox(10);
        controls.getChildren().setAll(
                highlightButton,
                removeHighlightButton
        );

        VBox layout = new VBox(10);
        layout.getChildren().setAll(searchField, controls, webView);
        searchField.setMinHeight(Control.USE_PREF_SIZE);
        controls.setMinHeight(Control.USE_PREF_SIZE);

        controls.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());
        searchField.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());

        primaryStage.setScene(new Scene(layout));
        primaryStage.show();

        webView.requestFocus();
    }

    private void highlight(WebEngine engine, String text) {
        engine.executeScript("$('body').removeHighlight().highlight('" + text + "')");
    }

    private void removeHighlight(WebEngine engine) {
        engine.executeScript("$('body').removeHighlight()");
    }

}