آموزش JavaFX | کامل و رایگان — از مبتدی تا حرفه ای

JavaFX یک پلتفرم برای خلق وب‌اپلیکیشن‌های غنی است. منظور از وب‌اپلیکیشن‌های غنی آن اپ‌هایی هستند که قابلیت‌ها و همچنین تجربه کاربری مشابه اپلیکیشن‌های دسکتاپ را عرضه می‌کند. این اپ‌ها در قیاس با وب‌اپلیکیشن‌های معمول، تجربه دیداری بهتری برای کاربران دارند. وب‌اپلیکیشن‌های غنی که در ابتدا «اپلیکیشن‌های غنی اینترنتی» (Rich Internet Application) یا به اختصار RIA نامیده می‌شدند، به صورت افزونه‌های مرورگر عرضه و یا به صورت ماشین مجازی ارائه می‌شوند که برای تبدیل اپلیکیشن‌‌های استاتیک سنتی به نسخه بهبود یافته، روان، انیمیت شده و جذاب اپلیکیشن‌ها کاربرد دارند. در این مطلب اقدام به ارائه آموزش JavaFX از صفر تا صد و از سطح مبتدی تا حرفه‌ای کردیم تا با روش خلق چنین اپلیکیشن‌هایی آشنا شوید.

در اپلیکیشن‌‌های غنی، ارائه‌های گرافیکی در سمت کلاینت مدیریت می‌شوند، چون افزونه‌ای وجود دارد که از گرافیک‌های غنی پشتیبانی می‌کند. به طور خلاصه دستکاری داده‌ها در این نوع از اپلیکیشن‌ها در سمت سرور انجام می‌یابد، اما دستکاری شیء مرتبط در سمت کلاینت اجرا می‌شود.

فناوری‌های خلق وب‌اپلیکیشن‌های غنی

برای خلق وب‌اپلیکیشن‌های غنی سه فناوری مختلف وجود دارد که در فهرست زیر مشاهده می‌کنید:

• Adobe Flash
• Microsoft Silverlight
• JavaFX

ادوبی فلش

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

مایکروسافت سیلورلایت

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

JavaFX

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

فیلم آموزش جاوا اف ایکس JavaFx – ساخت رابط گرافیکی در جاوا (رایگان) در فرادرس

کلیک کنید

JavaFX چیست؟

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

پیش‌تر برنامه‌نویسان برای توسعه اپلیکیشن‌های GUI با استفاده از زبان برنامه‌نویسی جاوا از کتابخانه‌هایی مانند Advanced Windowing Toolkit و Swing بهره می‌گرفتند. پس از ظهور JavaFX این برنامه‌نویسان جاوا اکنون می‌توانند از آن برای توسعه اپلیکیشن‌های با رابط گرافیکی به روشی مؤثر استفاده کنند.

JavaFX چه کاربردهایی دارد؟

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

JavaFX مجموعه‌ای کامل از API-های گرافیکی و مدیا را ارائه کرده و از طریق قابلیت شتاب‌دهی گرافیکی از پردازنده گرافیکی سیستم نیز بهره می‌گیرد. همچنین JavaFX اینترفیس‌هایی ارائه می‌کند که برنامه‌نویسان با کمک گرفتن از آن‌ها می‌توانند انیمیشن‌های گرافیکی و کنترل‌های UI را با هم ترکیب کنند.

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

قابلیت‌های JavaFX

در این بخش برخی از قابلیت‌های JavaFX را ملاحظه می‌کنید.

فیلم آموزش پروژه محور JavaFX – طراحی مدیا پلیر Media Player در فرادرس

کلیک کنید

• برنامه‌نویسی‌شده به زبان جاوا – کتابخانه JavaFX به زبان جاوا نوشته شده و برای همه زبان‌هایی که روی JVM اجرا می‌شوند از جمله Java، Groovy و JRuby قابل استفاده است. این اپلیکیشن‌های JavaFX نیز مانند جاوا مستقل از پلتفرم هستند.
• FXML – جاوا اف‌ایکس مجهز به یک زبان به نام FXML است که مشابه زبان نشانه‌گذاری اعلانی HTML است. تنها مقصود این زبان، تعریف کردن رابط کاربری است.
• Scene Builder – این پلتفرم یک اپلیکیشن به نام Scene Builder دارد. با یکپارچه‌سازی این اپلیکیشن در IDE-‌هایی مانند Eclipse و NetBeans می‌توانید از یک رابط کاربری طراحی به روش کشیدن و رها کردن بهره‌مند شوید. از این اینترفیس برای توسعه اپلیکیشن‌های FXML استفاده می‌شود.
• Swing Interoperability – در یک اپلیکیشن JavaFX می‌توانید محتوای Swing را با استفاده از کلاس Swing Node جاسازی کنید. به طور مشابه، می‌‌توانید اپلیکیشن‌های Swing موجود را با قابلیت‌های JavaFX از قبیل محتوای جا‌سازی‌شده وب و مدیای گرافیکی غنی به‌روزرسانی کنید.
• کنترل‌های داخلی UI – کتابخانه JavaFX برخی کنترل‌های UI را ارائه کرده که با استفاده از آن‌ها می‌توانید یک اپلیکیشن با امکانات کامل توسعه بدهید.
• استایل‌بندی مشابه CSS - این پلتفرم یک روش استایل‌بندی مشابه CSS عرضه کرده است. با استفاده از این روش می‌توانید طراحی اپلیکیشن‌ها را با اندکی دانش CSS بهبود ببخشید.
• API بوم و پرینت – JavaFX یک بوم (Canvas) عرضه کرده که یک حالت انیمیت بی‌درنگ از API رندرینگ است. درون پکیج javafx.scene.canvas مجموعه کلاس‌هایی برای بوم قرار دارد که با استفاده از آن‌ها می‌توان مستقیماً درون یک صحنه JavaFX چیزهایی را رسم کرد. همچنین JavaFX کلاس‌هایی به منظور پرینت کردن در پکیج javafx.print عرضه کرده است.
• مجموعه کاملی از API-ها – این کتابخانه مجموعه کاملی از API-ها برای توسعه اپلیکیشن‌های GUI، گرافیک‌های دوبعدی، سه‌بعدی و غیره ارائه کرده است. این مجموعه API-ها شامل برخی قابلیت‌های پلتفرم جاوا نیز می‌شوند. از این رو با استفاده از این API می‌توانید به قابلیت‌های زبان جاوا مانند ژنریک‌ها، «حاشیه‌نویسی‌ها» (Annotations)، «چندنخی» (Multithreading) و عبارت‌های لامبدا نیز دسترسی داشته باشید. در این مجموعه برخی مجموعه کتابخانه‌های سنتی جاوا بهبود یافته‌اند و مفاهیم مانند لیست‌های observable و map-ها نیز گنجانده شده‌اند. با بهره‌گیری از این API-ها کاربران می‌توانند تغییرهای موجود در مدل‌های داده‌ها را مورد نظارت قرار دهند.
• کتابخانه گرافیک یکپارچه – JavaFX کلاس‌های خاصی برای گرافیک‌های دوبعدی و سه‌بعدی ارائه کرده است.
• پایپ‌لاین گرافیک – JavaFX از گرافیک‌ها بر مبنای پایپ‌لاین شتاب‌دهی سخت‌افزاری گرافیکی که به نام Prism شناخته می‌شود، پشتیبانی می‌کند. زمانی که از آن به همراه کارت گرافیکی یا GPU مناسب استفاده کنید، گرافیک‌های روانی را تجربه خواهید کرد. در حالتی که سیستم از کارت گرافیکی پشتیبانی نکند، مقادیر پیش‌فرض Prism به حالت رندرینگ نرم‌افزاری بازمی‌گردد.

تاریخچه JavaFX

JavaFX در ابتدا از سوی «کریس اُلیور» (Chris Oliver) در زمانی که در شرکتی به نام See Beyond Technology فعالیت می‌کرد، توسعه یافت. این پلتفرم در ادامه در سال 2005 از سوی شرکت سان مایکروسیستمز خریداری شد. نقاط عطف تاریخچه پروژه را می‌توان چنین برشمرد.

• این پروژه در ابتدا F3 نام داشت که اختصاری برای عبارت Form Follows Functions بود و با هدف ارائه اینترفیس‌های غنی‌تر برای توسعه اپلیکیشن‌های GUI طراحی شد.
• شرکت سان مایکروسیستمز اقدام به خرید شرکت See Beyond company در ژوئن 2005 کرد و پروژه F3 نیز در این زمان JavaFX نام گرفت.
• در سال 2007 JavaFX به طور رسمی در همایش Java One که کنفرانس سالانه دنیای وب است معرفی شد.
• در سال 2008 یکپارچه‌سازی Net Beans با JavaFX عرضه شد. در همین سال کیت توسعه استاندارد جاوا برای JavaFX 1.0 عرضه شد.
• در سال 2009 شرک اوراکل (Oracle) شرکت سان را خریداری کرد و در همین سال نسخه بعدی JavaFX یعنی نسخه 1.2 نیز عرضه شد.
• در سال 2010 نسخه JavaFX 1.3 معرفی شد و نسخه بعدی یعنی JavaFX 2.0 نیز در سال 2012 عرضه گشت.
• در سال 2014 JavaFX8 به عنوان بخش یکپارچه‌ای از جاوا ارائه شد.
• JavaFX 9 روی استخراج برخی API-های خصوصی و عرضه عمومی آن متمرکز بود.
• JavaFX 11 در سپتامبر 2018 معرفی شد.
• JavaFX 12 در مارس 2019 معرفی شده است.
• JavaFX 13 در سپتامبر 2019 ارائه شد.
• JavaFX 14 در مارس 2020 عرضه گشته است.
• در حال حاضر JavaFX 15 آخرین نسخه از این پلتفرم است که در سپتامبر 2020 (شهریور 1399) عرضه شده است.

محیط JavaFX

از جاوا 8 به بعد «کیت توسعه جاوا» (JDK) شامل کتابخانه JavaFX نیز می‌شود. از این رو برای اجرای اپلیکیشن‌های JavaFX کافی است جاوا 8 یا نسخه بالاتر را روی سیستم خود نصب کنید. به علاوه اغلب IDE-ها مانند Eclipse و NetBeans اکنون از JavaFX پشتیبانی می‌کنند. در این بخش از راهنما در مورد شیوه‌های مختلف تنظیم محیط توسعه برای اجرای اپلیکیشن‌های JavaFX صحبت خواهیم کرد.

فیلم آموزش پروژه محور JavaFX – ساخت بازی Snake (رایگان) در فرادرس

کلیک کنید

نصب جاوا 8

این راهنما بر پایه نسخه جاوا 8 تنظیم شده است. شیوه کار در مورد نسخه‌های بالاتر این زبان نیز اساساً مشابه است. قبل از هر چیز باید بررسی کنیم آیا جاوا روی سیستم نصب شده یا نه. به این منظور اعلان فرمان ویندوز را باز کرده و دستور java را در آن بنویسید. اگر جاوا روی سیستم نصب نشده باشد، اعلان فرمان پیامی در این خصوص به مانند تصویر زیر نمایش می‌دهد.

در این صورت باید با طی مراحل زیر جاوا را نصب کنید.

گام یکم: به صفحه دانلود JavaSE (+) بروید. کمی به سمت پایین اسکرول کرده و در بخش Java SE 8 روی دکمه JDK Download که در تصویر زیر مشخص شده کلیک کنید.

