ドキュメント



ご意見をお寄せください | 印刷 | PDF | ePub | Mobi
JavaFX: JavaFX UIコンポーネントの操作

21 HTMLエディタ

この章では、JavaFXアプリケーションで、埋込みのHTMLエディタを使用してテキストを編集する方法について説明します。

HTMLEditorコントロールは、完全な機能を備えたリッチ・テキスト・エディタです。この実装はHTML5のドキュメント編集機能をベースにしており、次の編集機能が組み込まれています。

  • 太字、イタリック、下線、取消し線のスタイルを含むテキスト形式

  • 書式、フォント・ファミリ、フォント・サイズなどの段落設定

  • 前景色および背景色

  • テキストのインデント

  • 箇条書きリストおよび番号付きリスト

  • テキスト位置合せ

  • 水平ルールの追加

  • テキスト・フラグメントのコピー・アンド・ペースト

図21-1にJavaFXアプリケーションに追加されたリッチ・テキスト・エディタを示します。

図21-1 HTMLエディタ

図21-1の説明が続きます
「図21-1 HTMLエディタ」の説明

HTMLEditorクラスはHTML文字列形式でのコンテンツの編集を表します。たとえば、図21-1に示すエディタで入力したコンテンツは、文字列「<html><head></head><body contenteditable="true"><h1>Heading</h1><div><u>Text</u>, some text</div></body></html>」で表現されます。

HTMLEditorクラスはNodeクラスの拡張であるため、このインスタンスに視覚効果を加えたり、変形することができます。

HTMLエディタの追加

その他のUIコントロールと同様に、HTMLEditorコンポーネントをシーンに追加して、アプリケーションに表示されるようにする必要があります。これは例21-1に示すようにシーンに直接追加するか、他の例で示すようにレイアウト・コンテナを介して追加できます。

例21-1 HTMLエディタのJavaFXアプリケーションへの追加

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

このコード・フラグメントのコンパイルと実行によって、図21-2に示すウィンドウが作成されます。

図21-2 HTMLエディタ・コンポーネントの初期表示

図21-2の説明が続きます
「図21-2 HTMLエディタ・コンポーネントの初期表示」の説明

HTMLEditorクラスは、アプリケーションを開始したときに編集領域に表示されるコンテンツを定義する方法を提供します。例21-2に示すように、setHtmlTextメソッドを使用してエディタの初期テキストを設定します。

例21-2 テキスト・コンテンツの設定

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

図21-3に、setHTMLTextメソッドを使用して設定したテキストのあるテキスト・エディタを例示します。

図21-3 事前定義されているテキスト・コンテンツのあるHTMLエディタ

図21-3の説明が続きます
「図21-3 事前定義されているテキスト・コンテンツのあるHTMLエディタ」の説明

この文字列にHTMLタグを使用して、最初に表示されるコンテキストに特殊な書式を適用できます。

HTMLエディタを使用したユーザー・インタフェースのビルド

HTMLEditorコントロールを使用すると、JavaFXアプリケーションに一般的なユーザー・インタフェース(UI)を実装できます。たとえば、インスタント・メッセンジャ・サービス、電子メール・クライアント、またはコンテンツ管理システムなどを実装できます。

様々な電子メール・クライアント・アプリケーションに表示されるメッセージ作成ウィンドウのユーザー・インタフェースを示します。

例21-3 電子メール・クライアントUIに追加されたHTMLエディタ

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(650);
        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つのテキスト・フィールド、件名のフィールドを示すラベル、エディタ、および「Send」ボタンがあります。

UIコントロールはGridおよびVBoxレイアウト・コンテナを使用してアプリケーション・シーンに配置されます。このアプリケーションをコンパイルして実行すると、ユーザーが週間レポートを構成する際に、このアプリケーションの出力が図21-4に示すウィンドウに表示されます。

図21-4 電子メール・クライアントのユーザー・インタフェース

図21-4の説明が続きます
「図21-4 電子メール・クライアントのユーザー・インタフェース」の説明

setPrefWidthメソッドまたはsetPrefHeightメソッドをコールしてHTMLEditorオブジェクトの特定の幅と高さの値を設定するか、幅と高さを指定しないままにできます。例21-3では、コンポーネントの高さを指定します。幅はVBoxレイアウト・コンテナで定義されています。テキスト・コンテンツが編集領域の高さを超えている場合、垂直スクロール・バーが表示されます。

HTMLコンテンツの取得

JavaFX HTMLEditorコントロールを使用すると、テキストを編集し、初期コンテンツを設定できます。また、入力し、編集したテキストをHTML形式で取得できます。例21-4に示すアプリケーションは、このタスクを実装しています。

例21-4 HTMLコードの取得

import javafx.application.Application;
import javafx.event.ActionEvent;
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(650);
        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((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オブジェクトにコールされたgetHTMLTextメソッドは、編集済のコンテンツを導出し、HTML文字列として表示します。この情報はテキスト領域に渡されるため、作成したHTMLコードの確認、コピー、および貼付けができます。図21-5に、HTMLエディタ・サンプルで編集されているテキストのHTMLコードを示します。

図21-5 HTMLコンテンツの取得

図21-5の説明が続きます
「図21-5 HTMLコンテンツの取得」の説明

同様に、HTMLコードを取得してファイルに保存するか、WebViewオブジェクトに送信して、エディタ内および埋込みのブラウザ内のコンテンツと同期できます。このタスクの実装方法を例21-5に示します。

例21-5 編集済HTMLコンテンツのブラウザでの表示

import javafx.application.Application;
import javafx.event.ActionEvent;
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(650);
        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((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」ボタンをクリックするたびに、編集済のコンテンツがブラウザで更新されます。図21-6は、例21-5の動作を示します。

図21-6 ブラウザへのコンテンツのロード

図21-6の説明が続きます
「図21-6 ブラウザへのコンテンツのロード」の説明

Textコンポーネントを使用すると、編集していないテキスト・コンテンツをUIに追加できます。Textコンポーネントの詳細は、「JavaFXでのテキストの使用」を参照してください。

関連APIドキュメント

ウィンドウを閉じる

目次

JavaFX: JavaFX UIコンポーネントの操作

展開 | 縮小