تعلم JavaFx ..مقال 3 _ التعامل مع Scene & Node

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

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

تعلم JavaFx ..مقال 3 _ التعامل مع Scene & Node

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

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

أهلا بكم 

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

إذاً الـ Node يمكن أن يكون أحد الأشياء التالية:


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


فى مقال اليوم سنتعلم كيفية التعامل مع الـ Scene ومن ثم  الـ Node برمجيا و إضافتهما الى النافذة Stage

خطوات إضافة كائن المحتوي  Scene و كائن العناصر  الـ Node برمجيا  الى كائن النافذة Stage


1_ إنشاء كائن النافذة Stage : وذلك من خلال جعل الكلاس الأساسي للتطبيق يرث من الكلاس Application باستخدام الكلمة المحجوزة extends . و بداخل الكلاس الاساسى في التطبيق نفعل Override للدالة start() التي ورثها من الكلاس Application على النحو التالى :

الكود:
public class JavafxSample extends Application {  
   @Override    
   public void start(Stage primaryStage) throws Exception {      
   }    
}

2_ إنشاء الكائن Group :حيث إننا نوي جعله Root Node فى النافذة

الكود:
Group root = new Group();

3_ إنشاء كائن المحتوي Scene مع تعيين الكائن root كأول Node فيها وتحديد حجمها

الكود:
Scene scene = new Scene(root,600, 300);

4_ تلوين خلفية كائن المحتوي scene كمثال عن كيفية التعامل مع هذا الكائن ووضع اى شيء تريدة ....سيتم توضيحة لاحقا مع اضافة العناصر

الكود:
scene.setFill(Color.BROWN);

5_ وضع كائن المحتوي scene الى كائن النافذة Stage
الكود:

primaryStage.setScene(scene);

6_ إنشاء عنوان لكائن النافذة Stage

الكود:
primaryStage.setTitle("Sample Application");

7_ إظهار كائن النافذة

الكود:
primaryStage.show();


8_ بتشغيل تطبيق JavaFX عن طريق استدعاء إطلاق الأسلوب launch(args); داخل الدالة الرئسية

الكود:
public static void main(String[] args) {
        launch(args);
    }
 


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







الكود:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;  

public class JavafxSample extends Application {
   @Override    
   public void start(Stage primaryStage) throws Exception {            
      //creating a Group object
      Group group = new Group();
      
      //Creating a Scene by passing the group object, height and width  
      Scene scene = new Scene(group ,600, 300);
      
      //setting color to the scene
      scene.setFill(Color.BROWN);  
      
      //Setting the title to Stage.
      primaryStage.setTitle("Sample Application");
  
      //Adding the scene to Stage
      primaryStage.setScene(scene);
      
      //Displaying the contents of the stage
      primaryStage.show();
   }    
   public static void main(String args[]){          
      launch(args);    
   }        
}

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










مثال أخر لكتابة نص :

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
        
public class DisplayingText extends Application {
   @Override
   public void start(Stage stage) {      
      //Creating a Text object
      Text text = new Text();
      
      //Setting font to the text
      text.setFont(new Font(45));
      
      //setting the position of the text
      text.setX(50);
      text.setY(150);          
      
      //Setting the text to be added.
      text.setText("Welcome to Tutorialspoint");
        
      //Creating a Group object  
      Group root = new Group();
      
      //Retrieving the observable list object
      ObservableList list = root.getChildren();
      
      //Setting the text object as a node to the group object
      list.add(text);      
              
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);
      
      //Setting title to the Stage
      stage.setTitle("Sample Application");
        
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();
   }  
   public static void main(String args[]){
      launch(args);
   }
}


فكرة ربط الـ Root Node بكائن من الكلاس ObservableList

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

لهذا السبب سنربط دائماً الـ Root Node بكائن من الكلاس ObservableList في كل تطبيق نقوم بإنشائه.


هل ربط الكائن root بالكائن list هو أمر إجباري؟

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

في حال أردت إضافة الكائن text مباشرةً على الكائن root يمكنك كتابة root.getChildren().add(text); بدل كل الكود المكتوب في السطرين 29 و 32.


تحياتى لكم
avatar
زهراء
........
........

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

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

رد: تعلم JavaFx ..مقال 3 _ التعامل مع Scene & Node

مُساهمة من طرف السنى في الجمعة أكتوبر 12, 2018 5:29 pm

الله يبارك فيك وفى علمك زهراء 
avatar
السنى
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 216
النقاط : 404
التقيم : 22
الجنس : ذكر

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

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

ََ

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


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