گام دوم: با کلیک روی لینک دانلود فوق به صفحه دانلود‌های Java SE Development Kit 8 هدایت می‌شوید که در آن لینک‌های دانلود مختلف ‌JDK را برای پلتفرم‌های متفاوت ملاحظه می‌کنید. موافقت خود را با شرایط لایسنس اعلام کرده و با کلیک روی لینک مربوطه، پکیج مورد نظر را دانلود کنید.

برای نمونه اگر روی یک ویندوز 64 بیت کار می‌کنید، باید روی پکیج هایلایت شده تصویر زیر کلیک کنید.

با کلیک روی لینک فوق، کیت توسعه جاوا نسخه 8 مناسب برای ویندوز 64-بیتی روی سیستم دانلود می‌شود.

گام سوم: فایل اجرایی باینری دانلود شده را اجرا کنید تا فرایند نصب JDK8 آغاز شود.

گام چهارم: دایرکتوری نصب را انتخاب کنید.

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

گام ششم: در صورت نیاز می‌توانید دایرکتوری نصب را تغییر دهید، در غیر این صورت دایرکتوری موجود را حفظ کرده و ادامه بدهید.

گام هفتم: در نهایت با کلیک روی دکمه ‌‌Close که در تصویر زیر می‌بینید، فرایند نصب پایان می‌یابد.

راه‌اندازی مسیر برای ویندوز

پس از نصب جاوا باید متغیرهای مسیر را تنظیم کنید. با این فرض که جاوا در دایرکتوری C:\Program Files\java\jdk1.8.0_91 نصب شده است، باید مراحل زیر را طی کنید:

• روی My Computer یا My PC راست-کلیک کرده و Properties را انتخاب کنید.
• روی دکمه Environment Variables در زبانه Advanced کلیک کنید.
• اکنون متغیر Path را طوری تنظیم کنید که حاوی مسیر فایل اجرایی جاوا باشد. برای نمونه اگر مسیر در حال حاضر به صورت C:\WINDOWS\SYSTEM32 باشد، باید مسیر را به C:\WINDOWS\SYSTEM32; C:\Program Files\java\ jdk1.8.0_91\bin تغییر دهید.

تنظیم محیط NetBeans برای JavaFX

NetBeans از نسخه 8 خود پشتیبانی داخلی از JavaFX را اضافه کرده است. با نصب این IDE می‌توانید اپلیکیشن‌های JavaFX را بدون نیاز به هیچ نوع افزونه جانبی و یا فایل‌های JAR ایجاد کنید. برای راه‌اندازی محیط NetBeans باید مراحل زیر را طی کنید.

گام یکم: به وب‌سایت NetBeans بروید و روی دکمه دانلود بزنید تا این نرم‌افزار روی سیستمتان دانلود شود.

گام دوم: با کلیک کردن روی دکمه Download به صفحه دانلود‌های نرم‌افزار نت‌بینز می‌رسید که باندل‌های مختلف این نرم‌افزار را برای اپلیکیشن‌های جاوا عرضه کرده است. در این صفحه می‌توانید یکی از نسخه‌های feature update یا LTS مربوط به NetBeans را انتخاب و دانلود کنید:

گام سوم: با کلیک کردن روی دکمه دانلود، فایل نصاب نت‌بینز روی سیستم دانلود می‌شود. برای نصب این IDE باید این فایل را اجرا کنید. با اجرا کردن این نصاب با صفحه زیر مواجه می‌شوید.

پس از کامل شدن پیکربندی، صفحه خوشامدگویی را مشاهده می‌کنید.

گام چهارم: روی دکمه Next کلیک کنید تا فرایند نصب تداوم یابد.

گام پنجم: در پنجره بعدی باید موافقت خود را با شرایط لایسنس NetBeans اعلام کنید. این موافقت‌نامه را با دقت مطالعه کرده و با کلیک روی کادر I accept the terms in the license agreement موافقت خود را اعلام کرده و روی دکمه Next کلیک کنید.

گام ششم: در پنجره بعدی، موافقت‌نامه لایسنس را برای Junit مشاهده می‌کنید که باید آن را نیز با کلیک کردن روی کادر I accept the terms in the license agreement تأیید کنید تا Juint نصب شود. سپس روی Next کلیک کنید.

گام هفتم: دایرکتوری مقصد نصب Netbeans را انتخاب کنید. به علاوه می‌توانید به دایرکتوری محل نصب JDK روی سیستم نیز رفته و روی Next کلیک کنید.

گام هشتم: به طور مشابه دایرکتوری محل نصب Glassfish Server را نیز انتخاب کید. به این منظور دایرکتوری Java Development Kit را انتخاب کرده و روی Next کلیک کنید.

گام نهم: روی کادر Check for Updates بزنید تا آپدیت‌های خودکار را دریافت کنید و سپس روی دکمه Install کلیک کنید تا فرایند نصب آغاز شود.

گام دهم: در این مرحله فرایند نصب نت‌بینز آغاز می‌شود و ممکن است مدتی طول بکشد.

گام یازدهم: زمانی که فرایند نصب پایان یافت، روی دکمه Finish کلیک کنید تا از صفحه نصب خارج شوید.

گام دوازدهم: هنگامی که NetBeans IDE را اجرا کنید، صفحه‌ای مانند تصویر زیر می‌بینید:

گام سیزدهم: در منوی فایل، گزینه …New Project را انتخاب کنید تا ویزارد پروژه جدید نمایش یابد.

گام چهاردهم: در ویزارد پروژه جدید، گزینه JavaFX را انتخاب کرده و روی Next کلیک کنید. به این ترتیب یک اپلیکیشن جدید JavaFX برای شما ایجاد می‌شود.

گام پانزدهم: نام پروژه و محل آن را در پنجره NewJavaFX Application انتخاب کرده و سپس روی Finish کلیک کنید. به این ترتیب اپلیکیشن ساده‌ای با نام مفروض ایجاد می‌شود.

در این زمان یک اپلیکیشن با نام ایجاد شده است. NetBeans درون این اپلیکیشن یک برنامه جاوا با نام Javafxsample.java ایجاد می‌کند. چنان که در تصویر زیر می‌بینید، این برنامه درون NetBeans Source Packages → javafxsample ایجاد شده است.

گام شانزدهم: روی فایل راست-کلیک کرده و Run File را بزنید تا کد مانند تصویر زیر اجرا شود.

به این ترتیب می‌بینیم که برنامه تولید شده خودکار حاوی کدی است که یک پنجره ساده JavaFX را با یک دکمه Say Hello World ایجاد کرده است. هر بار که روی این دکمه کلیک کنید، عبارت Hello World روی کنسول نمایش می‌یابد.

نصب JavaFX در Eclipse

برای تنظیم JavaFX در Eclipse باید مراحل زیر را انجام دهید. ابتدا باید مطمئن شوید که ایکلیپس روی سیستم نصب است. اگر چنین نباشد آن را دانلود و روی سیستم خود نصب کنید. زمانی که نصب شد، با استفاده از مراحل زیر افزونه JavaFX را نیز نصب کنید.

گام یکم: ایکلیپس را باز کرده و در منوی Help گزینه …Install New Software را انتخاب کنید.

به محض کلیک روی این گزینه، پنجره Available Software مانند تصویر زیر نمایش می‌یابد.

در کادر متنی Work with در این پنجره باید لینک افزونه مورد نیاز نرم‌افزار را وارد کنید.

گام دوم: روی دکمه …add کلیک کرده و نام پلاگین یعنی e(fx)clipse را وارد نمایید. سپس مکان دانلود را به صورت این لینک (+) وارد کنید.

گام سوم: پس از تعیین نام و مقصد افزونه، روی دکمه OK کلیک کنید.

گام چهارم: به محض این که افزونه را به ایکلیپس اضافه کردید، دو چک‌باکس را با عناوین e(fx)clipse – install و e(fx)clipse – single components مشاهده می‌کنید تیک این چک‌باکس‌ها را بزنید و روی دکمه …Add کلیک کنید.

گام پنجم: در ادامه Eclipse را باز کنید. روی منوی فایل کلیک کرده و گزینه Project را انتخاب کنید.

گام ششم: در ادامه پنجره‌ای می‌بینید که در آن فهرستی از ویزاردهای ارائه شده از سوی ایکلیپس برای ایجاد پروژه‌ها دیده می‌شوند. ویزارد JavaFX را باز کنید و گزینه JavaFX Project را کلیک کرده و روی Next کلیک کنید.

گام هفتم: با کلیک کردن روی Next یک ویزارد پروژه جدید باز می‌شود. در این بخش می‌توانید نام پروژه را وارد کرده و روی Finish بزنید.

گام هشتم: با کلیک کردن روی Finish یک اپلیکیشن با نام مفروض ایجاد می‌شود. اکنون در پکیج فرعی با نام application یک برنامه با نام Main.java ایجاد شده است.

گام نهم: به این ترتیب برنامه تولید شده خودکار شامل کدی خواهد بود که یک پنجره خالی JavaFX ایجاد می‌کند. روی این فایل راست-کلیک کرده و Run As → Java Application را انتخاب کنید.

با اجرای این اپلیکیشن یک پنجره خالی JavaFX مانند زیر مشاهده می‌شود.

در مورد کدنویسی پروژه‌های JavaFX در بخش‌های بعدی این راهنما بیشتر صحبت خواهیم کرد.

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

• برای دیدن فیلم آموزش پروژه محور JavaFX - طراحی مدیا پلیر (Media Player) + اینجا کلیک کنید.

معماری JavaFX

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

فیلم آموزش جاوا اف ایکس JavaFx – ساخت رابط گرافیکی در جاوا (رایگان) در فرادرس

کلیک کنید

• javafx.animation - شامل کلاس‌هایی برای افزودن انیمیشن‌های مبتنی بر گذار (transition) مانند fill، fade، rotate، scale و translation به گره‌های JavaFX است.
• javafx.application - شامل مجموعه کلاس‌هایی است که مسئول چرخه عمر اپلیکیشن‌های JavaFX هستند.
• javafx.css – شامل کلاس‌هایی برای افزودن استایل‌بندی شبیه CSS به اپلیکیشن‌های GUI در JavaFX است.
• javafx.event – شامل کلاس‌ها و اینترفیس‌هایی برای عرضه و مدیریت رویدادهای JavaFX است.
• javafx.geometry – شامل کلاس‌هایی برای تعریف اشیای دوبعدی و اجرای عملیات روی آن‌ها است.
• javafx.stage – این پکیج کلاس‌های کانتینر سطح بالا را برای اپلیکیشن javafx.stage نگهداری می‌کند.
• javafx.scene - این پکیج کلاس‌ها و اینترفیس‌هایی برای پشتیبانی از گراف صحنه عرضه کرده است. به علاوه از پکیج‌های فرعی مانند canvas، chart، control، effect، image، input، layout، media، paint، shape، text، transform، web و غیره پشتیبانی می‌کند. این‌ها برخی کامپوننت‌ها هستند که از AI غنی در JavaFX پشتیبانی می‌کنند.

در تصویر زیر معماری JavaFX API را ملاحظه می‌کنید. در اینجا می‌توانید کامپوننت‌هایی که از JavaFX API پشتیبانی می‌کنند را ببینید.

گراف صحنه

اپلیکیشن‌های GUI در JavaFX با استفاده از «گراف صحنه» (Scene Graph) کدنویسی می‌شوند. گراف صحنه یک نقطه آغازین برای سازه اپلیکیشن GUI محسوب می‌شود. این سازه مقدمات اپلیکیشن با رابط گرافیکی را که به صورت گره‌هایی تعریف شده، نگهداری می‌کند.

منظور از «گره» (node) یک شیء دیداری/گرافیکی است که می‌تواند شامل موارد زیر باشد:

• اشیای هندسی (گرافیکی) – اشیای دوبعدی یا سه‌بعدی از قبیل دایره، مستطیل، چندضلعی و غیره.
• کنترل‌های UI – مانند دکمه، چک‌باکس، کادر انتخاب، ناحیه متنی و غیره.
• کانتینرها- کانتینرها همان بخش‌های لی‌آوت هستند که مانند بخش حاشیه‌ای، بخش شبکه‌ای، بخش گردشی و غیره تعریف می‌شوند.
• عناصر مدیا- مانند صوت، ویدئو و تصویر.

به طور کلی هر مجموعه‌ای از گره‌ها، یک گراف صحنه را تشکیل می‌دهد. همه این گره‌ها در یک ترتیب سلسله‌مراتبی مانند تصویر زیر چیدمان می‌یابند.

هر گره در گراف صحنه یک والد منفرد دارد و گرهی که هیچ والدی نداشته باشد به نام «گره ریشه» (root node) شناخته می‌شود. به همین ترتیب هر گره می‌تواند یک یا چند فرزند داشته باشد، اما گره بدون فرزند به نام «گره برگ» (leaf node) و گره دارای فرزند به نام «گره انشعاب» (branch node) خوانده می‌شود.

یک وهله گره را می‌توان تنها یک بار به گراف صحنه اضافه کرد. گره‌های یک گراف صحنه می‌توانند افکت، مات بودن، نوع تبدیل، دستگیره رویداد، و حالت‌های خاص اپلیکیشن را داشته باشند.

Prism

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

• DirectX 9 روی ویندوز ایکس‌پی و ویستا
• DirectX 11 روی ویندوز 7
• OpenGL روی مک، لینوکس و سیستم‌های Embedded

در حالتی که سخت‌افزار نصب شده روی سیستم برای پشتیبانی از گرافیک کفایت نکند، پریزم از مسیر رندر نرم‌افزاری برای پردازش گرافیک‌ها استفاده می‌کند.

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

GWT

GWT اختصاری برای عبارت «کیت ابزار پنجره‌های شفاف» (Glass Windowing Toolkit) است و ابزارهای برای مدیریت پنجره‌ها، تایمرها، سطوح و صف‌های رویداد ارائه می‌کند. GWT موجب اتصال پلتفرم JavaFX به سیستم عامل نیتیو می‌شود.

Quantum Toolkit

این کیت ابزار یک لایه انتزاع روی کامپوننت‌های سطح پایین Prism، Glass، Media Engine، و Web Engine است. این کیت ابزار Prism و GWT را به هم متصل کرده و آن‌ها را در اختیار JavaFX قرار می‌دهد.

WebView

شما با بهره‌گیری از JavaFX می‌توانید محتوای HTML را در گراف صحنه جاسازی کنید. WebView کامپوننتی از JavaFX است که برای پردازش این محتوا استفاده می‌شود. این کامپوننت از یک فناوری به Web Kit استفاده می‌کند که یک موتور مرورگر وب متن-باز داخلی است. این کامپوننت از فناوری‌های مختلف وب مانند HTML5، CSS، JavaScript، DOM و SVG پشتیبانی می‌کند.

با استفاده از WebView می‌توانید کارهای زیر را انجام دهید.

• رندر کردن محتوای HTML از URL لوکال یا ریموت
• پشتیبانی از تاریخچه و ارائه ناوبری رو به عقب و جلو
• بارگذاری مجدد محتوا
• اِعمال جلوه‌های خاص روی کامپوننت وب
• ادیت محتوای HTML
• اجرای دستورهای جاوا اسکریپت
• مدیریت رویدادها

موتور مدیا

موتور مدیای JavaFX بر اساس یک موتور متن-باز به نام Streamer ساخته شده است. موتور مدیا از بازپخش محتوای ویدئویی و صوتی پشتیبانی می‌کند. موتور مدیای JavaFX از فرمت‌های زیر پشتیبانی می‌کند:

پکیج javafx.scene.media شامل کلاس‌ها و اینترفیس‌هایی است که کارکردهای مدیا را در JavaFX ارائه می‌کنند. این پکیج به شکل سه کامپوننت عرضه شده است:

• Media Object — نمایشگر فایل مدیا.
• Media Player — پخش محتوای مدیا.
• Media View — نمایش مدیا.

اپلیکیشن‌ها در JavaFX

در این بخش به بررسی تفصیلی ساختارهای اپلیکیشن JavaFX می‌پردازیم و همچنین با شیوه ایجاد یک اپلیکیشن JavaFX از طریق بررسی یک مثال آشنا می‌شویم.

ساختار اپلیکیشن‌های JavaFX

به طور کلی یک اپلیکیشن JavaFX سه کامپوننت عمده به نام‌های Stage، Scene و Nodes دارد که در نمودار زیر می‌بینید:

Stage

منظور از یک Stage پنجره‌ای است که شامل همه اشیا و اپلیکیشن‌های JavaFX است. این پنجره به وسیله کلاس Stage از پکیج javafx.stage نمایش می‌یابد. استیج اولیه به وسیله خود پلتفرم ساخته می‌شود. سپس شیء استیج ایجاد شده به یک آرگومان ()start مربوط به کلاس Application (در بخش بعدی توضیح می‌دهیم) ارسال می‌شود.

یک استیج دو پارامتر به نام‌های Width و Height دارد که به ترتیب موقعیت عرض و ارتفاع آن را مشخص می‌سازند. این کلاس به دو بخش ناحیه متنی و دکوراسیون‌ها (Content Area and Decorations) تقسیم می‌شود. به طور کلی پنج نوع استیج وجود دارند:

• دکوراسیون شده (Decorated)
• غیر دکوراسیون شده (Undecorated)
• شفاف (Transparent)
• یکنواخت (Unified)
• کاربردی (Utility)

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

صحنه

«صحنه» (Scene) نشان‌دهنده محتوای فیزیکی یک اپلیکیشن JavaFX است. این عنصر شامل همه محتوای یک گراف صحنه است. کلاس Scene از پکیج javafx.scene نشان‌دهنده شیء صحنه است. شیء صحنه در یک وهله خود تنها به یک استیج می‌تواند اضافه شود.

امکان ایجاد صحنه با استفاده از وهله‌سازی از کلاس Scene وجود دارد. با ارسال ابعاد (عرض و ارتفاع) به همراه گره روت به سازنده‌اش، می‌توان مقیاس صحنه را تعیین کرد.

گراف صحنه و گره‌ها

«گراف صحنه» (Scene Graph) یک ساختمان داده شبیه درخت و سلسله‌مراتبی است که محتوای یک صحنه را بازنمایی می‌کند. به طور عکس، یک «گره» (Code) شیئی دیداری/گرافیکی از یک گراف صحنه است. گره می‌تواند شامل هر کدام از موارد زیر باشد:

• اشیای هندسی (گرافیکی) دوبعدی و سه‌بعدی مانند دایره، مستطیل، چندضلعی و غیره.
• کنترل‌های UI مانند دکمه، چک‌باکس، کادر انتخاب، ناحیه متنی و غیره.
• کانتینرهای مختلف مانند بخش حاشیه، بخش شبکه، بخش گردشی و غیره.
• عناصر مدیا مانند اشیای صوتی، ویدئویی و تصویری.

کلاس Node از پکیج javafx.scene نماینده یک گره در JavaFX است و یک سوپرکلاس برای همه گره‌ها محسوب می‌شود. چنان که پیش‌تر اشاره کردیم، گره می‌تواند یکی از سه نوع زیر را داشته باشد:

• گره ریشه (Root Node) – گراف صحنه نخست به نام گره ریشه شناخته می‌شود.
• گره انشعاب/ گره والد (Branch Node/Parent Node) – گرهی با گره‌های فرزند که به نام گره‌های انشعاب/والد شناخته می‌شوند. کلاس مجرد با نام Parent از پکیج javafx.scene کلاس مبنای همه گره‌های والد است. این گره‌های والد دارای انواع زیر هستند:
  • گروه (Group) – یک گره گروه به گره جمعی گفته می‌شود که شامل لیستی از گره‌های فرزند است. هر زمان که یک گره گروه رندر شود، همه گره‌های فرزند آن نیز به ترتیب رندر می‌شوند. هر گونه تغییر، افکت و حالت که روی گره گروه اعمال شود، روی همه گره‌های فرزند آن نیز اعمال خواهد شد.
  • منطقه (Region) – این نوع از گره، کلاس مبنای همه گره‌های JavaFX بر اساس کنترل‌های UI مانند Chart، Pane و Control است.
  • وب‌ویو (WebView) – این گره به مدیریت موتور وب پرداخته و محتوای آن را نمایش می‌دهد.
• گره برگ (Leaf Node) – این گره بدون گره‌های فرزند است. برای نمونه Rectangle، Ellipse، Box، ImageView و MediaView نمونه‌هایی از گره‌های برگ هستند.

ارسال گره ریشه به صحنه گراف الزامی است. اگر گره گروه به عنوان ریشه ارسال شود، همه گره‌ها به آن صحنه اتصال می‌یابند و هر تغییری در اندازه صحنه روی لی‌آوت صحنه تأثیری نخواهد داشت.

ساخت یک اپلیکیشن JavaFX

برای ساخت اپلیکیشن JavaFX باید کلاس Application را وهله‌سازی کرده و متد مجرد ()start آن را پیاده‌سازی کنید. در این متد کد مورد نیاز اپلیکیشن JavaFX را می‌نویسیم.

کلاس Application

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

1public class JavafxSample extends Application {  
2   @Override     
3   public void start(Stage primaryStage) throws Exception { 
4      /* 
5      Code for JavaFX application. 
6      (Stage, scene, scene graph) 
7      */       
8   }         
9   public static void main(String args[]){           
10      launch(args);      
11   } 
12}

درون متد ()start برای ایجاد اپلیکیشن نمونه JavaFX باید مراحل زیر را انجام دهید.

• یک گراف صحنه با گره‌های لازم آماده سازید.
• یک صحنه با ابعاد لازم آماده کرده و گراف صحنه (گره ریشه گراف صحنه) را به آن اضافه کنید.
• یک استیج آماده کنید و صحنه را به اسیتج اضافه کرده و محتوای استیج را نمایش دهید.

آماده‌سازی گراف صحنه

در هر اپلیکیشن باید یک گراف صحنه با گره‌های لازم آماده کنیم. از آنجا که گره ریشه نخستین گره است، باید یک گره ریشه ایجاد کنید. برای گره ریشه می‌توانید از میان انواع Group، Region یا WebView یکی را انتخاب کنید. در ادامه هر کدام از این نوع‌ها را بررسی می‌کنیم.

گره Group

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

1Group root = new Group();

متد ()getChildren از کلاس Group یک شیء از کلاس ObservableList به دست می‌دهد که گره‌ها را نگهداری می‌کند. امکان بازیابی شیء و گره‌های مانند مثال زیر وجود دارد:

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

همچنین می‌توانید اشیای گره را به گروه اضافه کنید. به این منظور کافی است این اشیای گره را به کلاس Group و سازنده آن در زمان وهله‌سازی ارسال کنید. به مثال زیر توجه کنید:

1Group root = new Group(NodeObject);

گره Region

این کلاس مبنای همه کنترل‌های ui مبتنی بر گره JavaFX است. برای نمونه موارد زیر را بررسی کنید.

