آموزش javafx به صورت جامع – گام به گام و رایگان

آشنایی اولیه با نسخه‌های جاوا

قبل از آموزش JavaFX بهتر است در مورد انواع نسخه های زبان برنامه نویسی جاوا صحبت کنیم. بطور کلی زبان برنامه‌نویسی جاوا Java از ۳ پلتفرم تشکیل شده است:

• Java SE (نسخه استاندارد): نسخه استاندارد Standard Edition یا (Java SE ) به مفاهیم پایه جاوا و کتابخانه های اصلی برنامه‌هایی که در دستکتاپ است، می‌پردازد.
• Java ME (نسخه میکرو): در Java ME) Micro Edition) برای منابع سخت افزاری مثل CPU یا MEMORY برنامه نویسی می‌شود. و به صورت محدود در لوازم خانگی و موبایل کاربرد دارد.
• Java EE (نسخه سازمانی): نسخه Enterprise Edition یا Java EE یا نسخه سازمانی جاوا، برای برنامه‌های بزرگ و سازمانی که اکثراً روی شبکه‌های بزرگی مثل اینترنت است، نصب و اجرا می‌شود.

JavaFX چیست؟

JavaFX از یک رابط کاربری تشکیل شده که از آن در ساخت صفحات اینترنتی استفاده می‌شود. JavaFX برای توسعه برنامه های کاربردی دسکتاپ و برای ساخت اپلیکیشن های تحت وب (RIA) ، یک کتابخانه‌ی قوی است. حالا می‌خواهیم بدانیم RIA چیست؟ نرم‌افزار‌هایی هستند که از ویژگی های اپلیکیشن‌های دسکتاپ بهره می‌برد و بر روی سیستم عامل‌هایی مثل ویندوز، لینوکس، اندروید و ios اجرا شود.

اگر شما برنامه نویس هستید و می‌خواهید اپلیکیشن‌هایی با گرافیک بهتر داشته باشید، JavaFX گزینه خوبی است. می‌توانید با آموزش JavaFX بدون اینکه تغییری در سیستم عامل‌ها ایجاد کنید، با بهترین گرافیک به اجرای برنامه‌هایتان بپردازید.

JavaFX از بسته‌های گرافیکی و رسانه ای تشکیل شده و به توسعه دهندگان این اجازه را می‌دهد که برنامه های کاربردی را طراحی کنند، اشکالات برنامه را رفع کنند و آن را اجرا کنند که در انواع پلتفرم‌ها کار می‌کند. در JavaFX طراحان گرافیک می‌توانند از طریق CSS، ظاهر و استایل برنامه را ویرایش کنند.

شروع کار با JavaFX

برنامه چاپ جمله معروف HelloWorld برای برنامه نویسی گزینه مناسبی برای شروع آموزش JavaFX است. از ویژگی‌های این برنامه این است که، این امکان را به شما می‌دهد تا ببینید JavaFX در سیستم شما به درستی نصب شده است یا نه. برای شروع کار حتماً بایستی از یک IDE استفاده کنید.

IDE NetBeans ابزاری است که به شما در این آموزش کمک می‌کند. قبل از شروع برنامه نویسی مطمئن شوید که از IDE  استفاده می‌کنید که از JavaFX2 پشتیبانی می‌کند. برای اطلاعات بیشتر می توانید آموزش نصب JavaFX بر روی NetBeans سایت فرادرس را مطالعه کنید.

ساخت اولین برنامه JavaFX

برای ساخت اولین برنامه‌، از منوی فایل، New Project را انتخاب کنید. سپس Java FX Application را انتخاب کرده و گزینه Next را بزنید. نام پروژه خود را Helloworld بگذارید و گزینه Finish را انتخاب کنید. حالا کد‌های زیر را در پروژه خود کپی کنید و برنامه را اجرا کنید:

package helloworld;
 
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class HelloWorld extends Application {
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!");
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
 
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });
        
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }
}

وقتی برنامه را اجرا کردید و پنجره Projects باز شد روی HelloWorld راست کلیک کنید و Run را بزنید. بعد از آن دکمه Say Hello World را انتخاب کنید. سپس نگاه کنید که متن Hello World در پنجره خروجی نت بینز چاپ شده است؟ در تصویر زیر مشاهده می کنید:

