إعلان
دورة تطوير التطبيقات باستخدام لغة 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 عرض البيانات باستخدام الكلاس BarChart

    المثال التالي يعلمك طريقة عرض البيانات على شكل رسم بياني شريطي ( Bar Chart ) باستخدام الكلاس BarChart.
    بالإضافة إلى أننا قمنا باستخدام الدالة setCreateSymbols() و تمرير القيمة false لها حتى لا يتم إظهار الحاوية التي تعلمنا من صاحب هذه الألوان لأنه لا داعي لجعلها ظاهرة في هذا المثال.

    المثال الأول

    Main.java
    import java.util.Arrays;
    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.geometry.Insets;
    import javafx.scene.Scene;
    import javafx.scene.chart.BarChart;
    import javafx.scene.chart.CategoryAxis;
    import javafx.scene.chart.NumberAxis;
    import javafx.scene.chart.XYChart.Data;
    import javafx.scene.chart.XYChart.Series;
    import javafx.scene.layout.StackPane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage stage) {
    
            // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس
    		// سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي
            CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList(
                Arrays.asList("Speed", "Safety", "Milage", "User Rating")));
    
            // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
            NumberAxis yAxis = new NumberAxis(0, 12, 2);
    
            // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس
            // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
            BarChart barChart = new BarChart(xAxis, yAxis);
            
            // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن
            barChart.setTitle("Audi Characteristics");
    		
    		// واحد في النافذة و بالتالي لا داعي لجعلها ظاهرة series هنا جعلنا الحاوية التي تعلمنا من صاحب هذه الألوان تختفي لأننا سنعرف خصائص
    		barChart.setLegendVisible(false);
    		
            // barChart يمثل كل الخطوط التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
            Series series = new Series();
            
            // series هنا قمنا بتعريف كل الخطوط التي سيتم رسمها للكائن
    		// ملاحظة: بما أن كل هذه الخطوط تعود لنفس الكائن, سيتم إعطاءها نفس اللون
            series.getData().add(new Data("Speed", 8));
            series.getData().add(new Data("Safety", 5));
            series.getData().add(new Data("Milage", 7));
            series.getData().add(new Data("User Rating", 6));
    
            // الذي يمثل الرسم البياني barChart الذي يمثل كل الخطوط البرتقالية على الكائن series هنا قمنا بإضافة الكائن
            barChart.getData().add(series);
    
            // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
            StackPane root = new StackPane();
            
            // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
            root.setPadding(new Insets(10));
    
            // root في الكائن barChart هنا قمنا بإضافة الكائن
            root.getChildren().addAll(barChart);
    
            // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
            Scene scene = new Scene(root, 400, 340);
    
            // هنا وضعنا عنوان للنافذة
            stage.setTitle("JavaFX BarChart");
    
            // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
            stage.setScene(scene);
    
            // هنا قمنا بإظهار النافذة
            stage.show();
    
        }
    
        // هنا قمنا بتشغيل التطبيق
        public static void main(String[] args) {
            launch(args);
        }
    
    }
    		

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

    مثال حول الكلاس BarChart في JavaFX


    معلومة تقنية

    بما أن المعلومات التي سيتم وضعها على الخط الأفقي يجب أن تكون تحمل نفس الإسم كان بإمكانك تبديل الكود التالي.

    series.getData().add(new Data("Speed", 8));
    series.getData().add(new Data("Safety", 5));
    series.getData().add(new Data("Milage", 7));
    series.getData().add(new Data("User Rating", 6));
    	

    بهذا الكود حتى لا تضطر إلى إعادة ذكر إسم الجدول.

    series.getData().add(new Data(xAxis.getCategories().get(0), 8));
    series.getData().add(new Data(xAxis.getCategories().get(1), 5));
    series.getData().add(new Data(xAxis.getCategories().get(2), 7));
    series.getData().add(new Data(xAxis.getCategories().get(3), 6));
    	

    صحيح أن الكود يبدو لك أكبر لكنه سيضمن لك على الأقل أن لا يحدث أي خطأ أثناء تحديد أسماء الأعمدة التي سيتم رسمها.



    المثال التالي يعلمك طريقة تحديد مكان ظهور حاوية دليل الألوان و طريقة وضع أكثر من Series على نفس الرسم.
    فعلياً, قمنا باستخدام الدالة setLegendSide() و تمرير الثابت Side.RIGHT لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليمين.
    و قمنا بوضع نفس أسماء الأعمدة لكل Series قمنا بتعريفه حتى يظهروا ضمن مجموعات.
    و قمنا بوضع مسافة فارغة بمقدار 60 بين كل مجموعة أعمدة سيتم عرضها حتى لا يظهروا بشكل عريض و متلاصق.

    المثال الثاني

    Main.java
    import java.util.Arrays;
    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.geometry.Insets;
    import javafx.scene.Scene;
    import javafx.scene.chart.BarChart;
    import javafx.scene.chart.CategoryAxis;
    import javafx.scene.chart.NumberAxis;
    import javafx.scene.chart.XYChart.Data;
    import javafx.scene.chart.XYChart.Series;
    import javafx.scene.layout.StackPane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage stage) {
    
            // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس
            // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي
            CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList(
                Arrays.asList("Speed", "Safety", "Milage", "User Rating")));
    
            // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
            NumberAxis yAxis = new NumberAxis(0, 12, 2);
    
            // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس
            // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
            BarChart barChart = new BarChart(xAxis, yAxis);
            
            // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن
            barChart.setTitle("Cars Comparison Result");
            
    		// هنا قمنا بإضافة مسافة فارغة بمقدار 60 بيكسل بين كل مجموعة أعمدة سيتم عرضها في الجدول حتى لا يظهروا بشكل عريض و متلاصق
            barChart.setCategoryGap(60);
            
            // barChart يمثل كل خصائص السيارة الأولى التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
    		// و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأحمر ,"Audi" ملاحظة: السيارة الأولى قمنا بتسميتها
            Series audiSeries = new Series();
            audiSeries.setName("Audi");
            audiSeries.getData().add(new Data("Speed", 8));
            audiSeries.getData().add(new Data("Safety", 5));
            audiSeries.getData().add(new Data("Milage", 7));
            audiSeries.getData().add(new Data("User Rating", 6));
            
            // barChart يمثل كل خصائص السيارة الثاني التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
    		// و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون البرتقالي ,"Fiat" ملاحظة: السيارة الثانية قمنا بتسميتها
            Series fiatSeries = new Series();
            fiatSeries.setName("Fiat");
            fiatSeries.getData().add(new Data("Speed", 6));
            fiatSeries.getData().add(new Data("Safety", 8));
            fiatSeries.getData().add(new Data("Milage", 8));
            fiatSeries.getData().add(new Data("User Rating", 5));
            
            // barChart يمثل كل خصائص السيارة الثالثة التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
    		// و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأخضر ,"Mercedes" ملاحظة: السيارة الثالثة قمنا بتسميتها
            Series mercedesSeries = new Series();
            mercedesSeries.setName("Mercedes");
            mercedesSeries.getData().add(new Data("Speed", 9));
            mercedesSeries.getData().add(new Data("Safety", 8));
            mercedesSeries.getData().add(new Data("Milage", 6));
            mercedesSeries.getData().add(new Data("User Rating", 8));
    
            // الذي يمثل الرسم البياني barChart حتى يظهروا على الكائن mercedesSeries و fiatSeries ,audiSeries هنا قمنا بإضافة الكائنات
            barChart.getData().addAll(audiSeries, fiatSeries, mercedesSeries);
    
            // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
            StackPane root = new StackPane();
            
            // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
            root.setPadding(new Insets(10));
    
            // root في الكائن barChart هنا قمنا بإضافة الكائن
            root.getChildren().addAll(barChart);
    
            // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
            Scene scene = new Scene(root, 600, 340);
    
            // هنا وضعنا عنوان للنافذة
            stage.setTitle("JavaFX BarChart");
    
            // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
            stage.setScene(scene);
    
            // هنا قمنا بإظهار النافذة
            stage.show();
    
        }
    
        // هنا قمنا بتشغيل التطبيق
        public static void main(String[] args) {
            launch(args);
        }
    
    }
    		

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

    إظهار أكثر من Series في كائن الـ BarChart في JavaFX


    المثال التالي يعلمك طريقة تحديد مكان ظهور حاوية دليل الألوان.
    فعلياً, قمنا باستخدام الدالة setLegendSide() و تمرير الثابت Side.RIGHT لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليمين.

    المثال الثالث

    Main.java
    import java.util.Arrays;
    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.geometry.Insets;
    import javafx.geometry.Side;
    import javafx.scene.Scene;
    import javafx.scene.chart.BarChart;
    import javafx.scene.chart.CategoryAxis;
    import javafx.scene.chart.NumberAxis;
    import javafx.scene.chart.XYChart.Data;
    import javafx.scene.chart.XYChart.Series;
    import javafx.scene.layout.StackPane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage stage) {
    
            // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس
            // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي
            CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList(
                Arrays.asList("Speed", "Safety", "Milage", "User Rating")));
    
            // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
            NumberAxis yAxis = new NumberAxis(0, 12, 2);
    
            // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس
            // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
            BarChart barChart = new BarChart(xAxis, yAxis);
            
            // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن
            barChart.setTitle("Cars Comparison Result");
            
    		// هنا قمنا بإضافة مسافة فارغة بمقدار 40 بيكسل بين كل مجموعة أعمدة سيتم عرضها في الجدول حتى لا يظهروا بشكل عريض و متلاصق
            barChart.setCategoryGap(40);
    		
    		// هنا جعلنا حاوية دليل الألوان تظهر يمين الرسم البياني
            barChart.setLegendSide(Side.RIGHT);
            
            // barChart يمثل كل خصائص السيارة الأولى التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
    		// و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأحمر ,"Audi" ملاحظة: السيارة الأولى قمنا بتسميتها
            Series audiSeries = new Series();
            audiSeries.setName("Audi");
            audiSeries.getData().add(new Data("Speed", 8));
            audiSeries.getData().add(new Data("Safety", 5));
            audiSeries.getData().add(new Data("Milage", 7));
            audiSeries.getData().add(new Data("User Rating", 6));
            
            // barChart يمثل كل خصائص السيارة الثاني التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
    		// و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون البرتقالي ,"Fiat" ملاحظة: السيارة الثانية قمنا بتسميتها
            Series fiatSeries = new Series();
            fiatSeries.setName("Fiat");
            fiatSeries.getData().add(new Data("Speed", 6));
            fiatSeries.getData().add(new Data("Safety", 8));
            fiatSeries.getData().add(new Data("Milage", 8));
            fiatSeries.getData().add(new Data("User Rating", 5));
            
            // barChart يمثل كل خصائص السيارة الثالثة التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
    		// و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأخضر ,"Mercedes" ملاحظة: السيارة الثالثة قمنا بتسميتها
            Series mercedesSeries = new Series();
            mercedesSeries.setName("Mercedes");
            mercedesSeries.getData().add(new Data("Speed", 9));
            mercedesSeries.getData().add(new Data("Safety", 8));
            mercedesSeries.getData().add(new Data("Milage", 6));
            mercedesSeries.getData().add(new Data("User Rating", 8));
    
            // الذي يمثل الرسم البياني barChart حتى يظهروا على الكائن mercedesSeries و fiatSeries ,audiSeries هنا قمنا بإضافة الكائنات
            barChart.getData().addAll(audiSeries, fiatSeries, mercedesSeries);
    
            // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
            StackPane root = new StackPane();
            
            // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
            root.setPadding(new Insets(10));
    
            // root في الكائن barChart هنا قمنا بإضافة الكائن
            root.getChildren().addAll(barChart);
    
            // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
            Scene scene = new Scene(root, 600, 340);
    
            // هنا وضعنا عنوان للنافذة
            stage.setTitle("JavaFX BarChart");
    
            // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
            stage.setScene(scene);
    
            // هنا قمنا بإظهار النافذة
            stage.show();
    
        }
    
        // هنا قمنا بتشغيل التطبيق
        public static void main(String[] args) {
            launch(args);
        }
    
    }
    		

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

    وضع حاوية دليل ألوان كائن الـ BarChart ناحية اليمين في JavaFX
    إعلان

    Eqla3Tech.com

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

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

    الدورات

    أدوات مساعدة

    الأقسام

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