الوقت/التاريخ الآن هو الثلاثاء مارس 19, 2024 10:52 am

6 نتيجة بحث عن javafx

[Swing] إضافة محتوى JavaFX إلى تطبيق Swing

فى هذا المقال سأقوم بشرح كيفية إضافة محتوى أو عناصر التحكم #JavaFX إلى تطبيق #Swing وكيفية استخدام مؤشرات الترابط بشكل صحيح عندما يعمل كل من Swing و JavaFX داخل تطبيق واحد.

حيث توفر JavaFX SDK الفئة #JFXPanel ، الموجودة في حزمة javafx.embed.swing وتمكنك من تضمين محتوى JavaFX في تطبيقات Swing.

لغرض هذا المقال ، تقوم بإنشاء نافذة رسومية JFrame ، وإضافة كائن 3JFXPanel إليه ، وتعيين المشهد الرسومي لمكون #JFXPanel الذي يحتوي على محتوى #JavaFX....وذلك على النحو التالى :


1_انشاء Scene هو المنطقة المخصصة في النافذة لوضع المحتوى عليه للجافا اف اكس

الكود:
 private static Scene createScene() {
        Group  root  =  new  Group();
        Scene  scene  =  new  Scene(root,600,300, Color.ALICEBLUE);
        Text  text  =  new  Text();
        
        text.setX(40);
        text.setY(100);
        text.setFont(new Font(25));
        text.setText("Welcome JavaFX!");

        root.getChildren().add(text);

        return (scene);
    }



2_انشاء الحاوية #JFXPanel ومن ثم اضافة #Scene الية على النحو التالى :

الكود:
 private static void initFX(JFXPanel fxPanel) {
            
             Scene scene = createScene();
             fxPanel.setScene(scene);
         }



3_كما هو الحال في أي تطبيق #Swing ، يمكنك إنشاء واجهة المستخدم الرسومية (GUI) ....لذلك سنقوم بانشاء الطريقة initAndShowGUI ، والتي تقوم بإنشاء مكون JFrame وإضافة كائن JFXPanel إليها. يؤدي إنشاء مثيل لفئة #JFXPanel إلى تشغيل  JavaFX وقت تشغيل بشكلٍ ضمني. بعد إنشاء واجهة المستخدم الرسومية ، قم باستدعاء طريقة initFX لإنشاء مشهد JavaFX على مؤشر ترابط تطبيق JavaFX....وذلك على النحو التالى :

الكود:

private static void initAndShowGUI() {

 JFrame frame = new JFrame("Swing and JavaFX");


 final JFXPanel fxPanel = new JFXPanel();


 frame.add(fxPanel);


 frame.setSize(300, 200);


 frame.setVisible(true);


 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);





 Platform.runLater(new Runnable() {


 @Override


 public void run() {


 initFX(fxPanel);


 }


 });


 }



وهكذا يمكنك تشغيل تطبيقات JAVAFX فى تطبيقات JAVA SWING بشكل ضمنى ....و المثال بالكامل على النحو التالى :

الكود:

import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;

public class Test {

    private static void initAndShowGUI() {
        // This method is invoked on the EDT thread
        JFrame frame = new JFrame("Swing and JavaFX");
        final JFXPanel fxPanel = new JFXPanel();
        frame.add(fxPanel);
        frame.setSize(300, 200);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        Platform.runLater(new Runnable() {
            @Override
            public void run() {
                initFX(fxPanel);
            }
       });
    }

    private static void initFX(JFXPanel fxPanel) {
        // This method is invoked on the JavaFX thread
        Scene scene = createScene();
        fxPanel.setScene(scene);
    }

    private static Scene createScene() {
        Group  root  =  new  Group();
        Scene  scene  =  new  Scene(root, Color.ALICEBLUE);
        Text  text  =  new  Text();
        
        text.setX(40);
        text.setY(100);
        text.setFont(new Font(25));
        text.setText("Welcome JavaFX!");

        root.getChildren().add(text);

        return (scene);
    }
    
    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                initAndShowGUI();
            }
        });
    }
}
من طرف زهراء
في السبت فبراير 09, 2019 11:39 am
 
ابحث في: واجهة المستخدم الرسومية Java Swing
موضوع: [Swing] إضافة محتوى JavaFX إلى تطبيق Swing
المساهمات: 3
مشاهدة: 1116

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة

اهلا بكم

فى مقال سابق تعرفنا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] حتى نتمكن من تصميم تطبيقات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] باستخدام Scene Builder لذلك فى هذا المقال سنبدء بتنفيذ اول تطبيق لك من خلال Scene Builder وهى تصميم الة حاسبة

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-17.21.33-240x300

1_قم بتشغيل برنامج Scene Builder لتفتح لك النافذة التالية واختر منها empty

الوسم javafx على المنتدى منتدى مصر التقني 799495995

2_من خلال السحب و الافلات قم باضافة حاوية من نوع AnchorPane الى النافذة

الوسم javafx على المنتدى منتدى مصر التقني 2812752

3_ نقوم باضافة أربعة حاويات افقية HBox  إلى الحاوية AnchorPane الخاص بنا حتى نتمكن من وضع أزرار أفقيا. للقيام بذلك ، اسحب HBox من حاويات في أعلى يمين Scene Builder....كما بالشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-20.52.13

من الصعب للغاية معرفة مكان وضعك الحاويات الافقية HBOXES لأنها تاخذ نفس اللون مع الحاوية الام AnchorPane. لذلك سنقوم تغيير مؤقت لون الخلفية للحاويات HBox ويتم ذلك من خلال نافذة الخائص من الجانب الايسر حيث يتم تحديد الخاصية Style ومن خلالها نقوم بكتابة شفرة css لتغير لون الخلفية التالية :
الكود:
-fx-background-color:black;


كما فى الشكل التالى :
الوسم javafx على المنتدى منتدى مصر التقني 679187478

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-21.20.25

4_نقوم بعد ذلك بإضافة الأزرار لتحمل ارقام و عمليات الالة الحاسبة إلى HBoxes عن طريق سحب الزر من نافذة الادوات 

الوسم javafx على المنتدى منتدى مصر التقني 2812750

كرر العملية حتى تحصل على جميع الازار المطلوبة كما فى الشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-21.37.56

5_لدينا الآن مجموعة من الأزرار جنبا الى جنب.لكن يمكنك إضافة بعض التباعد بين الأزرار. انقر فوق أحد HBoxes أسفل AnchorPane ثم على الجانب الأيسر من Scene Builder ، قم بتغيير التباعد كما فى الشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-21.45.30

6_الآن دعنا نغير النص والألوان وحجم الخط لأزرارنا. انقر فوق الزر الذي تريد تحريره ، على الجانب الأيسر من Scene Builder ، حدد خصائص وقم بتحرير خصائص الزر كما هو مفضل لك

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-22.15.29

7_ كما يمكنك تنسيق الحاوية الام AnchorPane من خلال تحديها واستخدام شفرات css التالية :

الكود:
-fx-background-color:black;
-fx-background-radius: 25;
-fx-padding: 10;


ليظهر بالشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-22.40.16

كما يمكنك التعديل على حواف  أزرار Zero و Add. من خلال شفرات css ليظهر بحواف منحرفة كما فى الشكل التالى :

الكود:
-fx-background-radius: 0 0 0 25;

الكود:
-fx-background-radius: 0 0 25 0;


ليظهر بالشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-23.30.24

الان قد انتهينا من التصميم من خلال الامر  preview من شريط القوائم يمكنك عرض التصميم ليظهر بالشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Screen-Shot-2015-05-13-at-23.19.46-211x300



الى اللقاء فى مقال قادم لنتعلم سويا كيفية توليد ملف fxml  و استخدامة فى تطبيقات الجافا و برمجة الالة الحاسبة
من طرف أحمد مناع
في الخميس فبراير 07, 2019 8:28 pm
 
ابحث في: تقنية JavaFx
موضوع: [JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 2 _ تطبيقك الاول إنشاء الة حاسبة
المساهمات: 2
مشاهدة: 2271

[JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 1 _ إعداد بيئة العمل

اهلا بكم 

من بداية هذا المقال و لعدة مقالات أخرى سنتحدث كيفية إنشاء تطبيقات باستخدام Scene Builder وقبل أن ابدء أحب اشكر العضوة النشطة بالمنتدى الاستاذة لما تقدمة من مقالات تقنية ,فقد قدمت العديد من مقالات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] التى لا غنى عنها لكل من يريد تعلم تطبيقات تلك المكتبة تلك المقالات كانت تتحدث عن كيفية انشاء عناصر و تطبيقات الجافا إف إكس من كتابة الشفرة و الكود ,لذلك قررت أن أكتب بعض المقالات لانشاء تطبيقات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] لكن بطريقة رسومية توفير الوقت المستهلك فى كتابة الكود و ذلك من خلال Scene Builder 

ما هو Scene Builder

يعتبر Scene Builder أداة تمكنك من تصميم واجهات مستخدم رسومية لتطبيقات#JavaFX بدون بدون أى شفرة أو كود من جانبك .حيث  يمكن للمستخدمين سحب وإفلات مكونات واجهة المستخدم إلى منطقة العمل ، وتعديل خصائصها ، وتطبيق الأنماط ، ويتم تلقائيًا إنشاء ملف FXML  يمكن دمجه مع مشروع [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] من خلال ربط واجهة المستخدم بالتطبيق.

لذلك يتضمن Scene Builder الميزات الرئيسية التالية:

تسمح لك واجهة السحب والإفلات بإنشاء تخطيط واجهة مستخدم بسرعة دون الحاجة إلى كتابة شفرة المصدر.
يمكنك إضافة عناصر تحكم JavaFX UI ودمجها وتحريرها إلى تخطيطك باستخدام مكتبة عناصر واجهة المستخدم ولوحة المحتوى.
التكامل مع أي بيئة تطوير متكاملة جافا أمر سهل لأنه أداة تطوير مستقلة.
يحدث إنشاء كود FXML التلقائي أثناء إنشاء تخطيط واجهة المستخدم وتعديله.
يتم تخزين كود FXML الذي تم إنشاؤه في ملف منفصل 
تتيح لك ميزات التعديل المباشر والمعاينة إمكانية تصور تغييرات تخطيط واجهة المستخدم التي تجريها دون الحاجة إلى الترجمة.
يتيح دعم CSS إدارة مرنة لمظهر وأسلوب واجهة مستخدم التطبيق.

تجهيز بيئة العمل :

لكى تتمكن من إنشاء تطبيقات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] فى بيئة رسومية يجب عليك تحميل Scene Builder ثم بعد التحميل وفك الضغط يكفيك لتنصيبة اتباع معالج الثبيت بالنقر على زر Next

الوسم javafx على المنتدى منتدى مصر التقني JavaFxSceneBuilderInstallation4

بعد إنتهاء عملية التثبيت بنجاح يمكن البدء فى استخدام Scene Builder و ذلك من خلال أما النقر نقرًا مزدوجًا فوق ايقونة Scene Builder الموجودة فى سطح المكتب أو من خلال أن تحدد Start ، ثم All Program ، ثم JavaFX Scene Builder ، وأخيرًا ، JavaFX Scene Builder 1.1...ليظهر لك الشاشة الافتتاحية للبرنامج كما فى الشكل التالى :

الوسم javafx على المنتدى منتدى مصر التقني Main-window

بشكل افتراضي ، تتضمن النافذة الرئيسية لـ Scene Builder الأقسام الظاهرة فى الصورة اعلاه أهمها :

شريط القوائم Menu Bar : الذى يوفر الوصول إلى قائمة الأوامر المتوفرة في JavaFX Scene Builder....

لوحة المحتوى Content Panel : حاوية المشهد لعناصر واجهة المستخدم التي تشكل مخطط FXML الخاص بك. بشكل افتراضي ، يشتمل ملف FXML جديد يتم فتحه في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]# Scene# Builder على حاوية AnchorPane (أعلى).

لوحة المكتبة  Library Panel : تعرض عناصر أو عناصر التحكم للمكتبة JavaFX UI المتاحة و التى قد شرحتها الاخت زهراء فى مقالات سابقة عن كيفية إنشائها بالشفرة . يمكنك تحديد عناصر واجهة المستخدم من هذه اللوحة وإضافتها إلى لوحة المحتوى عن طريق السحب و الافلات


تحياتى لكم
من طرف أحمد مناع
في الأربعاء يناير 30, 2019 9:10 am
 
ابحث في: تقنية JavaFx
موضوع: [JavaFx] تعلم JavaFx باستخدام Scene Builder ..مقال 1 _ إعداد بيئة العمل
المساهمات: 2
مشاهدة: 2134

تعلم JavaFx ..مقال37_ التعامل مع المخططات البيانية JavaFX Charts

أهلا بكم

المخطط البياني هو تمثيل رسومي للبيانات، حيث تمثّل البيانات بواسطة رموز، كالأشرطة في المخطط البياني الشريطي أو الخطوط في المخطط البياني الخطي أو الشرائح في المخطط البياني الدائري. يمكن أن يمثّل المخطط البياني بيانات رقمية من جدول أو بيانات اقترانية أو بعض أنواع التركيبات البيانية النوعية

الوسم javafx على المنتدى منتدى مصر التقني Toyota_sales_ar

فى الـــ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ، يمكننا إنشاء تلك المخططات باستخدام الفئات المتوفرة بواسطة الحزمة javafx.scene.chart.

أنواع المخططات فى الـــ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
الوسم javafx على المنتدى منتدى مصر التقني Charts

يمكن تصنيف الرسوم البيانية إلى الأنواع التالية.


  1. الرسم البياني الدائري: في المخطط الدائري ، يتم استخدام قطاعات الدائرة لتمثيل النسب المختلفة للمعلومات بأكملها. في JavaFX ، يتم استخدام class javafx.scene.chart.PieChart للتعامل مع المخطط الدائري. سنناقش PieChart في وقت لاحق بالتفصيل.
  2. XYChart: في XYChart ، يتم رسم المعلومات على محاور XY (أفقي ورأسي). يمثل المحور X نوعًا واحدًا من القيم بينما يمثل المحور y النوع الآخر للقيمة. يتم إجراء التعيين بين القيم المرسومة على المخططات X و Y لإظهار المعلومات المناسبة. في JavaFX ، يتم استخدام class javafx.scene.chart.XYChart للتعامل مع XYChart...وهي بدورها تستخدم لانشاء الانوع التالية :




  • AreaChart, 

  • BarChart,

  • BubbleChart,

  • LineChart,

  • ScatterChart, 

  • StackedAreaChart,

  • StackedBarChart




أنواع المحاور
الوسم javafx على المنتدى منتدى مصر التقني Defining_axis

يمكن أن يكون المحوران X و Y هو أحد النوعين التاليين.


  • محور النوع أو الفئة: يتم استخدام محور الفئة لتمثيل الفئة المختلفة من المعلومات. يختلف هذا عن محور القيمة بمعنى أن القيم الدقيقة لا تظهر على محور الفئة. في JavaFX ، يمثل الفئة javafx.scene.chart.CategoryAxis محور الفئة. نحتاج فقط إلى إنشاء مثيل لهذا الفصل لإنشاء محور الفئة.
  • محور القيمة أو الرقم: يستخدم محور الرقم لتمثيل نطاق القيم المحدد. في JavaFX ، يمثل الفئة javafx.scene.chart.NumberAxis محور القيمة. نحتاج فقط إلى إنشاء مثيل لهذا الفصل لإنشاء محور العدد.



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

بشكل عام لإنشاء مخطط ، تحتاج إلى الخطوات التالية :


  1. تحديد نوع المخطط البيانى 
  2. تحديد محور الرسم البياني
  3. إعداد وتمرير البيانات إلى الرسم البياني


تعالوا ناخذ امثلة مع الانواع المذكورة اعلاه 

1_المخطط PieChart

بشكل عام ، يُعد المخطط الدائري نوعًا من الرسم البياني حيث يتم استخدام قطاعات الدائرة لتمثيل نسب مختلفة من المعلومات بالكامل. تختلف زاوية قوس القطاع وفقًا لنسبة المعلومات التي يمثلها ذلك القطاع.

في JavaFX ، يتم تمثيل مخطط دائري بفئة تسمى PieChart. تنتمي هذه الفئة إلى الحزمة javafx.scene.chart...وهذا النوع من المخططات له الخصائص التالية :


  • clockwise - قيمية منطقية Boolean ؛اذا كانت قيمتها true، سيتم ترتيب شرائح البيانات في المخططات الدائرية في اتجاه عقارب الساعة بدءا من زاوية البدء من المخطط الدائري.



  • data - هذا يمثل كائن ObservableList ، والذي يحتفظ ببيانات المخطط الدائري.



  • labelLineLength- قيمية integer يمثل طول الخطوط التي تربط التسميات وشرائح المخطط الدائري.



  • labelsVisible - قيمية منطقية Boolean ؛اذا كانت قيمتها true ، سيتم رسم تسميات المخططات الدائرية. بشكل افتراضي ، يتم تعيين هذا المشغل ليكون صحيحًا.



  • startAngle- قيمة من نوع double ، والذي يمثل الزاوية لبدء شريحة دائري الأولى.



لإنشاء مخطط دائري ، قم بإعداد كائن ObservableList الذى يحتوي بيانات المخطط كما هو موضح في كتلة التعليمات البرمجية التالية -

الكود:

//Preparing ObservbleList object 
ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
   new PieChart.Data("Iphone 5S", 13),
   new PieChart.Data("Samsung Grand", 25),
   new PieChart.Data("MOTO G", 10),
   new PieChart.Data("Nokia Lumia", 22));



بعد إعداد الكائن ObservableList ، يتم تمريرها كوسيطة إلى منشئ للفئة PieChart كما يلي:

الكود:
//Creating a Pie chart
PieChart pieChart = new PieChart(pieChartData);


أو ، باستخدام الأسلوب المسمى setData () للفئة المسمى PieChart من الحزمة المسماة javafx.scene.chart.

الكود:
pieChart.setData(pieChartData);


بعد ذلك يتم تعيين عنوان المخطط الدائري باستخدام الأسلوب setTitle  للفئة PieChart.
الكود:

//Setting the title of the Pie chart
pieChart.setTitle("Mobile Sales");


اضبط شرائح التخطيطات في اتجاه عقارب الساعة. يتم ذلك بتمرير القيمة true إلى الأسلوب Clockwise

الكود:
pieChart.setClockwise(true);


تعيين طول سطر التسمية باستخدام أسلوب setLabelLineLength  للفئة PieChart الذي ينتمي إلى الحزمة javafx.scene.chart ، كما يلي

الكود:
pieChart.setLabelLineLength(50);


إظهار سطر التسمية 

الكود:
pieChart.setLabelsVisible(true);


اضبط زاوية البدء في المخطط الدائري باستخدام طريقة setStartAngle  للفئة PieChart

الكود:
pieChart.setStartAngle(180);




المثال كاملا على النحو التالى :

الكود:

import javafx.application.Application;
import javafx.collections.FXCollections;  
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.PieChart;
        
public class PieChartExample extends Application {  
   @Override
   public void start(Stage stage) {
      //Preparing ObservbleList object        
      ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList(
         new PieChart.Data("Iphone 5S", 13),
         new PieChart.Data("Samsung Grand", 25),
         new PieChart.Data("MOTO G", 10),
         new PieChart.Data("Nokia Lumia", 22));
      
      //Creating a Pie chart
      PieChart pieChart = new PieChart(pieChartData);
              
      //Setting the title of the Pie chart
      pieChart.setTitle("Mobile Sales");
      
      //setting the direction to arrange the data
      pieChart.setClockwise(true);
      
      //Setting the length of the label line
      pieChart.setLabelLineLength(50);

      //Setting the labels of the pie chart visible  
      pieChart.setLabelsVisible(true);
      
      //Setting the start angle of the pie chart  
      pieChart.setStartAngle(180);    
        
      //Creating a Group object  
      Group root = new Group(pieChart);
        
      //Creating a scene object
      Scene scene = new Scene(root, 600, 400);  
      
      //Setting title to the Stage
      stage.setTitle("Pie chart");
        
      //Adding scene to the stage
      stage.setScene(scene);
        
      //Displaying the contents of the stage
      stage.show();        
   }    
   public static void main(String args[]){
      launch(args);
   }
}
Compile and execute the saved java file from the command prompt using the following commands.

javac PieChartExample.java
java PieChartExample


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

الوسم javafx على المنتدى منتدى مصر التقني Pie_chart
من طرف زهراء
في الأربعاء نوفمبر 21, 2018 12:52 pm
 
ابحث في: تقنية JavaFx
موضوع: تعلم JavaFx ..مقال37_ التعامل مع المخططات البيانية JavaFX Charts
المساهمات: 0
مشاهدة: 1296

تعلم JavaFx ..مقال36_ التعامل مع الميديا Media with JavaFX

ثانيا : التعامل مع الفئات Media و MediaPlayer و MediaView 

كما رأينا فى الجزء الاول من المقال أن الفئة audioClip تستخدم لتشغيل مقطع صوت قصير عادةً ما يكون ذلك مفيدًا للتأثيرات الصوتية ...لذلك وفرت الـــ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] الفئات التالية للتعامل مع ملفات الميديا كبيرة الحجم سواء كانت صوت أو فيديوا وهى :
Media
MediaPlayer
MediaView

ويعتبر تشغيل ملفات الميديا بهذه الفئات في JavaFX أمرًا بسيطًا للغاية  ،فمثلا نحن بحاجة إلى إنشاء فئة javafx.scene.media.Media بتمرير مسار الملف الصوتي في منشئه لتشغيل الملفات الصوتية... كما فى الخطوات البسيطة التالية :

1_إنشاء كائن جديد من الفئة Media ثم تمرير موقع أو عنوان الملف الصوتي في منشئه على النحو التالى :
الكود:
Media media = new Media("http://path/file_name.mp3");  


2_إنشاء كائن جديد من الفئة Mediaplayer ثم تمرير كائن Media في منشئه على النحو التالى :
الكود:
Mediaplayer Player = new MediaPlayer(media);  


3_استدعاء الأسلوب play () للكائن MediaPlayer لتشغيل الملف الصوتي :
الكود:
Player.setAutoPlay(true);


وهكذا ابسط مثال لتشغيل ملف صوتي فى الـــ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]....تعالوا الان نتطرق لتلك الكائنات بشيء من التفصيل :


1_كائن Media 


كما فى المثال اعلاه فان الفئة Media تمثل مصدر الوسائط ، الذى قد يكون صوتًا أو فيديو. وتوفر ايضا المعلومات المتعلقة بالوسائط ، على سبيل المثال ، المدة والبيانات الوصفية وما إلى ذلك.

إذا كانت الوسائط عبارة عن فيديو ، فإنها توفر عرض الفيديو وارتفاعه... يتم إنشاؤه من خلال توفير سلسلة تحتوي على مسار مصدر الوسائط ، كما راينا فى المثال اعلاه أو كما في التعليمة البرمجية التالية:

الكود:
URL mediaUrl = getClass().getResource("Test.mp4");
String mediaStringUrl = mediaUrl.toExternalForm();

// Create a Media
Media media = new Media(mediaStringUrl);


تحتوي فئة الوسائط على الخصائص التالية ، وهي للقراءة فقط:


  • duration :تحدد مدة الوسائط بالثواني. إنه كائن المدة. إذا كانت المدة غير معروفة ، فسيكون Duration.UNKNOWN.

  • width & height :يعطي العرض والطول للمصدر بالبكسل ، على التوالي. إذا لم يكن للوسائط العرض والارتفاع ، يتم تعيينها على أنها صفر.


2_كائن MediaPlayer 


يوفر MediaPlayer عناصر التحكم ، على سبيل المثال ، تشغيل ، إيقاف مؤقت ، إيقاف ، طلب ، سرعة التشغيل ، ضبط مستوى الصوت ، و لتشغيل الوسائط. يوفر MediaPlayer مُنشئًا واحدًا فقط يأخذ كائن Media كوسيطة كما راينا فى المثال السابق أو على النحو التالى :

الكود:
final MediaPlayer player = new MediaPlayer(media);



3_ الكائن MediaView 



الكائن MediaView يعتبر شاشة أو صندوق محتوي لعرض الوسائط التى يتم تشغيلها بواسطة الكائن MediaPlayer. لاحظ أن مقطع صوتي لا يحتوي على عناصر مرئية. لذلك إذا حاولت إنشاء MediaView لمحتوى صوتي ، فسيكون فارغًا. أما وسائط الفيديو ، يمكنك إنشاء MediaView وإضافته إلى النافذة.

توفر فئة MediaView منشأتين:

المنشىء الاول أن يتم انشاء كائن جديد من الفئة MediaView ثم تمرير الكائن  MediaPlayer باستخدام طريقة تعين الخصائص على النحو التالى :
الكود:
// Create a 400X300 MediaView
MediaView mediaView = new MediaView();
mediaView.setMediaPlayer(player);
mediaView.setFitWidth(400);
mediaView.setFitHeight(300);



المنشىء الثاني أن يتم انشاء كائن جديد من الفئة MediaView ثم تمرير الكائن  MediaPlayer مباشرة كوسيطة على النحو التالى :

الكود:
// Create a 400X300 MediaView
MediaView mediaView = new MediaView(player);
mediaView.setFitWidth(400);
mediaView.setFitHeight(300);



كما تلاحظ فى المثال اعلاه تحدد خصائص fitWidth و fitHeight العرض والارتفاع المحددين للفيديو ، على التوالي. بشكل افتراضي ، فهي صفر ، مما يعني أنه سيتم استخدام العرض والارتفاع الأصلي للوسائط.

وهناك خواص اخرى مثل :

الخاصية preserveRatio التى ما إذا كان سيتم الحفاظ على نسبة العرض إلى الارتفاع للوسائط أثناء تغيير الحجم أم لا ...بشكل افتراضي تاخذ القيمة false.

الخاصية smooth التى تحدد جودة خوارزمية التصفية لاستخدامها في تغيير حجم الفيديو. القيمة الافتراضية هي النظام الأساسي المعتمد. إذا تم تعيينه على "true" ، يتم استخدام خوارزمية تصفية أفضل جودة.

الخاصية viewport التى تحدد إطار العرض وهو عبارة عن منطقة مستطيلة لعرض جزء من الرسم. تسمح لك خصائص إطار العرض x و y معا بتحديد المنطقة المستطيلة في الفيديو التي سيتم عرضها في MediaView.

تحديد الحالة لعمليات MediaPlayer


 كائن الـــ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] لديه عدة حالات يتم تحديدها بواسطة الخاصية status وهي خاصية للقراءة فقط. تتغير الحالة عند تنفيذ إجراء على MediaPlayer. و تاخذ أحد الثوابت الثمانية الموجودة في MediaPlayer.Status وهي على النحو التالى:

UNKNOWN
READY
PLAYING
PAUSED
STALLED
STOPPED
HALTED
DISPOSE

عندما يتم إنشاء MediaPlayer ، تكون حالته UNKNOWN وعندما يتم تحديد المصدر ينتقل حالتة MediaPlayer من READY إلى READY...و ينتقل MediaPlayer إلى حالة PLAYING عندما يتم استدعاء طريقة play و عندما يتم تشغيل MediaPlayer ، قد يدخل إلى الحالة STALLED إذا لم يكن لديه بيانات كافية في المخزن المؤقت الخاص به للتشغيل. حيث تشير هذه الحالة إلى أن MediaPlayer يقوم بتخزين البيانات مؤقتًا. عند تخزين البيانات الكافية ، يتم الرجوع إلى حالة PLAYING....الى غير ذلك من الحالات

ويمكنك تحديد تلك الحالات بطريقتان :

عن طريق إضافة ChangeListener إلى خاصية Status
عن طريق تحديد معالجات تغيير الحالة

الطريقة الأولى يمكنك استخدامها باستخدام الشفرة التالية :
الكود:
// Add a ChangeListener to the player
player.statusProperty().addListener(new ChangeListener<MediaPlayer.Status>()
{
   // Log the Message
    public void changed(ObservableValue<? extends MediaPlayer.Status> ov,
       final MediaPlayer.Status oldStatus, final MediaPlayer.Status newStatus)
    {
   messageArea.appendText("\nStatus changed from " + oldStatus + " to " + newStatus);
    }
});


الطريقة الثانية مناسبة إذا كنت مهتمًا بالتعامل مع نوع محدد من تغيير الحالة. حيث تحتوي فئة MediaPlayer على الخصائص التالية التي يمكن ضبطها على كائنات Runnable:

onReady
onPlaying
onRepeat
onStalled
onPaused
onStopped
onHalted


على سبيل المثال ، يتم استدعاء الأسلوب run () الخاص بـ onPlaying handler عندما يكون MediaPlayer في حالة PLAYING.

توضح الشفرة التالية كيفية تعيين معالجات لنوع محدد من تغيير الحالة:

الكود:
// Add a Handler for PLAYING status
player.setOnPlaying(new Runnable()
{
   public void run()
   {
      messageArea.appendText("\nPlaying now");
   }
});

// Add a Handler for STOPPED status
player.setOnStopped(new Runnable()
{
   public void run()
   {
   messageArea.appendText("\nStopped now");
   }
});

من طرف زهراء
في الثلاثاء نوفمبر 20, 2018 3:18 pm
 
ابحث في: تقنية JavaFx
موضوع: تعلم JavaFx ..مقال36_ التعامل مع الميديا Media with JavaFX
المساهمات: 5
مشاهدة: 1017

تعلم JavaFx ..مقال36_ التعامل مع الميديا Media with JavaFX

أهلا بكم

توفر الـــ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] واجهة برمجة التطبيقات JavaFX Media API التي تمكن المستخدمين من دمج و تشغيل ملفات الصوت والفيديو في التطبيقات ويدعم أيضا تدفق HTTP المباشر لملفات الوسائط الثابتة والخلاصات المباشرة.

يتم دعم عدد من تنسيقات الوسائط ، بما في ذلك AAC و AIFF و WAV و MP3. كما يتم دعم FLV التي تحتوي على VP6 video و MP3 audio و الوسائط المتعددة MPEG-4 مع تنسيقات الفيديو H.264 / AVC.

يعتمد دعم تنسيق وسائط معين على النظام الأساسي للتطبيق فبعض ميزات تشغيل الوسائط وتنسيقاتها لا تتطلب أي عمليات تركيب إضافية ؛ والبعض الاخر تتطلب برنامج طرف ثالث ليتم تثبيتها.

في هذا المقال التعليمي ، سنناقش قدرة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] على التعامل مع ملفات الوسائط بطريقة تفاعلية. حيث إنها توفر الحزمة javafx.scene.media التي تحتوي على جميع الفئات الضرورية للتعامل مع الميديا وهي على النحو التالى :

javafx.scene.media.AudioClip
javafx.scene.media.Media
javafx.scene.media.MediaPlayer
javafx.scene.media.MediaStatus
javafx.scene.media.MediaView
اولا : التعامل مع الفئة AudioClip 

يتم استخدام الفئة audioClip لتشغيل مقطع صوت قصير مع الحد الأدنى من زمن الوصول. عادةً ما يكون ذلك مفيدًا للتأثيرات الصوتية ، وهي عادةً مقاطع صوتية قصيرة...ويتم تشغيل تلك المفات باستخدام الشفرة التالية :

1_إستيراد الفئة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] التى تستخدم لتشغيل مقاطع الصوت القصيرة 

الكود:
javafx.scene.media.AudioClip


2_انشاء وتحديد مسار الملف الصوتي 

الكود:
final URL resource = getClass().getResource("resources/beep.wav");


3_بإنشاء فئة جديدة من الفئة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ليمثل كائن تشغيل الملف الصوتي ثم تمرير مسار الملف الية :
الكود:
final AudioClip clip = new AudioClip(resource.toString());


كما رايتك فى الشفرة اعلاه توفر فئة AudioClip مُنشئًا واحدًا فقط يأخذ عنوان URL في نموذج السلسلة ، وهو عنوان URL لمصدر الصوت. يتم تحميل مقطع الصوت على الفور في الذاكرة في شكل خام غير مضغوط. هذا هو السبب وراء عدم استخدام هذه الفئة لمقاطع الصوت الطويلة.

يمكن أن يستخدم عنوان URL المصدر بروتوكولات HTTP و file و JAR. هذا يعني أنه يمكنك تشغيل مقطع صوتي من الإنترنت أونظام الملفات المحلي أوملف JAR.

و المثال الكامل على النحو التالى :

الكود:

import java.net.URL;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.media.AudioClip;
import javafx.stage.Stage;

/**
 * @author Dean Iverson
 */
public class Main extends Application {

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

  @Override
  public void start(Stage primaryStage) {
    final URL resource = getClass().getResource("resources/beep.wav");
    final AudioClip clip = new AudioClip(resource.toString());

    final Button button = new Button("Bing Zzzzt!");
    button.setOnAction(new EventHandler<ActionEvent>() {

      @Override
      public void handle(ActionEvent event) {
        clip.play(1.0);
      }
    });

    final StackPane stackPane = new StackPane();
    stackPane.setPadding(new Insets(10));
    stackPane.getChildren().add(button);

    final Scene scene = new Scene(stackPane, 200, 200);
    final URL stylesheet = getClass().getResource("media.css");
    scene.getStylesheets().add(stylesheet.toString());

    primaryStage.setTitle("Basic AudioClip Example");
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}


مثال اخر تشغيل مقطع صوتي من خلال الشبكة على النحو التالى :

الكود:

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.media.AudioClip;
import javafx.stage.Stage;

public class Main extends Application {
    public static void main(String[] args) {
        Application.launch(args);
    }
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Text Fonts");

        Group g = new Group();
        Scene scene = new Scene(g, 550, 250);

        AudioClip plonkSound = new AudioClip("http://somehost/p.aiff");
        plonkSound.play();
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}


التعامل مع الطريقة play()


الطريقة play هى المسؤلة عن تشغيل الملف الصوتي ولها ثلاث مشيدات على النحو التالى :

الكود:
void play()

يستخدم المشيد اعلاه بتشغيل AudioClip باستخدام جميع المعلمات الافتراضية.

الكود:
void play(double volume)

قم بتشغيل AudioClip باستخدام جميع المعلمات الافتراضية باستثناء حجم الصوت الذى سيتم تحديدة من خلال هذا المعلمة volume

الكود:
void play(double volume, double balance, double rate, double pan,int priority)

قم بتشغيل AudioClip باستخدام المعلمات المحددة. يتم تثبيت القيم خارج النطاقات كما هو محدد بواسطة الخصائص المرتبطة بها.

المعلمات:

  • volume - مستوى الصوت للمقطع التى يعمل حاليا. نطاق الحجم الصالح هو 0.0 إلى 1.0 ، بمعني انه ليتم كتم الصوت نستخدم القيمة 0.0 أو نستخدم القيمة 1.0 الحجم الكامل...وهكذا يتم التحكم بحجم الصوت



  • balance - توازن يسار / يمين أو أحجام قنوات نسبية لتأثيرات الستيريو...النطاق الصالح هو -1.0 إلى 1.0. تعيّن القيمة -1.0 التشغيل في القناة اليمنى عند مستوى الصوت العادي وتقوم بكتم القناة اليمنى. تعيّن القيمة 1.0 التشغيل في القناة اليمنى عند مستوى الصوت العادي ويتم تجاهل القناة اليسرى. القيمة الافتراضية هي 0.0 ، والتي تحدد التشغيل في كلتا القناتين في وحدة التخزين العادية.



  • rate - تحدد السرعة السرعة النسبية التي يتم تشغيل الصوت بها. النطاق الصالح هو 0.125 إلى 8.0. تعني القيمة 0.125 أن المقطع يتم تشغيله أبطأ ثماني مرات ، وقيمة 8.0 تعني أن المطقع يتم تشغيلة أسرع ثماني مرات.  المعدل الافتراضي هو 1.0 ، والذي يلعب المقطع بالمعدل الطبيعي



  • pan - تحدد توزيع المقطع بين القناتين اليمنى واليسرى. النطاق الصالح هو -1.0 إلى 1.0. تقوم قيمة -1.0 بنقل المقطع كليًا إلى القناة اليسرى. تقوم قيمة 1.0 بنقل المقطع كليًا إلى القناة اليمنى. القيمة الافتراضية هي 0.0 ، والتي تقوم بتشغيل المقطع بشكل طبيعي. إن ضبط قيمة pan لمقطع أحادي له نفس تأثير إعداد القيمة balance لمقاطع الصوت باستخدام صوت ستيريو.



  • priority - أولوية تأثير الصوت. سيتم إسقاط التأثيرات ذات الأولوية الأقل أولاً في حالة محاولة العديد من التأثيرات في وقت واحد.


خصائص التشغيل :

تدعم فئة AudioClip ضبط بعض خصائص الصوت عند تشغيل المقطع الصوتي وهي على النحو التالى :

الخاصية cycleCount : تلك الخاصية تحدد عدد مرات تشغيل الملف عندما يتم استدعاء طريقة play() ..القيمة الافتراضية هي 1 معني ذلك ان يتم تشغيل الملف لمرة واحدة فقط ...ويتم استخدام تلك الخاصية على النحو التالى :

الكود:


        AudioClip egyplay = new AudioClip("http://somehost/p.aiff");
        egyplay.play();
         egyplay.setCycleCount(int count)
        


حيث count عدد مرات التشغيل التى تريد تنفيذها
من طرف زهراء
في الثلاثاء نوفمبر 20, 2018 12:01 pm
 
ابحث في: تقنية JavaFx
موضوع: تعلم JavaFx ..مقال36_ التعامل مع الميديا Media with JavaFX
المساهمات: 5
مشاهدة: 1017

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

انتقل الى: