Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

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

المثال التالي يعلمك طريقة عرض النص المدخل في 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\"><p>"
+ "<font face=\"Segoe UI\">Hello my name is "
+ "<b>Mhamad Harmush</b>. </font></p><p>"
+ "<font face=\"Segoe UI\">I am <font color=\"#cc3333\">"
+ "<b>24</b></font> years old. </font>"
+ "<span style=\"font-family: 'Segoe UI';\">I started programming"
+ " at </span><b style=\"font-family: 'Segoe UI';\">"
+ "<font color=\"#cc3333\">18</font></b><span style=\"font-family:"
+ "'Segoe UI';\">.</span></p><p><span style=\"font-family:"
+ "'Segoe UI';\"><b>I code using the following languages in"
+ "my work:</b></span></p><p></p><ul><li><font face=\"Segoe UI\">"
+ "C# for Backend and desktop apps.</font></li><li><font face=\""
+ "Segoe UI\">HTML, CSS, JS, JQuery, Bootstrap, TypeScript for"
+ " Frontend.</font></li></ul><p><font face=\"Segoe UI\"><b>Also,"
+ " I use the following frameworks:</b></font></p><p></p><p><p>"
+ "</p><p></p><p></p></p><ul><li><font face=\"Segoe UI\">Angular</font>"
+ "</li><li><font face=\"Segoe UI\">Ionic</font></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\"><p>" + "<font face=\"Segoe UI\">Hello my name is " + "<b>Mhamad Harmush</b>. </font></p><p>" + "<font face=\"Segoe UI\">I am <font color=\"#cc3333\">" + "<b>24</b></font> years old. </font>" + "<span style=\"font-family: 'Segoe UI';\">I started programming" + " at </span><b style=\"font-family: 'Segoe UI';\">" + "<font color=\"#cc3333\">18</font></b><span style=\"font-family:" + "'Segoe UI';\">.</span></p><p><span style=\"font-family:" + "'Segoe UI';\"><b>I code using the following languages in" + "my work:</b></span></p><p></p><ul><li><font face=\"Segoe UI\">" + "C# for Backend and desktop apps.</font></li><li><font face=\"" + "Segoe UI\">HTML, CSS, JS, JQuery, Bootstrap, TypeScript for" + " Frontend.</font></li></ul><p><font face=\"Segoe UI\"><b>Also," + " I use the following frameworks:</b></font></p><p></p><p><p>" + "</p><p></p><p></p></p><ul><li><font face=\"Segoe UI\">Angular</font>" + "</li><li><font face=\"Segoe UI\">Ionic</font></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

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة