(翻訳)第25回JavaFX 200 Htmlエディタ

13087 ワード

原文の住所http://download.oracle.com/javafx/2.0/ui_controls/editor.httm

HTMLEditor 。，：テキストフォーマットは、太字、斜体、下線などのを含む.
書式、フォント、サイズなどの段落設定
前景と背景色テキスト字下げ円点と数字リストテキスト配置水平ルーラーを追加
テキストブロックのコピーと貼り付け
Figre 19-1 JavaFXアプリケーションのリッチテキストエディタです.
Figure 19-1 HTML Editor
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を継承しました. クラスは、したがって、その実例として適用されうる.

HTML Editorを追加します
他のUIコントロールと同じで、 Node Example 19-1 このように直接追加したり、コンテナをレイアウトしたりします.
Example 19-1 Adding an HTML Editor to a JavaFX Appliation

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);
    }
}

コンパイル実行上のコードの効果は Figre 19-2 .
Figure 19-2 Initial View of the HTMleditor Component
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 ,効果はFigre 19-3です .
Figure 19-3 Alternative View of the HTMLEditor Component
Description of「Figure 19-3 Alternative View of the HTMLEditor Component」
コンポーネントの外枠と書式バーのフォントが変わりました.HTMLEditor 。 クラスは、アプリケーション起動後に編集エリアに表示されるコンテンツを定義する方法を提供する.HTMLEditor メソッドでエディタの初期テキストを設定します.Example 19-3を参照してください.
Example 19-3 Setting the Text Cotentt

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 Prefined Text Cotentt
Description of「Figure 19-4 HTMleditor with the Predefined Text Conttent」

文字列にHTMLタグを使用して初期表示のテキストフォーマットを指定できます.
HTML Editorでユーザーインターフェースを構築するsetHTMLText コントロールは、メッセージサービス、emailクライアント、さらにはコンテンツ管理システムなど、典型的なユーザーインターフェースを実現する.
以下でメッセージレイアウトウィンドウを実現します.多くのemailクライアントアプリケーションで見つけられます.

Example 19-4 HTMLEditor Added to the Email Cient 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つでメールアドレスと件名を入力し、テーマフィールド、エディタ、送信ボタンを表示します.
使用するHTMLEditor Grid Figure 19-5 ,これは1人のユーザーが週報をレイアウトしています.

Figure 19-5 Email Cient User Interface
Description of「Figur 19-5 Email Cient User Interface」
VBox UI 。 または setPrefWidth setPrefHeight ,もちろん、まったく指定しなくてもいいです.Example 19-4 にはコンポーネントの高さに値が指定されていますが、幅はHTMLEditor によって指定されています.

HTMLコンテンツの取得
JavaFX VBox 。，。 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);
    }
}

HTMLEditor ，。， HTML 。 Figure 19-6 例です

Figure 19-6 Obtaining the HTML Conttent
Description of「Figure 19-6 Obtaining the HTML Conteet」

同様に、HTMLコードはin個よりファイルとして保存されても良いし、getHTMLText HTML 。，、、 HTML 。に送信されても良い. 次はこの任務を実現した. 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);
    }
}

WebView ，。からコンポーネントはHTMLコードを取得してhtmlEditorにロードします. オブジェクトは、バインディングブラウザの内容を指定します.ユーザーがLoad ContinBrowserボタンを押すたびに、編集したテキストはブラウザに更新されます.Figur 19-7 は、Example 19-6です運転の効果

Figure 19-7 Loading Contint in a Browser
Description of「Figure 19-7 Loading Contina Browser」

使用するWebEngine コンポーネントに非編集テキストを追加します.Using Text and Text Effects in JavaFXに行きます. もっと知っています.Text

javascript事件の泡だらけの補充