• Chart – این کلاس یک کلاس مبنا برای همه نمودارها است و به پکیج javafx.scene.chart تعلق دارد.
  • این کلاس دو زیرکلاس به نام‌های PieChart و XYChart دارد. این دو به نوبه خود زیرکلاس‌هایی به نام‌های AreaChart، BarChart، BubbleChart و غیره دارند که برای رسم انواع مختلفی از نمودارهای دوبعدی و دایره‌ای استفاده می‌شوند.
• Pane – منظور از Pane کلاس مبنایی است که همه پن‌های لی‌آوت مانند AnchorPane، BorderPane، DialogPane و غیره را شامل می‌شود. این کلاس به پکیجی به نام javafx.scene.layout تعلق دارد.
  • امکان استفاده از این کلاس‌ها برای درج لی‌آوت‌های از پیش ‌تعریف شده در اپلیکیشن وجود دارد.
• Control – این کلاس مبنای کنترل‌های رابط کاربری مانند Accordion، ButtonBar، ChoiceBox، ComboBoxBase، HTMLEditor و غیره است. این کلاس به پکیج javafx.scene.control تعلق دارد.

امکان استفاده از این کلاس‌ها برای طراحی عناصر مختلف رابط کاربری در اپلیکیشن وجود دارد. در یک گره Group می‌توانید هر کدام از کلاس‌های گفته شده در بالا را وهله‌سازی کرده و از آن‌ها به عنوان گره‌های روت استفاده کنید. به مثال زیر توجه کنید:

1//Creating a Stack Pane 
2StackPane pane = new StackPane();       
3       
4//Adding text area to the pane  
5ObservableList list = pane.getChildren(); 
6list.add(NodeObject);

WebView – این گره به مدیرت موتور وب و نمایش محتوای آن می‌پردازد. در نمودار زیر یک سلسله‌مراتب از کلاس گره را در JavaFX مشاهده می‌کنید.

آماده‌سازی صحنه

یک صحنه JavaFX به وسیله کلاس Scene از پکیج javafx.scene بازنمایی می‌شود. شما می‌توانید با وهله‌سازی این کلاس چنان که در قطعه کد زیر می‌بینید، یک صحنه ایجاد کنید. همچنین در زمان وهله‌سازی باید شیء روت را به سازنده کلاس صحنه ارسال کنید.

1Scene scene = new Scene(root);

ضمناً می‌توانید دو پارامتر از نوع Double نیز ارسال کنید که نشان‌دهنده عرض و ارتفاع صحنه است.

1Scene scene = new Scene(root، 600، 300);

آماده‌سازی استیج

اسیتج یک کانتینر در هر اپلیکیشن جاوا اف‌ایکس است که پنجره‌ای برای اپلیکیشن ارائه می‌کند. استیج با استفاده از کلاس Stage از پکیج javafx.stage نمایش می‌یابد. یک شیء این کلاس به عنوان پارامتر متد ()start کلاس Application ارسال می‌شود.

با استفاده از این شیء می‌توانید عملیات مختلفی روی استیج اجرا کنید. به عمده عملیات زیر روی استیج قابل اجرا هستند:

• تعیین عنوان استیج با استفاده از متد ()setTitle
• الصاق شیء صحنه با استفاده از متد ()setScene
• نمایش محتوای صحنه با استفاده از متد ()show (به مثال زیر توجه کنید)

1//Setting the title to Stage. 
2primaryStage.setTitle("Sample application"); 
3       
4//Setting the scene to Stage 
5primaryStage.setScene(scene); 
6       
7//Displaying the stage 
8primaryStage.show();

چرخه عمر اپلیکیشن JavaFX

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

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

علاوه بر این متدها، یک متد استاتیک به نام ()launch نیز وجود دارد که برای اجرای اپلیکیشن JavaFX استفاده می‌شود.

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

• یک وهله از کلاس اپلیکیشن ایجاد می‌شود.
• متد ()init فراخوانی می‌شود.
• متد ()start فراخوانی می‌شود.
• لانچر منتظر می‌ماند تا اپلیکیشن پایان یابد و متد ()stop را فراخوانی می‌کند.

خاتمه بخشیدن اپلیکیشن JavaFX

هنگامی که آخرین پنجره اپلیکیشن بسته شود، اپلیکیشن JavaFX به طور ضمنی خاتمه می‌یابد. شما می‌توانید با ارسال مقدار بولی False به متد استاتیک JavaFX این رفتار را عوض کنید. امکان خاتمه بخشیدن به اپلیکیشن JavaFX به صورت صریح با استفاده از متدهای ()Platform.exit یا System.exit(int) وجود دارد.

مثال یکم: ایجاد یک پنجره خالی

در این بخش با روش ایجاد یک اپلیکیشن نمونه JavaFX آشنا می‌شویم که یک پنجره خالی را نمایش می‌دهد. مراحل کار به صورت زیر است.

گام یک: ایجاد یک کلاس

یک کلاس جاوا ایجاد و کلاس Application را از پکیج javafx.application ارث‌بری کرده و متد ()start این کلاس را به صورت زیر پیاده‌سازی کنید:

1public class JavafxSample extends Application {  
2   @Override     
3   public void start(Stage primaryStage) throws Exception {      
4   }    
5}

گام دوم: ایجاد شیء گروه

در متد ()start یک شیء Group با وهله‌سازی از کلاس Group ایجاد کنید که به پکیج javafx.scene تعلق دارد:

1Group root = new Group();

گام سوم: ایجاد شیء صحنه

برای ایجاد یک شیء صحنه باید وهله‌ای از کلاسی به نام Scene متعلق به پکیج javafx.scene بسازید. شیء گروه روت را که در بخش قبل ساختیم را به این کلاس بفرستید.

علاوه بر شیء root می‌توانید دو پارامتر Double نیز ارسال کنید که ارتفاع و عرض صحنه را نمایش دهد و شیء گروه را نیز به صورت زیر ارسال کنید:

1Scene scene = new Scene(root،600، 300);

گام چهارم: تعیین عنوان استیج

امکان تعیین عنوان استیج با استفاده از متد ()setTitle کلاس Stage وجود دارد. primaryStage یک شیء استیج است که به عنوان پارامتر به متد start کلاس Scene ارسال می‌شود. با استفاده از شیء primaryStage می‌توانید عنوان صحنه را به صورت Sample Application تعیین کنید:

1primaryStage.setTitle("Sample Application");

گام پنجم: افزودن صحنه به استیج

اینک می‌توانید یک شیء Scene را با استفاده از متد ()setScene کلاسی به نام Stage به استیج اضافه کنید. به این منظور شیء صحنه آماده‌سازی شده در گام قبلی را با استفاده از متد فوق به صورت زیر اضافه می‌کنیم:

1primaryStage.setScene(scene);

گام ششم: نمایش محتوای استیج

برای نمایش محتوایی روی استیج باید از متد ()show کلاس Stage به صورت زیر بهره بگیرید:

1show() of the Stage

گام هفتم: اجرای اپلیکیشن

اپلیکیشن JavaFX را با فراخوانی متد استاتیک ()launch کلاس Application از متد main اجرا می‌کنیم:

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

کد مثال اول

برنامه زیر یک پنجره خالی JavaFX ایجاد می‌کند. این کد را در فایلی با نام JavafxSample.java ذخیره کنید:

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.scene.paint.Color; 
5import javafx.stage.Stage;  
6
7public class JavafxSample extends Application { 
8   @Override     
9   public void start(Stage primaryStage) throws Exception {            
10      //creating a Group object 
11      Group group = new Group(); 
12       
13      //Creating a Scene by passing the group object, height and width   
14      Scene scene = new Scene(group ,600, 300); 
15      
16      //setting color to the scene 
17      scene.setFill(Color.BROWN);  
18      
19      //Setting the title to Stage. 
20      primaryStage.setTitle("Sample Application"); 
21   
22      //Adding the scene to Stage 
23      primaryStage.setScene(scene); 
24       
25      //Displaying the contents of the stage 
26      primaryStage.show(); 
27   }    
28   public static void main(String args[]){          
29      launch(args);     
30   }         
31}

این فایل جاوا را کامپایل و از طریق «اعلان فرمان» (comman Prompt) با استفاده از دستور زیر اجرا کنید:

javac JavafxSample.java
java JavafxSample

با اجرای این فایل، برنامه فوق یک پنجره خالی JavaFX مانند زیر می‌سازد:

مثال دوم: رسم یک خط مستقیم

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

گام یکم: ایجاد یک کلاس

یک کلاس جاوا ایجاد کرده و آن را از کلاس Application مربوط به پکیج javafx.application ارث‌بری کرده و متد ()start کلاس را به صورت زیر پیاده‌سازی کنید.

1public class DrawingLine extends Application {
2   @Override     
3   public void start(Stage primaryStage) throws Exception {     
4   }    
5}

گام دوم: ایجاد یک خط

با وهله‌سازی از کلاس Line که به پکیج javafx.scene.shape تعلق دارد، می‌توانیم یک خط در JavaFX ایجاد کنیم. روش کار چنین است:

1//Creating a line object
2Line line = new Line();

گام سوم: تعیین مشخصه‌های خط

در این مرحله باید مختصات خط را روی صفحه X-Y با تعیین مشخصه‌های startX، startY، endX و endY و با استفاده از متدهای متناظر setter چنان که در کد زیر دیده می‌شود، تنظیم کنیم:

1line.setStartX(100.0); 
2line.setStartY(150.0); 
3line.setEndX(500.0); 
4line.setEndY(150.0);

گام چهارم: ایجاد یک شیء گروه

در متد ()start یک شیء گروه با وهله‌سازی از کلاس Group از پکیج javafx.scene ایجاد کنید. شیء Line را که در گام قبلی ساختیم به صورت پارامتر به سازنده کلاس Group ارسال کنید تا به گره اضافه شود.

1Group root = new Group(line);

گام پنجم: ایجاد شیء صحنه

با وهله‌سازی از کلاس Scene از پکیج javafx.scene می‌توانید یک صحنه جدید ایجاد کنید. شیء Group را که در گام قبلی ساختیم به این کلاس ارسال کنید. به علاوه شیء روت می‌تواند دو پارامتر از نوع Double نیز داشته باشد که نماینده عرض و ارتفاع صفحه است.

1Scene scene = new Scene(root،600، 300);

گام ششم: تعیین عنوان استیج

امکان تعیین عنوان استیج با استفاده از متد ()setTitle کلاس Stage وجود دارد. primaryStage یک شیء Stage است که به صورت پارامتر به متد start کلاس صحنه ارسال می‌شود. با استفاده از شیء primaryStage می‌توانید عنوان صحنه را به مانند کد زیر به صورت Sample Application تعیین کنید.

1primaryStage.setTitle("Sample Application");

گام هفتم: افزون صحنه به استیج

امکان افزودن شیء Scene به استیج با استفاده از متد ()setScene کلاس Stage وجود دارد. شیء Scene را که در گام‌های قبلی آماده کردیم با استفاده از این متد اضافه نمایید.

1primaryStage.setScene(scene);

گام هشتم: نمایش محتوای استیج

محتوای صحنه را با متد ()show کلاس Stage به صورت زیر نمایش می‌دهیم:

1primaryStage.show();

گام نهم: اجرای اپلیکیشن

اپلیکیشن JavaFX را با فراخوانی متد استاتیک ()launch از کلاس Application از متد main اجرا می‌کنیم.

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

کد مثال دوم

برنامه زیر شیوه ساخت یک خط مستقیم را با استفاده از JavaFX نشان می‌دهد. ای کد را در فایلی با نام JavafxSample.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.scene.shape.Line; 
5import javafx.stage.Stage;  
6
7public class DrawingLine extends Application{ 
8   @Override 
9   public void start(Stage stage) { 
10      //Creating a line object 
11      Line line = new Line(); 
12         
13      //Setting the properties to a line 
14      line.setStartX(100.0); 
15      line.setStartY(150.0); 
16      line.setEndX(500.0); 
17      line.setEndY(150.0); 
18         
19      //Creating a Group 
20      Group root = new Group(line); 
21         
22      //Creating a Scene 
23      Scene scene = new Scene(root, 600, 300); 
24         
25      //Setting title to the scene 
26      stage.setTitle("Sample application"); 
27         
28      //Adding the scene to the stage 
29      stage.setScene(scene); 
30         
31      //Displaying the contents of a scene 
32      stage.show(); 
33   }      
34   public static void main(String args[]){ 
35      launch(args); 
36   } 
37}

این فایل را کامپایل کرده و از طریق اعلان فرمان ویندوز با استفاده از دستورهای زیر اجرا کنید.

javac DrawingLine.java
java DrawingLine

با اجرای برنامه فوق یک پنجره JavaFX نمایش می‌یابد که یک خط مستقیم روی آن کشیده شده است.

مثال سوم: نمایش متن

امکان جاسازی متن در صحنه JavaFX نیز وجود دارد. در این مثال به بررسی روش انجام این کار می‌پردازیم. مراحل کار چنین است.

گام یکم: ایجاد یک کلاس

یک کلاس جاوا ایجاد کرده و آن را از کلاس Application پکیج javafx.application ارث‌بری کرده و متد ()start این کلاس را به صورت زیر پیاده‌سازی کنید:

1public class DrawingLine extends Application {  
2   @Override     
3   public void start(Stage primaryStage) throws Exception {     
4   } 
5}

گام دوم: جاسازی متن

امکان جاسازی متن در یک صحنه JavaFX با وهله‌سازی از کلاس Text پکیج javafx.scene.shape وجود دارد. برای وهله‌سازی این کلاس، متنی که باید جاسازی شود را در قالب رشته ارسال کنید. همچنین می‌توانید یک شیء Text را با استفاده از سازنده پیش‌فرض مانند زیر ایجاد کنید:

1//Creating a Text object
2Text text = new Text();

گام سوم: تعیین فونت

امکان تعیین فونت متن با استفاده از متد ()setFont کلاس Text وجود دارد. این متد یک شیء font به عنوان پارامتر می‌گیرد. فونت متن مفروض را مانند کد زیر برابر با 45 قرار می‌دهیم.

1//Setting font to the text
2text.setFont(new Font(45));

گام چهارم: تعیین موقعیت متن

امکان تعیین موقعیت متن روی صفحه X-Y با تعیین مختصات X و Y به وسیله متدهای setter متناظر ()setX و ()setY وجود دارد.

1//setting the position of the text
2text.setX(50);
3text.setY(150);

گام پنجم: تعیین متن برای اضافه شدن

امکان تعیین متنی که باید اضافه شود با استفاده از متد ()setText کلاس Text وجود دارد. این متد یک پارامتر String می‌گیرد که نشان‌دهنده متنی است که باید اضافه شود.

1text.setText("Welcome to Faradars ");

گام ششم: ایجاد یک گروه

در متد ()Start یک شی‌ء گروه با وهله‌سازی کلاس Group ایجاد می‌کنیم که به پکیج javafx.scene تعلق دارد. شیء Text که در گام قبلی ساختیم را به عنوان یک پارامتر به سازنده کلاس Group می‌فرستیم تا به گروه اضافه شود.

1Group root = new Group(text)

گام هفتم: ایجاد یک شیء صحنه

برای ایجاد یک صحنه کلاسی به نام Scene را که به پکیج javafx.scene تعلق دارد، وهله‌سازی می‌کنیم. سپس شیء گروه را که در گام قبلی ساختیم به این کلاس ارسال می‌کنیم. علاوه بر شیء روت می‌توان دو پارامتر Double نیز ارسال کرد که برای تعیین عرض و ارتفاع صحنه استفاده می‌شوند.

1Scene scene = new Scene(root،600، 300);

گام هشتم: تعیین عنوان استیج

امکان تعیین عنوان استیج با استفاده از متد ()setTitle کلاس Stage وجود دارد. primaryStage یک شیء Stage است که به صورت یک پارامتر به متد start کلاس Scene ارسال می‌شود. شیء primaryStage عنوان صحنه Sample Application را به صورت زیر تعیین می‌کند.

1primaryStage.setTitle("Sample Application");

گام نهم: افزودن صحنه به استیج

امکان افزودن شیء Scene به استیج با استفاده از متد ()setScene کلاس Stage وجود دارد. بنابراین شیء Scene را که در گام قبلی آماده‌ کردیم به صورت زیر اضافه می‌کنیم.

1primaryStage.setScene(scene);

گام دهم: نمایش محتوای استیج

محتوای صحنه را می‌توانید با استفاده از متد ()show کلاس Stage نمایش دهید.

1primaryStage.show();

گام یازدهم

اپلیکیشن JavaFX را با فراخوانی متد استاتیک ()launch کلاس اپلیکیشن از متد Main به صورت زیر اجرا می‌کنیم.

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

کد مثال سوم

در ادامه برنامه نمایش محتوای متنی با استفاده از JavaFX را مشاهده می‌کنید. این کد را در فایلی به نام DisplayingText.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.collections.ObservableList; 
3import javafx.scene.Group; 
4import javafx.scene.Scene; 
5import javafx.stage.Stage; 
6import javafx.scene.text.Font; 
7import javafx.scene.text.Text; 
8         
9public class DisplayingText extends Application { 
10   @Override 
11   public void start(Stage stage) {       
12      //Creating a Text object 
13      Text text = new Text(); 
14       
15      //Setting font to the text 
16      text.setFont(new Font(45)); 
17       
18      //setting the position of the text 
19      text.setX(50); 
20      text.setY(150);          
21      
22      //Setting the text to be added. 
23      text.setText("Welcome to Faradars "); 
24         
25      //Creating a Group object  
26      Group root = new Group(); 
27       
28      //Retrieving the observable list object 
29      ObservableList list = root.getChildren(); 
30       
31      //Setting the text object as a node to the group object 
32      list.add(text);       
33               
34      //Creating a scene object 
35      Scene scene = new Scene(root, 600, 300); 
36       
37      //Setting title to the Stage 
38      stage.setTitle("Sample Application"); 
39         
40      //Adding scene to the stage 
41      stage.setScene(scene); 
42         
43      //Displaying the contents of the stage 
44      stage.show(); 
45   }   
46   public static void main(String args[]){ 
47      launch(args); 
48   } 
49}

این کد را کامپایل کرده و از طریق اعلان فرمان با استفاده از دستورهای زیر اجرا کنید.

javac DisplayingText.java
java DisplayingText

با اجرای این برنامه، یک پنجره JavaFX ایجاد می‌شود که عبارت زیر را نمایش می‌دهد.

شکل‌های دوبعدی در JavaFX

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

شکل دوبعدی

به طور کلی شکل دوبعدی یک فیگور هندسی است که روی صفحه XY رسم می‌شود و می‌تواند شامل خط، مستطیل، دایره و غیره باشد. با استفاده از کتابخانه JavaFX می‌توان موارد زیر را رسم کرد:

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

هر کدام از شکل‌های دوبعدی فوق‌الذکر به وسیله یک کلاس نمایش می‌یابند و همه کلاس‌ها به پکیج javafx.scene.shape تعلق دارند. کلاس دارای نام یک کلاس مبنا برای همه شکل‌های دوبعدی در JavaFX محسوب می‌شود.

ایجاد شکل دوبعدی

برای ایجاد یک نمودار (chart) باید کارهای زیر را انجام دهیم.

• کلاس متناظر از شکل لازم را وهله‌سازی کنیم.
• مشخصه‌های شکل را تعیین کنیم.
• شیء شکل را به گروه اضافه کنید.

وهله‌سازی کلاس متناظر

برای ایجاد یک شکل دوبعدی، ابتدا باید کلاس متناظرش را وهله‌سازی کنید. برای نمونه اگر بخواهیم یک خط ایجاد کنیم باید وهله‌ای از کلاسی با نام Line را به مانند زیر بسازیم.

1Line line = new Line();

تعیین مشخصه‌های شکل

پس از وهله‌سازی از کلاس باید مشخصه‌های شکل را با استفاده از متدهای setter تعیین کنیم.

برای نمونه برای رسم یک خط باید مختصات x و y نقطه شروع و انتهای خط را ارسال کنیم. امکان تعیین این مقادیر با استفاده از متدهای setter متناظر به صورت زیر وجود دارد:

1//Setting the Properties of the Line
2line.setStartX(150.0f);
3line.setStartY(140.0f);
4line.setEndX(450.0f);
5line.setEndY(140.0f);

افزودن شیء شکل به گروه

در نهایت باید شیء شکل را با ارسال آن به صورت یک پارامتر سازنده به مانند زیر به گروه اضافه کنیم.

1//Creating a Group object
2Group root = new Group(line);

در جدول زیر، فهرستی از شکل‌های مختلف ارائه شده از سوی JavaFX را می‌بینید.

رسم شکل‌های بیشتر از طریق کلاس Path

در بخش قبل با شیوه رسم شکل‌های ساده از پیش‌تعریف شده با وهله‌سازی کلاس‌ها و تعیین پارامترهای متناظر آشنا شدیم. اما این شکل‌های از پیش تعریف‌شده برای ساخت شکل‌های پیچیده‌تر به جز شکل‌های مقدماتی که از سوی پکیج javafx.shape ارائه می‌شوند، کافی نیستند.

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

کلاس Path

JavaFX برای رسم چنین ساختارهای پیچیده‌ای یک کلاس به نام Path ارائه کرده است که خطوط کلی هندسی یک شکل را نمای می‌دهد. این شیء به یک لیست observable وصل می‌شود که عناصر مختلف Path مانند moveTo، LineTo، HlineTo، VlineTo، ArcTo، QuadCurveTo، CubicCurveTo در آن ذخیره می‌شود. این کلاس در زمان وهله‌سازی یک مسیر بر اساس عناصر ارائه شده می‌سازد. شما می‌توانید عناصر مسیر را در زمان ساخت یک وهله به این کلاس بدهید.

1Path myshape = new Path(pathElement1، pathElement2، pathElement3);

همچنین می‌توانید لیست observable را گرفته و همه عناصر مسیر را با استفاده از متد ()addAll اضافه کنید.

1Path myshape = new Path();
2myshape.getElements().addAll(pathElement1، pathElement2، pathElement3);

همچنین می‌توانید این عناصر را به صورت منفرد با استفاده از متد ()add نیز اضافه کنید.

1Path myshape = new Path();
2myshape.getElements().add(pathElement1);

عنصر Move to مسیر

عنصر Move to مسیر برای حرکت موقعیت کنونی مسیر به نقطه مطلوب استفاده می‌شود. این عنصر به طور کلی برای تعیین نقطه شروع رسم یک شکل استفاده می‌شود.

این عنصر با کلاسی به نام LineTo در پکیج javafx.scene.shape نمایش می‌یابد. این عنصر دو مشخصه از نوع Double به صورت زیر دارد:

• X – مختصات X نقطه‌ای است که خطی از موقعیت کنونی به آنجا رسم می‌شود.
• Y – مختصات Y نقطه‌ای است که خطی از موقعیت کنونی به آنجا رسم می‌شود.

امکان ساخت یک عنصر MoveTo با وهله‌سازی از کلاس MoveTo و ارسال مختصات X و Y نقطه جدید به صورت مثال زیر وجود دارد:

1MoveTo moveTo = new MoveTo(x، y);

اگر هیچ مقداری به سازنده ارسال نشود، نقطه جدید در مختصات (0،0) تنظیم می‌شود. همچنین می‌توان مقادیر مختصات x و y را با استفاده از متدهای setter متناظر به صورت زیر تنظیم کرد:

1setX(value);
2setY(value);

مثالی از رسم مسیر پیچیده

در این مثال با شیوه رسم شکل زیر با استفاده از کلاس‌های Path، MoveTo و Line آشنا می‌شویم.

کد زیر را در فایلی به نام ComplexShape.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.stage.Stage; 
5import javafx.scene.shape.LineTo; 
6import javafx.scene.shape.MoveTo; 
7import javafx.scene.shape.Path; 
8         
9public class ComplexShape extends Application { 
10   @Override 
11   public void start(Stage stage) { 
12      //Creating a Path 
13      Path path = new Path(); 
14       
15      //Moving to the starting point 
16      MoveTo moveTo = new MoveTo(108, 71); 
17        
18      //Creating 1st line 
19      LineTo line1 = new LineTo(321, 161);  
20       
21      //Creating 2nd line 
22      LineTo line2 = new LineTo(126,232);       
23       
24      //Creating 3rd line 
25      LineTo line3 = new LineTo(232,52);  
26       
27      //Creating 4th line 
28      LineTo line4 = new LineTo(269, 250);   
29       
30      //Creating 4th line 
31      LineTo line5 = new LineTo(108, 71);  
32       
33      //Adding all the elements to the path 
34      path.getElements().add(moveTo); 
35      path.getElements().addAll(line1, line2, line3, line4, line5);        
36         
37      //Creating a Group object  
38      Group root = new Group(path); 
39         
40      //Creating a scene object 
41      Scene scene = new Scene(root, 600, 300);  
42      
43      //Setting title to the Stage 
44      stage.setTitle("Drawing an arc through a path");
45      
46      //Adding scene to the stage 
47      stage.setScene(scene);
48      
49      //Displaying the contents of the stage 
50      stage.show();         
51   } 
52   public static void main(String args[]){ 
53      launch(args); 
54   } 
55}

فایل فوق را کامپایل کرده و با استفاده از اعلان فرمان و دستورهای زیر اجرا کنید:

javac ComplexShape.java
java ComplexShape

با اجرای این برنامه، یک پنجره JavaFX نمایش می‌یابد که یک ستاره را نمایش می‌دهد که مانند تصویر زیر است:

در جدول زیر عناصر مختلف مسیر را که از سوی JavaFX ارائه شد مشاهده می‌کنید. این کلاس‌ها در پکیج javafx.shape قرار دارند و از کلاس PathElement ارث‌بری می‌کنند.

مشخصه‌های شکل‌های دوبعدی

در مورد همه اَشکال دوبعدی می‌توانید از مشخصه‌های مختلف مانند fill، stroke، StrokeType و غیره استفاده کنید. مشخصه‌های مختلف شکل‌های دوبعدی به صورت زیر هستند.

• Stroke Type
• Stroke Width
• Stroke Fill
• Stroke
• Stroke Line
• Stroke Miter Limit
• Stroke Line Cap
• Smooth

عملیات روی شکل‌های دوبعدی

اگر بیش از یک شکل را به یک گروه اضافه کنیم، شکل نخست مانند تصویر زیر با شکل دوم همپوشانی پیدا می‌کند.

علاوه بر تبدیل‌ها (چرخش، مقیاس‌بندی، بازگردانی و غیره) و گذار (انیمیشن) امکان اجرای سه عملیات اتحاد (Union)، تفریق (Subtraction)، تقاطع (Intersection) زیر نیز روی شکل‌های دوبعدی وجود دارد.

متن در JavaFX

دقیقاً همانند شکل‌ها که در بخش قبل توضیح دادیم، امکان ایجاد هر نوع متنی نیز در JavaFX وجود دارد. گره متن به وسیله کلاس Text از پکیج javafx.scene.text ساخته می‌شود. این کلاس شامل چند مشخصه است که برای ایجاد متن در JavaFX و دستکاری ظاهر آن استفاده می‌شود. این کلاس همچنین از کلاس Shape ارث‌بری می‌کند که به پکیج javafx.scene.shape تعلق دارد.

از این رو علاوه بر مشخصه‌های متن مانند فونت، جهت‌گیری، فاصله‌بندی خط، متن و نظایر آن، مشخصه‌های کلی گره شکل از قبیل strokeFill، stroke، strokeWidth، strokeType و غیره را نیز به ارث می‌برد.

ایجاد گره متنی

از آنجا که کلاس Text از پکیج javafx.scene.text گره متنی را در JavaFX ارائه می‌کند، می‌توانید با ساخت وهله‌ای از این کلاس به روش زیر این گره را ایجاد کنید:

1Text text = new Text();

کلاس Text شامل مشخصه‌ای به نام text با نوع string است که متنی که ایجاد می‌شود را نمایندگی می‌کند. پس از وهله‌سازی از کلاس Text باید مقدار این مشخصه را با استفاده از متد ()setText مانند مثال زیر تعیین کنید.

1String text = "Hello how are you"
2Text.setText(text);

همچنین می‌توان موقعیت متن را با تغییر مقادیر مشخصه‌های x و y در متدهای setter متناظر به نام‌های ()setX و ()setY تنظیم کرد:

1text.setX(50);
2text.setY(50);

کد مثال ایجاد متن

برنامه زیر نمونه‌ای است که شیوه ایجاد گره متنی را در JavaFX نشان می‌دهد. این کد را در فایلی به نام TextExample.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene;
4import javafx.stage.Stage; 
5import javafx.scene.text.Text; 
6         
7public class TextExample extends Application { 
8   @Override 
9   public void start(Stage stage) {       
10      //Creating a Text object 
11      Text text = new Text();      
12      
13      //Setting the text to be added. 
14      text.setText("Hello how are you"); 
15       
16      //setting the position of the text 
17      text.setX(50); 
18      text.setY(50); 
19         
20      //Creating a Group object  
21      Group root = new Group(text);   
22               
23      //Creating a scene object 
24      Scene scene = new Scene(root, 600, 300);  
25      
26      //Setting title to the Stage 
27      stage.setTitle("Sample Application"); 
28         
29      //Adding scene to the stage 
30      stage.setScene(scene); 
31         
32      //Displaying the contents of the stage 
33      stage.show(); 
34   }      
35   public static void main(String args[]){ 
36      launch(args); 
37   } 
38}

فایل ذخیره شده جاوا را کامپایل کرده و از طریق اعلان فرمان ویندوز با دستورهای زیر اجرا کنید:

javac TextExample.java
java TextExample

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

تنظیم موقعیت و فونت متن

متن ایجاد شده توسط کلاس Text به طور پیش‌فرض دارای یک فونت و اندازه خاص و رنگ سیاه است. اما امکان تغییر اندازه فونت و رنگ متن با استفاده از متد ()setFont نیز وجود دارد. این متد یک شیء از کلاس Font می‌پذیرد. کلاس Font از پکیج javafx.scene.text برای تعریف فونت متن استفاده می‌شود. این کلاس شامل یک متد استاتیک به نام ()font است که چهار پارامتر به شرح زیر می‌گیرد.

• Family - این پارامتر از نوع string است و خانواده فونتی که برای متن استفاده خواهد شد را نشان می‌دهد.
• Weight - این مشخصه نشان‌دهنده وزن فونت است و 9 مقدار می‌پذیرد که به صورت FontWeight.BLACK، FontWeight.BOLD، FontWeight.EXTRA_BOLD، FontWeight.EXTRA_LIGHT، LIGHT، MEDIUM، NORMAL، SEMI_BOLD و THIN است.
• Posture – این مشخصه نشان‌دهنده حالت فونت (ایتالیک یا معمولی) است و دو مقدار FontPosture.REGULAR و FontPosture.ITALIC را می‌پذیرد.
• Size - این مشخصه از نوع Double است که اندازه فونت متن را نشان می‌دهد.

به این ترتیب می‌توانید با استفاده از دستوری مانند زیر یک متن با ظاهر سفارشی ایجاد کنید.

1text.setFont(Font.font("verdana"، FontWeight.BOLD، FontPosture.REGULAR، 20));

مثال تعیین فونت و اندازه متن

برنامه زیر مثالی است که شیوه تعیین فونت گره متنی را در JavaFX نشان می‌دهد. در این برنامه فونت را برابر با Verdana می‌گیریم و وزن آن را روی bold و حالتش را روی regular و اندازه‌اش را روی 20 تنظیم می‌کنیم. این کد را در فایلی به نام TextFontExample.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.stage.Stage; 
5import javafx.scene.text.Font; 
6import javafx.scene.text.FontPosture; 
7import javafx.scene.text.FontWeight; 
8import javafx.scene.text.Text; 
9         
10public class TextFontExample extends Application { 
11   @Override 
12   public void start(Stage stage) {       
13      //Creating a Text object 
14      Text text = new Text(); 
15        
16      //Setting font to the text 
17      text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20)); 
18       
19      //setting the position of the text
20      text.setX(50); 
21      text.setY(130);          
22      
23      //Setting the text to be added. 
24      text.setText("Hi how are you"); 
25         
26      //Creating a Group object  
27      Group root = new Group(text);   
28               
29      //Creating a scene object 
30      Scene scene = new Scene(root, 600, 300);  
31      
32      //Setting title to the Stage 
33      stage.setTitle("Setting Font to the text"); 
34         
35      //Adding scene to the stage 
36      stage.setScene(scene); 
37         
38      //Displaying the contents of the stage 
39      stage.show(); 
40   }      
41   public static void main(String args[]){ 
42      launch(args); 
43   } 
44}

این فایل جاوا را کامپایل کرده و با استفاده از دستورهای زیر در اعلان فرمان ویندوز اجرا کنید.

javac TextFontExample.java
java TextFontExample

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

استروک و رنگ

کلاس Text از کلاس Shape نیز ارث‌بری می‌کند. از این رو می‌توانید از javafx.scene.shape نیز استفاده کنید که استروک و رنگ گره متنی را تنظیم می‌کند. امکان تعیین رنگ متن با استفاده از متد ()setFill کلاس Shape به صورت زیر وجود دارد.

1text.setFill(Color.BEIGE);

به طور مشابه می‌توان رنگ استروک متن را نیز با استفاده از متد ()setStroke تنظیم کرد. همچنین عرض استروک می‌تواند با استفاده از متد ()setStrokeWidth به صورت زیر تنظیم شود.

1//Setting the color 
2text.setFill(Color.BROWN); 
3        
4//Setting the Stroke  
5text.setStrokeWidth(2); 
6       
7//Setting the stroke color 
8text.setStroke(Color.BLUE);

کد مثال استروک و رنگ متن

