إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    JavaFX الكلاس Hyperlink و الكلاس WebView

    مقدمة

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


    الكلاس Hyperlink

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

    إذا نظرنا لطريقة بناء الكلاس Hyperlink سنجد أنه يرث من الكلاس ButtonBase مثل الكلاس Button.

    public class Hyperlink
    extends ButtonBase
    	


    الكلاس WebView

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



    الكلاس WebEngine

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



    مصطلحات تقنية حول Hyperlink Status

    Hyperlink Status تعني حالات الـ Hyperlink و يقصد منها المطلحات التي تطلق على الرابط عندما يتفاعل المستخدم معه.
    هناك ثلاث حالات للـ Hyperlink كما في الصورة التالية.

    hyperlink states

    • Unvisited Link: تعني أن الرابط لم يتم النقر عليه بعد. و هنا نلاحظ أنه إفتراضياً يتم تلوينه بالأزرق.
    • Visited Link: تعني أن الرابط قد تم النقر عليه سابقاً. و هنا نلاحظ أنه إفتراضياً يتم تلوينه بالأسود.
    • Link Is Clicked: تعني أن الرابط قد تم النقر عليه و لم يجري المستخدم أي تفاعل آخر بعدها مع باقي الأشياء الموجودة في النافذة. و هنا نلاحظ أنه إفتراضياً يتم تلوينه بالأسود لأنه قد تم زيارته و يوجد مربع أزرق حوله للإشارة إلى أن المستخدم لا يزال يقف عنده.


    ملاحظة

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

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

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

    الكونستركتور مع تعريفه
    public Hyperlink() ينشئ كائن من الكلاس Hyperlink يمثل رابط فارغ.
    public Hyperlink(String text) ينشئ كائن من الكلاس Hyperlink يمثل رابط له نص محدد.
    مكان الباراميتر text نمرر النص الذي نريد وضعه له.
    public Hyperlink(String text, Node graphic) ينشئ كائن من الكلاس Hyperlink يمثل رابط له نص و أيقونة معاً.

    • مكان الباراميتر text نمرر النص الذي نريد وضعه له.
    • مكان الباراميتر graphic نمرر كائن من الكلاس Node يمثل الأيقونة التي سيتم وضعها له.

    دوال الكلاس Hyperlink

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

    الدالة مع تعريفها
    public String getText() ترجع نص كائن الـ Hyperlink الذي قام بإستدعائها كنص.
    public void setText(String text) تستخدم لتبديل نص كائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر text نضع النص الجديد.
    public final void setTextFill(Paint value) تستخدم لتحديد لون نص كائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر value نضع كائن من إحدى الكلاسات التي ترث من الكلاس Paint و التي يمكن إستخدامها لتحديد درجة اللون.
    public final void setBackground(Background value) تستخدم لوضع لون أو صورة كخلفية لكائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر value نضع كائن من الكلاس Background يشير إلى درجة اللون أو الصورة التي سيتم وضعها كخلفية.
    public final void setFont(Font newFont) تستخدم لتحديد حجم و نوع خط كائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر newFont نضع كائن من الكلاس Font يمثل خصائص الخط الجديد.
    public final void setUnderline(boolean value) تستخدم لوضع خط تحت نص كائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر value نضع القيمة true لإظهار خط تحت النص.
    public final void setRotate(double degree) تستخدم لإدارة نص كائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر degree نضع رقم يمثل درجة الدوران.
    public final void setWrapText(boolean value) تستخدم لجعل نص كائن الـ Hyperlink الذي قام بإستدعائها ينزل على سطر جديد في حال كان لا يسع في سطر واحد.
    مكان الباراميتر value نضع القيمة true لجعل الأحرف تظهر على سطر جديد عند الحاجة.
    public final void setLineSpacing(double value) تستخدم لتحديد المسافة بين كل سطرين في نص كائن الـ Hyperlink الذي قام باستدعائها.
    مكان الباراميتر value نضع رقم يمثل المسافة بين كل سطرين بالـ Pixel.
    public final void setPadding(Insets value) تستخدم لإضافة هامش ( مسافة فارغة ) حول نص كائن الـ Hyperlink الذي قام باستدعائها.
    مكان الباراميتر value نضع كائن من الكلاس Insets يمثل حجم الهامش حول النص من كل الجهات.
    public final void setScaleX(double value) تستخدم لتمطيط حجم كائن الـ Hyperlink الذي قام باستدعائها بشكل أفقي.
    مكان الباراميتر value نضع رقم يمثل كم مرة سيتم مضاعفة حجمه أفقياً.
    public final void setScaleY(double value) تستخدم لتمطيط حجم كائن الـ Hyperlink الذي قام باستدعائها بشكل عامودي.
    مكان الباراميتر value نضع رقم يمثل كم مرة سيتم مضاعفة حجمه عامودياً.
    public final void setTranslateX(double value) تستخدم لتحديد مكان كائن الـ Hyperlink الذي قام باستدعائها أفقياً.
    مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين.
    public final void setTranslateY(double value) تستخدم لتحديد مكان كائن الـ Hyperlink الذي قام باستدعائها عامودياً.
    مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل.
    public void setPrefSize(double prefWidth, double prefHeight) تستخدم لتحديد حجم كائن الـ Hyperlink الذي قام باستدعائها.

    • مكان الباراميتر prefWidth نضع رقم يمثل عرض الـ Hyperlink بالـ Pixel.
    • مكان الباراميتر prefHeight نضع رقم يمثل طول الـ Hyperlink بالـ Pixel.
    public final void setContentDisplay(ContentDisplay value) تستخدم لتحديد مكان ظهور الأيقونة التي تم إضافتها لكائن الـ Hyperlink الذي قام باستدعائها.

    مكان الباراميتر value نضع إحدى ثوابت الكلاس ContentDisplay:
    • الثابت LEFT يجعل الصورة تظهر يسار النص كما يظهر بشكل إفتراضي.
    • الثابت RIGHT يجعل الصورة تظهر يمين النص.
    • الثابت TOP يجعل الصورة تظهر تحت النص.
    • الثابت BOTTOM يجعل الصورة تظهر فوق النص.
    • الثابت CENTER يجعل النص يظهر على الصورة.
    • الثابت GRAPHIC_ONLY يجعل الصورة فقط تظهر.
    • الثابت TEXT_ONLY يجعل النص فقط يظهر.
    public final void setDisable(boolean value) تستخدم لجعل نص كائن الـ Hyperlink الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.
    مكان الباراميتر value نضع القيمة true لجعله غير مفعّل.
    public final void setStyle(String value) تستخدم لتعديل تصميم كائن الـ Hyperlink الذي قام بإستدعائها.
    مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ Hyperlink بأسلوب لغة CSS لإظهاره بالشكل الذي تريده.

    أمثلة شاملة


    المثال الأول

    المثال التالي يعلمك طريقة إنشاء كائن من الكلاس Hyperlink و إضافته في النافذة.

    طريقة إضافة Hyperlink في javafx

    شاهد المثال »



    المثال الثاني

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

    طريقة شكل ال Hyperlink في javafx

    شاهد المثال »



    المثال الثالث

    المثال التالي يعلمك طريقة إضافة أيقونة للـ Hyperlink مع تحديد مكان ظهورها.

    طريقة إضافة أيقونة للـ Hyperlink مع تحديد مكان ظهورها في javafx

    شاهد المثال »



    المثال الرابع

    المثال التالي يعلمك طريقة فتح صفحة ويب بداخل WebView عند النقر على Hyperlink.

    طريقة فتح صفحة ويب بداخل WebView عند النقر على Hyperlink في javafx

    شاهد المثال »

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

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