شرح الكلاس Tooltip في javafx

صدام العويري

اخر تحديث :

شرح الكلاس Tooltip

الكلاس Tooltip يستخدم لإظهار رسالة ( Tooltip ) هدفها توجيه المستخدم عندما يقوم بتمرير الفأرة فوق أي شيء موجود في واجهة المستخدم.
في JavaFX يمكنك تعديل تصميم الـ Tooltip كيفما شئت. و يمكنك إظهار Tooltip لأي شيء تضيفه في النافذة .

بناء الكلاس `Tooltip`

@IDProperty(value="id")
public class Tooltip
extends PopupControl

طريقة التعامل مع Tooltip

نقوم أولاً بإنشاء كائن من الكلاس Tooltip.
بعدها نربطه بأي شيء موجود في النافذة بواسطة الدالة setTooltip().

كونستركتورات الكلاس `Tooltip`

الجدول التالي يحتوي على كونستركتورات الكلاس Tooltip.

الكونستركتور مع تعريفه
`public Tooltip()` ينشئ كائن من الكلاس `Tooltip` يمثل رسالة توجيه فارغة.
`public Tooltip(String text)` ينشئ كائن من الكلاس `Tooltip` يمثل رسالة توجيه فيها نص. مكان الباراميتر `text` نمرر النص الذي نريده أن يظهر في الـ `Tooltip`.

دوال الكلاس `Tooltip`

الجدول التالي يحتوي على دوال الكلاس Tooltip الأكثر إستخداماً.

الدالة مع تعريفها
`public void setText(String text)` تستخدم لوضع نص جديد في كائن الـ `Tooltip` الذي قام بإستدعائها. مكان الباراميتر `text` نضع النص الجديد.
`public final void setGraphic(Node value)` تستخدم لوضع أيقونة لكائن الـ `Tooltip` الذي قام بإستدعائها. مكان الباراميتر `Node` نضع كائن من الكلاس `Font` يمثل خصائص الخط الجديد.
`public final void setContentDisplay(ContentDisplay value)` تستخدم لتحديد مكان ظهور الأيقونة التي تم إضافتها لكائن الـ `Tooltip` الذي قام باستدعائها. مكان الباراميتر `value` نضع إحدى ثوابت الكلاس `ContentDisplay`: الثابت `LEFT` يجعل الصورة تظهر يسار النص كما يظهر بشكل إفتراضي. الثابت `RIGHT` يجعل الصورة تظهر يمين النص. الثابت `TOP` يجعل الصورة تظهر تحت النص. الثابت `BOTTOM` يجعل الصورة تظهر فوق النص. الثابت `CENTER` يجعل النص يظهر على الصورة. الثابت `GRAPHIC_ONLY` يجعل الصورة فقط تظهر. الثابت `TEXT_ONLY` يجعل النص فقط يظهر.
`public final void setTextAlignment(TextAlignment value)` تستخدم لتحديد مكان ظهور نص كائن الـ `Tooltip` الذي قام بإستدعائها في حال كان يتألف من أكثر من سطر. في العادة, إذا كان نص الـ `Tooltip` يتألف من عدة أسطر فإن كل سطر يبدأ من ناحية اليسار. هذه الدالة تمكنك من تحديد الناحية التي سيتم جذب النص إليها و بالتالي تمكنك من إظهار النص من ناحية اليمين, أو اليسار, أو الوسط. مكان الباراميتر `value` نضع إحدى ثوابت الكلاس `TextAlignment`: الثابت `LEFT` يجعل النص يبدأ في الظهور من ناحية اليمين في بداية كل سطر. الثابت `RIGHT` يجعل النص يبدأ في الظهور من ناحية اليسار في بداية كل سطر. الثابت `CENTER` يجعل النص يظهر في وسطر كل سطر. الثابت `JUSTIFY` يجعل النص يملئ كل سطر و قد يضيف مسافات بشكل تلقائي ليجعله كذلك.
`public final void setWrapText(boolean value)` تستخدم لجعل نص كائن الـ `Tooltip` الذي قام بإستدعائها ينزل على سطر جديد في حال كان لا يسع في سطر واحد. مكان الباراميتر `value` نضع القيمة `true` لجعل الأحرف تظهر على سطر جديد عند الحاجة و نضع القيمة `false` إذا لم نرد ذلك.
`public final void setFont(Font newFont)` تستخدم لتحديد حجم و نوع خط كائن الـ `Tooltip` الذي قام بإستدعائها. مكان الباراميتر `newFont` نضع كائن من الكلاس `Font` يمثل خصائص الخط الجديد.
`public void setPrefSize(double prefWidth, double prefHeight)` تستخدم لتحديد حجم الـ `Tooltip` الذي قام باستدعائها. مكان الباراميتر `prefWidth` نضع رقم يمثل عرض الـ `Tooltip` بالـ Pixel. مكان الباراميتر `prefHeight` نضع رقم يمثل طول الـ `Tooltip` بالـ Pixel.
`public final void setStyle(String value)` تستخدم لتعديل تصميم كائن الـ `Tooltip` الذي قام بإستدعائها. مكان الباراميتر `value` يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ `Tooltip` بأسلوب لغة CSS لإظهاره بالشكل الذي تريده.