برنامه زیر مثالی است که شیوه تعیین رنگ متن و همچنین عرض و رنگ استروک آن را نشان می‌دهد. در این کد ما رنگ استروک را آبی، رنگ متن را قهوه‌ای و عرض استروک را 2 تنظیم می‌کنیم. این کد را در فایلی به نام StrokeExample.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.scene.paint.Color; 
5import javafx.stage.Stage; 
6import javafx.scene.text.Font; 
7import javafx.scene.text.FontPosture; 
8import javafx.scene.text.FontWeight; 
9import javafx.scene.text.Text; 
10         
11public class StrokeExample extends Application { 
12   @Override 
13   public void start(Stage stage) {       
14      //Creating a Text object 
15      Text text = new Text(); 
16       
17      //Setting font to the text 
18      text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 50)); 
19       
20      //setting the position of the text  
21      text.setX(50); 
22      text.setY(130);     
23       
24      //Setting the color 
25      text.setFill(Color.BROWN); 
26       
27      //Setting the Stroke  
28      text.setStrokeWidth(2); 
29      
30      // Setting the stroke color
31      text.setStroke(Color.BLUE);        
32      
33      //Setting the text to be added. 
34      text.setText("Hi how are you"); 
35         
36      //Creating a Group object  
37      Group root = new Group(text);   
38               
39      //Creating a scene object 
40      Scene scene = new Scene(root, 600, 300);  
41      
42      //Setting title to the Stage 
43      stage.setTitle("Setting font to the text"); 
44         
45      //Adding scene to the stage 
46      stage.setScene(scene); 
47         
48      //Displaying the contents of the stage 
49      stage.show(); 
50   }      
51   public static void main(String args[]){ 
52      launch(args); 
53   } 
54}

فایل فوق را کامپایل کرده و با وارد کردن دستورهای زیر در اعلان فرمان ویندوز اجرا کنید.

javac StrokeExample.java
java StrokeExample

با اجرای کد فوق، می‌بینید که یک پنجره JavaFX ایجاد می‌شود که متنی با رنگ و خصوصیات تعیین شده نمایش می‌دهد.

تزئین متن

امکان به‌کارگیری جلوه‌های تزیینی مختلف مانند خط میانی (strike through) روی متن‌ها در strike through وجود دارد. همچنین می‌توان با استفاده از متدهای کلاس Text یک متن را زیرخط‌دار کرد. برای درج خط میانی روی متن باید از متد ()setStrikethrough استفاده کنید. این متد یک مقدار بولی می‌پذیرد که با ارسال مقدار True به این متد یک خط از وسط متن کشیده می‌شود:

1//Striking through the text
2text1.setStrikethrough(true);

به طور مشابه، می‌توانید یک متن را با ارسال مقدار True به متد ()setUnderLine زیرخط‌دار کنید.

1//underlining the text
2text2.setUnderline(true);

کد مثال تزیین متن

برنامه زیر شیوه اعمال دکوراسیون‌هایی مانند زبر خطی و خط میانی را روی متن نشان می‌دهد؛ این کد را در فایلی به نام DecorationsExample.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.stage.Stage; 
5import javafx.scene.text.Font; 
6import javafx.scene.text.FontPosture;
7import javafx.scene.text.FontWeight; 
8import javafx.scene.text.Text; 
9         
10public class DecorationsExample extends Application { 
11   @Override 
12   public void start(Stage stage) {       
13      //Creating a Text_Example object 
14      Text text1 = new Text("Hi how are you");       
15      
16      //Setting font to the text 
17      text1.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
18      
19      //setting the position of the text 
20      text1.setX(50); 
21      text1.setY(75);     
22      
23      //Striking through the text 
24      text1.setStrikethrough(true); 
25       
26      //Creating a Text_Example object  
27      Text text2 = new Text("Welcome to Faradars ");     
28      
29      //Setting font to the text 
30      text2.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
31      
32      //setting the position of the text 
33      text2.setX(50); 
34      text2.setY(150);      
35      
36      //underlining the text     
37      text2.setUnderline(true);  
38         
39      //Creating a Group object  
40      Group root = new Group(text1, text2);   
41               
42      //Creating a scene object
43      Scene scene = new Scene(root, 600, 300);  
44      
45      //Setting title to the Stage 
46      stage.setTitle("Decorations Example"); 
47         
48      //Adding scene to the stage 
49      stage.setScene(scene); 
50         
51      //Displaying the contents of the stage 
52      stage.show(); 
53   }      
54   public static void main(String args[]){ 
55      launch(args); 
56   } 
57}

فایل فوق را کامپایل کرده و با استفاده از دستورهای زیر در اعلان فرمان ویندوز اجرا نمایید.

javac DecorationsExample.java
java DecorationsExample

با اجرای این برنامه، یک پنجره JavaFX مانند زیر ایجاد می‌شوید.

افکت‌های JavaFX

منظور از جلوه یا افکت عملی است که ظاهر گرافیک را بهبود بخشد. در JavaFX افکت به الگوریتمی گفته می‌شود که روی گره اعمال می‌شود تا ظاهر بصری آن را بهتر کند. مشخصه Effect کلاس Node برای تعیین این جلوه مورد استفاده قرار می‌گیرد.

در JavaFX می‌توان جلوه‌های مختلفی مانند bloom، blur و glow به متن بخشید. هر کدام از این جلوه‌ها به وسیله یک کلاس نمایش می‌یابند و همه این کلاس‌ها در پکیجی به نام javafx.scene.effect ارائه شده‌اند.

به‌کارگیری جلوه‌ها روی یک گره

امکان اعمال یک جلوه روی یک گره با استفاده از متد ()setEffect وجود دارد. برای این متد باید جلوه مورد نظر خود را به شیء ارسال کنید. به این منظور به موارد زیر نیاز خواهید داشت:

• یک گره ایجاد کنید.
• کلاس متناظر جلوه را که قرار است اعمال شود، وهله‌سازی کنید.
• مشخصه‌های جلوه را تعیین کنید.
• جلوه مورد نظر خود را با استفاده از متد ()setEffect اِعمال کنید.

ایجاد گره

قبل از هر چیز باید گره‌ها را با ایجاد وهله‌های از کلاس‌های متناظر در اپلیکیشن JavaFX ایجاد کنیم. برای نمونه اگر بخواهید جلوه Glow را روی تصویری در اپلیکیشن استفاده کنید، ابتدا باید یک گره تصویر با وهله‌سازی از کلاس Image ایجاد کرده و نمای آن را مانند زیر تنظیم کنید.

1//Creating an image 
2Image image = new Image("https://www.tutorialspoint.com/green/images/logo.png"); 
3       
4//Setting the image view 
5ImageView imageView = new ImageView(image); 
6
7//Setting the position of the image 
8imageView.setX(100); 
9imageView.setY(70);  
10
11//setting the fit height and width of the image view 
12imageView.setFitHeight(200);
13imageView.setFitWidth(400); 
14
15//Setting the preserve ratio of the image view 
16imageView.setPreserveRatio(true);

وهله‌سازی کلاس متناظر

در این مرحله جلوه‌ای که قرار است روی گره ایجاد شده استفاده شود را وهله‌سازی می‌کنیم. برای نمونه برای اعمال جلوه Glow باید وهله‌ای از کلاس Glow مانند مثال زیر بسازیم.

1Glow glow = new Glow();

تنظیم مشخصه‌های جلوه

پس از ساخت یک وهله از کلاس باید مشخصه‌های جلوه را با استفاده از متدهای setter تنظیم کنید. برای نمونه برای رسم یک کادر سه‌بعدی باید عرض، ارتفاع و عمق آن را ارسال کنید. امکان تعیین این مقادیر با استفاده از متدهای setter متناظر مانند زیر وجود دارد:

1//setting the level property
2glow.setLevel(0.9);

افزودن جلوه‌ها به گره

در نهایت می‌توانید جلوه‌های مورد نیاز را با استفاده از متد ()setEffect روی گره اعمال کنید. برای نمونه اگر می‌خواهید جلوه Glow را روی گره تصویر اعمال کنید، باید شیء کلاس Glow را به صورت زیر به این متد بفرستید:

1imageView.setEffect(glow);

جلوه‌های JavaFX

در جدول زیر فهرستی از جلوه‌های مختلف را می‌بینید که از سوی JavaFX ارائه شده‌اند. این کلاس‌ها در پکیج javafx.scene.effect قرار دارند.

تبدیل‌ها در JavaFX

تبدیل (Transformation) به معنی تغییر دادن گرافیک‌ها به چیز دیگر بر اساس برخی قواعد خاص است. انواع مختلفی از تبدیل‌ها مانند Translation، Scaling Up or Down، Rotation، Shearing و غیره وجود دارند.

با استفاده از JavaFX می‌توان تبدیل‌هایی مانند چرخش، مقیاس‌بندی و بازگردانی روی گره‌ها اجرا کرد. همه این تبدیل‌ها به وسیله کلاس‌های متناظر مختلف در پکیج javafx.scene.transform نمایندگی می‌شوند.

تبدیل‌های چندگانه

امکان اعمال تبدیل‌های چندگانه روی گره‌ها در JavaFX وجود دارد. برنامه زیر نمونه‌ای است که تبدیل‌های چرخش، مقیاس‌بندی و بازگردانی را به طور هم‌زمان روی یک مستطیل اعمال می‌کند. کد زیر را در فایلی به نام MultipleTransformationsExample.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.scene.paint.Color; 
5import javafx.scene.shape.Rectangle; 
6import javafx.scene.transform.Rotate; 
7import javafx.scene.transform.Scale; 
8import javafx.scene.transform.Translate; 
9import javafx.stage.Stage; 
10         
11public class MultipleTransformationsExample extends Application { 
12   @Override 
13   public void start(Stage stage) { 
14      //Drawing a Rectangle
15      Rectangle rectangle = new Rectangle(50, 50, 100, 75); 
16      
17      //Setting the color of the rectangle 
18      rectangle.setFill(Color.BURLYWOOD); 
19      
20      //Setting the stroke color of the rectangle 
21      rectangle.setStroke(Color.BLACK); 
22       
23      //creating the rotation transformation 
24      Rotate rotate = new Rotate(); 
25      
26      //Setting the angle for the rotation 
27      rotate.setAngle(20); 
28      
29      //Setting pivot points for the rotation 
30      rotate.setPivotX(150); 
31      rotate.setPivotY(225); 
32       
33      //Creating the scale transformation 
34      Scale scale = new Scale(); 
35      
36      //Setting the dimensions for the transformation 
37      scale.setX(1.5); 
38      scale.setY(1.5); 
39      
40      //Setting the pivot point for the transformation 
41      scale.setPivotX(300); 
42      scale.setPivotY(135); 
43       
44      //Creating the translation transformation 
45      Translate translate = new Translate();       
46      
47      //Setting the X,Y,Z coordinates to apply the translation 
48      translate.setX(250); 
49      translate.setY(0); 
50      translate.setZ(0); 
51       
52      //Adding all the transformations to the rectangle 
53      rectangle.getTransforms().addAll(rotate, scale, translate); 
54        
55      //Creating a Group object  
56      Group root = new Group(rectangle); 
57      
58      //Creating a scene object 
59      Scene scene = new Scene(root, 600, 300);  
60      
61      //Setting title to the Stage 
62      stage.setTitle("Multiple transformations"); 
63         
64      //Adding scene to the stage 
65      stage.setScene(scene); 
66         
67      //Displaying the contents of the stage 
68      stage.show(); 
69   }      
70   public static void main(String args[]){ 
71      launch(args); 
72   } 
73}

فایل فوق را کامپایل کرده و از طریق وارد کردن دستورهای زیر در اعلان فرمان ویندوز اجرا کنید.

javac MultipleTransformationsExample.java
java MultipleTransformationsExample

با اجرای برنامه فوق یک پنجره JavaFX مانند زیر ایجاد می‌شود.

تبدیل‌ها روی شکل‌های سه‌بعدی

امکان به‌کارگیری تبدیل‌ها روی اشیای سه‌بعدی وجود دارد. در ادامه مثالی از یک چرخش و بازگردانی یک کادر سه‌بعدی را می‌بینید. این کد را در فایلی به نام RotationExample3D.java ذخیره کنید.

1import javafx.application.Application; 
2import javafx.scene.Group; 
3import javafx.scene.Scene; 
4import javafx.scene.shape.Box; 
5import javafx.scene.transform.Rotate; 
6import javafx.scene.transform.Translate; 
7import javafx.stage.Stage; 
8         
9public class RotationExample3D extends Application { 
10   @Override 
11   public void start(Stage stage) { 
12      //Drawing a Box 
13      Box box = new Box();  
14      
15      //Setting the properties of the Box 
16      box.setWidth(150.0); 
17      box.setHeight(150.0);   
18      box.setDepth(150.0);       
19       
20      //Creating the translation transformation 
21      Translate translate = new Translate();       
22      translate.setX(400); 
23      translate.setY(150); 
24      translate.setZ(25);  
25       
26      Rotate rxBox = new Rotate(0, 0, 0, 0, Rotate.X_AXIS); 
27      Rotate ryBox = new Rotate(0, 0, 0, 0, Rotate.Y_AXIS); 
28      Rotate rzBox = new Rotate(0, 0, 0, 0, Rotate.Z_AXIS); 
29      rxBox.setAngle(30); 
30      ryBox.setAngle(50); 
31      rzBox.setAngle(30); 
32      box.getTransforms().addAll(translate,rxBox, ryBox, rzBox); 
33        
34      //Creating a Group object  
35      Group root = new Group(box); 
36         
37      //Creating a scene object 
38      Scene scene = new Scene(root, 600, 300);  
39      
40      //Setting title to the Stage 
41      stage.setTitle("Drawing a cylinder"); 
42         
43      //Adding scene to the stage 
44      stage.setScene(scene); 
45         
46      //Displaying the contents of the stage 
47      stage.show(); 
48   }      
49   public static void main(String args[]){ 
50      launch(args); 
51   } 
52}

فایل فوق را کامپایل کرده و با استفاده از دستورهای زیر در «اعلان فرمان» (CMD) ویندوز اجرا نمایید.

javac RotationExample3D.java 
java RotationExample3D

با اجرای این برنامه خروجی زیر را در یک پنجره JavaFX می‌بینید.

انیمیشن‌ها در JavaFX

به طور کلی انیمیت کردن یک شیء به معنی ایجاد توهم حرکت آن با نمایش سریع تصاویر پی‌درپی است. در JavaFX یک گره می‌تواند با تغییر دادن مشخصه‌هایش در طی زمان انیمیت شود. JavaFX یک پکیج به نام javafx.animation دارد که شامل کلاس‌هایی برای انیمیت کردن گره‌ها است. کلاس Animation یک کلاس مبنا برای همه انیمیشن‌های این پلتفرم محسوب می‌شود.

با استفاده از JavaFX می‌توان انیمیشن‌ها (ترانزیشن‌ها) یی مانند موارد زیر را اجرا کرد:

• Fade Transition
• Fill Transition
• Rotate Transition
• Scale Transition
• Stroke Transition
• Translate Transition
• Path Transition
• Sequential Transition
• Pause Transition
• Parallel Transition

همه این گذارها به وسیله کلاس‌های منفردی در پکیج javafx.animation نمایش می‌یابند. برای به‌کارگیری یک انیمیشن خاص روی گره باید مراحل زیر را اجرا کنید.

• یک گره با استفاده از گره متناظر بسازید.
• یک وهله از کلاس ترانزیشن متناظر که قرار است استفاده شود بسازید.
• مشخصه‌های ترانزیشن را تنظیم کنید.
• در نهایت با استفاده از متد ()Play کلاس animation ترانزیشن را اجرا نمایید.

در ادامه این بخش به بررسی مثال‌هایی از چند گذار ساده و ابتدایی می‌پردازیم.

گذار چرخش

در ادامه کد برنامه‌ای را می‌بینید که «گذار چرخش» (Rotate Transition) را در JavaFX اجرا می‌کند. این کد را در فایلی به نام RotateTransitionExample.java کپی و ذخیره کنید.

1import javafx.animation.RotateTransition; 
2import javafx.application.Application; 
3import static javafx.application.Application.launch; 
4import javafx.scene.Group; 
5import javafx.scene.Scene; 
6import javafx.scene.paint.Color; 
7import javafx.scene.shape.Polygon; 
8import javafx.stage.Stage; 
9import javafx.util.Duration; 
10         
11public class RotateTransitionExample extends Application { 
12   @Override 
13   public void start(Stage stage) {      
14      //Creating a hexagon 
15      Polygon hexagon = new Polygon();        
16      
17      //Adding coordinates to the hexagon 
18      hexagon.getPoints().addAll(new Double[]{        
19         200.0, 50.0, 
20         400.0, 50.0, 
21         450.0, 150.0,          
22         400.0, 250.0, 
23         200.0, 250.0,                   
24         150.0, 150.0, 
25      }); 
26      //Setting the fill color for the hexagon 
27      hexagon.setFill(Color.BLUE); 
28       
29      //Creating a rotate transition    
30      RotateTransition rotateTransition = new RotateTransition(); 
31      
32      //Setting the duration for the transition 
33      rotateTransition.setDuration(Duration.millis(1000)); 
34      
35      //Setting the node for the transition 
36      rotateTransition.setNode(hexagon);       
37      
38      //Setting the angle of the rotation 
39      rotateTransition.setByAngle(360); 
40      
41      //Setting the cycle count for the transition 
42      rotateTransition.setCycleCount(50); 
43      
44      //Setting auto reverse value to false 
45      rotateTransition.setAutoReverse(false); 
46      
47      //Playing the animation 
48      rotateTransition.play(); 
49         
50      //Creating a Group object   
51      Group root = new Group(hexagon); 
52         
53      //Creating a scene object 
54      Scene scene = new Scene(root, 600, 300);   
55      
56      //Setting title to the Stage 
57      stage.setTitle("Rotate transition example "); 
58         
59      //Adding scene to the stage 
60      stage.setScene(scene); 
61         
62      //Displaying the contents of the stage 
63      stage.show(); 
64   }      
65   public static void main(String args[]){ 
66      launch(args); 
67   } 
68}

فایل فوق را کامپایل کرده و با استفاده از دستورهای زیر در اعلان فرمان ویندوز اجرا نمایید.

javac RotateTransitionExample.java
java RotateTransitionExample

با اجرای برنامه فوق، یک پنجره JavaFX مانند تصویر زیر ایجاد می‌شود.

گذار مقیاس

این کد برنامه‌ای است که «گذار مقیاس» (Scale Transition) را در JavaFX نمایش می‌دهد. این کد را در فایلی به نام ScaleTransitionExample.java ذخیره کنید.

1import javafx.animation.ScaleTransition; 
2import javafx.application.Application; 
3import static javafx.application.Application.launch; 
4import javafx.scene.Group; 
5import javafx.scene.Scene; 
6import javafx.scene.paint.Color; 
7import javafx.scene.shape.Circle; 
8import javafx.stage.Stage; 
9import javafx.util.Duration; 
10         
11public class ScaleTransitionExample extends Application {  
12   @Override 
13   public void start(Stage stage) {      
14      //Drawing a Circle 
15      Circle circle = new Circle(); 
16      
17      //Setting the position of the circle 
18      circle.setCenterX(300.0f); 
19      circle.setCenterY(135.0f); 
20      
21      //Setting the radius of the circle 
22      circle.setRadius(50.0f); 
23      
24      //Setting the color of the circle 
25      circle.setFill(Color.BROWN); 
26      
27      //Setting the stroke width of the circle 
28      circle.setStrokeWidth(20); 
29       
30      //Creating scale Transition 
31      ScaleTransition scaleTransition = new ScaleTransition(); 
32      
33      //Setting the duration for the transition 
34      scaleTransition.setDuration(Duration.millis(1000)); 
35      
36      //Setting the node for the transition 
37      scaleTransition.setNode(circle); 
38      
39      //Setting the dimensions for scaling 
40      scaleTransition.setByY(1.5); 
41      scaleTransition.setByX(1.5); 
42      
43      //Setting the cycle count for the translation 
44      scaleTransition.setCycleCount(50); 
45      
46      //Setting auto reverse value to true 
47      scaleTransition.setAutoReverse(false); 
48      
49      //Playing the animation 
50      scaleTransition.play(); 
51         
52      //Creating a Group object  
53      Group root = new Group(circle); 
54         
55      //Creating a scene object  
56      Scene scene = new Scene(root, 600, 300); 
57      
58      //Setting title to the Stage 
59      stage.setTitle("Scale transition example"); 
60         
61      //Adding scene to the stage 
62      stage.setScene(scene); 
63         
64      //Displaying the contents of the stage 
65      stage.show(); 
66   }      
67   public static void main(String args[]){ 
68      launch(args); 
69   } 
70}

فایل فوق را کامپایل کرده و با وارد کردن دستورهای زیر در اعلان فرمان ویندوز آن را اجرا کنید.

javac ScaleTransitionExample.java
java ScaleTransitionExample

پس از اجرای برنامه با پنجره‌ای مانند زیر مواجه خواهید شد.

گذار بازگردانی

در ادامه کد برنامه‌ای را مشاهده می‌کنید که «گذار بازگردانی» (Translate Transition) را در JavaFX اجرا می‌کند. این کد را کپی کرده و در فایلی به نام TranslateTransitionExample.java ذخیره کنید.

1import javafx.animation.TranslateTransition; 
2import javafx.application.Application; 
3import javafx.scene.Group; 
4import javafx.scene.Scene; 
5import javafx.scene.paint.Color; 
6import javafx.scene.shape.Circle; 
7import javafx.stage.Stage; 
8import javafx.util.Duration; 
9         
10public class TranslateTransitionExample extends Application { 
11   @Override 
12   public void start(Stage stage) {  
13      //Drawing a Circle 
14      Circle circle = new Circle(); 
15      
16      //Setting the position of the circle 
17      circle.setCenterX(150.0f); 
18      circle.setCenterY(135.0f); 
19      
20      //Setting the radius of the circle 
21      circle.setRadius(100.0f); 
22      
23      //Setting the color of the circle 
24      circle.setFill(Color.BROWN); 
25      
26      //Setting the stroke width of the circle 
27      circle.setStrokeWidth(20); 
28       
29      //Creating Translate Transition 
30      TranslateTransition translateTransition = new TranslateTransition(); 
31      
32      //Setting the duration of the transition  
33      translateTransition.setDuration(Duration.millis(1000)); 
34      
35      //Setting the node for the transition 
36      translateTransition.setNode(circle); 
37      
38      //Setting the value of the transition along the x axis. 
39      translateTransition.setByX(300); 
40      
41      //Setting the cycle count for the transition 
42      translateTransition.setCycleCount(50); 
43      
44      //Setting auto reverse value to false 
45      translateTransition.setAutoReverse(false); 
46      
47      //Playing the animation 
48      translateTransition.play(); 
49         
50      //Creating a Group object  
51      Group root = new Group(circle); 
52         
53      //Creating a scene object 
54      Scene scene = new Scene(root, 600, 300);  
55      
56      //Setting title to the Stage 
57      stage.setTitle("Translate transition example"); 
58         
59      //Adding scene to the stage 
60      stage.setScene(scene); 
61         
62      //Displaying the contents of the stage 
63      stage.show(); 
64   }      
65   public static void main(String args[]){ 
66      launch(args); 
67   } 
68}