إعلان
دورة تطوير التطبيقات باستخدام لغة 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 طريقة تصميم واجهة مستخدم بواسطة برنامج Gluon

    تصميم واجهة مستخدم بواسطة برنامج Gluon خطوة خطوة

    في البداية, وضعنا يمكنك تحميل المشروع بنقرة زر لكن ننصحك باتباع الخطوات التي وضعناها لمحاولة إنشاء المشروع بنفسك.

    ⇓ تحميل المشروع كاملاً


    سنقوم الآن بإنشاء مشروع جديد و منه ستفهم كيف يتم ربط واجهة المستخدم التي نصممها بواسطة برنامج Gluon مع كود الجافا الذي نكتبه بواسطة برنامج Netbeans.


    1. الآن قم بإنشاء مشروع JavaFX جديد كالتالي.



    2. قم بتسمية المشروع SampleApp و لا تضع علامة صح على أي خيار ظاهر في النافذة كالتالي.



    3. بعد إنشاء المشروع SampleApp سيكون شكله كالتالي.



    4. الآن لإنشاء نافذة تسجيل الدخول و التي ستكون عبارة عن ثلاث ملفات ( FXML - Java - CSS ) إفعل التالي.



    5. ملف الـ FXML قم بتسميته Login كالتالي.



    6. ملف الـ Java قم بتسميته LoginController كالتالي.



    7. ملف الـ CSS قم بتسميته Login كالتالي.
    ملاحظة: لن نقوم بكتابة أي كود في هذا الملف لكننا شرحنا كيف يمكنك إضافته لأنك قد تحتاج إضافة ملف CSS للنوافذ التي تبنيها مستقبلاً.



    8. بعد إنشاء الملفات الثلاثة سيظهروا في المشروع كالتالي.



    9. الآن, لفتح الملف Login.fxml في برنامج Gluon أنقر على الخيار Open كالتالي.
    ملاحظة: إذا قمت بالنقر على الخيار Edit سيتم فتح الملف كأي ملف عادي بداخل برنامج Netbeans.



    10. بعد أن يتم فتح الملف Login.fxml في برنامج Gluon سيكون شكله كالتالي.



    11. لإضافة Button قم بإمسكه و إفلاته فيها أو أنقر عليه مرتين متتاليتين و بشكل سريع حتى يتم إضافته فيها.
    بعدها يمكنك تحديد مكان ظهوره و التلاعب بحجمه بكل سهولة بواسطة الفأرة.



    12. لتغيير النص الذي يظهر على الـ Button أنقر على الـ Button مرة واحدة, بعدها توجه لحاوية الخصائص ( Properties ) و ضع الإسم الذي تريده في الحقل Text.
    بعد إدخال الإسم في الحقل Text أنقر على الزر Enter حتى يتم تغيير الإسم كالتالي.



    13. الآن أنقر على حاوية الكود ( Code ) حتى تفتح لأنك من خلالها تستطيع تحديد الدوال التي ستتنفذ عندما يتفاعل المستخدم مع الـ Button.
    بداخل الحقل On Action أكتب handleButtonAction لأنني ننوي تنفيذ دالة إسمها هكذا كلما قام المستخدم بالنقر على الـ Button.



    14. في الأخير, قم بحفظ التغيرات التي أجريتها في هذا الملف و من ثم قم بإغلاق برنامج Gluon إذا أردت لأننا سنرجع إلى برنامج Netbeans.



    15. إرجع لبرنامج Netbeans و قم بتعديل محتوى الملفات LoginController.java و login.fxml كالتالي.

    في الملف LoginController.java قمنا بتعريف الدالة handleButtonAction() التي ذكرنا في واجهة المستخدم التي صممناها ببرنامج Gluon أنه سيتم تنفيذها عند النقر الزر الذي وضعناه في النافذة.

    LoginController.java
    import java.net.URL;
    import java.util.ResourceBundle;
    import javafx.event.ActionEvent;
    import javafx.fxml.FXML;
    import javafx.fxml.Initializable;
    import javafx.scene.control.Alert;
    import javafx.scene.control.Alert.AlertType;
    
    public class LoginController implements Initializable {
    
        @Override
        public void initialize(URL url, ResourceBundle rb) {
            
        }
        
    	// Button أنه سيتم تنفيذها عند النقر على الـ Login.fxml التي ذكرنا في الملف handleButtonAction() هنا قمنا بتعريف الدالة
        @FXML
        private void handleButtonAction(ActionEvent event) {
    		// handleButtonAction() هنا قلنا أنه سيتم إنشاء نافذة صغيرة منبثقة كلما تم تنفيذ الدالة
            Alert alertInformation = new Alert(AlertType.INFORMATION);
            alertInformation.setHeaderText("First Alert using FXML");
            alertInformation.setContentText("This is just a test");
            alertInformation.showAndWait();
        }
        
    }
    		

    في الملف Login.fxml قمنا فقط بعرض المحتوى الذي كتبه عنا برنامج Gluon على عدة أسطر حتى نقرأه بسهولة أكثر.

    تنبيه

    في الإصدار 8.2 من برنامج Netbeans واجهنا مشكلة صغيرة و هي أننا إضطررنا لإجراء تعديل بسيط في السطر 13 حيث قمنا بتديل القيمة ".LoginController" بالقيمة "LoginController". أي قمنا فقط بإزالة النقطة التي وجدناها موضوعة في أول الكلمة.

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

    Login.fxml
    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import java.net.URL?>
    <?import javafx.scene.control.Button?>
    <?import javafx.scene.layout.AnchorPane?>
    
    <AnchorPane id="AnchorPane"
                prefHeight="400.0"
                prefWidth="600.0"
                styleClass="mainFxmlClass"
                xmlns:fx="http://javafx.com/fxml/1"
                xmlns="http://javafx.com/javafx/8.0.171"
                fx:controller="LoginController">         <!-- هو إسم ملف الجافا المخصص لهذا الملف LoginController -->
        <stylesheets>
            <URL value="@Login.css" />
        </stylesheets>
       <children>
          <Button layoutX="274.0"
                  layoutY="188.0"
                  mnemonicParsing="false"
                  text="Click Me"
                  onAction="#handleButtonAction" />      <!-- هو إسم الدالة التي سيتم تنفيذها عند النقر على الزر handleButtonAction -->
       </children>
    </AnchorPane>
    		


    16. قم بإنشاء كلاس جافا جديد في المشروع إسمه Main.java بجانب الملفات الأخرى التي قمنا بإنشائها سابقاً.



    17. إفتح الملف Main.java و ضع فيه الكود التالي.

    Main.java
    import javafx.application.Application;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.Parent;
    import javafx.scene.Scene;
    import javafx.stage.Stage;
    
    public class Main extends Application {
        
        @Override
        public void start(Stage stage) throws Exception {
    		
    		// Login.fxml و التي قمنا بتجهيزها في الملف Button يمثل الحاوية التي فيها Parent هنا قمنا بإنشاء كائن من الكلاس
            Parent root = FXMLLoader.load(getClass().getResource("Login.fxml"));
            
            // فيها. أي ما فيه سيوضع كمجتوى فيها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
            Scene scene = new Scene(root);
            
    		// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في الكائن scene هنا وضعنا الكائن
            stage.setScene(scene);
    		
    		// هنا وضعنا عنوان للنافذة
            stage.setTitle("FXML Sample App");
    
            // هنا قمنا بإظهار النافذة
            stage.show();
    
        }
    
        public static void main(String[] args) {
            launch(args);
        }
        
    }
    		




    18. ستظهر لك النافذة التالية عند تشغيل المشروع.

    إعلان

    Eqla3Tech.com

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

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

    الدورات

    أدوات مساعدة

    الأقسام

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