أمثلة شاملة في الكلاس Tooltip

طريقة إظهار `Tooltip` لأي شيء تضيفه في النافذة

المثال التالي يعلمك طريقة إظهار Tooltip لأي شيء تضيفه في النافذة.

مثال

Main.java

      import javafx.application.Application;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.PasswordField;
      import javafx.scene.control.Tooltip;
      import javafx.stage.Stage;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // يمثل مربع النص الخاص لإدخال كلمة المرور الذي نريد إضافته في النافذة PasswordField هنا قمنا بإنشاء كائن من الكلاس
      PasswordField passwordField = new PasswordField();

      // passwordField يمثل الرسالة التي نريدها أن تظهر عند وضع الفأرة فوق الكائن Tooltip هنا قمنا بإنشاء كائن من الكلاس
      Tooltip tooltip = new Tooltip("Password should be at least 8 characters");

      // passwordField للكائن Tooltip كـ tooltip هنا قمنا بوضع الكائن
      passwordField.setTooltip(tooltip);

      // في النافذة passwordField هنا قمنا بتحديد مكان ظهور الكائن
      passwordField.setTranslateX(100);
      passwordField.setTranslateY(110);

      // passwordField هنا قمنا بتحديد عرض الـ
      passwordField.setPrefWidth(200);

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

      // root في الكائن passwordField هنا قمنا بإضافة الكائن
      root.getChildren().add(passwordField);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 400, 250);

      // هنا وضعنا عنوان للنافذة
      stage.setTitle("JavaFX Tooltip");

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

      // هنا قمنا بإظهار النافذة
      stage.show();

      }

      // هنا قمنا بتشغيل التطبيق
      public static void main(String[] args) {
      launch(args);
      }

      }

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

طريقة إظهار Tooltip لأي شيء تضيفه في النافذة

طريقة وضع أيقونة للـ `Tooltip`

المثال التالي يعلمك طريقة وضع أيقونة للـ Tooltip.

مثال

Main.java

      import javafx.application.Application;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.PasswordField;
      import javafx.scene.control.Tooltip;
      import javafx.scene.image.Image;
      import javafx.scene.image.ImageView;
      import javafx.stage.Stage;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // passwordField يمثل الرسالة التي نريدها أن تظهر عند وضع الفأرة فوق الكائن Tooltip هنا قمنا بإنشاء كائن من الكلاس
      Tooltip tooltip = new Tooltip("Password should be at least 8 characters");

      // tooltip كأيقونة للكائن info-icon هنا قمنا بوضع الصورة
      tooltip.setGraphic(
      new ImageView(new Image(getClass().getResourceAsStream("images/info-icon.png")))
      );

      // يمثل مربع النص الخاص لإدخال كلمة المرور الذي نريد إضافته في النافذة PasswordField هنا قمنا بإنشاء كائن من الكلاس
      PasswordField passwordField = new PasswordField();

      // passwordField للكائن Tooltip كـ tooltip هنا قمنا بوضع الكائن
      passwordField.setTooltip(tooltip);

      // في النافذة passwordField هنا قمنا بتحديد مكان ظهور الكائن
      passwordField.setTranslateX(100);
      passwordField.setTranslateY(110);

      // passwordField هنا قمنا بتحديد عرض الـ
      passwordField.setPrefWidth(200);

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

      // root في الكائن passwordField هنا قمنا بإضافة الكائن
      root.getChildren().add(passwordField);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 400, 250);

      // هنا وضعنا عنوان للنافذة
      stage.setTitle("JavaFX Tooltip");

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

      // هنا قمنا بإظهار النافذة
      stage.show();

      }

      // هنا قمنا بتشغيل التطبيق
      public static void main(String[] args) {
      launch(args);
      }

      }

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

طريقة تغيير شكل الـ `Tooltip`

المثال التالي يعلمك طريقة تغيير شكل الـ Tooltip .

مثال

Main.java

      import javafx.application.Application;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.PasswordField;
      import javafx.scene.control.Tooltip;
      import javafx.scene.image.Image;
      import javafx.scene.image.ImageView;
      import javafx.stage.Stage;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // passwordField يمثل الرسالة التي نريدها أن تظهر عند وضع الفأرة فوق الكائن Tooltip هنا قمنا بإنشاء كائن من الكلاس
      Tooltip tooltip = new Tooltip("Password should be at least 8 characters");

      // tooltip كأيقونة للكائن info-icon هنا قمنا بوضع الصورة
      tooltip.setGraphic(
      new ImageView(new Image(getClass().getResourceAsStream("images/info-icon.png")))
      );

      // لجعل لونه خلفتيه أزرق و لون خطه أسود tooltip هنا قمنا بتغيير تصميم كائن الـ
      tooltip.setStyle(
      "-fx-text-fill: white;"
      + "-fx-background-color: #5882FA;"
      + "-fx-opacity: 0.8;"
      + "-fx-font-size: 12px;"
      + "-fx-font-weight: bold;"
      );

      // يمثل مربع النص الخاص لإدخال كلمة المرور الذي نريد إضافته في النافذة PasswordField هنا قمنا بإنشاء كائن من الكلاس
      PasswordField passwordField = new PasswordField();

      // passwordField للكائن Tooltip كـ tooltip هنا قمنا بوضع الكائن
      passwordField.setTooltip(tooltip);

      // في النافذة passwordField هنا قمنا بتحديد مكان ظهور الكائن
      passwordField.setTranslateX(100);
      passwordField.setTranslateY(110);

      // passwordField هنا قمنا بتحديد عرض الـ
      passwordField.setPrefWidth(200);

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

      // root في الكائن passwordField هنا قمنا بإضافة الكائن
      root.getChildren().add(passwordField);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 400, 250);

      // هنا وضعنا عنوان للنافذة
      stage.setTitle("JavaFX Tooltip");

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

      // هنا قمنا بإظهار النافذة
      stage.show();

      }

      // هنا قمنا بتشغيل التطبيق
      public static void main(String[] args) {
      launch(args);
      }

      }

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

طريقة وضع أكثر من `Tooltip` بأقل كود ممكن

المثال التالي يعلمك طريقة وضع أكثر من Tooltip بأقل كود ممكن .

مثال

