تعلم JavaFx ..مقال20_ واجهة المستخدم الرسومية _ الكلاس WebView

إرسال مساهمة في موضوع

اذهب الى الأسفل

تعلم JavaFx ..مقال20_ واجهة المستخدم الرسومية _ الكلاس WebView

مُساهمة من طرف زهراء في الجمعة أكتوبر 19, 2018 1:20 pm

أهلا بكم

الكلاس WebView :


هو عبارة  متصفح برمجي مفتوح المصدر يدعم CSS و JavaScript و DOM و HTML5 مضمن كحزمة من حزم javafx بحث تمكن المطورين من تنفيذ المهام التالية في تطبيقات JavaFX الخاصة بك:


  • فتح صفحات الويب HTML من عناوين URL المحلية والبعيدة
  • تنفيذ أوامر JavaScript
  • إدارة النوافذ المنبثقة على شبكة الإنترنت
  • تطبيق التأثيرات على المتصفح المضمن
  • تشغيل الوسائط
  • دعم ميزات لغة HTML5


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

الكلاس WebEngine


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

كيفية فتح صفحة ويب باستخدام WebView

1_إستيراد الحزمة web ومنها تحديد الكلاس WebView و الكلاس WebEngine
الكود:
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;


2_إنشاء كائن جديد من الكلاس WebView و اضافتها للنافذة
الكود:
WebView browser = new WebView();

3_إنشاء كائن WebEngine على النحو التالى :
الكود:
WebEngine webEngine = browser.getEngine();

4_تمرير صفحة الويبب المراد فتحها على النحو التالى :
الكود:
webEngine.load("http://eclipse.com");

و الشفرة الكاملة لفتح صفحة ويب على النحو التالى :

الكود:

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;


public class JavaFX7 extends Application {
    
    @Override
public void start(Stage primaryStage) {
        
  
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.load("http://google.com");

Group root = new Group();
      
ObservableList list = root.getChildren();
list.add(browser);
Scene scene = new Scene(root, 300, 250);
        
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
    }

  
    public static void main(String[] args) {
        launch(args);
    }
    
}

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


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

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


ملاحظة: عليك إنشاء مجلد و وضع الأيقونات التي تريد وضعها لكل Hyperlink كما في الصورة التالية.


الصورة توضح أننا أضفنا مجلد إسمه images و وضعنا فيه أربع صور.

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
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.paint.Color;
import javafx.scene.text.Font;
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) {

        // يمثلون الصور التي سنضعها كأيقونات للروابط Image هنا قمنا بإنشاء 4 كائنات من الكلاس
        Image image_1 = new Image(getClass().getResourceAsStream("/images/google.png"));
        Image image_2 = new Image(getClass().getResourceAsStream("/images/youtube.png"));
        Image image_3 = new Image(getClass().getResourceAsStream("/images/facebook.png"));
        Image image_4 = new Image(getClass().getResourceAsStream("/images/twitter.png"));

        // يمثلون الروابط التي نريد إضافتها في النافذة Hyperlink هنا قمنا بإنشاء 4 كائنات من الكلاس
        // نص و بجانبه أيقونة hyperlink وضعنا لكل كائن
        Hyperlink link_1 = new Hyperlink("جوجل", new ImageView(image_1));
        Hyperlink link_2 = new Hyperlink("يوتيوب", new ImageView(image_2));
        Hyperlink link_3 = new Hyperlink("فيسبوك", new ImageView(image_3));
        Hyperlink link_4 = new Hyperlink("تويتر", new ImageView(image_4));

        // لأننا سنستخدمه لتحديد المكان الذي سنعرض فيه صفحات الويب في النافذة WebView هنا قمنا بإنشاء كائن من الكلاس
        // و بالتالي أصبحنا نستطيع رسم محتوى أي صفحة ويب بداخل النافذة بواسطة هذا الكائن
        // WebEngine في كائن من الكلاس webView بعدها قمنا بتخزين نوع محرك الويب الذي سيستخدمه الـ
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        
        // هنا جعلنا الأيقونات التي وضعناها للروابط تظهر من ناحية اليمين
        link_1.setContentDisplay(ContentDisplay.RIGHT);
        link_2.setContentDisplay(ContentDisplay.RIGHT);
        link_3.setContentDisplay(ContentDisplay.RIGHT);
        link_4.setContentDisplay(ContentDisplay.RIGHT);

        // هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
        link_1.setTranslateX(456);
        link_1.setTranslateY(10);
        link_2.setTranslateX(312);
        link_2.setTranslateY(10);
        link_3.setTranslateX(168);
        link_3.setTranslateY(10);
        link_4.setTranslateX(24);
        link_4.setTranslateY(10);
        webView.setTranslateX(0);
        webView.setTranslateY(60);

        // هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
        link_1.setPrefSize(120, 34);
        link_2.setPrefSize(120, 34);
        link_3.setPrefSize(120, 34);
        link_4.setPrefSize(120, 34);
        webView.setPrefSize(600, 440);

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

        // hyperlink هنا قمنا بتغيير نوع و حجم خط كائنات الـ
        link_1.setFont(new Font("Tahoma", 16));
        link_2.setFont(new Font("Tahoma", 16));
        link_3.setFont(new Font("Tahoma", 16));
        link_4.setFont(new Font("Tahoma", 16));

        // أزرق فاتح hyperlink هنا جعلنا لون خط كائنات الـ
        link_1.setTextFill(Color.DARKCYAN);
        link_2.setTextFill(Color.DARKCYAN);
        link_3.setTextFill(Color.DARKCYAN);
        link_4.setTextFill(Color.DARKCYAN);

        // يظهر من ناحي اليمين hyperlink هنا جعلنا نص كائنات الـ
        link_1.setAlignment(Pos.CENTER_RIGHT);
        link_2.setAlignment(Pos.CENTER_RIGHT);
        link_3.setAlignment(Pos.CENTER_RIGHT);
        link_4.setAlignment(Pos.CENTER_RIGHT);

             Group root = new Group();

          ObservableList list = root.getChildren();
      
        list.add(link_1);
        list.add(link_2);
        list.add(link_3);
        list.add(link_4);
        list.add(webView);

      
        Scene scene = new Scene(root, 600, 500);

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

           stage.setScene(scene);

           stage.show();

        // عند تشغيل التطبيق webView هنا جعلنا موقع جوجل يفتح بشكل تلقائي مكان الـ
        webEngine.load("https://google.com");

        // link_1 هنا قمنا بتحديد ما سيحدث عند النقر على الكائن
        link_1.setOnAction((ActionEvent e) -> {
            // webView هنا قلنا أنه سيتم فتح موقع جوجل مكان الـ
            webEngine.load("https://google.com");
        });
        
        // link_2 هنا قمنا بتحديد ما سيحدث عند النقر على الكائن
        link_2.setOnAction((ActionEvent e) -> {
            // webView هنا قلنا أنه سيتم فتح موقع يوتيوب مكان الـ
            webEngine.load("https://youtube.com");
        });
        
        // link_3 هنا قمنا بتحديد ما سيحدث عند النقر على الكائن
        link_3.setOnAction((ActionEvent e) -> {
            // webView هنا قلنا أنه سيتم فتح موقع فيسبوك مكان الـ
            webEngine.load("https://facebook.com");
        });
        
        // link_4 هنا قمنا بتحديد ما سيحدث عند النقر على الكائن
        link_4.setOnAction((ActionEvent e) -> {
            // webView هنا قلنا أنه سيتم فتح موقع تويتر مكان الـ
            webEngine.load("https://twitter.com");
        });

    }

    public static void main(String[] args) {
        launch(args);
    }

}

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



avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 336
النقاط : 556
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال20_ واجهة المستخدم الرسومية _ الكلاس WebView

مُساهمة من طرف NEXT في الجمعة أكتوبر 19, 2018 2:33 pm

تحياتى و تقديرى لجهودك المخلصة لاثراء المحتوي العرب بالمقالات التقنية 

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
avatar
NEXT
الادارة
الادارة

تاريخ التسجيل : 18/02/2011
المساهمات : 322
النقاط : 200478
التقيم : 10
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال20_ واجهة المستخدم الرسومية _ الكلاس WebView

مُساهمة من طرف أحمد مناع في الجمعة أكتوبر 19, 2018 8:21 pm

الله يوفك و يجزكي خير

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
سبحان الله وبحمدة .....سبحان الله العظيم

إن فقدت مكان بذورك التي بذرتها يوما ما سيخبرك المطر أين زرعتها ..لذا إبذر الخير فوق أي أرض وتحت أي سماء ومع أي أحد.. فأنت لا تعلم أين تجده ومتى تجده؟! إزرع جميلا ولو في غير موضعه .... فلا يضيع جميلا أينما زرعا .. فما أجمل العطاء... فقد تجد جزاءه في الدنيا أو يكون لك ذخرا في الآخرة
avatar
أحمد مناع
.
.

تاريخ التسجيل : 15/02/2011
المساهمات : 838
النقاط : 201529
التقيم : 81
الدولة : مصر
الجنس : ذكر

http://egy-tech.forumegypt.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال20_ واجهة المستخدم الرسومية _ الكلاس WebView

مُساهمة من طرف زهراء في الإثنين نوفمبر 12, 2018 9:31 am

شكرا لمروركم الكرام @أحمد مناع    [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 336
النقاط : 556
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى