تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف زهراء في الأربعاء أكتوبر 10, 2018 10:26 am

بسم الله الرحمن الرحيم 

فى هذا المقال سنناقش بنية تطبيق JavaFX بالتفصيل ، وكذلك نتعلم كيفية إنشاء تطبيق JavaFX مع الامثلة.

1_ هكيل بناء تطبيق JavaFX Application

بشكل عام ، يحتوي تطبيق JavaFX على ثلاثة مكونات رئيسية هي: Stage و Scene و Nodes كما هو موضح في الرسم التخطيطي التالي.

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Javafx_application_structure

1_ المكون Stage :


الـ Stage هو النافذة بحد ذاتها التى تحتوي على جميع كائنات تطبيق JavaFX  و هو يقسم النافذة إلى قسمين أساسين هما شريط القوائم و المنطقة التي يمكن فيها إضافة أشياء في النافذة...برمجياً تم تمثيل الـ Stage بكلاس خاص إسمه Stage و هو موجود في المسار javafx.stage.Stage.

يمكن عرض الـ Stage بأربع أشكال مختلفة:


  • Decorated: هنا تكون خلفية النافذة بيضاء و تصميمها أجمل.
  • Undecorated: هنا تكون خلفية النافذة بيضاء.
  • Transparent: هنا تكون خلفية النافذة شفافة.
  • Utility: هنا تكون خلفية النافذة بيضاء و يوجد فقط زر للخروج في شريط القوائم.


ملاحظة: قد لا تعمل بعض هذه التصاميم على جميع الأجهزة و خاصةً الهواتف.


2_المكون  Scene :


الـ Scene هو المنطقة المخصصة في النافذة لوضع المحتويات الفعلية لتطبيق JavaFX بشكل هرمي (Hierarchical) و سترى ذلك لاحقاً...برمجياً تم تمثيل الـ Scene بكلاس خاص إسمه Scene و هو موجود في المسار javafx.scene.Scene.

كل كائن نافذة Stage ننشئه ننشئ له على الأقل كائن من الكلاس Scene لأننا بحاجة له حتى نضع فيه الأشياء التي نريد إضافتها في النافذة. و لا يمكن ربط كائن الـ Scene بأكثر من كائن Stage في نفس الوقت.

يمكن إنشاء أكثر من كائن Scene و ربط كائن واحد منهم في كل مرة بكائن الـ Stage الفكرة هنا أنه يمكنك إنشاء عدة صفحات ( أو حاويات ) و عرض الصفحة التي تريدها في النافذة على حسب تفاعل المستخدم.

3_ المكونات Node

أي شيء يتم إضافته في الـ Scene يقال له Node.....إذاً الـ Node يمكن أن يكون أحد الأشياء التالية:

أحد الأشكال الهندسية سواء 2D أو 3D مثل Rectangle - Circle - Box - Sphere.
أحد عناصر واجهة التحكم مثل Button - CheckBox - RadioButton.
يمكن أن يكون أحد أنواع الحاويات التي يمكنها أن تسع عدة Nodes مثل FlowPane - GridPane - StakPane.
يمكن أن يكون أحد عناصر الـ Media مثل Audio - Image - Video.

مصطلحات تقنية
Root Node: هو أول Node يتم إضافته في الـ Scene.
Branch Node أو Parent Node: هو أي Node يحتوي على Node أو أكثر بداخله.
Leaf Node: هو الـ Node التي لا يوجد أي Node تحتها.

التعامل مع الـ Node
برمجياً, أي Node متوفر في JavaFX هو في الأصل مشتق من الكلاس Node الموجود في المسار javafx.scene.Node.
ستتعرف على جميع أنواع الـ Nodes المتوفرة في JavaFX لاحقاً في هذه الدورة.

دورة حياة تطبيقات JavaFX

الكلاس Application الموجود في المسار javafx.application.Application يحتوي على الدوال launch() - init() - start() - stop().
هذه الدوال تمثل دورة حياة أي تطبيق تم بناؤه في JavaFX و هي تستدعى بشكل تلقائي كما في الصورة التالية.

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Life-cycle-of-javafx-applications


خطوات إنشاء تطبيق JavaFX Application 

1_ فى البداية نقوم باستيراد فئات العمل اللازمة وهي فى مثالنا الحالى الفئة Application و الفئة Stage
الكود:
import javafx.application.Application;
import javafx.stage.Stage;

2_ جعل الكلاس الأساسي في هذا التطبيق يرث من الكلاس Application على النحو التالى :
الكود:
public class JavaFX1 extends Application {
      
    
}

ملحوظة : الكلاس الذي يرث من الكلاس Application يعتبر الـ Main Class في هذا التطبيق

3_ بداخل الفئة الأساسية في التطبيق يجب أن تفعل Override للدالة start() التي ورثها من الكلاس Application و تضع فيها كود إنشاء النافذة الرئيسية في التطبيق على النحو التالى :
الكود:
public class JavaFX1 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        //وضع عنوان للنافذة        
        primaryStage.setTitle("Hello World!");
        // إظهار النافذة
        primaryStage.show();
    }
        
}

4_إنشاء الدالة الرئسية main و تنفيذ الدالة launch() بداخلها حيث انها نقطة البداية في التطبيق حيث أنها أول دالة تتنفذ عند تشغيل التطبيق.
الكود:
 public static void main(String args[]){          
      launch(args);      
   }

و الكود الكامل لانشاء تطبيق JavaFx بسيط لعرض نافذة على النحو التالى :
الكود:

import javafx.application.Application;
import javafx.stage.Stage;


public class JavaFX1 extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        //وضع عنوان للنافذة        
        primaryStage.setTitle("Hello World!");
        // إظهار النافذة
        primaryStage.show();
    }

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

و النتيجة


تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Example-of-life-cycle-in-javafx-applications

ملحوظة :


إذا جعلت الكلاس يرث من الكلاس Application و قمت بتعريف الدالة main() فيه.في هذه الحالة تكون مجبر على إستدعاء الدالة launch() حتى يتم إستدعاء الدوال init() و start() و stop().


لا حاجة للدالة main() في تطبيقات JavaFX


يمكنك عدم وضع الدالة main() في التطبيق الذي تبنيه بواسطة JavaFX لأنك عندما تجعل الكلاس الأساسي في التطبيق يرث من الكلاس Application سيفهم مشغّل تطبيقات جافا ( أي الـ JVM ) أن أول دالة سيتم إستدعاءها عند تشغيل البرنامج هي الدالة init() ما لم تقم بتعريف الدالة main().


المثال التالي يظهر لك أنه عند عدم وضع الدالة main() سيتم إعتبار الدالة init() هي نقطة البداية في التطبيق:

الكود:

import javafx.application.Application;
import javafx.stage.Stage;


public class JavaFX1 extends Application {
    
    // تنفيذ التطبيق بالدالة init بدلا من الدالة main
     @Override
    public void init() {
        System.out.println("init() method ");
    }
    
    @Override
    public void start(Stage primaryStage) {
        //وضع عنوان للنافذة        
        primaryStage.setTitle("Hello World!");
        // إظهار النافذة
        primaryStage.show();
    }

  
    
}


تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Example-of-life-cycle-in-javafx-applications


ملحوظة :


في حال كنت تنوي إستخدام أحد العناصر الموجودة في Java Swing فإنك مجبر على وضع الدالة main() في البرنامج.


في حال كنت تستخدم بيئة تطوير ( IDE ) لا تحتوي على جميع الأدوات المتوفرة في JavaFX و تحديداً الأداة ( JavaFX Launcher ) التي تتولى تشغيل برامج JavaFX من داخل بيئة التطوير فإنك مجبر على وضع الدالة main() في البرنامج حتى لا يظهر لك خطأ مفاده أنه لا يمكن تشغيل البرنامج لأنه لم يتم العثور على الدالة main().


لهذا ستجد أننا وضعنا الدالة main() في جميع الأمثلة حتى تعمل جميع الأمثلة عندكم مهما كانت بيئة التطوير التي تعتمدون عليها و بدون الحاجة لإجراء أي تعديل على الكود.



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

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

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty رد: تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف أحمد مناع في الأربعاء أكتوبر 10, 2018 2:29 pm

تحياتى و تقديرى اليك زهراء على هذا المجهود الضخم الذي تقومي بيه في الارتقاء بالمنتدى 


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

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

http://egy-tech.forumegypt.net

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty رد: تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف أحمد مناع في الأربعاء أكتوبر 10, 2018 2:34 pm

كنت حابب اتعلم الجافا fx و على يدك ان شاء الله سنحترفها خصوصا بعد ما شاهد عينة من تطبيقات تلك التقنية 

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  6a00e54f133d698834011571e71d85970b-800wi

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

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

http://egy-tech.forumegypt.net

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty رد: تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف السنى في الخميس أكتوبر 11, 2018 7:30 am

بالتوفيق زهراء 
السنى
السنى
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 220
النقاط : 411
التقيم : 23
الجنس : ذكر

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty رد: تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف المبرمج الطموح في الخميس أكتوبر 11, 2018 8:14 pm

بسم الله ما شاء الله 


طيب التقنية دى سهله فى التعلم يعني ولا هنوجع دماغنا فيها بس 
المبرمج الطموح
المبرمج الطموح
الاشراف
الاشراف

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

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty رد: تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف زهراء في الجمعة أكتوبر 12, 2018 8:13 am

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] كتب:

تحياتى و تقديرى اليك زهراء على هذا المجهود الضخم الذي تقومي بيه في الارتقاء بالمنتدى 



شكرا جزيلا اخي الكريم
زهراء
زهراء
........
........

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

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

تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX  Empty رد: تعلم JavaFx ..مقال 2 _ بناء تطبيقات JavaFX

مُساهمة من طرف زهراء في الجمعة أكتوبر 12, 2018 8:15 am

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


طيب التقنية دى سهله فى التعلم يعني ولا هنوجع دماغنا فيها بس 


اكيد طبعا سهلة و شيقة ويمكن بسهولة برمجة تطبيقاتها طالما عندك خلفية بالجافا 
زهراء
زهراء
........
........

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

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

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

ََ

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


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