`
somefuture
  • 浏览: 1089573 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

（翻译）第二十五回 JavaFX2.0 Html编辑器

 
阅读更多

原文地址http://download.oracle.com/javafx/2.0/ui_controls/editor.htm

 

 

HTMLEditor控件是一个全功能的富文本编辑器。除了基本编辑功能外，它还支持以下特性：

  • 文本格式，包括粗体、斜体、下划线等等

  • 段落设置，比如格式、字体、字号

  • 前景和背景颜色

  • 文本缩进

  • 圆点和数字列表

  • 文本对齐

  • 添加水平标尺

  • 复制和粘贴文本块

Figure 19-1 是一个JavaFX应用中的富文本编辑器。

Figure 19-1 HTML Editor

Description of Figure 19-1 follows
Description of "Figure 19-1 HTML Editor"

HTMLEditor 类呈现编辑内容使用的是HTML字符串形式，比如说，Figure 19-1 中的内容呈现以下字符串："<html><head></head><body contenteditable="true"><h1>Heading</h1><div><u>Text</u>, some text</div></body></html> ."

由于HTMLEditor 类继承了Node 类，所以可以为它的实例应用视效和转换。

 

添加HTML Editor

和其他UI控件一样， HTMLEditor组件必须加入场景才能在应用中显示。可以像 Example 19-1 这样直接添加，或者通过布局容器。

Example 19-1 Adding an HTML Editor to a JavaFX Application

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class HTMLEditorSample extends Application {
 
    @Override
    public void start(Stage stage) {
        stage.setTitle("HTMLEditor Sample");
        stage.setWidth(400);
        stage.setHeight(300);   
        final HTMLEditor htmlEditor = new HTMLEditor();
        htmlEditor.setPrefHeight(245);
        Scene scene = new Scene(htmlEditor);       
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

编译运行上面的代码效果是 Figure 19-2 .

Figure 19-2 Initial View of the HTMLEditor Component

Description of Figure 19-2 follows
Description of "Figure 19-2 Initial View of the HTMLEditor Component"

实现该组件后就有格式栏，不能关闭它们。不过也可以使用CSS来改变其外观。见Example 19-2 .

Example 19-2 Styling the HTMLEditor

htmlEditor.setStyle(
    "-fx-font: 12 cambria;"
    + "-fx-border-color: brown; "
    + "-fx-border-style: dotted;"
    + "-fx-border-width: 2;"
);

把它们加入到 Example 19-1 ，效果是Figure 19-3 .

Figure 19-3 Alternative View of the HTMLEditor Component

Description of Figure 19-3 follows
Description of "Figure 19-3 Alternative View of the HTMLEditor Component"

现在组件的边框和格式栏的字体改变了。

HTMLEditor 类提供了一个方法来定义应用启动后编辑区显示的内容。使用setHtmlText 方法来设置编辑器的初始文本，见Example 19-3。

Example 19-3 Setting the Text Content

private final String INITIAL_TEXT = "<html><body>Lorem ipsum dolor sit "
    + "amet, consectetur adipiscing elit. Nam tortor felis, pulvinar "
    + "in scelerisque cursus, pulvinar at ante. Nulla consequat"
    + "congue lectus in sodales. Nullam eu est a felis ornare "
    + "bibendum et nec tellus. Vivamus non metus tempus augue auctor "
    + "ornare. Duis pulvinar justo ac purus adipiscing pulvinar. "
    + "Integer congue faucibus dapibus. Integer id nisl ut elit "
    + "aliquam sagittis gravida eu dolor. Etiam sit amet ipsum "
    + "sem.</body></html>";

htmlEditor.setHtmlText(INITIAL_TEXT);

Figure 19-4 是使用setHTMLText 方法后的编辑器。

 

Figure 19-4 HTMLEditor with the Predefined Text Content

Description of Figure 19-4 follows
Description of "Figure 19-4 HTMLEditor with the Predefined Text Content"

 

可以在字符串中使用HTML标签来指定初始显示的文本格式。

用HTML Editor构建用户接口

能够使用 HTMLEditor 控件来实现典型的用户接口，比如说可以实现消息服务、email客户端、甚至内容管理系统。

下面实现一个消息排版窗口，在很多email客户端应用中都可以找到它。

 

Example 19-4 HTMLEditor Added to the Email Client UI

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class HTMLEditorSample extends Application {
    
    @Override
    public void start(Stage stage) {
        stage.setTitle("Message Composing");
        stage.setWidth(500);
        stage.setHeight(500);
        Scene scene = new Scene(new Group());
    
        final VBox root = new VBox();        
        root.setPadding(new Insets(8, 8, 8, 8));
        root.setSpacing(5);
        root.setAlignment(Pos.BOTTOM_LEFT);
        
        final GridPane grid = new GridPane();
        grid.setVgap(5);
        grid.setHgap(10);
              
        final ChoiceBox sendTo = 
            new ChoiceBox(FXCollections.observableArrayList(
                "To:", "Cc:", "Bcc:")
        );
        
        sendTo.setPrefWidth(100);                
        GridPane.setConstraints(sendTo, 0, 0);
        grid.getChildren().add(sendTo);
        
        final TextField tbTo = new TextField();
        tbTo.setPrefWidth(400);
        GridPane.setConstraints(tbTo, 1, 0);
        grid.getChildren().add(tbTo);
        
        final Label subjectLabel = new Label("Subject:");
        GridPane.setConstraints(subjectLabel, 0, 1);
        grid.getChildren().add(subjectLabel);        
        
        final TextField tbSubject = new TextField();
        tbTo.setPrefWidth(400);
        GridPane.setConstraints(tbSubject, 1, 1);
        grid.getChildren().add(tbSubject);
        
        root.getChildren().add(grid);
        
        final HTMLEditor htmlEditor = new HTMLEditor();
        htmlEditor.setPrefHeight(370);
 
        root.getChildren().addAll(htmlEditor, new Button("Send"));        
      
        final Label htmlLabel = new Label();
        htmlLabel.setWrapText(true);
                      
        scene.setRoot(root);
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

 

该接口包括一个选项框来选择接受类型，2个文本框来输入email地址和主题，一个标签来显示主题字段，一个编辑器，还有发送按钮。

使用Grid 和VBox布局容器把这些UI控件加入到应用的场景中。编译运行的效果见 Figure 19-5 ，这是一个用户正在排版周报。

 

Figure 19-5 Email Client User Interface

Description of Figure 19-5 follows
Description of "Figure 19-5 Email Client User Interface"

 

调用setPrefWidth 或 setPrefHeight方法为 HTMLEditor对象设置宽或高 ，当然根本不指定也行。Example 19-4 中为组件高度指定了值，而宽度由VBox悲剧容器控制了。当内容文本超出了编辑区的宽度和高度时，垂直滚动条就显示出来。

 

获取HTML内容

用JavaFX HTMLEditor控件，你可以编辑和设置初始内容。此外，你还可以以HTML格式获得输入的和编辑的内容。具体实现见 Example 19-5

 

Example 19-5 Retrieving HTML Code

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class HTMLEditorSample extends Application {    
    private final String INITIAL_TEXT = "Lorem ipsum dolor sit "
            + "amet, consectetur adipiscing elit. Nam tortor felis, pulvinar "
            + "in scelerisque cursus, pulvinar at ante. Nulla consequat"
            + "congue lectus in sodales. Nullam eu est a felis ornare "
            + "bibendum et nec tellus. Vivamus non metus tempus augue auctor "
            + "ornare. Duis pulvinar justo ac purus adipiscing pulvinar. "
            + "Integer congue faucibus dapibus. Integer id nisl ut elit "
            + "aliquam sagittis gravida eu dolor. Etiam sit amet ipsum "
            + "sem.";
 
    @Override
    public void start(Stage stage) {
        stage.setTitle("HTMLEditor Sample");
        stage.setWidth(500);
        stage.setHeight(500);
        Scene scene = new Scene(new Group());
    
        VBox root = new VBox();      
        root.setPadding(new Insets(8, 8, 8, 8));
        root.setSpacing(5);
        root.setAlignment(Pos.BOTTOM_LEFT);
              
        final HTMLEditor htmlEditor = new HTMLEditor();
        htmlEditor.setPrefHeight(245);
        htmlEditor.setHtmlText(INITIAL_TEXT);       
 
        final TextArea htmlCode = new TextArea();
        htmlCode.setWrapText(true);
    
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.getStyleClass().add("noborder-scroll-pane");
        scrollPane.setContent(htmlCode);
        scrollPane.setFitToWidth(true);
        scrollPane.setPrefHeight(180);
 
        Button showHTMLButton = new Button("Produce HTML Code");
        root.setAlignment(Pos.CENTER);
        showHTMLButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent arg0) {
                htmlCode.setText(htmlEditor.getHtmlText());




            }
        });
        
        root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane);
        scene.setRoot(root);
 
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

 

getHTMLText方法获得了编辑内容并以HTML字符串形式呈现。该内容传递给文本区，这样就能查看、复制、粘贴这些HTML代码。 Figure 19-6 就是样例。

 

Figure 19-6 Obtaining the HTML Content

Description of Figure 19-6 follows
Description of "Figure 19-6 Obtaining the HTML Content"

 

 类似地，也可以获得HTML代码比in个保存为文件或者发送到WebView对象，以同步编辑器和绑定的浏览器中的内容。 下面实现了这个任务 Example 19-6 .

Example 19-6 Rendering Edited HTML Content in a Browser

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.scene.web.WebEngine;




import javafx.scene.web.WebView;




import javafx.stage.Stage;
 
public class HTMLEditorSample extends Application {
    private final String INITIAL_TEXT = "Lorem ipsum dolor sit "
            + "amet, consectetur adipiscing elit. Nam tortor felis, pulvinar "
            + "in scelerisque cursus, pulvinar at ante. Nulla consequat"
            + "congue lectus in sodales. Nullam eu est a felis ornare "
            + "bibendum et nec tellus. Vivamus non metus tempus augue auctor "
            + "ornare. Duis pulvinar justo ac purus adipiscing pulvinar. "
            + "Integer congue faucibus dapibus. Integer id nisl ut elit "
            + "aliquam sagittis gravida eu dolor. Etiam sit amet ipsum "
            + "sem.";
 
    @Override
    public void start(Stage stage) {
        stage.setTitle("HTMLEditor Sample");
        stage.setWidth(500);
        stage.setHeight(500);
        Scene scene = new Scene(new Group());
    
        VBox root = new VBox();     
        root.setPadding(new Insets(8, 8, 8, 8));
        root.setSpacing(5);
        root.setAlignment(Pos.BOTTOM_LEFT);
 
        final HTMLEditor htmlEditor = new HTMLEditor();
        htmlEditor.setPrefHeight(245);
        htmlEditor.setHtmlText(INITIAL_TEXT);
        
        final WebView browser = new WebView();




        final WebEngine webEngine = browser.getEngine();




     
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.getStyleClass().add("noborder-scroll-pane");
        scrollPane.setStyle("-fx-background-color: white");
        scrollPane.setContent(browser);
        scrollPane.setFitToWidth(true);
        scrollPane.setPrefHeight(180);
 
        Button showHTMLButton = new Button("Load Content in Browser");
        root.setAlignment(Pos.CENTER);
        showHTMLButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent arg0) {                
                webEngine.loadContent(htmlEditor.getHtmlText());




            }
        });
        
        root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane);
        scene.setRoot(root);
 
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

从htmlEditor 组件获得HTML代码加载到WebEngine 对象来指定绑定浏览器的内容。每次用户点击Load Content in Browser按钮，编辑的文本就更新到浏览器中。Figure 19-7 是Example 19-6 运行的效果。

 

Figure 19-7 Loading Content in a Browser

Description of Figure 19-7 follows
Description of "Figure 19-7 Loading Content in a Browser"

 

使用Text 组件来添加非编辑文本内容。到Using Text and Text Effects in JavaFX 了解更多Text组件。

分享到：
| （翻译）第二十四回 JavaFX2.0 提示条Tool ...
评论
2 楼 huhuanqadn 2011-11-14  
博主确实辛苦了哦。
1 楼 Tracyer 2011-10-29  
lz辛苦了，很看好javafx，下在学习中，
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaFX2.0 体系结构和框架

    【JavaFX2.0 体系结构和框架】深入解析 JavaFX2.0 是一个基于Java技术的丰富客户端平台，专为开发富互联网应用程序（RIAs）设计，它以其出色的动态画面和美观的用户界面而受到赞誉。尽管中文资料相对较少，但通过对...

    javaFX高级教程JavaFX2.0的FXML语言 中文文档

    ### JavaFX 2.0 的 FXML 语言高级教程 #### 概述 JavaFX 2.0 引入了一种新的声明性标记语言——FXML（发音为 “fizz-le”），这是一种基于 XML 的语言，专门用于定义应用程序的用户界面。通过使用 FXML，开发者...

    javafx2.0官方例子

    javafx2.0，java，javafx，例子，代码 Sun公司（已于20092008年12月05日发布了JavaFX技术的正式版，它使您能利用 JavaFX 编程语 言开发富互联网应用程序(RIA）。JavaFX Script编程语言（以下称为JavaFX）是Sun微...

    javafx2.0 中文文档.zip

    这个“javafx2.0 中文文档.zip”压缩包包含了关于JavaFX 2.0的中文文档，对于理解和学习这个技术至关重要。 首先，JavaFX 2.0的核心是它的 scenegraph 模型，这是一种基于节点的对象模型，用于构建复杂的用户界面。...

    JavaFX 2.0 電子書 - Pro JavaFX 2

    最新JavaFx 2.0 電子書 In Pro JavaFX 2: A Definitive Guide to Rich Clients with Java Technology, Jim Weaver, Weiqi Gao, Stephen Chin, Dean Iverson, and Johan Vos show you how you can use the JavaFX ...

    JavaFX高级教程：JavaFX2.0的FXML语言（中文版)

    JavaFX 2.0 是一个强大的富互联网应用程序（RIA）平台，用于构建具有美观图形界面的应用程序。在JavaFX 2.0中，FXML（FXML Language）被引入，这是一种基于XML的声明性语言，专门用于定义应用程序的用户界面。这个...

    JavaFx2.0入门指南

    JavaFX 2.0 入门指南是针对那些希望通过JavaFX快速开发富用户体验应用程序的开发者设计的。这个指南，源自Oracle官方，包含了中英文对照，旨在帮助初学者快速上手。在本文档中，你将学习如何利用JavaFX创建一个名为...

    JavaFX 2.0 Introduction by Example.zip

    JavaFX 2.0 Introduction by Example.zip是javafx2.0的最新书籍《[JavaFX.2.0：Introduction.by.Example].Carl.Dea》上的源码！大家可以下载本书和源码一起看！我都上传了！

    javafx2.0在netbeans插件

    JavaFX 2.0 是 Oracle 公司推出的一个强大的富客户端开发平台，它允许开发者创建具有丰富图形用户界面和交互性的应用程序。NetBeans IDE 是一个流行的开源集成开发环境（IDE），支持多种编程语言，包括 Java。`...

    JavaFX2.0内建控件教程（全部控件）

    ### JavaFX 2.0 内建控件教程 #### 1. UI控件概览 JavaFX 2.0 提供了一系列丰富的内置用户界面(UI)控件，这些控件可以帮助开发者快速构建美观且功能强大的应用程序。JavaFX UI 控件位于 `javafx.scene.control` ...

    Javafx 2.0: Introduction by Example

    Javafx 2.0: Introduction by Example

    JavaFX2.0基础教程.pdf

    ### JavaFX2.0基础教程知识点总结 #### 1. JavaFX概览 - **JavaFX认知**：JavaFX是一个由Java技术构建的平台，它旨在简化富互联网应用程序（RIA）的创建与部署过程，这些应用程序能够跨多个平台运行并且具有统一的...

    JavaFX2.0基础教程（整合版）

    JavaFX2.0平台是java客户端设计演进，使应用开发者易于创建和部署跨平台且表现一致的Rich Internet Application（RIAs）。JavafX是由Java技术构建，基于高性能硬件加速的媒体和图形引擎，JavaFX平台提供了一套丰富的...

    javafx_2.0_introduction_by_example

    根据给定文件的信息，我们可以提炼出关于JavaFX 2.0的重要知识点，这些知识点涵盖了JavaFX的基本概念、架构策略、发展历程以及其在图形用户界面（GUI）开发中的应用。 ### JavaFX 2.0：下一代GUI工具包 JavaFX 2.0...

    javaFX 2.0 samples

    对大家学习javaFX 2.0 会有一定的帮助。

Magicbox
Global site tag (gtag.js) - Google Analytics