در این مثال ساده از آموزش JavaFX نکات مهمی وجود دارد که باید در مورد ساختار اصلی یک برنامه JavaFX بدانید:

• کلاس اصلی برای یک برنامه JavaFX کلاس javafx.application.Application را گسترش می دهد. متد ()start نقطه اولیه و ورود اصلی برای همه برنامه های JavaFX است.
• یک برنامه JavaFX محفظه رابط کاربری را با استفاده از یک Stage و یک scene تعریف می کند. کلاس JavaFX Stage کانتینر سطح بالای JavaFX است. کلاس JavaFX Scene محفظه ای برای تمام محتواها است.  در مثال بالا scene را در اندازه پیکسل مشخصی قابل مشاهده می کند.
• در JavaFX، محتوای scene به صورت نمودار scene سلسله مراتبی از گره ها نشان داده می شود. در این مثال، گره ریشه یک شی StackPane است که یک گره طرح بندی قابل تغییر اندازه است. این بدان معنی است که اندازه گره ریشه اندازه scene را ردیابی می کند و هنگامی که اندازه Stage توسط کاربر تغییر اندازه می یابد تغییر می کند.
• گره ریشه شامل یک گره فرزند، یک کنترل دکمه با متن به علاوه یک کنترل کننده رویداد برای چاپ پیام در هنگام فشار دادن کلید است.
• هنگامی که فایل JAR برای برنامه با ابزار JavaFX Packager ایجاد می شود که JavaFX Launcher را در فایل JAR جاسازی می کند، متد ()main برای برنامه های JavaFX مورد نیاز نیست. با این حال، گنجاندن متد ()main مفید است تا بتوانید فایل‌های JAR را که بدون JavaFX Launcher ایجاد شده‌اند، اجرا کنید، مانند زمانی که از یک IDE استفاده می‌کنید که ابزارهای JavaFX به طور کامل در آن یکپارچه نیستند. همچنین، برنامه های Swing که کد JavaFX را تعبیه می کنند به متد ()main نیاز دارند.

قبلاً هم اشاره کردیم که قبل آموزش JavaFX باید کمی با نحوه برنامه نویسی در جاوا آشنا باشید. برای آشنایی با جاوا نیز می توانید از طریق این لینک (+) فیلم آموزش کامل زبان برنامه نویسی جاوا را تهیه و مطالعه فرمایید.

ایجاد فرم در JavaFX

ایجاد یک فرم یعنی ایجاد یک activity در هنگام توسعه یک برنامه. در این آموزش اصول اولیه طرح‌بندی صفحه Layout، نحوه اضافه کردن کنترل‌ها به یک Layout و نحوه ایجاد رویدادهای ورودی (Events) را به شما خواهیم گفت. در این بخش از آموزش JavaFX، از JavaFX برای ساخت فرم ورود به سیستم (Login) استفاده خواهیم کرد.

۱- ایجاد پروژه

اولین کار شما در آموزش JavaFX این است که یک پروژه JavaFX در NetBeans IDE ایجاد کنید و نام آن را Login بگذارید برای این منظور:

1. از منوی File، New Project را انتخاب کنید.
2. در دسته برنامه JavaFX، JavaFX Application را انتخاب کنید. روی Next کلیک کنید.
3. نام پروژه را Login بگذارید و روی Finish کلیک کنید. هنگامی که یک پروژه JavaFX ایجاد می کنید، NetBeans IDE یک برنامه Hello World را به عنوان نقطه شروع ارائه می دهد که اگر آموزش Hello World را دنبال کرده باشید قبلاً آن را مشاهده کرده اید.
4. متد ()start را که NetBeans IDE ایجاد کرده است حذف کرده و با کد زیر جایگزین کنید.

@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX Welcome");
        
        primaryStage.show();
    }

۲- ایجاد GridPane Layout

برای فرم ورود، از طرح بندی GridPane استفاده می کنیم چون می‌توان یک شبکه انعطاف پذیر از ردیف ها و ستون ها را در پروژه ایجاد کرد. با این کار می‌توان کنترل‌ها را در هر سلولی در شبکه قرار داد. کد ایجاد طرح بندی GridPane بصورت زیر است. کد را قبل از خط ()primarStage.show قرار دهید:

GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);

در کد بالا یک شی GridPane ایجاد می شود و آن را به متغیری با نام grid اختصاص می دهیم. ویژگی alignment موقعیت پیش فرض شبکه را از سمت چپ بالای Scene به مرکز تغییر می دهیم. ویژگی‌های gap فاصله بین ردیف‌ها و ستون‌ها را مدیریت می‌کند و ویژگی padding فضای اطراف لبه‌های صفحه شبکه را مدیریت می‌کند. ورودی ها به ترتیب بالا، راست، پایین و چپ هستند. در این مثال، ۲۵ پیکسل از هر طرف وجود دارد.

Scene با پنجره شبکه به عنوان گره ریشه ایجاد می شود، که در هنگام کار با کانتینرهای چیدمان معمول است؛ بنابراین، همانطور که اندازه پنجره تغییر می کند، اندازه گره های داخل پنجره شبکه با توجه به محدودیت های چیدمان تغییر می کند. در این مثال، وقتی پنجره را بزرگ یا کوچک می‌کنید، صفحه شبکه در مرکز باقی می‌ماند. وقتی پنجره را کوچک‌تر می‌کنید، ویژگی‌های لایه‌بندی تضمین می‌کند که یک لایه در اطراف Scene شبکه وجود دارد.

این کد عرض و ارتفاع Scene را ۳۰۰ در ۲۷۵ تنظیم می کند. اگر ابعاد Scene را تنظیم نکنید، Scene به طور پیش فرض روی حداقل اندازه لازم برای نمایش محتویات آن تنظیم می شود.

• جهت مشاهده مجموعه آموزش برنامه نویسی در سایت آموزش آنلاین فرادرس — کلیک کنید

۳- ایجاد تکست، فیلدهای تکست و لیبل

با نگاهی به شکل بالا، می بینید که فرم را دارای یک عنوان “Welcome” و فیلدهای متن و رمز عبور برای جمع آوری اطلاعات از کاربر نیاز دارد. کد ایجاد این کنترل ها در بخش های بعدی است. کد زیر را بعد از خطی که ویژگی grid padding را تنظیم می کند، اضافه کنید:

Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);

Label userName = new Label("User Name:");
grid.add(userName, 0, 1);

TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);

Label pw = new Label("Password:");
grid.add(pw, 0, 2);

PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

در این کد، خط اول یک شی Text ایجاد می کند که قابل ویرایش نیست، متن آن را Welcome می گذارد و آن را به متغیری به نام scenetitle اختصاص می دهد. خط بعدی از متد ()setFont برای تنظیم فونت، وزن و اندازه متغیر scenetitle استفاده می کند.

متد ()grid.add متغیر scenetitle را به شبکه layout اضافه می کند. شماره گذاری ستون ها و سطرها در گرید از صفر شروع می شود و Scene در ستون ۰ ردیف ۰ اضافه می شود. دو آرگومان آخر متد grid.add() ستون را در مقدار ۲ و ردیف را در مقدار ۱ تنظیم می کند.

خطوط بعدی یک شی Label با متن نام کاربری در ستون ۰، ردیف ۱ و یک شیء Text Field ایجاد می کند که می تواند ویرایش شود. فیلد متنی در ستون ۱، ردیف ۱ به صفحه شبکه اضافه می شود. یک فیلد رمز عبور و برچسب ایجاد شده و به شکل مشابهی به صفحه شبکه اضافه می شود.

هنگام کار با یک Scene شبکه، می توانید خطوط شبکه را نمایش دهید که برای دیباگ کردن مفید است. در این حالت، می‌توانید grid.setGridLinesVisible(true) را بعد از خطی که فیلد رمز را اضافه می‌کند، اضافه کنید. سپس، هنگامی که برنامه را اجرا می کنید، خطوط مربوط به ستون ها و ردیف های شبکه و همچنین ویژگی ها را می بینید، شکل زیر مطالب گفته شده بالا را نشان می دهد.

• مجموعه آموزش برنامه نویسی اندروید __ کلیک کنید

۴- اضافه کردن Button و Text

