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

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

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

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

مُساهمة من طرف زهراء في السبت أكتوبر 20, 2018 4:43 am

اهلا بكم

الكلاس MenuBar يستخدم لإضافة شريط القوائم ( Menu Bar ) في أعلا النافذة....و الادوات التي يمكنك وضعها في الـ MenuBar هي نفسها التي يمكنك وضعها في الـ ContextMenu.

إذاً, في الـ MenuBar يمكنك وضع أي نوع من العناصر ( Menu Items ) التالية بداخله:


  • Menu: أي قائمة عادية و تستطيع وضع قائمة بداخل قائمة.
  • MenuItem: عنصر عادي خاص للقوائم.
  • RadioMenuItem: يمثل RadioButton خاص للقوائم.
  • CheckMenuItem: يمثل CheckBox خاص للقوائم.
  • SeparatorMenuItem: يمثل خط فاصل (Separator) خاص للقوائم.
  • CustomMenuItem: عبارة عن كلاس خاص يجب أن يرث منه أي كلاس تنشئه أنت بهدف وضعه كعنصر في القائمة.



طريقة التعامل معه

يتم إنشاءة على النحو التالى :

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

الكود:

import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;

2_إنشاء كائن جديد من الكلاس MenuBar يمثل شريط القوائم الذي نريد إضافته في النافذة

الكود:
MenuBar menuBar = new MenuBar();

3_ إنشاء كائنات جديدة من الكلاس Menu تمثل القوائم الثلاث الرئيسية التي سنضعها في شريط القوائم
الكود:

 Menu menuFile = new Menu("File");
    Menu menuEdit = new Menu("Edit");
    Menu menuView = new Menu("View");

4_وضع كائنات القوائم الى كائن شريط القوائم :

الكود:

menuBar.getMenus().addAll(menuFile, menuEdit, menuView);



و المثال الكامل التالى يوضح طريقة إنشاء شريط قوائم MenuBar و إضافات قوائم Menu فيه

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.stage.Stage;

public class Main extends Application {
    
    // يمثل شريط القوائم الذي سنضعه في أعلا النافذة MenuBar هنا قمنا بإنشاء كائن من الكلاس
    MenuBar menuBar = new MenuBar();

    // تمثل القوائم الثلاث الرئيسية التي سنضعها في شريط القوائم Menu هنا قمنا بإنشاء 3 كائنات من الكلاس
    Menu menuFile = new Menu("File");
    Menu menuEdit = new Menu("Edit");
    Menu menuView = new Menu("View");

    @Override
    public void start(Stage stage) {

        // هنا قمنا بوضع القوائم في شريط القوائم
        menuBar.getMenus().addAll(menuFile, menuEdit, menuView);
        
        // هنا قمنا بجعل عرض شريط القوائم يساوي عرض النافذة حتى يظهر مطابق لها
        menuBar.setPrefWidth(400);
                    Group root = new Group();

        ObservableList list = root.getChildren();

       list.add(menuBar);
  Scene scene = new Scene(root, 400, 250);

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

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

    }

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

}


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


طريقة إضافة عناصر (MenuItem) في كل قائمة (Menu) و تنفيذ أوامر عند النقر على العناصر

المثال التالي يعلمك طريقة إضافة عناصر ( Menu Items ) في كل قائمة و إضافة خط فاصل ( Separator ) بين العناصر.
ستتعلم أيضاً كيف تنفذ أوامر عند النقر على العناصر الموجودة في القوائم.

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.control.SeparatorMenuItem;
import javafx.stage.Stage;

public class Main extends Application {

    // يمثل شريط القوائم الذي سنضعه في أعلا النافذة MenuBar هنا قمنا بإنشاء كائن من الكلاس
    MenuBar menuBar = new MenuBar();

    // تمثل القوائم الثلاث الرئيسية التي سنضعها في شريط القوائم Menu هنا قمنا بإنشاء 3 كائنات من الكلاس
    Menu menuFile = new Menu("File");
    Menu menuEdit = new Menu("Edit");
    Menu menuView = new Menu("View");

    // تمثل العناصر التي سنضعها في القوائم MenuItem هنا قمنا بإنشاء 11 كائن من الكلاس
    MenuItem itemNewFile = new MenuItem("New");
    MenuItem itemOpen = new MenuItem("Open");
    MenuItem itemSave = new MenuItem("Save");
    MenuItem itemExit = new MenuItem("Exit");
    MenuItem itemUndo = new MenuItem("Undo");
    MenuItem itemCut = new MenuItem("Cut");
    MenuItem itemCopy = new MenuItem("Copy");
    MenuItem itemPaste = new MenuItem("Paste");
    MenuItem itemSelect = new MenuItem("Select All");
    MenuItem itemAbout = new MenuItem("About");
    MenuItem itemReport = new MenuItem("Report Issue");
    