Main.java

      import javafx.application.Application;
      import javafx.beans.value.ObservableValue;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.Label;
      import javafx.scene.control.CheckBox;
      import javafx.scene.control.Tooltip;
      import javafx.scene.paint.Color;
      import javafx.scene.text.Font;
      import javafx.stage.Stage;

      public class Main extends Application {

      // هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
      Label label = new Label("Available courses");
      CheckBox cb1 = new CheckBox("Algorithms and Data Structure");
      CheckBox cb2 = new CheckBox("Web design using HTML, CSS and JS");
      CheckBox cb3 = new CheckBox("Web Development using PHP and MYSQLI");
      Label resultLabel = new Label("Total Price: 0.0$");

      // قام المستخدم باختيارها ( CheckBox ) سنستخدم هذا المتغير لتخزين كلفة الإشتراك في كل دورة
      double price = 0;

      // هنا قمنا بتعريف دالة تحسب سعر كل الدورات التي اختارها المستخدم و تعرض له كلفة الإشتراك فيهم
      public void setPrice() {
      // قبل إجراء أي عملية حسابية price سيتم تصفير قيمة المتغير
      price = 0;

      // price سيتم إذافة 100 على قيمة المتغير cb1 إذا قام المستخدم بوضع علامة صح على الكائن
      if(cb1.isSelected())
      price += 100;

      // price سيتم إذافة 150 على قيمة المتغير cb2 إذا قام المستخدم بوضع علامة صح على الكائن
      if(cb2.isSelected())
      price += 150;

      // price سيتم إذافة 200 على قيمة المتغير cb3 إذا قام المستخدم بوضع علامة صح على الكائن
      if(cb3.isSelected())
      price += 200;

      // ككلفة الإشتراك في كل الدورات التي تم إختيارها price في الأخير سيتم وضع قيمة المتغير
      resultLabel.setText("Total Price: "+price+"$");
      }


      @Override
      public void start(Stage stage) {

      // سنضيفه في النافذة CheckBox خاص لكل Tooltip هنا قمنا بإنشاء
      cb1.setTooltip(new Tooltip("100 $"));
      cb2.setTooltip(new Tooltip("150 $"));
      cb3.setTooltip(new Tooltip("200 $"));

      // هنا قمنا بتحديد مكان ظهور جميع الأشياء التي نريد إضافتها في النافذة
      label.setTranslateX(40);
      label.setTranslateY(30);
      cb1.setTranslateX(40);
      cb1.setTranslateY(75);
      cb2.setTranslateX(40);
      cb2.setTranslateY(110);
      cb3.setTranslateX(40);
      cb3.setTranslateY(145);
      resultLabel.setTranslateX(40);
      resultLabel.setTranslateY(190);

      // هنا قمن بتحسين تصميم الأشياء التي سنضيفها في النافذة
      label.setFont(new Font("Arial", 16));
      resultLabel.setFont(new Font("Arial", 16));
      resultLabel.setTextFill(Color.GREEN);

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

      // root هنا قمنا بإضافة جميع الأشياء في الكائن
      root.getChildren().add(label);
      root.getChildren().add(cb1);
      root.getChildren().add(cb2);
      root.getChildren().add(cb3);
      root.getChildren().add(resultLabel);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 400, 250);

      // هنا وضعنا عنوان للنافذة
      stage.setTitle("JavaFX Tooltip");

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

      // هنا قمنا بإظهار النافذة
      stage.show();

      // فقط setPrice() سيتم إستدعاء الدالة .cb1 هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
      cb1.selectedProperty().addListener((ObservableValue<? extends Boolean> ov, Boolean old_val, Boolean new_val) -> {
      setPrice();
      });

      // فقط setPrice() سيتم إستدعاء الدالة .cb2 هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
      cb2.selectedProperty().addListener((ObservableValue<? extends Boolean> ov, Boolean old_val, Boolean new_val) -> {
      setPrice();
      });

      // فقط setPrice() سيتم إستدعاء الدالة .cb3 هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
      cb3.selectedProperty().addListener((ObservableValue<? extends Boolean> ov, Boolean old_val, Boolean new_val) -> {
      setPrice();
      });

      }


      // هنا قمنا بتشغيل التطبيق
      public static void main(String[] args) {
      launch(args);
      }

      }

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

كورس تعلم javaFX

تعديل المقال

تعلم البرمجة مجانا

شرح الكلاس Tooltip في javafx

شرح الكلاس Tooltip

بناء الكلاس `Tooltip`

طريقة التعامل مع Tooltip

كونستركتورات الكلاس `Tooltip`

دوال الكلاس `Tooltip`

أمثلة شاملة في الكلاس Tooltip

طريقة إظهار `Tooltip` لأي شيء تضيفه في النافذة

طريقة وضع أيقونة للـ `Tooltip`

طريقة تغيير شكل الـ `Tooltip`

طريقة وضع أكثر من `Tooltip` بأقل كود ممكن

كورس تعلم javaFX

أساسيات javafx

عناصر واجهة المستخدم javafx

الحاويات javafx

الرسم و التلوين و التحريك javafx

تعلم بناء تطبيقات و ألعاب javafx

مقالات قد تهمك

شرح الكلاس Tooltip في javafx

شرح الكلاس Tooltip

بناء الكلاس Tooltip

طريقة التعامل مع Tooltip

كونستركتورات الكلاس Tooltip

دوال الكلاس Tooltip

أمثلة شاملة في الكلاس Tooltip

طريقة إظهار Tooltip لأي شيء تضيفه في النافذة

طريقة وضع أيقونة للـ Tooltip

طريقة تغيير شكل الـ Tooltip

طريقة وضع أكثر من Tooltip بأقل كود ممكن

كورس تعلم javaFX

أساسيات javafx

عناصر واجهة المستخدم javafx

الحاويات javafx

الرسم و التلوين و التحريك javafx

تعلم بناء تطبيقات و ألعاب javafx

مقالات قد تهمك

بناء الكلاس `Tooltip`

كونستركتورات الكلاس `Tooltip`

دوال الكلاس `Tooltip`

طريقة إظهار `Tooltip` لأي شيء تضيفه في النافذة

طريقة وضع أيقونة للـ `Tooltip`

طريقة تغيير شكل الـ `Tooltip`

طريقة وضع أكثر من `Tooltip` بأقل كود ممكن