دو کنترل نهایی مورد نیاز برای برنامه عبارتند از یک Button کنترل برای ارسال داده ها و یک کنترل متن برای نمایش یک پیام زمانی که کاربر Button را فشار می دهد. ابتدا، Button را ایجاد کنید و آن را در سمت راست پایین قرار دهید، که محل معمولی برای یک Button است. کد زیر را قبل از کد Scene اضافه کنید:

Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);

خط اول Button ای به نام btn با برچسب Sign in ایجاد می کند و خط دوم یک صفحه طرح HBox به نام hbBtn با فاصله ۱۰ پیکسل ایجاد می کند. صفحه HBox ترازبندی را برای Button تنظیم می کند که با تراز اعمال شده برای کنترل های دیگر در صفحه شبکه متفاوت است. ویژگی alignment دارای مقدار Pos.BOTTOM_RIGHT است که یک گره را در پایین فضا به صورت عمودی و در لبه سمت راست فضا به صورت افقی قرار می دهد. Button به عنوان فرزند Scene HBox اضافه می شود و صفحه HBox به شبکه در ستون ۱، ردیف ۴ اضافه می شود.

اکنون، همانطور که در کد پایین نشان داده شده است، یک کنترل Text برای نمایش پیام اضافه کنید. این کد را قبل از کد Scene اضافه کنید:

final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);

شکل زیر فرم طراحی شده را نشان می دهد. تا زمانی که در بخش بعدی آموزش JavaFX یعنی افزودن کد برای مدیریت رویداد کار نکنید، پیام متنی را مشاهده نخواهید کرد.

۵- اضافه کردن مدیریت رویداد

می خواهیم کاری کنیم که با زدن Button یک پیام متنی مناسب نمایش داده شود پس کد زیر را قبل از کد Scene اضافه کنید:

btn.setOnAction(new EventHandler<ActionEvent>() {
 
    @Override
    public void handle(ActionEvent e) {
        actiontarget.setFill(Color.FIREBRICK);
        actiontarget.setText("Sign in button pressed");
    }
});

متد ()setOnAction برای ثبت یک کنترل کننده رویداد استفاده می شود که شی actiontarget را روی دکمه Sign in تنظیم می کند که وقتی کاربر Button را فشار می دهد. رنگ شی اکشن تارگت به رنگ قرمز تنظیم شده است.

۶- اجرای برنامه

روی پروژه Login در پنجره Projects کلیک راست کنید، Run را انتخاب کنید و سپس روی دکمه Sign in کلیک کنید. شکل زیر نتیجه را نشان می دهد. اگر با مشکل مواجه شدید، به کد موجود در فایل Login.java نگاهی بیندازید.

به همین سادگی در آموزش JavaFX توانستیم یک فرم login ساده در JavaFX طراحی کنیم. برای آموزش کامل JavaFX پیشنهاد می کنیم آموزش پروژه محور JavaFX – طراحی مدیا پلیر (Media Player) سایت فرادرس را تهیه و آموزش خودتان را کامل کنید.

سخن پایانی در مورد آموزش JavaFX

در این پست از آموزش JavaFX به نحوه پیاده سازی فرم پرداخته شد و به عنوان نمونه یک فرم ورود یا login طراحی شد. مزیت طراحی این فرم در جاوا FX این است که با یک بار طراحی می توانید این فرم را در سیستم عامل ها و پلتفرم های مختلف استفاده کنید.

در این آموزش سعی شد تا اندکی از کار انجام شده برای طراحی یک فرم را به زبان ساده بیان کنیم و واضح است راه زیادی برای تکمیل آموزش JavaFX وجود دارد. به طور کلی آموزش JavaFX به افرادی که به زبان جاوا علاقه دارند و دانشجویان و علاقمندان توصیه می‌شود.

در پایان پیشنهاد ما را برای کسب درآمد با فروش فایل (چگونه در خانه کسب درآمد کنیم؟) را نیز در فرصت مناسب مطالعه کنید. امیدواریم مطالب فوق برای شما سودمند بوده باشد. حتماً نظرات و پیشنهادات خود را با ما در میان بگذارید و میزان رضایتمندی خود را از این پست با دادن امتیاز مشخص کنید. موفق و پیروز باشد.