    @Override
    public void start(Stage stage) {

        // هنا قمنا بوضع القوائم في شريط القوائم
        menuBar.getMenus().addAll(menuFile, menuEdit, menuView);

        // menuFile في القائمة itemExit و itemSave ,ItemOpen ,itemNewFile هنا قمنا بوضع العناصر
        menuFile.getItems().add(itemNewFile);
        menuFile.getItems().add(itemOpen);
        menuFile.getItems().add(itemSave);
        menuFile.getItems().add(new SeparatorMenuItem());
        menuFile.getItems().add(itemExit);

        // menuEdit في القائمة itemSelect و itemPaste ,itemCopy ,itemCut ,itemUndo هنا قمنا بوضع العناصر
        menuEdit.getItems().add(itemUndo);
        menuEdit.getItems().add(new SeparatorMenuItem());   // هنا أضفنا خط فاصل
        menuEdit.getItems().add(itemCut);
        menuEdit.getItems().add(itemCopy);
        menuEdit.getItems().add(itemPaste);
        menuEdit.getItems().add(new SeparatorMenuItem());   // هنا أضفنا خط فاصل
        menuEdit.getItems().add(itemSelect);
        
        // menuView في القائمة itemReport و itemAbout هنا قمنا بوضع العناصر
        menuView.getItems().add(itemAbout);
        menuView.getItems().add(itemReport);
        
        // هنا قمنا بجعل عرض شريط القوائم يساوي عرض النافذة حتى يظهر مطابق لها
        menuBar.setPrefWidth(400);

        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();

        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();

        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن menuBar هنا قمنا بإضافة الكائن
        list.add(menuBar);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);

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

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();
        
        // itemNewFile هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemNewFile.setOnAction((ActionEvent e) -> {

        });
        
        // itemOpen هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemOpen.setOnAction((ActionEvent e) -> {

        });
        
        // itemSave هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemSave.setOnAction((ActionEvent e) -> {

        });
        
        // itemExit هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemExit.setOnAction((ActionEvent e) -> {

        });
        
        // itemUndo هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemUndo.setOnAction((ActionEvent e) -> {

        });
        
        // itemCut هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemCut.setOnAction((ActionEvent e) -> {

        });
        
        // itemCopy هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemCopy.setOnAction((ActionEvent e) -> {

        });
        
        // itemPaste هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemPaste.setOnAction((ActionEvent e) -> {

        });
        
        // itemSelect هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemSelect.setOnAction((ActionEvent e) -> {

        });
        
        // itemAbout هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemAbout.setOnAction((ActionEvent e) -> {

        });
        
        // itemReport هنا نضع الأوامر التي نريد أن يتم تنفيذها عند النقر على العنصر
        itemReport.setOnAction((ActionEvent e) -> {

        });
    }

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

}

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


طريقة وضع أيقونة للـMenuItem

المثال التالي يعلمك طريقة وضع أيقونات لعناصر القائمة. أي ستتعلم كيف تضع أيقونة للـ MenuItem.

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


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

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.control.SeparatorMenuItem;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class Main extends Application {

    // يمثل شريط القوائم الذي سنضعه في أعلا النافذة MenuBar هنا قمنا بإنشاء كائن من الكلاس
    MenuBar menuBar = new MenuBar();

    // هنا قمنا بإنشاء القائمة الرئيسية التي سنضعها في شريط القوائم
    Menu menu = new Menu("Menu");
    
      // تمثل العناصر التي سنضعها في القوائم مع وضع صورة مختلفة لكل عنصر MenuItem هنا قمنا بإنشاء 4 كائنات من الكلاس
    MenuItem itemNewFile = new MenuItem("New", new ImageView(new Image("/images/new-icon.png")));
    MenuItem itemOpen = new MenuItem("Open", new ImageView(new Image("/images/open-icon.png")));
    MenuItem itemSave = new MenuItem("Save", new ImageView(new Image("/images/save-icon.png")));
    MenuItem itemExit = new MenuItem("Exit", new ImageView(new Image("/images/exit-icon.png")));
    
    @Override
    public void start(Stage stage) {

        // هنا قمنا بوضع القائمة في شريط القوائم
        menuBar.getMenus().addAll(menu);

        // menu في القائمة itemExit و itemSave ,ItemOpen ,itemNewFile هنا قمنا بوضع العناصر
        menu.getItems().add(itemNewFile);
        menu.getItems().add(itemOpen);
        menu.getItems().add(itemSave);
        menu.getItems().add(new SeparatorMenuItem());   // هنا أضفنا خط فاصل
        menu.getItems().add(itemExit);
        
        // هنا قمنا بجعل عرض شريط القوائم يساوي عرض النافذة حتى يظهر مطابق لها
        menuBar.setPrefWidth(400);

        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();

        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();

        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن menuBar هنا قمنا بإضافة الكائن
        list.add(menuBar);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);

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

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();

    }

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

}

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



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

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

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

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

ََ

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


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