أهلا بكم

في JavaFX يمكنك وضع رابط (Link) في النافذة و عرض محتوى هذا الرابط بكل سهولة بالإعتماد على محرك الويب (JavaFX Web Engine)....لعرض رابط في النافذة و عرض محتوى هذا الرابط عند النقر عليه نحتاج إلى التعامل مع الكلاسات التالية: Hyperlink - WebView - WebEngine.

لكلاس Hyperlink


يستخدم لإضافة Button عادي في واجهة المستخدم يشبه الرابط الذي نجده في أي موقع إلكتروني من حيث الشكل.
فمثلاً عند إضافة Hyperlink في النافذة فإننا نجده باللون الأزرق, و عند تمرير الفأرة فوقه يظهر خط تحته, و عند إبعاد الفأرة عنه يختفي الخط من جديد, و عند النقر عليه يصبح لونه أسود. طبعاً التصميم الإفتراضي للـ Hyperlink يمكن تعديله بسهولة في JavaFX و إظهاره بالشكل الذي نريده.

الكلاس WebView


يستخدم لتحديد المكان الذي سيتم فيه عرض محتوى صفحة الويب في واجهة المستخدم...إذاً نستخدم هذا الكلاس فقط لحجز مساحة في النافذة بهدف عرض محتوى صفحة ويب بداخلها.

الكلاس WebEngine


يستخدم لرسم صفحة الويب بداخل الـ WebView الذي نضعه واجهة المستخدم و يفعل كل المهام التي يفعلها المتصفح العادي. كما أنه لا داعي للقلق في حال كان حجم الصفحة كبير لأنه يضيف شريط تمرير (Scroll Bar) بشكل تلقائي عند الحاجة. كما أنه يتيح لك التحكم بطريقة ظهور شريط التمرير.


ملحوظة :
في هذا الدرس سنقوم بالتركيز على طريقة التعامل مع الكلاس Hyperlink و سنتطرق إلى ما نحتاجه فقط من الكلاس WebView و الكلاس WebEngine.

كيفية إنشاء ارتباط تشعبي Hyperlink

1_إستيراد المكتبة التى تحتوى على عناصر واجهة المستخدام الرسومية وتحدديد الكلاس  Hyperlink

الكود:

import javafx.scene.control.Hyperlink;

2_ إنشاء كائن من الكلاس Image يمثل الصورة التي سنضعها كأيقونة للرابط التشعبي

الكود:

Image image = new Image(getClass().getResourceAsStream("/images/chrome-icon.png"));

3_إنشاء كائن جديد من الكلاس Hyperlink  يمثل الرابط التشعبي الذي نريد إضافته في النافذة

الكود:

Hyperlink hyperlink = new Hyperlink("Go To Google", new ImageView(image));

4_ تحديد مكان الايقونة بالنسبة للنص

الكود:

hyperlink.setContentDisplay(ContentDisplay.LEFT);

و اليكم الكود الكامل لانشاء Hyperlink وووضع ايقونة , حجم الخط الإفتراضي, المربع الذي يظهر حوله عند النقر عليه, إضافة لون للخلفية إلخ..

الكود:

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Hyperlink;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Border;
import javafx.scene.layout.CornerRadii;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage stage) {

        // يمثل الصورة التي سنضعها كأيقونة Image هنا قمنا بإنشاء كائن من الكلاس
        Image image = new Image(getClass().getResourceAsStream("/images/chrome-icon.png"));
 
        // يمثل الرابط الذي نريد إضافته في النافذة Hyperlink هنا قمنا بإنشاء كائن من الكلاس
        Hyperlink hyperlink = new Hyperlink("Go To Google", new ImageView(image));
        
        // hyperlink هنا حددنا أن الأيقونة ستظهر من يسار النص الموضوع في الكائن
        hyperlink.setContentDisplay(ContentDisplay.LEFT);

        // hyperlink يمثل اللون الذي نريد وضعه كخلفية للكائن Background هنا قمنا بإنشاء كائن من الكلاس
        Background defaultBackground = new Background(new BackgroundFill(Color.CADETBLUE, new CornerRadii(5), Insets.EMPTY));

        // عند تمرير الفأرة فوقه hyperlink يمثل اللون الذي نريد وضعه كخلفية للكائن Background هنا قمنا بإنشاء كائن من الكلاس
        Background hoveredBackground = new Background(new BackgroundFill(Color.DARKCYAN, new CornerRadii(5), Insets.EMPTY));

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

        // hyperlink هنا قمنا بتحديد حجم الكائن
        hyperlink.setPrefSize(150, 34);
        
        // بشكل إفتراضي hyperlink هنا قمنا بإلغاء المربع الإفتراضي الذي يظهر حول الكائن
        hyperlink.setBorder(Border.EMPTY);

        // hyperlink هنا قمنا بإخفاء الخط الذي يظهر بشكل إفتراضي عند تمرير الفأرة فوق الكائن
        hyperlink.setUnderline(false);

        // hyperlink هنا قمنا بتغيير نوع و حجم خط الكائن
        hyperlink.setFont(new Font("Arial", 15));

        // أبيض hyperlink هنا جعلنا لون خط الكائن
        hyperlink.setTextFill(Color.WHITE);

        // يظهر في المنتصف hyperlink هنا جعلنا نص الكائن
        hyperlink.setAlignment(Pos.CENTER);

        // defaultBackground الإفتراضي إلى اللون الذي يشير له الكائن hyperlink هنا قمنا بتغيير لون خلفية الكائن
        hyperlink.setBackground(defaultBackground);

      
        Group root = new Group();
             ObservableList list = root.getChildren();

             list.add(hyperlink);
              Scene scene = new Scene(root, 400, 250);
            stage.setTitle("JavaFX Hyperlink");

               stage.setScene(scene);
        stage.show();

        // hyperlink هنا قمنا بتحديد ماذا سيحدث عند تمرير الفأرة فوق الكائن
        hyperlink.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
            // hyperlink سيتم وضعه كخلفية للكائن hoveredBackground هنا قلنا أن اللون الذي يشر له الكائن
            hyperlink.setBackground(hoveredBackground);
        });

        // hyperlink هنا قمنا بتحديد ماذا سيحدث عند إبعاد الفأرة من فوق الكائن
        hyperlink.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
            // لذلك سيرجع لونها كما كان hyperlink سيتم وضعه كخلفية للكائن defaultBackground هنا قلنا أن اللون الذي يشر له الكائن
            hyperlink.setBackground(defaultBackground);
        });
        
    }

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

}


و النتيجة على النحو التالى :