طريقة عرض نص الـ HTMLEditor بداخل WebView و بداخل TextArea في JavaFX

المثال التالي يعلمك طريقة عرض النص المدخل في HTMLEditor في WebView لترى كيف سيراه أي مستخدم ترسله له.
بالإضافة لطريقة رؤية النص و كود الـ HTML الذي كتبه الـ HTMLEditor عنك بداخل TextArea.

مثال

Main.java

import javafx.application.Application;

import javafx.beans.value.ObservableValue;

import javafx.scene.Group;

import javafx.scene.Scene;

import javafx.scene.control.TextArea;

import javafx.scene.control.Toggle;

import javafx.scene.control.ToggleButton;

import javafx.scene.control.ToggleGroup;

import javafx.scene.web.HTMLEditor;

import javafx.scene.web.WebEngine;

import javafx.scene.web.WebView;

import javafx.stage.Stage;

public class Main extends Application {

@Override

public void start(Stage stage) {

// htmlEditor يمثل النص الذي نريد وضعه للكائن HTML هنا قمنا بتعريف متغير وضعنا فيه نص جاهز عبارة عن كود بلغة

String initialText =

"<html dir=\"ltr\"><head></head><body contenteditable=\"true\">"

+ "Hello my name is "

+ "Mhamad Harmush. "

+ "I am "

+ "24 years old. "

+ "I started programming"

+ " at "

+ "18<span style=\"font-family:"

+ "'Segoe UI';\">.<span style=\"font-family:"

+ "'Segoe UI';\">I code using the following languages in"

+ "my work:<ul><li>"

+ "C# for Backend and desktop apps.</li><li><font face=\""

+ "Segoe UI\">HTML, CSS, JS, JQuery, Bootstrap, TypeScript for"

+ " Frontend.</li></ul>Also,"

+ " I use the following frameworks:"

+ "<ul><li>Angular"

+ "</li><li>Ionic</li></ul></body></html>";

// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة

HTMLEditor htmlEditor = new HTMLEditor();

WebView webView = new WebView();

WebEngine webEngine = webView.getEngine();

TextArea textArea = new TextArea();

ToggleButton buttonViewEditor = new ToggleButton("View the Editor");

ToggleButton buttonPreview = new ToggleButton("View in Browser");

ToggleButton buttonViewCode = new ToggleButton("View HTML Code");

// و الذي بدوره سيحوله لصفحة ويب htmlEditor كنص للكائن initialText هنا قمنا بوضع نص المتغير

htmlEditor.setHtmlText(initialText);

// عند عرضه في النافذة غير قابل للتعديل و هكذا سيستطيع المستخدم رؤيته فقط textArea هنا قمنا بجعل النص الذي سيظهر في الكائن

textArea.setEditable(false);

// فقط عند الحاجة. أي منعنا ظهور شريط تمرير أفقي ( Vertical Scroll Bar ) يظهر شريط تمرير عامودي textArea هنا قمنا بجعل الكائن

textArea.setWrapText(true);

// buttonViewCode و buttonPreview ,buttonViewEditor لأننا سنظهرهم عند النقر على الكائنات textArea و webView ,htmlEditor هنا قمنا بإخفاء الكائنات

htmlEditor.setVisible(false);

webView.setVisible(true);

textArea.setVisible(false);

// buttonViewCode و buttonPreview و buttonViewEditor و ربطنا فيه الكائنات ToggleGroup هنا قمنا بإنشاء كائن من الكلاس

// و هكذا أصبح يمكن إختيار واحد منهم فقط في كل مرة

ToggleGroup toggleGroup = new ToggleGroup();

buttonViewEditor.setToggleGroup(toggleGroup);

buttonPreview.setToggleGroup(toggleGroup);

buttonViewCode.setToggleGroup(toggleGroup);

// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة

htmlEditor.setTranslateX(20);

htmlEditor.setTranslateY(20);

webView.setTranslateX(20);

webView.setTranslateY(20);

textArea.setTranslateX(20);

textArea.setTranslateY(20);

buttonViewEditor.setTranslateX(85);

buttonViewEditor.setTranslateY(340);

buttonPreview.setTranslateX(245);

buttonPreview.setTranslateY(340);

buttonViewCode.setTranslateX(405);

buttonViewCode.setTranslateY(340);

// هنا قمنا بتحديد حجم جميع الأشياء التي سنضيفها في النافذة

htmlEditor.setPrefSize(600, 300);

webView.setPrefSize(600, 300);

textArea.setPrefSize(600, 300);

buttonViewEditor.setPrefSize(150, 30);

buttonPreview.setPrefSize(150, 30);

buttonViewCode.setPrefSize(150, 30);

// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس

Group root = new Group();

// root هنا قمنا بإضافة جميع الأشياء في الكائن

root.getChildren().add(htmlEditor);

root.getChildren().add(buttonViewEditor);

root.getChildren().add(webView);

root.getChildren().add(textArea);

root.getChildren().add(buttonPreview);

root.getChildren().add(buttonViewCode);

// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن

Scene scene = new Scene(root, 640, 390);

// هنا وضعنا عنوان للنافذة

stage.setTitle("JavaFX HTML Editor");

// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ

stage.setScene(scene);

// هنا قمنا بإظهار النافذة

stage.show();

// toggleGroup هنا قمنا بتحديد ماذا سيحدث عند النقر على أي زر تابع للمجموعة

toggleGroup.selectedToggleProperty().addListener(

(ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle) -> {

// webView و textArea في النافذة و إخفاء الكائنين htmlEditor سيتم عرض الكائن buttonViewEditor إذا تم النقر على الزر

if (toggleGroup.getSelectedToggle().equals(buttonViewEditor)) {

textArea.setVisible(false);

webView.setVisible(false);

htmlEditor.setVisible(true);

}

// htmlEditor و textArea في النافذة و رسم كود الويب بداخله و إخفاء الكائنين webView سيتم عرض الكائن buttonPreview إذا تم النقر على الزر

else if (toggleGroup.getSelectedToggle().equals(buttonPreview)) {

webEngine.loadContent(htmlEditor.getHtmlText());

textArea.setVisible(false);

htmlEditor.setVisible(false);

webView.setVisible(true);

}

// htmlEditor و webView في النافذة و عرض كود الويب بداخله كما هو و إخفاء الكائنين textArea سيتم عرض الكائن buttonViewEditor إذا تم النقر على الزر

else if (toggleGroup.getSelectedToggle().equals(buttonViewCode)) {

textArea.setText(htmlEditor.getHtmlText());

webView.setVisible(false);

htmlEditor.setVisible(false);

textArea.setVisible(true);

}

});

// htmlEditor مختاراً بشكل إفتراضي عند تشغيل التطبيق حتى يتم إظهار الكائن buttonViewEditor هنا قمنا بجعل الكائن

buttonViewEditor.setSelected(true);

}

// هنا قمنا بتشغيل التطبيق

public static void main(String[] args) {

launch(args);

}

import javafx.application.Application; import javafx.beans.value.ObservableValue; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.TextArea; import javafx.scene.control.Toggle; import javafx.scene.control.ToggleButton; import javafx.scene.control.ToggleGroup; import javafx.scene.web.HTMLEditor; import javafx.scene.web.WebEngine; import javafx.scene.web.WebView; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage stage) { // htmlEditor يمثل النص الذي نريد وضعه للكائن HTML هنا قمنا بتعريف متغير وضعنا فيه نص جاهز عبارة عن كود بلغة String initialText = "<html dir=\"ltr\"><head></head><body contenteditable=\"true\">" + "Hello my name is " + "Mhamad Harmush. " + "I am " + "24 years old. " + "I started programming" + " at " + "18.I code using the following languages in" + "my work:<ul><li>" + "C# for Backend and desktop apps.</li><li>HTML, CSS, JS, JQuery, Bootstrap, TypeScript for" + " Frontend.</li></ul>Also," + " I use the following frameworks:" + "<ul><li>Angular" + "</li><li>Ionic</li></ul></body></html>"; // هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة HTMLEditor htmlEditor = new HTMLEditor(); WebView webView = new WebView(); WebEngine webEngine = webView.getEngine(); TextArea textArea = new TextArea(); ToggleButton buttonViewEditor = new ToggleButton("View the Editor"); ToggleButton buttonPreview = new ToggleButton("View in Browser"); ToggleButton buttonViewCode = new ToggleButton("View HTML Code"); // و الذي بدوره سيحوله لصفحة ويب htmlEditor كنص للكائن initialText هنا قمنا بوضع نص المتغير htmlEditor.setHtmlText(initialText); // عند عرضه في النافذة غير قابل للتعديل و هكذا سيستطيع المستخدم رؤيته فقط textArea هنا قمنا بجعل النص الذي سيظهر في الكائن textArea.setEditable(false); // فقط عند الحاجة. أي منعنا ظهور شريط تمرير أفقي ( Vertical Scroll Bar ) يظهر شريط تمرير عامودي textArea هنا قمنا بجعل الكائن textArea.setWrapText(true); // buttonViewCode و buttonPreview ,buttonViewEditor لأننا سنظهرهم عند النقر على الكائنات textArea و webView ,htmlEditor هنا قمنا بإخفاء الكائنات htmlEditor.setVisible(false); webView.setVisible(true); textArea.setVisible(false); // buttonViewCode و buttonPreview و buttonViewEditor و ربطنا فيه الكائنات ToggleGroup هنا قمنا بإنشاء كائن من الكلاس // و هكذا أصبح يمكن إختيار واحد منهم فقط في كل مرة ToggleGroup toggleGroup = new ToggleGroup(); buttonViewEditor.setToggleGroup(toggleGroup); buttonPreview.setToggleGroup(toggleGroup); buttonViewCode.setToggleGroup(toggleGroup); // هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة htmlEditor.setTranslateX(20); htmlEditor.setTranslateY(20); webView.setTranslateX(20); webView.setTranslateY(20); textArea.setTranslateX(20); textArea.setTranslateY(20); buttonViewEditor.setTranslateX(85); buttonViewEditor.setTranslateY(340); buttonPreview.setTranslateX(245); buttonPreview.setTranslateY(340); buttonViewCode.setTranslateX(405); buttonViewCode.setTranslateY(340); // هنا قمنا بتحديد حجم جميع الأشياء التي سنضيفها في النافذة htmlEditor.setPrefSize(600, 300); webView.setPrefSize(600, 300); textArea.setPrefSize(600, 300); buttonViewEditor.setPrefSize(150, 30); buttonPreview.setPrefSize(150, 30); buttonViewCode.setPrefSize(150, 30); // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس Group root = new Group(); // root هنا قمنا بإضافة جميع الأشياء في الكائن root.getChildren().add(htmlEditor); root.getChildren().add(buttonViewEditor); root.getChildren().add(webView); root.getChildren().add(textArea); root.getChildren().add(buttonPreview); root.getChildren().add(buttonViewCode); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 640, 390); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX HTML Editor"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); // toggleGroup هنا قمنا بتحديد ماذا سيحدث عند النقر على أي زر تابع للمجموعة toggleGroup.selectedToggleProperty().addListener( (ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle) -> { // webView و textArea في النافذة و إخفاء الكائنين htmlEditor سيتم عرض الكائن buttonViewEditor إذا تم النقر على الزر if (toggleGroup.getSelectedToggle().equals(buttonViewEditor)) { textArea.setVisible(false); webView.setVisible(false); htmlEditor.setVisible(true); } // htmlEditor و textArea في النافذة و رسم كود الويب بداخله و إخفاء الكائنين webView سيتم عرض الكائن buttonPreview إذا تم النقر على الزر else if (toggleGroup.getSelectedToggle().equals(buttonPreview)) { webEngine.loadContent(htmlEditor.getHtmlText()); textArea.setVisible(false); htmlEditor.setVisible(false); webView.setVisible(true); } // htmlEditor و webView في النافذة و عرض كود الويب بداخله كما هو و إخفاء الكائنين textArea سيتم عرض الكائن buttonViewEditor إذا تم النقر على الزر else if (toggleGroup.getSelectedToggle().equals(buttonViewCode)) { textArea.setText(htmlEditor.getHtmlText()); webView.setVisible(false); htmlEditor.setVisible(false); textArea.setVisible(true); } }); // htmlEditor مختاراً بشكل إفتراضي عند تشغيل التطبيق حتى يتم إظهار الكائن buttonViewEditor هنا قمنا بجعل الكائن buttonViewEditor.setSelected(true); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

ستظهر لك النافذة التالية عند التشغيل.

طريقة عرض نص ال HTMLEditor بداخل WebView و بداخل TextArea في javafx

JavaFXطريقة عرض نص الـHTMLEditor بداخل WebView و بداخل TextArea

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث