ساخت یک برنامه ساده JavaFX

در این قسمت می‌خواهیم به صورت جزئی‌تر در مورد ساختار برنامه در JavaFX بحث کنیم و همچنین با یک مثال یاد بگیرید چگونه یک برنامه JavaFX را ایجاد کنید. به صورت کلی همانطور که در شکل زیر هم مشاهده می‌کنید یک برنامه JavaFX از سه مؤلفه اصلی Stage ،Scene و Node ها تشکیل شده است :

create-javafx-application-02

Stage

یک Stage (پنجره) شامل همه اشیاء برنامه JavaFX می‌باشد که به وسیله کلاس Stage در پکیج نمایش داده می‌شود. Stage اولیه به وسیله خود پلتفرم ایجاد می‌شود. شیء Stage ایجاد شده به عنوان آرگومان به متد ()Start در کلاس Application (که در بخش بعدی به توضیح آن می‌پردازیم) پاس داده می‌شود. یک Stage دو پارامتر با نام‌های Width و Height قبول می‌کند که مکان (Position) آن را مشخص می‌کند که یک Stage به دو قسمت Content Area یا همان Titlebar و Decoration یا Border ها تقسیم می‌شود. پنج نوع Stage وجود دارد که عبارتند از :

  • Decorated
  • Undecorated
  • Transparent
  • Unified
  • Utility

شما برای نمایش محتوای یک Stage باید متد ()Show را فراخوانی کنید.

Scene

یک Scene محتوای فیزیکی برنامه JavaFX را نمایش می‌دهد، که شامل همه محتوای نمودار Scene می‌باشد. کلاس Scene که در پکیج javafx.scene قرار دارد وظیفه نمایش شیء Scene را بر عهده دارد. در یک نمونه، شیء Scene فقط به یک Stage اضافه می‌شود. شما می‌توانید یک Scene را با ساخت یک نمونه از کلاس Scene ایجاد کنید. همچنین می‌توانید سایز Scene را با ارسال پارامترهای Width و Height متد سازنده گره Root تعیین کنید.

Scene Gragh

یک نمودار Scene یک ساختار داده شبیه به درخت (سلسله مراتبی) می‌باشد که محتوای Scene را نشان می‌دهد. اما یک گره یک شیء گرافیکی/تصویری از نمودار Scene را نمایش می‌دهد. یک گره می‌تواند شامل :

  • اشیا Geometrical یا گرافیکی دو بعدی و سه بعدی مانند دایره، مستطیل، چند ضلعی و … باشد.
  • کنترل‌های واسط کاربری (UI) شامل Button ،Checkbox ،Choice box ،Text Area و … باشد
  • Container ها شامل Border Pane ،Grid Pane ،Flow Pan و … باشد
  • عناصر چند رسانه‌ای مانند اشیاء صوتی و ویدئویی و تصویری باشد.

کلاس Node (گره) در پکیج javafx.scene قرار دارد که یک گره را در JavaFX نمایش می‌دهد. این کلاس یک سوپر کلاس همه گره‌ها می‌باشد. به طور کلی ما سه نوع گره داریم که عباراتند از :

گره ریشه (Root Node) اولین نمودار Scene گره ریشه نامیده می‌شود
گره شاخه یا والد (Branch Node/Parent Node) گره‌ای که دارای فرزند باشد گره شاخه یا والد نامیده می‌شود. یک کلاس abstract به نام Parent در پکیج javafx.scene وجود دارد که پدر تمام گره‌های والد است و گره‌های والد خود به سه دسته تقسیم می‌شوند :

  • Group : یک Group Node به مجموعه‌ای از گره‌ها گفته می‌شود که، شامل لیستی از گره‌های فرزند می‌باشند. هر زمان که Group Node نمایش داده شود تمام گره‌های فرزند نیز به ترتیب نمایش داده می‌شوند. همه تبدیل‌ها و افکت‌هایی که به Group node اعمال می‌شوند به گره‌های فرزند نیز اعمال خواهند شد.
  • Region : یک کلاس پایه است برای تمام کنترل‌های JavaFX که بر مبنای گره می‌باشند مانند Chart ،Pane و Control
  • WebView : این گره موتور وب و نمایش محتوای آن را مدیریت می‌کند.
گره‌های برگ (Leaf Node) اینگونه گره‌ها فرزندی ندارند و گره‌های برگ نامیده می‌شوند. برای مثال Rectangle ،Ellipse ،Box ،ImageView ،MediaView نمونه‌هایی از گره‌های فرزند می‌باشند.

ارسال گره ریشه (root) به نمودار Scene ضروری است. برای ساخت یک برنامه JavaFX شما نیاز دارید تا یک نمونه از کلاس Application ایجاد کنید و متد abstract یا انتزاعی ()Start را پیاده سازی کنید. در این متد ما کدهای برنامه JavaFX را خواهیم نوشت. کلاس Application که در پکیج javafx.application قرار دارد یک نقطه شروعی برای برنامه در JavaFX محسوب می‌شود. برای ساخت یک برنامه JavaFX شما نیاز دارید تا از این کلاس ارث بری کنید و متد انتزاعی ()Start آن را پیاده سازی کنید. در این متد شما باید تمام کدهای گرافیکی JavaFX را بنویسید. در متد ()main شما باید برنامه را با استفاده از متد ()launch اجرا کنید. این متد در داخل خود متد ()Start کلاس application را فراخوانی می‌کند که در کدهای زیر مشاهده می‌کنید :

public class JavafxSample extends Application
{
    @Override
    public void start(Stage primaryStage) throws Exception
    {
        /* 
        Code for JavaFX application. 
        (Stage, scene, scene graph) 
        */
    }
    public static void main(String args[])
    {
        launch(args);
    } 
}

در متد ()Start به طور معمول ساخت یک برنامه JavaFX شامل سه مرحله زیر می‌باشد :

  1. آماده سازی نمودار Scene با گره‌های مورد نیاز.
  2. آماده سازی یک Scene با ابعاد مورد نیاز و افزودن نمودار Scen (گره ریشه نمودار Scen) به آن.
  3. آماده سازی یک stage و افزودن Scene به stage و نمایش محتوای stage.

آماده سازی Scene Graph

در هر برنامه شما باید یک Scene Graph را با گره‌های مورد نیاز آن آماده کنید. از آنجایی که گره ریشه اولین گره می‌باشد شما باید ابتدا یک گره ریشه را ایجاد کنید. برای ایجاد یک گره ریشه شما باید یکی از انواع آن یعنی Group ،Redion یا WebView را انتخاب کنید.

Group : یک گره Group به وسیله کلاسی به نام Group که در پکیج javafx.scene قرار دارد نمایش داده می‌شود. شما باید مانند زیر یک نمونه از کلاس Group ایجاد کنید :

Group root = new Group();

متد ()getChildren کلاس Group یک شیء از کلاس ObservableList در اختیار شما قرار می‌دهد که گره‌ها را دریافت می‌کند. همانظور که در کدهای زیر مشاهده می‌کنید ما می‌توانیم این شیء را دریافت کنیم و گره‌ها را به آن اضافه کنیم :

//Retrieving the observable list object 
ObservableList list = root.getChildren(); 
       
//Setting the text object as a node  
list.add(NodeObject);

همچنین ما می‌توانیم با ارسال اشیاء node ها به متد سازنده کلاس Group زمانی که از آن یک نمونه تعریف می‌کنیم، گره‌ها را به آن اضافه کنیم :

Group root = new Group(NodeObject);

Region : کلاس پدر برای تمام کنترل‌های JavaFX است که بر مبنای گره می‌باشند. این کنترل‌ها عبارتند از :

  • Chart : کلاس پدر برای تمام نمودار (Chart) ها می‌باشد که در پکیج javafx.scene.chart قرار دارد. این کلاس شامل دو زیر کلاس دیگر به نام PieChart و XYChart می‌باشد که این دو کلاس نیز دارای زیر کلاس‌های مختلفی از جمله AreaChart ،BarChart ،BubbleChart و … می‌باشند که برای رسم انواع نمودار در JavaFX مورد استفاده قرار می‌گیرند.
  • Pane : کلاس پدر برای تمام Layout Pane ها از مانند AnchorPane ،BorderPane ،DialogPane و … می‌باشد. این کاس در پکیج javafx.scene.layout قرار دارد. با استفاده از این کلاس شما می‌توانید Layout ها از قبل تعریف شده را به برنامه خود اضافه کنید.
  • Control : کلاس پدربرای همه کنترل‌های واسط کاربری مانند Accordion ،ButtonBar ،ChoiceBox ،ComboBoxBase ،HTMLEditor و … می‌باشد که در پکیج javafx.scene.control قرار دارد.

شما با استفاده از این کلاس‌ها می‌توانید عناصر UI مختلفی را به برنامه خود اضافه کنید. در یک Group شما می‌توانید یک نمونه (شیء) از کلاس‌های بالا ایجاد کنید و آن‌ها را به عنوان گره ریشه مورد استفاده قرار دهید. مانند کد زیر :

//Creating a Stack Pane 
StackPane pane = new StackPane();       
       
//Adding text area to the pane  
ObservableList list = pane.getChildren(); 
list.add(NodeObject);

WebView : این گره موتور وب را مدیریت می‌کند و محتوای آن را به نمایش می‌گذارد. دیاگرام زیر سلسله مراتب کلاس‌های node را در JavaFX نشان می‌دهد :
webview

آماده سازی Scene

یک JavaFX Scene به وسیله کلاس Scene که در پکیج javafx.scene قرار دارد نشان داده می‌شود. همانطور که در کد زیر مشاهده می‌کنید، شما می‌توانید یک نمونه از کلاس Scene ایجاد کنید و باید شیء root را به متد سازنده آن ارسال کنید:

Scene scene = new Scene(root);

شما همچنین می‌توانید دو پارامتر از نوع double را برای نمایش عرض و ارتفاع Scene به آن ارسال کنید:

Scene scene = new Scene(root, 600, 300);

آماده سازی Stage

Stage یک ظرف (container) برای همه برنامه‌های JavaFX می‌باشد که یک پنجره را برای برنامه ارائه می‌دهد که به وسیله کلاس Stage که در پکیج javafx.stage قرار دارد نمایش داده می‌شود. یک شیء از این کلاس به عنوان پارامتر به متد ()Start کلاس Application ارسال می‌شود. با استفاده از این شیء شما می‌توانید عملیات مختلفی را بر روی Stage انجام دهید. عملیاتی که شما در درجه اول می‌توانید انجام دهید عبارتند از :

  • با استفاده از متد ()setTitle می‌توانید یک عنوان یا Title را برای Stage در نظر بگیرید.
  • با استفاده از متد ()setScene می‌توانید شیء scene را به stage اضافه کنید
  • با استفاده از متد ()show می‌توانید محتوای scene را نمایش دهید.
//Setting the title to Stage. 
primaryStage.setTitle("Sample application"); 
       
//Setting the scene to Stage 
primaryStage.setScene(scene); 
       
//Displaying the stage 
primaryStage.show();

چرخه حیات برنامه JavaFX

کلاس Application سه متد چرخه حیات دارد که عبارتند از :

  • ()start : نقطه شروعی برای یک برنامه JavaFX است که کدهای گرافیکی در آن نوشته می‌شود.
  • ()stop : یک متد خالی که می‌تواند Override شود و شما می‌توانید در آن منطقی که برنامه را به پایان می‌رساند را بنویسید.
  • ()init : یک متد خالی که می‌تواند Override شود، اما شما نمی‌توانید یک stage یا یک scene در این متد ایجاد کنید.

علاوه بر این، یک متد static به نام ()launch نیز وجود دارد که برنامه JavaFX را راه اندازی می‌کند. از آنجایی که متد ()launch یک متد static است، شما باید آن را از یک محتوای static (به طور کلی متد ()main) فراخوانی کنید. هر زمان که برنامه JavaFX اجرا می‌شود اعمال زیر به همین ترتیب انجام می‌شوند :

  • یک شیء از کلاس application ایجاد می‌شود.
  • متد ()Init فراخوانی می‌شود.
  • متد ()Start فراخوانی می‌شود.
  • برنامه منتظر می‌ماند تا متد ()stop فراخوانی شود که برنامه را به اتمام برساند.

پایان دادن (Terminat) برنامه JavaFX

زمانی که آخرین پنجره برنامه بسته می‌شود، برنامه JavaFX به صورت ضمنی به پایان می‌رسد. شما می‌توانید این رفتار را با ارسال مقدار بولین false به متد استاتیک ()setImplicitExit تغییر دهید. شما همچنین می‌توانید یک برنامه JavaFX را به صورت صریح و با استفاده از متدهای ()Platform.exit یا ()Ststem.exit به پایان برسانید. در این قسمت شما یاد می‌گیرید که چگونه یک برنامه ساده JavaFX را ایجاد کنید که یک پنجره خالی را نمایش دهد. به کد زیر توجه کنید :

   1: import javafx.application.Application;
   2: import javafx.scene.Group;
   3: import javafx.scene.Scene;
   4: import javafx.stage.Stage;
   5: 
   6: public class JavafxSample extends Application
   7: {
   8:     @Override
   9:     public void start(Stage primaryStage) throws Exception
  10:     {
  11:         Group group = new Group();
  12: 
  13:         Scene scene = new Scene(group, 400, 300);
  14: 
  15:         primaryStage.setTitle("Sample Application"); 
  16:    
  17:         primaryStage.setScene(scene); 
  18:        
  19:         primaryStage.show(); 
  20:     }    
  21:     public static void main(String args[])
  22:     {
  23:         launch(args);
  24:     }         
  25: }
  1. ساخت یک کلاس: ابتدا باید یک کلاس جاوا ایجاد کنید که از کلاس application ارث بری کند که در پکیج javafx.application قرار دارد و متد ()start را پیاده سازی می‌کند (خط 6).
  2. ساخت یک شیء از Group : در متد ()start یک شیء از کلاس Group که در پکیج javafx.scene قرار دارد ایجاد کنید (خط 11).
  3. ساخت یک شیء از Scene : یک شیء از کلاس Scene که در پکیج javafx.scene قرار دارد ایجاد کرده و شیء Group (که در اینجا root می‌باشد که در مرحله قبل ایجاد کردید) را به متد سازنده کلاس Scene ارسال کنید. علاوه بر این دو پارامتر double نیز به عنوان عرض و ارتفاع Screen به آن ارسال کنید (خط 13).
  4. تعیین عنوان Stage : شما با استفاده از متد ()setTitle از کلاس Stage می‌توانید یک عنوان (title) را برای Stage تعیین کنید. primaryStage یک شیء از Stage می‌باشد که به عنوان پارامتر به متد ()Start کلاس scene ارسال شده است (خط 15).
  5. اضافه کردن Scene را به Stage : شما با استفاده از متد ()setScene کلاس Stage می‌توانید یک شیء از Scene را به stage خود اضافه کنید. شی primaryStage را در مرحله قبل ایجاد کردیم (خط 17).
  6. نمایش محتوای Stage : با استفاده از متد ()show در کلاس Stage می‌توانید محتوای Scene را نمایش دهید (خط 19).
  7. اجرای برنامه: برنامه را با فرخوانی متد ()launch کلاس Application برنامه را راه اندازی کنید (خط 23).

حال کدهای بالا را در فایلی با نام JavafxSample.java در درایو D ذخیره کنید. سپس CMD را اجرا کرده و کدهای زیر را در داخل آن بنویسید :

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.
C:\Users\YounesCsharp>d:

D:\>javac JavafxSample.java

D:\>java JavafxSample

بعد از نوستن دستورات بالا، برنامه اجرا و پنجره‌ای به صورت زیر نمایش داده می‌شود :
create-javafx-application-01
حال فرض کنید که می‌خواهیم در برنامه بالا یک خط رسم کنیم. برای این منظور ابتدا پکیج زیر را به برنامه اضافه کنید :

import javafx.scene.shape.Line;

سپس به جای خط 11 کد بالا و کدهای زیر را به برنامه اضافه می‌کنیم :

Line line = new Line();
line.setStartX(50.0); 
line.setStartY(150.0); 
line.setEndX(350.0); 
line.setEndY(150.0);

Group group = new Group(line);

همانطور که در کد بالا مشاهده می‌کنید، شما می‌توانید با استفاده از ساخت یک نمونه از کلاس Line در JavaFX که در پکیج javafx.scene.shape.Line قرار دارد، یک خط را ایجاد کنید. با استفاده از خاصیت‌های startX ،startY ،endX و endY نیز می‌توانید مختصات نمایش خط را مشخص کنید :
create-javafx-application-03
فرض کنید که، می‌خواهیم یک متن را در JavaFX نمایش دهیم. برای این منظور از کلاس Text که در پکیج javafx.scene.text.Text قرار دارد استفاده می‌کنیم. به کد زیر توجه کنید :

   1: import javafx.application.Application;
   2: import javafx.scene.Group;
   3: import javafx.scene.Scene;
   4: import javafx.stage.Stage;
   5: import javafx.collections.ObservableList;
   6: import javafx.scene.text.Font;
   7: import javafx.scene.text.Text;
   8: 
   9: public class JavafxSample extends Application
  10: {
  11:     @Override
  12:     public void start(Stage stage)
  13:     {
  14:         Text text = new Text();
  15:         text.setFont(new Font(25));
  16:         text.setX(50);
  17:         text.setY(150);
  18:         text.setText("Welcome to JavaFX Tutorials");
  19: 
  20:         Group root = new Group();
  21:         ObservableList list = root.getChildren();
  22:         list.add(text);
  23:         Scene scene = new Scene(root, 400, 300);
  24:         stage.setTitle("Sample Application");
  25:         stage.setScene(scene);
  26:         stage.show();
  27:     }
  28:     public static void main(String args[])
  29:     {
  30:         launch(args);
  31:     }        
  32: }

برنامه را اجرا و نتیجه را مشاهده نمایید :
create-javafx-application-04