javaFX实例1-webView实现简单浏览器

 webView:

是一个管理webEngine和显示它中间内容的节点。这个对象只能从fx的线程中创建。

webEngine:

是一个管理网页的不可见控件,它可以加载网页,创建文档模型,运行javascript,加载必要的样式,很重要的是它提供的网页的文档模型很不错,另外,它还可以实现java应用程序和javascript的双向通信。

1.访问页面

1.通过任意的url地址进行访问,基于java.net包来实现,engine.load(String url)即可

2.从in-memory String的方式(内存查找已有网址的字符串) 通过loadContent(java.lang.String)或者loadContent(java.lang.String, java.lang.String)的方式实现。    

2.回调函数
这些回调函数被调用时,使用页面上的脚本运行请求对用户界面进行操作,例如,打开一个弹出窗口,或改变状态的文本。一个webengine对象不能处理这些请求内部,所以它将请求传递给相应的回调。如果没有回调是一个具体的操作定义该请求被忽略    
     
  • The table below shows JavaScript user interface methods and properties with their corresponding WebEngine callbacks:

    JavaScript method/propertyWebEngine callback
    window.alert()onAlert
    window.confirm()confirmHandler
    window.open()createPopupHandler
    window.open() and
    window.close()
    onVisibilityChanged
    window.prompt()promptHandler
    Setting window.statusonStatusChanged
    Setting any of the following:
    window.innerWidth, window.innerHeight,
    window.outerWidth, window.outerHeight,
    window.screenX, window.screenY,
    window.screenLeft, window.screenTop
    onResized
       事例代码:
  • Stage stage;
    webEngine.setOnResized(
            new EventHandler<WebEvent<Rectangle2D>>() {
                public void handle(WebEvent<Rectangle2D> ev) {
                    Rectangle2D r = ev.getData();
                    stage.setWidth(r.getWidth());
                    stage.setHeight(r.getHeight());
                }
            });
     
也就是说,webEngine可以获得javascript的内容,以及用户的响应,实现了java程序和javascript的交互。
3.文档对象入口
也就是支持dom解析
  • EventListener listener = new EventListener() {
        public void handleEvent(Event ev) {
            Platform.exit();
        }
    };
    
    Document doc = webEngine.getDocument();
    Element el = doc.getElementById("exit-app");
    ((EventTarget) el).addEventListener("click", listener, false);
     
4.执行javascript
   
webEngine.executeScript("history.back()");
5.就是java和javascript的交互,可以参考api

下面是代码
public class MyWebViewSample extends Application {
    public static final String defaultURL="http://www.baidu.com";
    @Override
    public void start(Stage primaryStage) {
        init( primaryStage);
        primaryStage.show();
    }
    private void init(Stage primaryStage){
        final Stage stage=primaryStage;
        Group group=new Group();//作为根节点,也就是root
        primaryStage.setScene(new Scene(group));
        
        WebView webView=new WebView();
        final WebEngine engine=  webView.getEngine();
        engine.load(defaultURL);
        
        final TextField textField=new TextField(defaultURL);
        /**修改输入栏的地址,也就是访问那个网站,这个地址栏显示那个网站的地址
         * locationProperty()是获得当前页面的url封装好的ReadOnlyStringProperty对象
         */
        engine.locationProperty().addListener(new ChangeListener<String>(){
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
                textField.setText(newValue);
            }
        });
        /**
         * 设置标题栏为当前访问页面的标题。
         */
        engine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>(){
            @Override
            public void changed(ObservableValue<? extends Worker.State> observable, Worker.State oldValue, Worker.State newValue) {
                if(newValue==Worker.State.SUCCEEDED){
                    stage.setTitle(engine.getTitle());
                }
            }
        });
        
        
       /**
        * 测试能否获得javascript上面的交互内容。
        * 可以自己写一个包含window.alert("neirong")的html进行测试。
        * 返回的是neirong
        */
        engine.setOnAlert(new EventHandler<WebEvent<String>>() {

            @Override
            public void handle(WebEvent<String> event) {
                System.out.println("this is event"+event);
            }
        });

        //加载新的地址
        EventHandler<ActionEvent> handler= new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
            engine.load(textField.getText().startsWith("http://")?textField.getText().trim():"http://"+textField.getText().trim());
            }
        };
        
        textField.setOnAction(handler);
        
        Button okButton=new Button("go");
        okButton.setDefaultButton(true);
        okButton.setOnAction(handler);
        
        HBox hbox=new HBox();
        hbox.getChildren().addAll(textField,okButton);
        HBox.setHgrow(textField, Priority.ALWAYS);
        
        VBox vBox=new VBox();
        vBox.getChildren().addAll(hbox,webView);
        VBox.setVgrow(webView, Priority.ALWAYS);
        
        group.getChildren().add(vBox);
    }
    /**
     *
     * @param args
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}


        

javafx -fx-background-image是JavaFX中用于设置背景图片的样式属性。通过设置该属性,可以将指定的图片作为背景图像应用于JavaFX场景或节点。具体的使用方式是在CSS样式中使用类似以下语法进行设置: -fx-background-image: url("image.jpg"); 其中,url("image.jpg")表示要使用的图片的路径和文件名。注意,该路径可以是相对路径或绝对路径。 此外,还可以通过其他样式属性来调整背景图片的显示方式,例如设置背景图片的位置、尺寸、重复方式等。可以使用类似以下语法进行设置: -fx-background-position: center; -fx-background-size: cover; -fx-background-repeat: no-repeat; 以上是设置背景图片的一些基本用法,具体的样式属性和用法可以参考JavaFX的相关文档和API。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [JavaFX官方教程(一)之JavaFX概述](https://blog.csdn.net/moakun/article/details/83045838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [JavaFX学习笔记](https://blog.csdn.net/lsj1997718117/article/details/122781016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值