برنامه نویسی ۲۱۴۸ بازدید

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

فهرست مطالب این نوشته
اپلیکیشن‌ها در JavaFX

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

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

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

  • Adobe Flash
  • Microsoft Silverlight
  • JavaFX

ادوبی فلش

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

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

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

JavaFX

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

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 به زبان جاوا نوشته شده و برای همه زبان‌هایی که روی 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 صحبت خواهیم کرد.

نصب جاوا 8

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

آموزش JavaFX

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

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

آموزش JavaFX

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

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

آموزش JavaFX

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

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

آموزش JavaFX

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

آموزش JavaFX

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

آموزش JavaFX

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

آموزش JavaFX

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

آموزش JavaFX

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

پس از نصب جاوا باید متغیرهای مسیر را تنظیم کنید. با این فرض که جاوا در دایرکتوری 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 بروید و روی دکمه دانلود بزنید تا این نرم‌افزار روی سیستمتان دانلود شود.

آموزش JavaFX

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

آموزش JavaFX

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

آموزش JavaFX

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

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

آموزش JavaFX

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

آموزش JavaFX

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

آموزش JavaFX

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

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

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

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

آموزش JavaFX

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

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

آموزش JavaFX

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

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

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

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

آموزش JavaFX

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

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

آموزش JavaFX

نصب JavaFX در Eclipse

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

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

آموزش JavaFX

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

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

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

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

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

آموزش JavaFX

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

آموزش JavaFX

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

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

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

آموزش JavaFX

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

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

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

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

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

معماری JavaFX

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

  • 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 پشتیبانی می‌کنند را ببینید.

آموزش JavaFX

گراف صحنه

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

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

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

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

آموزش JavaFX

هر گره در گراف صحنه یک والد منفرد دارد و گرهی که هیچ والدی نداشته باشد به نام «گره ریشه» (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 از فرمت‌های زیر پشتیبانی می‌کند:

صوتی MP3

WAV

AIFF

ویدئویی FLV

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

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

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

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

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

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

آموزش JavaFX

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 را فراخوانی می‌کند که نمونه‌ای از آن را در مثال زیر می‌بینید:

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 باید مراحل زیر را انجام دهید.

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

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

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

گره Group

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

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);

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

Group 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 می‌توانید هر کدام از کلاس‌های گفته شده در بالا را وهله‌سازی کرده و از آن‌ها به عنوان گره‌های روت استفاده کنید. به مثال زیر توجه کنید:

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

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

آموزش JavaFX

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

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

Scene scene = new Scene(root);

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

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

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

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

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

  • تعیین عنوان استیج با استفاده از متد ()setTitle
  • الصاق شیء صحنه با استفاده از متد ()setScene
  • نمایش محتوای صحنه با استفاده از متد ()show (به مثال زیر توجه کنید)
//Setting the title to Stage. 
primaryStage.setTitle("Sample application"); 
       
//Setting the scene to Stage 
primaryStage.setScene(scene); 
       
//Displaying the stage 
primaryStage.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 این کلاس را به صورت زیر پیاده‌سازی کنید:

public class JavafxSample extends Application {  
   @Override     
   public void start(Stage primaryStage) throws Exception {      
   }    
}

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

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

Group root = new Group();

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

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

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

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

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

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

primaryStage.setTitle("Sample Application");

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

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

primaryStage.setScene(scene);

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

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

show() of the Stage

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

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

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

کد مثال اول

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage;  

public class JavafxSample extends Application { 
   @Override     
   public void start(Stage primaryStage) throws Exception {            
      //creating a Group object 
      Group group = new Group(); 
       
      //Creating a Scene by passing the group object, height and width   
      Scene scene = new Scene(group ,600, 300); 
      
      //setting color to the scene 
      scene.setFill(Color.BROWN);  
      
      //Setting the title to Stage. 
      primaryStage.setTitle("Sample Application"); 
   
      //Adding the scene to Stage 
      primaryStage.setScene(scene); 
       
      //Displaying the contents of the stage 
      primaryStage.show(); 
   }    
   public static void main(String args[]){          
      launch(args);     
   }         
}

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

javac JavafxSample.java
java JavafxSample

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

آموزش JavaFX

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

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

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

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

public class DrawingLine extends Application {
   @Override     
   public void start(Stage primaryStage) throws Exception {     
   }    
}

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

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

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

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

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

line.setStartX(100.0); 
line.setStartY(150.0); 
line.setEndX(500.0); 
line.setEndY(150.0);

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

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

Group root = new Group(line);

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

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

Scene scene = new Scene(group،600، 300);

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

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

primaryStage.setTitle("Sample Application");

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

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

primaryStage.setScene(scene);

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

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

primaryStage.show();

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

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

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

کد مثال دوم

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.shape.Line; 
import javafx.stage.Stage;  

public class DrawingLine extends Application{ 
   @Override 
   public void start(Stage stage) { 
      //Creating a line object 
      Line line = new Line(); 
         
      //Setting the properties to a line 
      line.setStartX(100.0); 
      line.setStartY(150.0); 
      line.setEndX(500.0); 
      line.setEndY(150.0); 
         
      //Creating a Group 
      Group root = new Group(line); 
         
      //Creating a Scene 
      Scene scene = new Scene(root, 600, 300); 
         
      //Setting title to the scene 
      stage.setTitle("Sample application"); 
         
      //Adding the scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of a scene 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac DrawingLine.java
java DrawingLine

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

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

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

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

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

public class DrawingLine extends Application {  
   @Override     
   public void start(Stage primaryStage) throws Exception {     
   } 
}

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

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

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

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

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

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

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

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

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

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

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

text.setText("Welcome to Faradars ");

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

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

Group root = new Group(text)

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

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

Scene scene = new Scene(group،600، 300);

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

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

primaryStage.setTitle("Sample Application");

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

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

primaryStage.setScene(scene);

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

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

primaryStage.show();

گام یازدهم

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

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

کد مثال سوم

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

import javafx.application.Application; 
import javafx.collections.ObservableList; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class DisplayingText extends Application { 
   @Override 
   public void start(Stage stage) {       
      //Creating a Text object 
      Text text = new Text(); 
       
      //Setting font to the text 
      text.setFont(new Font(45)); 
       
      //setting the position of the text 
      text.setX(50); 
      text.setY(150);          
      
      //Setting the text to be added. 
      text.setText("Welcome to Faradars "); 
         
      //Creating a Group object  
      Group root = new Group(); 
       
      //Retrieving the observable list object 
      ObservableList list = root.getChildren(); 
       
      //Setting the text object as a node to the group object 
      list.add(text);       
               
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
       
      //Setting title to the Stage 
      stage.setTitle("Sample Application"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }   
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac DisplayingText.java
java DisplayingText

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

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

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

شکل دوبعدی

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

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

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

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

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

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

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

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

Line line = new Line();

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

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

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

//Setting the Properties of the Line
line.setStartX(150.0f);
line.setStartY(140.0f);
line.setEndX(450.0f);
line.setEndY(140.0f);

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

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

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

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

شکل توضیح
Line خط به سازه‌ای هندسی گفته می‌شود که دو نقطه را به هم متصل می‌سازد. کلاس Line از پکیج javafx.scene.shape یک خط را روی صفحه XY نمایش می‌دهد.
Rectangle به طور کلی یک مستطیل به یک چهارضلعی گفته می‌شود که اضلاعش به صورت جفت به جفت موازی هم بوده و همه زوایای داخلی‌اش قائمه هستند. در JavaFX یک مستطیل به وسیله کلاس Rectangle متعلق به پکیج javafx.scene.shape نمایش می‌یابد.
مستطیل با گوشه‌های گرد در JavaFX می‌توان یک مستطیل را با گوشه‌های تیز یا با لبه‌های کمان‌دار ایجاد کرد.
Circle دایره یک شکل است که یک حلقه بسته را شکل می‌دهد و هر نقطه از آن فاصله یکسانی از مرکز دایره دارد. در JavaFX یک دایره به وسیله کلاس Circle نمایش می‌یابد. این کلاس به پکیج javafx.scene.shape تعلق دارد.
Ellipse بیضی به وسیله دو نقطه نمایش می‌یابد که کانون نام دارد. اگر هر نقطه را روی بیضی در نظر بگیرید، مجموع فاصله آن از نقاط کانونی یکسان است. اندازه بیضی به وسیله مجموع این دو مسافت‌ مشخص می‌شود. در JavaFX یک بیضی به وسیله کلاسی به نام Ellipse که به پکیج javafx.scene.shape تعلق دارد.
Polygon چندضلعی یک شکل بسته است که به وسیله قطعه‌های خطوط هم‌صفحه که سر به سر وصل می‌شوند ساخته می‌شود. یک چندضلعی در JavaFX به وسیله کلاس Polygon ساخته می‌شود که به پکیج javafx.scene.shape تعلق دارد.
پلی‌لاین پلی‌لاین همان چندضلعی است به جز این که پلی‌لاین در انتها بسته نمی‌شود. همچنین خط پیوسته از یک یا چند قطعه خط تشکیل می‌یابد. در JavaFX یک پلی‌لاین به وسیله کلاس Polygon ساخته می‌شود که به پکیج javafx.scene.shape تعلق دارد.
Cubic Curve یک منحنی درجه سوم در واقع یک منحنی پارامتری بزیه در صفحه XY است. در JavaFX منحنی درجه سوم با استفاده از کلاس CubicCurve متعلق به پکیج javafx.scene.shape است.
QuadCurve منحنی درجه دوم یک منحنی پارامتری بزیه در صفحه XY است. در JavaFX یک QuadCurve به وسیله کلاسی به نام QuadCurve متعلق به پکیج javafx.scene.shape نمایش می‌یابد.
Arc Arc یا کمان بخشی از یک منحنی است. در JavaFX کمان به وسیله منحنی درجه 2 نمایش می‌یابد. این شکل با استفاده از کلاس Arc متعلق به پکیج javafx.scene.shape رسم می‌شود. علاوه بر این موارد می‌توان انواع کمان‌های Open، Chord و Round را نیز رسم کرد.
SVGPath در JavaFX می‌توان تصاویر را با تفسیر مسیرهای SVG ساخت. این شکل‌ها به وسیله کلاس SVGPath متعلق به پکیج javafx.scene.shape نمایش می‌دهیم. این کلاس دارای یک مشخصه به نام content از نوع داده String است. این شکل نمایش‌دهنده رشته انکود شده به صورت مسیر SVG است که تصویر از روی آن ساخته می‌شود.

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

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

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

کلاس Path

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

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

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

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

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

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

عنصر Move to مسیر

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

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

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

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

MoveTo moveTo = new MoveTo(x، y);

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

setX(value);
setY(value);

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

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

آموزش JavaFX

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
         
public class ComplexShape extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Creating a Path 
      Path path = new Path(); 
       
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(108, 71); 
        
      //Creating 1st line 
      LineTo line1 = new LineTo(321, 161);  
       
      //Creating 2nd line 
      LineTo line2 = new LineTo(126,232);       
       
      //Creating 3rd line 
      LineTo line3 = new LineTo(232,52);  
       
      //Creating 4th line 
      LineTo line4 = new LineTo(269, 250);   
       
      //Creating 4th line 
      LineTo line5 = new LineTo(108, 71);  
       
      //Adding all the elements to the path 
      path.getElements().add(moveTo); 
      path.getElements().addAll(line1, line2, line3, line4, line5);        
         
      //Creating a Group object  
      Group root = new Group(path); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing an arc through a path");
      
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show();         
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac ComplexShape.java
java ComplexShape

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

آموزش JavaFX

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

شکل توضیح
LineTo عنصر مسیر LineTo برای رسم یک خط مستقیم به نقطه با مختصات تعیین شده از موقعیت کنونی استفاده می‌شود. این عنصر از طریق کلاس LineTo در پکیج javafx.scene.shape ارائه شده است.
HlineTo عنصر مسیر HlineTo برای رسم یک خط افقی به نقطه با مختصات تعیین شده از موقعیت کنونی استفاده می‌شود. این عنصر از طریق کلاس HLineTo در پکیج javafx.scene.shape ارائه شده است.
VLineTo عنصر مسیر خط عمودی است که برای رسم یک خط عمودی به نقطه با مختصات تعیین شده از موقعیت کنونی استفاده می‌شود. این عنصر از طریق کلاس VLineTo در پکیج javafx.scene.shape ارائه شده است.
QuadraticCurveTo عنصر مسیر منحنی درجه دوم است که برای رسم یک منحنی درجه دو به نقطه با مختصات تعیین شده از موقعیت کنونی استفاده می‌شود. این عنصر از طریق کلاس QuadraticCurveTo در پکیج javafx.scene.shape ارائه شده است.
CubicCurveTo عنصر مسیر منحنی درجه سوم است که برای رسم یک منحنی درجه سه به نقطه با مختصات تعیین شده از موقعیت کنونی استفاده می‌شود. این عنصر از طریق کلاس CubicCurveTo در پکیج javafx.scene.shape ارائه شده است.
ArcTo عنصر مسیر کمان است که برای رسم یک کمان در نقطه با مختصات تعیین شده از موقعیت کنونی استفاده می‌شود. این عنصر از طریق کلاس ArcTo در پکیج javafx.scene.shape ارائه شده است.

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

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

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

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

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

آموزش JavaFX

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

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

متن در JavaFX

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

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

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

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

Text text = new Text();

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

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

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

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

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

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene;
import javafx.stage.Stage; 
import javafx.scene.text.Text; 
         
public class TextExample extends Application { 
   @Override 
   public void start(Stage stage) {       
      //Creating a Text object 
      Text text = new Text();      
      
      //Setting the text to be added. 
      text.setText("Hello how are you"); 
       
      //setting the position of the text 
      text.setX(50); 
      text.setY(50); 
         
      //Creating a Group object  
      Group root = new Group(text);   
               
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Sample Application"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac TextExample.java
java TextExample

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

آموزش 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 است که اندازه فونت متن را نشان می‌دهد.

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

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

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

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontPosture; 
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text; 
         
public class TextFontExample extends Application { 
   @Override 
   public void start(Stage stage) {       
      //Creating a Text object 
      Text text = new Text(); 
        
      //Setting font to the text 
      text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20)); 
       
      //setting the position of the text
      text.setX(50); 
      text.setY(130);          
      
      //Setting the text to be added. 
      text.setText("Hi how are you"); 
         
      //Creating a Group object  
      Group root = new Group(text);   
               
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Setting Font to the text"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac TextFontExample.java
java TextFontExample

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

آموزش JavaFX

استروک و رنگ

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

text.setFill(Color.BEIGE);

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

//Setting the color 
text.setFill(Color.BROWN); 
        
//Setting the Stroke  
text.setStrokeWidth(2); 
       
//Setting the stroke color 
text.setStroke(Color.BLUE);

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

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontPosture; 
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text; 
         
public class StrokeExample extends Application { 
   @Override 
   public void start(Stage stage) {       
      //Creating a Text object 
      Text text = new Text(); 
       
      //Setting font to the text 
      text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 50)); 
       
      //setting the position of the text  
      text.setX(50); 
      text.setY(130);     
       
      //Setting the color 
      text.setFill(Color.BROWN); 
       
      //Setting the Stroke  
      text.setStrokeWidth(2); 
      
      // Setting the stroke color
      text.setStroke(Color.BLUE);        
      
      //Setting the text to be added. 
      text.setText("Hi how are you"); 
         
      //Creating a Group object  
      Group root = new Group(text);   
               
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Setting font to the text"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac StrokeExample.java
java StrokeExample

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

آموزش JavaFX

تزئین متن

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

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

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

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

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

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text; 
         
public class DecorationsExample extends Application { 
   @Override 
   public void start(Stage stage) {       
      //Creating a Text_Example object 
      Text text1 = new Text("Hi how are you");       
      
      //Setting font to the text 
      text1.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
      
      //setting the position of the text 
      text1.setX(50); 
      text1.setY(75);     
      
      //Striking through the text 
      text1.setStrikethrough(true); 
       
      //Creating a Text_Example object  
      Text text2 = new Text("Welcome to Faradars ");     
      
      //Setting font to the text 
      text2.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
      
      //setting the position of the text 
      text2.setX(50); 
      text2.setY(150);      
      
      //underlining the text     
      text2.setUnderline(true);  
         
      //Creating a Group object  
      Group root = new Group(text1, text2);   
               
      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Decorations Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac DecorationsExample.java
java DecorationsExample

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

آموزش JavaFX

افکت‌های JavaFX

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

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

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

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

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

ایجاد گره

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

//Creating an image 
Image image = new Image("https://www.tutorialspoint.com/green/images/logo.png"); 
       
//Setting the image view 
ImageView imageView = new ImageView(image); 

//Setting the position of the image 
imageView.setX(100); 
imageView.setY(70);  

//setting the fit height and width of the image view 
imageView.setFitHeight(200);
imageView.setFitWidth(400); 

//Setting the preserve ratio of the image view 
imageView.setPreserveRatio(true);

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

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

Glow glow = new Glow();

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

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

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

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

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

imageView.setEffect(glow);

جلوه‌های JavaFX

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

افکت توضیح
Color Adjust امکان تنظیم رنگ تصویر با به‌کارگیری جاوه تنظیم رنگ روی آن وجود دارد. این تنظیمات شامل موارد «طیف رنگ» (hue)، «اشباع رنگ» (saturation)، «روشنایی» (brightness) و «کنتراست» (contrast) روی هر پیکسل می‌شود. کلاس ColorAdjust از پکیج javafx.scene.effect این تنظیمات را در اختیار شما قرار می‌دهد.
Color Input جلوه Color Input همان خروجی را ایجاد می‌کند که گویی یک مستطیل رسم و آن را با رنگ خاصی پر کرده‌اید. برخلاف جلوه‌های دیگر اگر این جلوه روی هر گرهی اعمال شود، تنها یک کادر مستطیلی نمایش می‌دهد. این جلوه غالباً به عنوان یک ورودی برای جلوه‌های دیگر ارسال می‌شود.
Image Input جلوه Image Input در JavaFX یک تصویر را به صفحه JavaFX وارد می‌کند. این جلوه نیز مانند جلوه قبلی Color Input برای ارسال یک ناحیه مستطیلی رنگ‌آمیزی شده خاص به جلوه دیگر استفاده می‌شود. جلوه Image Input برای ارسال یک تصویر خاص به عنوان ورودی به جلوه دیگر مورد استفاده قرار می‌گیرد. کلاس ImageInput پکیج javafx.scene.effect برای به‌کارگیری این جلوه مورد استفاده قرار می‌گیرد.
Blend به طور کلی Blend به معنی آمیختن دو یا چند شکل یا ماده مختلف است. اگر این جلوه را به کار بگیریم، پیکسل‌های دو ورودی مختلف را می‌گیرد و یک خروجی ترکیبی در حالت آمیخته ارائه می‌کند. برای استفاده از این جلوه باید از کلاس Blend پکیج javafx.scene.effect استفاده کنید.
Bloom با به‌کارگیری جلوه Bloom در برخی بخش‌های گره آن را درخشان می‌کنیم. این جلوه در کلاس Bloom پکیج javafx.scene.effect ارائه شده است.
Glow Glow نیز درست مانند Bloom موجب می‌شود که تصویر ورودی بدرخشد. این جلوه موجب می‌شود که پیکسل‌های روشن تصویر، درخشش بیشتری بیابند کلاس Glow در پکیج javafx.scene.effect قرار دارد.
Box Blur با اعمال این جلوه روی یک گره آن، از شفافیت آن می‌کاهیم. Box Blur نوعی جلوه تار کردن است که از سوی JavaFX عرضه شده است. این جلوه در کلاس BoxBlur پکیج javafx.scene.effect قرار دارد.
GaussianBlur این جلوه نیز عمل تار کردن را روی گره‌ها در JavaFX انجام می‌دهد. تنها تفاوت این با جلوه قبلی آن است که جلوه Gaussian Blur یک کرنل کانولوشن گائوسی برای تار کردن گره به خدمت می‌گیرد.
Motion Blur این جلوه نیز مانند جلوه تار سازی گائوسی برای تار کردن گره‌ها در جاوا اف‌ایکس کاربرد دارد. این جلوه نیز از کرنل پیچشی گائوسی برای تولید جلوه تار کردن بهره می‌گیرد، اما تفاوت اینجا است که در این جلوه تارسازی با زاویه خاصی مورد استفاده قرار می‌گیرد. برای بهره‌گیری از این جلوه باید از کلاس MotionBlur پکیج javafx.scene.effect استفاده کنید.
Reflection با به‌کارگیری جلوه Reflection روی یک گره در JavaFX یک بازتاب از آن به انتهای گره اضافه می‌شود. برای استفاده از این جلوه از کلاس Reflection پکیج javafx.scene.effect بهره بگیرید.
Sepia tone جلوه Sepia tone موجب می‌شود که تصاویر به رنگ قهوه‌ای قرمزگونه‌ای درآیند که شبیه عکس‌های قدیمی است. برای استفاده از این جلوه باید از کلاس SepiaTone پکیج javafx.scene.effect استفاده کنید.
Shadow جلوه Shadow یک کپی از گره تعیین شده با لبه‌های تارشده ایجاد می‌کند. برای استفاده از آن کلاس Shadow پکیج javafx.scene.effect را وهله‌سازی کنید.
DropShadow با به‌کارگیری این جلوه روی گره، سایه‌ای در پشت گره ایجاد می‌شود. برای بهره‌مندی از این جلوه باید از کلاس DropShadow پکیج javafx.scene.effect استفاده کنید.
InnerShadow با به‌کارگیری این جلوه روی یک گره، سایه‌ای درون لبه‌های گره ایجاد می‌شود. برای استفاده از آن باید از کلاس InnerShadow پکیج javafx.scene.effect بهره بگیرید.
Lighting جلوه lighting برای شبیه‌سازی نور از یک منبع نوری استفاده می‌شود. انواع مختلفی از منبع‌های نوری به نام point، distant و spot وجود دارند. برای بهره‌گیری از این جلوه از کلاس Lighting پکیج javafx.scene.effect استفاده کنید.
Light.Distant با به‌کارگیری این جلوه روی گره، تابش نور را روی آن طوری شبیه‌سازی می‌کنیم که گویی نوری از منبع نوری دوردست به آن می‌تابد. این جلوه در کلاس Light.Distant پکیج javafx.scene.effect قرار دارد.
Light.Spot این جلوه موجب می‌شود که تابش نوری روی گره شبیه‌سازی شود که از یک منبع نقطه‌ای تولید شده است. این جلوه در کلاس Light.Spot پکیج javafx.scene.effect قرار دارد.
Point.Spot این جلوه موجب شبیه‌سازی نور نقطه‌ای روی یک گره می‌شود. برای استفاده از آن از کلاس Point.Spot پکیج javafx.scene.effect استفاده کنید.

تبدیل‌ها در JavaFX

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

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

تبدیل توضیح
چرخش در تبدیل چرخش، یک شیء را در زاویه خاص تتا (θ) می‌چرخانیم.
مقیاس‌بندی برای تغییر اندازه یک شیء از تبدیل scaling استفاده می‌کنیم.
بازگردانی این تبدیل موجب می‌شود که یک شیء به موقعیت متفاوتی در صفحه برود.
Shearing این تبدیلی است که شکل یک شیء را کج می‌کند.

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

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Rectangle; 
import javafx.scene.transform.Rotate; 
import javafx.scene.transform.Scale; 
import javafx.scene.transform.Translate; 
import javafx.stage.Stage; 
         
public class MultipleTransformationsExample extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing a Rectangle
      Rectangle rectangle = new Rectangle(50, 50, 100, 75); 
      
      //Setting the color of the rectangle 
      rectangle.setFill(Color.BURLYWOOD); 
      
      //Setting the stroke color of the rectangle 
      rectangle.setStroke(Color.BLACK); 
       
      //creating the rotation transformation 
      Rotate rotate = new Rotate(); 
      
      //Setting the angle for the rotation 
      rotate.setAngle(20); 
      
      //Setting pivot points for the rotation 
      rotate.setPivotX(150); 
      rotate.setPivotY(225); 
       
      //Creating the scale transformation 
      Scale scale = new Scale(); 
      
      //Setting the dimensions for the transformation 
      scale.setX(1.5); 
      scale.setY(1.5); 
      
      //Setting the pivot point for the transformation 
      scale.setPivotX(300); 
      scale.setPivotY(135); 
       
      //Creating the translation transformation 
      Translate translate = new Translate();       
      
      //Setting the X,Y,Z coordinates to apply the translation 
      translate.setX(250); 
      translate.setY(0); 
      translate.setZ(0); 
       
      //Adding all the transformations to the rectangle 
      rectangle.getTransforms().addAll(rotate, scale, translate); 
        
      //Creating a Group object  
      Group root = new Group(rectangle); 
      
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Multiple transformations"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac MultipleTransformationsExample.java
java MultipleTransformationsExample

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

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

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.shape.Box; 
import javafx.scene.transform.Rotate; 
import javafx.scene.transform.Translate; 
import javafx.stage.Stage; 
         
public class RotationExample3D extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing a Box 
      Box box = new Box();  
      
      //Setting the properties of the Box 
      box.setWidth(150.0); 
      box.setHeight(150.0);   
      box.setDepth(150.0);       
       
      //Creating the translation transformation 
      Translate translate = new Translate();       
      translate.setX(400); 
      translate.setY(150); 
      translate.setZ(25);  
       
      Rotate rxBox = new Rotate(0, 0, 0, 0, Rotate.X_AXIS); 
      Rotate ryBox = new Rotate(0, 0, 0, 0, Rotate.Y_AXIS); 
      Rotate rzBox = new Rotate(0, 0, 0, 0, Rotate.Z_AXIS); 
      rxBox.setAngle(30); 
      ryBox.setAngle(50); 
      rzBox.setAngle(30); 
      box.getTransforms().addAll(translate,rxBox, ryBox, rzBox); 
        
      //Creating a Group object  
      Group root = new Group(box); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a cylinder"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac RotationExample3D.java 
java RotationExample3D

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

آموزش 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 کپی و ذخیره کنید.

import javafx.animation.RotateTransition; 
import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Polygon; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class RotateTransitionExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Creating a hexagon 
      Polygon hexagon = new Polygon();        
      
      //Adding coordinates to the hexagon 
      hexagon.getPoints().addAll(new Double[]{        
         200.0, 50.0, 
         400.0, 50.0, 
         450.0, 150.0,          
         400.0, 250.0, 
         200.0, 250.0,                   
         150.0, 150.0, 
      }); 
      //Setting the fill color for the hexagon 
      hexagon.setFill(Color.BLUE); 
       
      //Creating a rotate transition    
      RotateTransition rotateTransition = new RotateTransition(); 
      
      //Setting the duration for the transition 
      rotateTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      rotateTransition.setNode(hexagon);       
      
      //Setting the angle of the rotation 
      rotateTransition.setByAngle(360); 
      
      //Setting the cycle count for the transition 
      rotateTransition.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      rotateTransition.setAutoReverse(false); 
      
      //Playing the animation 
      rotateTransition.play(); 
         
      //Creating a Group object   
      Group root = new Group(hexagon); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);   
      
      //Setting title to the Stage 
      stage.setTitle("Rotate transition example "); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac RotateTransitionExample.java
java RotateTransitionExample

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

آموزش JavaFX

گذار مقیاس

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

import javafx.animation.ScaleTransition; 
import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class ScaleTransitionExample extends Application {  
   @Override 
   public void start(Stage stage) {      
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(50.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20); 
       
      //Creating scale Transition 
      ScaleTransition scaleTransition = new ScaleTransition(); 
      
      //Setting the duration for the transition 
      scaleTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      scaleTransition.setNode(circle); 
      
      //Setting the dimensions for scaling 
      scaleTransition.setByY(1.5); 
      scaleTransition.setByX(1.5); 
      
      //Setting the cycle count for the translation 
      scaleTransition.setCycleCount(50); 
      
      //Setting auto reverse value to true 
      scaleTransition.setAutoReverse(false); 
      
      //Playing the animation 
      scaleTransition.play(); 
         
      //Creating a Group object  
      Group root = new Group(circle); 
         
      //Creating a scene object  
      Scene scene = new Scene(root, 600, 300); 
      
      //Setting title to the Stage 
      stage.setTitle("Scale transition example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac ScaleTransitionExample.java
java ScaleTransitionExample

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

آموزش JavaFX

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

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

import javafx.animation.TranslateTransition; 
import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class TranslateTransitionExample extends Application { 
   @Override 
   public void start(Stage stage) {  
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(150.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(100.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20); 
       
      //Creating Translate Transition 
      TranslateTransition translateTransition = new TranslateTransition(); 
      
      //Setting the duration of the transition  
      translateTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      translateTransition.setNode(circle); 
      
      //Setting the value of the transition along the x axis. 
      translateTransition.setByX(300); 
      
      //Setting the cycle count for the transition 
      translateTransition.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      translateTransition.setAutoReverse(false); 
      
      //Playing the animation 
      translateTransition.play(); 
         
      //Creating a Group object  
      Group root = new Group(circle); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Translate transition example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac TranslateTransitionExample.java
java TranslateTransitionExample

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

آموزش JavaFX

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

  • گذارهایی که روی خصوصیت‌های گره مانند Fade، Fill و Stroke تأثیر می‌گذارند.
  • گذارهایی که شامل بیش از یک گذار ابتدایی هستند مانند Sequential، Parallel و Pause
  • گذارهایی که شیء را در راستای گذار مسیر تعریف شده، بازگردانی می‌کنند.

رنگ‌ها در JavaFX

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

  • Uniform – در این الگو، رنگ به طور کاملاً یکنواخت روی شیء اعمال می‌شود.
  • Image Pattern – در این الگو یک منطقه از گره با الگوی تصویر پر می‌شود.
  • Gradient – این الگو موجب می‌شود که رنگ اعمال شده روی گره از یک رنگ به رنگ دیگر تغییر یابد. این الگو دو نوع به نام‌های «گرادیان خطی» (Linear Gradient) و «گرادیان شعاعی» (Radial Gradient) دار.

همه آن کلاس‌های گره که امکان اعمال رنگ را دارند، دارای متدهایی به نام ()setFill و ()setStroke هستند. به این ترتیب می‌توانید مقادیر رنگ گره‌ها و استرو‌ک‌هایشان را تنظیم کنید.

این متدها یک شیء از نوع Paint می‌پذیرند. از این رو برای ایجاد هر کدام از این نوع تصاویر، باید وهله‌ای از این کلاس‌ها ساخته و شیء را به عنوان پارامتر به این متدها ارسال کنید.

اعمال رنگ روی گره

برای اعمال یکنواخت رنگ روی گره‌ها باید یک شی‌ء از کلاس رنگ را به صورت زیر به متدهای ()setFill و ()setStroke ارسال کنید.

//Setting color to the text 
Color color = new Color.BEIGE 
text.setFill(color); 

//Setting color to the stroke 
Color color = new Color.DARKSLATEBLUE 
circle.setStroke(color);

در بلوک کد فوق، از متغیرهای استاتیک رده رنگ برای ایجاد شیء رنگ استفاده شده است. به همین ترتیب می‌توانید از مقادیر RGB یا استاندارد HSB یا هش‌کدهای وب مانند زیر استفاده کنید.

//creating color object by passing RGB values 
Color c = Color.rgb(0,0,255);   

//creating color object by passing HSB values
Color c = Color.hsb(270,1.0,1.0);  

//creating color object by passing the hash code for web 
Color c = Color.web("0x0000FF",1.0);

مثال استفاده از رنگ در JavaFX

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class ColorExample extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
       
      //Setting color to the circle 
      circle.setFill(Color.DARKRED);    
      
      //Setting the stroke width 
      circle.setStrokeWidth(3); 
      
      //Setting color to the stroke  
      circle.setStroke(Color.DARKSLATEBLUE);
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 50)); 
      
      //Setting the position of the text 
      text.setX(155); 
      text.setY(50); 
       
      //Setting color to the text 
      text.setFill(Color.BEIGE); 
      text.setStrokeWidth(2); 
      text.setStroke(Color.DARKSLATEBLUE); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Color Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

Javac ColorExample.java
java ColorExample

خروجی برنامه فوق چنین است:

آموزش JavaFX

به‌کارگیری الگوی تصویر روی گره‌ها

برای اعمال یک الگوی تصویری روی گره‌ها باید وهله‌ای از کلاس ImagePattern ایجاد کرده و شیء آن را به متدهای ()setFill یا ()setStroke بفرستید. سازنده این کلاس شش پارامتر به شرح زیر می‌گیرد:

  • Image – شیء تصویر است که با استفاده از آن یک الگو خواهیم ساخت.
  • X و y – متغیرهای از نوع Double که نشان‌دهنده مختصات x و y مبدأ مستطیل anchor است.
  • height و width – متغیرهای Double که نشان‌دهنده ارتفاع و عرض تصویری است که برای ایجاد الگو مورد استفاده قرار می‌گیرد.
  • isProportional – این یک متغیر بولی است و با تعیین آن روی مقدار True، مکان‌های آغاز و پایان به صورت تناسبی تعیین می‌شوند.
ImagePattern radialGradient = new ImagePattern(dots، 20، 20، 40، 40، false);

مثالی از کاربرد الگوی تصویری

در این بخش مثالی را مشاهده می‌کنید که شیوه اعمال الگوی تصویری را روی گره‌های JavaFX نمایش می‌دهد. در این مثال یک گره دایره و یک گره متنی ایجاد می‌کنیم و الگوی تصویر را روی آن‌ها مورد استفاده قرار می‌دهیم. کد زیر را در فایلی به نام ImagePatternExample.java ذخیره کنید.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.image.Image; 

import javafx.scene.paint.Color; 
import javafx.scene.paint.ImagePattern; 
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class ImagePatternExample extends Application { 
   @Override 
   public void start(Stage stage) {           
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
       
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 50)); 
      
      //Setting the position of the text
      text.setX(155); 
      text.setY(50); 
       
      //Setting the image pattern 
      String link = "https://encrypted-tbn1.gstatic.com" 
         + "/images?q=tbn:ANd9GcRQub4GvEezKMsiIf67U" 
         + "rOxSzQuQ9zl5ysnjRn87VOC8tAdgmAJjcwZ2qM";       
      
      Image image = new Image(link); 
      ImagePattern radialGradient = new ImagePattern(image, 20, 20, 40, 40, false); 
       
      //Setting the linear gradient to the circle and text 
      circle.setFill(radialGradient); 
      text.setFill(radialGradient); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Image pattern Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

Javac ImagePatternExample.java
java ImagePatternExample

خروجی برنامه فوق، تصویری مانند زیر خواهد بود:

اعمال الگوی گرادیان خطی

برای اعمال الگوی گرادیان خطی روی گره‌ها باید وهله‌ای از کلاس LinearGradient ایجاد کرده و شیء آن را به متدهای ()setFill و ()setStroke ارسال کنید. سازنده این کلاس پارامترهایی به شرح زیر می‌گیرد.

  • startX، startY – این مشخصه‌های از نوع Double مختصات X و Y نقطه شروع گرادیان را مشخص می‌سازند.
  • endX، endY – این مشخصه‌های از نوع Double مختصات X و Y نقطه انتهای گرادیان را تعیین می‌کنند.
  • cycleMethod – این ارگمان شیوه اتصال مناطق بیرون از گرادیان رنگی را مشخص می‌کند که به وسیله نقاط آغاز و پایان تعریف می‌شود و باید پر شود.
  • proportional – این یک مقدار بولی است و در صورتی که روی مقدار True تنظیم شود، مکان‌های آغاز و پایان به تناسب تنظیم می‌شوند.
  • Stops – این آرگومان تعداد نقاط گام رنگی را در راستای خط گرادیان مشخص می‌سازد.
//Setting the linear gradient 
Stop[] stops = new Stop[] { 
   new Stop(0, Color.DARKSLATEBLUE),  
   new Stop(1, Color.DARKRED)
};  
LinearGradient linearGradient = 
   new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);

مثالی از کاربرد گرادیان خطی

در این بخش مثالی را ملاحظه می‌کنید که شیوه اعمال الگوی گرادیان خطی را روی گره‌های JavaFX نشان می‌دهد. در این مثال دو شیء دایره و متن را ایجاد کرده و گرادیان خطی را روی آن‌ها اعمال می‌کنیم. کد زیر را در فایلی به نام LinearGradientExample.java ذخیره کنید.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 

import javafx.scene.paint.Color; 
import javafx.scene.paint.CycleMethod; 
import javafx.scene.paint.LinearGradient; 
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class LinearGradientExample extends Application { 
   @Override 
   public void start(Stage stage) {           
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f);  
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 55)); 
      
      //Setting the position of the text 
      text.setX(140); 
      text.setY(50); 
       
      //Setting the linear gradient 
      Stop[] stops = new Stop[] { 
         new Stop(0, Color.DARKSLATEBLUE),  
         new Stop(1, Color.DARKRED)
      };  
      LinearGradient linearGradient = 
         new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops); 
       
      //Setting the linear gradient to the circle and text 
      circle.setFill(linearGradient); 
      text.setFill(linearGradient); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Linear Gradient Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

Javac LinearGradientExample.java
java LinearGradientExample

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

اعمال الگوی گرادیان شعاعی

برای به‌کارگیری الگوی گرادیان شعاعی روی گره‌ها باید وهله‌ای از کلاس GradientPattern ایجاد کرده و شیء آن را به متدهای ()setFill و ()setStroke ارسال کنید. سازنده این کلاس چند پارامتر به شرح زیر می‌گیرد.

  • startX و startY – این مشخصه‌های از نوع Double مختصات X و Y نقطه شروع گرادیان را تعیین می‌کنند.
  • endX و endY – این مشخصه‌های از نوع Double مختصات X و Y نقطه انتهای گرادیان را تعیین می‌کنند.
  • cycleMethod – این ارگمان شیوه تعریف نقاط ابتدا و انتها و همچنین رنگ‌آمیزی مناطق خارج از کران گرادیان رنگی را مشخص می‌کند.
  • proportional – در صورتی که این مقدار بولی روی مقدار True تنظیم شود، مکان‌های آغاز و پایان به صورت تناسبی تعیین می‌شوند.
  • Stops – این ارگمان تعداد نقاط گام رنگی را در راستای خط گرادیان مشخص می‌سازد.
//Setting the radial gradient 
Stop[] stops = new Stop[] { 
   new Stop(0.0, Color.WHITE),  
   new Stop(0.3, Color.RED), 
   new Stop(1.0, Color.DARKRED) 
};        

RadialGradient radialGradient = 
   new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);

مثالی از کاربرد گرادیان شعاعی

در این بخش مثالی آر ملاحظه می‌کنید که کاربرد الگوی گرادیان شعاعی را روی گره‌های JavaFX نشان می‌دهد. در این مثال ما یک گره دایره و یک گره متن ایجاد کرده و این الگو را روی هر دوی آن‌ها اعمال می‌کنیم. کد زیر را در فایلی به نام RadialGradientExample.java ذخیره کنید.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 

import javafx.scene.paint.Color; 
import javafx.scene.paint.CycleMethod; 
import javafx.scene.paint.RadialGradient;  
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text;   

public class RadialGradientExample extends Application {  
   @Override 
   public void start(Stage stage) { 
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f);  
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 50)); 
      
      //Setting the position of the text 
      text.setX(155); 
      text.setY(50);  
      
      //Setting the radial gradient 
      Stop[] stops = new Stop[] { 
         new Stop(0.0, Color.WHITE),  
         new Stop(0.3, Color.RED), 
         new Stop(1.0, Color.DARKRED) 
      };        
      RadialGradient radialGradient = 
         new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);  
      
      //Setting the radial gradient to the circle and text 
      circle.setFill(radialGradient); 
      text.setFill(radialGradient);  
      
      //Creating a Group object  
      Group root = new Group(circle, text);  
      
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
      
      //Setting title to the Stage 
      stage.setTitle("Radial Gradient Example");  
      
      //Adding scene to the stage 
      stage.setScene(scene);  
      
      //Displaying the contents of the stage 
      stage.show(); 
   }
   public static void main(String args[]) { 
      launch(args); 
   } 
}

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

Javac RadialGradientExample.java
java RadialGradientExample

نتیجه اجرای این برنامه، ساخت پنجره‌ای مانند زیر است:

تصاویر در JavaFX

امکان بارگذاری و دستکاری تصاویر با استفاده از کلاس‌های ارائه شده در پکیج‌های javafx.scene.image وجود دارد. JavaFX از فرمت‌های تصویری Bmp، Gif، Jpeg و Png پشتیبانی می‌کند. در این بخش از راهنمای آموزش JavaFX با شیوه بارگذاری تصاویر در این فریمورک، شیوه نمایش یک تصویر در نماهای مختلف و روش دستکاری پیکسل‌های یک تصویر آشنا خواهیم شد.

بارگذاری تصویر

امکان بارگذاری تصاویر در JavaFX از طریق ساخت وهله‌های از کلاس Image از پکیج javafx.scene.image وجود دارد. موارد زیاد باید به سازنده این کلاس ارسال شوند.

  • یک شیء InputStream از تصویری که قرار است بارگذاری شود و یا
  • یک متغیر رشته‌ای از URL مربوط به تصویری که قرار است بارگذاری شود.
//Passing FileInputStream object as a parameter 
FileInputStream inputstream = new FileInputStream("C:\\images\\image.jpg"); 
Image image = new Image(inputstream); 
         
//Loading image from URL 
//Image image = new Image(new FileInputStream("url for the image));

شما پس از بارگذاری تصویر، می‌توانید با ساخت وهله‌ای از کلاس ImageView و ارسال تصویر به سازنده آن مانند مثال زیر، تصویر یک نما را تنظیم کنید:

ImageView imageView = new ImageView(image);

مثالی از بارگذاری تصویر

در این بخش مثالی را می‌بینید که روش بارگذاری تصویر در JavaFX و تنظیم آن روی یک نما را نشان می‌دهد. به این منظور باید کد زیر را در فایلی به نام ImageExample.java ذخیره کنید.

import java.io.FileInputStream; 
import java.io.FileNotFoundException; 
import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;  
import javafx.stage.Stage;  

public class ImageExample extends Application {  
   @Override 
   public void start(Stage stage) throws FileNotFoundException {         
      //Creating an image 
      Image image = new Image(new FileInputStream("path of the image"));  
      
      //Setting the image view 
      ImageView imageView = new ImageView(image); 
      
      //Setting the position of the image 
      imageView.setX(50); 
      imageView.setY(25); 
      
      //setting the fit height and width of the image view 
      imageView.setFitHeight(455); 
      imageView.setFitWidth(500); 
      
      //Setting the preserve ratio of the image view 
      imageView.setPreserveRatio(true);  
      
      //Creating a Group object  
      Group root = new Group(imageView);  
      
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 500);  
      
      //Setting title to the Stage 
      stage.setTitle("Loading an image");  
      
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   }  
   public static void main(String args[]) { 
      launch(args); 
   } 
}

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

Javac ImageExample.java
java ImageExample

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

نماهای مختلف از یک تصویر

امکان تنظیم نماهای مختلف با یک تصویر در صحنه واحد وجود دارد. برنامه زیر مثالی است که شیوه تنظیم نماهای مختلف برای یک تصویر را در صحنه واحدی در JavaFX نشان می‌دهد. این کد را در فایلی به نام MultipleViews.java ذخیره کنید.

import java.io.FileInputStream; 
import java.io.FileNotFoundException; 
import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.image.Image;  
import javafx.scene.image.ImageView; 
import javafx.stage.Stage;  

public class MultipleViews extends Application {  
   @Override 
   public void start(Stage stage) throws FileNotFoundException {         
      //Creating an image 
      Image image = new Image(new FileInputStream("file path"));  
      
      //Setting the image view 1 
      ImageView imageView1 = new ImageView(image); 
      
      //Setting the position of the image 
      imageView1.setX(50); 
      imageView1.setY(25); 
      
      //setting the fit height and width of the image view 
      imageView1.setFitHeight(300); 
      imageView1.setFitWidth(250);         
      
      //Setting the preserve ratio of the image view 
      imageView1.setPreserveRatio(true); 
         
      //Setting the image view 2 
      ImageView imageView2 = new ImageView(image);
      
      //Setting the position of the image 
      imageView2.setX(350); 
      imageView2.setY(25); 
      
      //setting the fit height and width of the image view 
      imageView2.setFitHeight(150); 
      imageView2.setFitWidth(250);          
      
      //Setting the preserve ratio of the image view 
      imageView2.setPreserveRatio(true); 
         
      //Setting the image view 3 
      ImageView imageView3 = new ImageView(image);  
      
      //Setting the position of the image 
      imageView3.setX(350); 
      imageView3.setY(200); 
      
      //setting the fit height and width of the image view 
      imageView3.setFitHeight(100); 
      imageView3.setFitWidth(100);         
      
      //Setting the preserve ratio of the image view 
      imageView3.setPreserveRatio(true);  
      
      //Creating a Group object  
      Group root = new Group(imageView1, imageView2, imageView3);  
      
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 400);  
      
      //Setting title to the Stage 
      stage.setTitle("Multiple views of an image");  
      
      //Adding scene to the stage 
      stage.setScene(scene);  
      
      //Displaying the contents of the stage
      stage.show(); 
   }  
   public static void main(String args[]) { 
      launch(args); 
   } 
}

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

Javac MultipleViews.java
java MultipleViews

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

نوشتن پیکسل‌ها

JavaFX کلاس‌هایی به نام PixelReader و PixelWriter برای نوشتن پیکسل‌های تصویر ارائه کرده است. کلاس WritableImage نیز برای ساخت تصاویر قابل نوشتن استفاده می‌شود. در ادامه مثالی را ملاحظه می‌کنید که شیوه خواندن و نوشتن پیکسل‌های یک تصویر را نمایش می‌دهد. در این مثال یک مقدار رنگی را از یک تصویر خوانده و آن را تیره‌تر می‌کنیم. به این منظور کد زیر را در فایلی به نام WritingPixelsExample.java ذخیره کنید.

import java.io.FileInputStream; 
import java.io.FileNotFoundException;  
import javafx.application.Application; 

import javafx.scene.Group;  
import javafx.scene.Scene; 

import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.image.PixelReader; 
import javafx.scene.image.PixelWriter; 
import javafx.scene.image.WritableImage; 

import javafx.scene.paint.Color; 
import javafx.stage.Stage;  

public class WritingPixelsExample extends Application {  
   @Override 
   public void start(Stage stage) throws FileNotFoundException {         
      //Creating an image 
      Image image = new Image(new FileInputStream("C:\\images\\logo.jpg")); 
      int width = (int)image.getWidth(); 
      int height = (int)image.getHeight(); 
         
      //Creating a writable image 
      WritableImage wImage = new WritableImage(width, height); 
         
      //Reading color from the loaded image 
      PixelReader pixelReader = image.getPixelReader(); 
      
      //getting the pixel writer 
      PixelWriter writer = wImage.getPixelWriter();           
      
      //Reading the color of the image 
      for(int y = 0; y < height; y++) { 
         for(int x = 0; x < width; x++) { 
            //Retrieving the color of the pixel of the loaded image   
            Color color = pixelReader.getColor(x, y); 
              
            //Setting the color to the writable image 
            writer.setColor(x, y, color.darker());              
         }     
      }      
      //Setting the view for the writable image 
      ImageView imageView = new ImageView(wImage); 
              
      //Creating a Group object  
      Group root = new Group(imageView);  
            
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 500);  
            
      //Setting title to the Stage 
      stage.setTitle("Writing pixels ");  
            
      //Adding scene to the stage 
      stage.setScene(scene);  
            
      //Displaying the contents of the stage 
      stage.show();  
   }
   public static void main(String args[]) { 
      launch(args); 
   } 
}

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

Javac WritingPixelsExample.java
java WritingPixelsExample

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

آموزش JavaFX

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

در بخش‌های قبلی این آموزش JavaFX با شیوه رسم شکل‌های دوبعدی روی صفحه XY آشنا شدیم. علاوه بر این شکل‌های دوبعدی، در این بخش با شیوه رسم شکل‌های سه‌بعدی نیز آشنا خواهیم شد.

شکل سه‌بعدی

شکل سه‌بعدی به طور کلی یک فیگور هندسی است که می‌تواند روی صفحه XYZ رسم شود. این موارد شامل استوانه (Cylinder)، کره (Sphere) و مکعب (Box) می‌شوند.

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

ایجاد شکل سه‌بعدی

برای ایجاد یک شکل سه‌بعدی باید موارد زیر را انجام دهید.

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

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

برای ساخت یک شکل سه‌بعدی، قبل از هر چیز باید یک وهله از کلاس مربوطه بسازیم. برای نمونه اگر بخواهیم یک مکعب بسازیم، باید وهله‌ای از کلاس Box را مانند زیر ایجاد کنیم:

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

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

//Setting the properties of the Box
box.setWidth(200.0);
box.setHeight(400.0);
box.setDepth(200.0);

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

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

//Creating a Group object
Group root = new Group(box);

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

شکل توضیح
Box یک شکل سه‌بعدی مکعبی است که دارای عرض، ارتفاع و عمق است. در JavaFX یک مکعب سه‌بعدی به وسیله کلاس Box رسم می‌شود که به پکیج javafx.scene.shape تعلق دارد. برای ساخت یک گره Box باید وهله‌ای از این کلاس ایجاد کنید. این کلاس سه مشخصه از نوع Double دارد.
  • Width – عرض باکس است.
  • Height – ارتفاع باکس است.
  • Depth – عمق باکس است.
Cylinder سیلندر یا استوانه یک جسم بسته است که دو قاعده موازی هم و یک سطح منحنی دارد. هر استوانه با دو عدد یعنی شعاع دایره قاعده و همچنین ارتفاع مشخص می‌شود. در JavaFX استوانه به وسیله کلاسی به نام Cylinder در پکیج javafx.scene.shape نمایش می‌یابد. با وهله‌سازی از این کلاس می‌توانید یک گره استوانه در JavaFX بسازید که دو مشخصه از نوع Double دارد.
  • Height – ارتفاع استوانه است.
  • Radius – شعاع دایره قاعده استوانه است.
Sphere کره به وسیله مجموعه‌ای از نقاطی تعریف می‌شود که از یک نقطه واحد به نام مرکز کره، فاصله یکسانی دارند. این مسافت به وسیله فاصله r نمایش می‌یابد که شعاع کره نامیده می‌شود. در JavaFX کره با استفاده از کلاس Sphere از پکیج javafx.scene.shape نمایش می‌یابد و برای ساخت کره باید وهله‌ای از این کلاس بسازیم. این کلاس یک مشخصه به نام rauids دارد که نوع آن Double است و شعاع کره را نشان می‌دهد.

مشخصه‌های اشیای سه‌بعدی

همه اشیای سه‌بعدی مشخصه‌هایی مانند Cull Face، Drawing Mode، Material و غیره دارند که می‌توانید آن‌ها را تنظیم کنید. در این بخش با مشخصه‌های اشیای سه‌بعدی در javaFX آشنا خواهیم شد.

Cull Face

به طور کلی culling به فرایند حذف بخش‌های با جهت‌گیری نامناسب یک شکل که در ناحیه نما قابل مشاهده نیست گفته می‌شود. مشخصه Cull Face از نوع CullFace است و وجه پشتی یک شکل سه‌بعدی را نشان می‌دهد. امکان تنظیم Cull Face یک شکل با استفاده از متد ()setCullFace به صورت زیر وجود دارد:

box.setCullFace(CullFace.NONE);

نوع استروک شکل می‌تواند به یکی از اشکال زیر باشد:

  • None – در این حالت هیچ نوع culling اجرا نمی‌شود.
  • Front – در این حالت چندضلعی‌های وجه روبرویی حذف می‌شوند.
  • Back – در این حالت چندضلعی‌های وجه پشتی شکل حذف می‌شوند.

به طور پیش‌فرض عملیات cull face روی وجه پشتی یک شکل سه‌بعدی اجرا می‌شود.

مثالی از Cull Face

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.shape.CullFace; 
import javafx.stage.Stage; 
import javafx.scene.shape.Sphere; 
         
public class SphereCullFace extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing Sphere1 
      Sphere sphere1 = new Sphere();
      
      //Setting the radius of the Sphere 
      sphere1.setRadius(50.0);   
      
      //Setting the position of the sphere 
      sphere1.setTranslateX(100); 
      sphere1.setTranslateY(150); 
      
      //setting the cull face of the sphere to front 
      sphere1.setCullFace(CullFace.FRONT); 
       
      //Drawing Sphere2 
      Sphere sphere2 = new Sphere(); 
      
      //Setting the radius of the Sphere 
      sphere2.setRadius(50.0);   
      
      //Setting the position of the sphere 
      sphere2.setTranslateX(300);  
      sphere2.setTranslateY(150); 
      
      //Setting the cull face of the sphere to back 
      sphere2.setCullFace(CullFace.BACK); 
             
      //Drawing Sphere3 
      Sphere sphere3 = new Sphere(); 
      
      //Setting the radius of the Sphere 
      sphere3.setRadius(50.0);   
      
      //Setting the position of the sphere 
      sphere3.setTranslateX(500); 
      sphere3.setTranslateY(150); 
      
      //Setting the cull face of the sphere to none 
      sphere2.setCullFace(CullFace.NONE);          
       
      //Creating a Group object  
      Group root = new Group(sphere1, sphere2, sphere3); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage
      stage.setTitle("Drawing a Sphere"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac SphereCullFace.java
java SphereCullFace

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

حالت‌های رسم

«حالت رسم» (Drawing Mode) یک مشخصه از نوع DrawMode است و حالت رسم یک شکل سه‌بعدی را نشان می‌دهد. امکان انتخاب از بین حالات رسم مختلف با استفاده از متد ()setDrawMode وجود دارد.

box.setDrawMode(DrawMode.FILL);

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

  • Fill – در این حالت یک شکل سه‌بعدی رسم شده و داخل آن پر می‌شود.
  • Line – در این حالت یک شکل سه‌بعدی با استفاده از خطوط رسم می‌شود.

به طور پیش‌فرض حالت رسم شکل‌های سه‌بعدی روی حالت Fill است.

مثالی از انتخاب حالت رسم

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.PerspectiveCamera; 
import javafx.scene.Scene;  
import javafx.scene.shape.Box; 
import javafx.scene.shape.DrawMode; 
import javafx.stage.Stage; 
         
public class BoxDrawMode extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing a Box 
      Box box1 = new Box(); 
      
      //Setting the properties of the Box 
      box1.setWidth(100.0); 
      box1.setHeight(100.0);   
      box1.setDepth(100.0); 
      
      //Setting the position of the box 
      box1.setTranslateX(200); 
      box1.setTranslateY(150); 
      box1.setTranslateZ(0);
      
      //Setting the drawing mode of the box 
      box1.setDrawMode(DrawMode.LINE); 
       
      //Drawing a Box 
      Box box2 = new Box(); 
      
      //Setting the properties of the Box 
      box2.setWidth(100.0); 
      box2.setHeight(100.0);   
      box2.setDepth(100.0); 
      
      //Setting the position of the box 
      box2.setTranslateX(450); //450 
      box2.setTranslateY(150);//150 
      box2.setTranslateZ(300); 
  
      //Setting the drawing mode of the box 
      box2.setDrawMode(DrawMode.FILL);     
         
      //Creating a Group object   
      Group root = new Group(box1, box2); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
       
      //Setting camera 
      PerspectiveCamera camera = new PerspectiveCamera(false); 
      camera.setTranslateX(0); 
      camera.setTranslateY(0); 
      camera.setTranslateZ(0); 
      scene.setCamera(camera);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a Box"); 
         
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac BoxDrawMode.java
java BoxDrawMode

با اجرای این برنامه، یک پنجره JavaFX ظاهر می‌شود که به ترتیب دو باکس با حالت‌های رسم Fill و Line نمایش می‌دهد.

آموزش JavaFX

Material

مشخصه cull Face نوعی برابر با Material دارد و برای انتخاب جنس سطح یک شکل سه‌بعدی استفاده می‌شود. جنس یک شکل سه‌بعدی با استفاده از متد ()setCullFace به صورت زیر تعیین می‌شود.

cylinder.setMaterial(material);

چنان که پیش‌تر برای این متد اشاره کردیم، می‌توانید یک شیء از نوع Material را به آن بفرستید. کلاس PhongMaterial از پکیج javafx.scene.paint یک زیرکلاس از این کلاس است و 7 مشخصه دارد که جنس سایه‌خورده Phong را نمایش می‌دهد. امکان اعمال این نوع از جنس‌ها روی سطح یک شکل سه‌بعدی با استفاده از متدهای setter هر کدام از مشخصه‌ها وجود دارد. در این بخش فهرستی از انواع جنس‌های موجود در JavaFX را می‌بینید.

  • bumpMap – این جنس یک نقشه نرمال را نشان می‌دهد که به صورت یک تصویر RGB ذخیره می‌شود.
  • diffuseMap – این نوع یک نقشه دیفیوز را نشان می‌دهد.
  • selfIlluminationMap – این نوع یک نقشه خود-روشن از این PhongMaterial را نمایش می‌‌دهد.
  • specularMap – این نوع یک نقشه صیقلی از این PhongMaterial را نمایش می‌دهد.
  • diffuseColor – این نوع یک رنگ دیفیوز از PhongMaterial را نمایش می‌دهد.
  • specularColor – این نوع رنگ صیقلی از این PhongMaterial را نشان می‌دهد.
  • specularPower – این نوع یک توان صیقلی از PhongMaterial را نشان می‌دهد.

به طور پیش‌فرض جنس یک شکل سه‌بعدی یک PhongMaterial است که دارای رنگ دیفیوز خاکستری روشن است.

مثال از تعیین جنس شکل سه‌بعدی

در این بخش مثالی را می‌بینید که شیوه اعمال جنس‌های مختلف را روی سطوح شکل‌های سه‌بعدی نشان می‌دهد. این کد را در فایلی به نام CylinderMaterials.java ذخیره کنید.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.PerspectiveCamera; 
import javafx.scene.Scene; 
import javafx.scene.image.Image; 
import javafx.scene.paint.Color; 
import javafx.scene.paint.PhongMaterial; 
import javafx.scene.shape.Cylinder; 
import javafx.stage.Stage;

public class CylinderMaterials extends Application {  
   @Override 
   public void start(Stage stage) { 
      //Drawing Cylinder1 
      Cylinder cylinder1 = new Cylinder();         
   
      //Setting the properties of the Cylinder 
      cylinder1.setHeight(130.0f); 
      cylinder1.setRadius(30.0f);   
     
      //Setting the position of the Cylinder 
      cylinder1.setTranslateX(100); 
      cylinder1.setTranslateY(75); 
        
      //Preparing the phong material of type bump map  
      PhongMaterial material1 = new PhongMaterial();  
      material1.setBumpMap(new Image
         ("http://www.tutorialspoint.com/images/tplogo.gif"));   
      
      //Setting the bump map material to Cylinder1 
      cylinder1.setMaterial(material1);    
       
      //Drawing Cylinder2 
      Cylinder cylinder2 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder2.setHeight(130.0f); 
      cylinder2.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder2.setTranslateX(200); 
      cylinder2.setTranslateY(75); 
       
      //Preparing the phong material of type diffuse map 
      PhongMaterial material2 = new PhongMaterial();
      material2.setDiffuseMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif")); 
      
      //Setting the diffuse map material to Cylinder2 
      cylinder2.setMaterial(material2);         
       
      //Drawing Cylinder3 
      Cylinder cylinder3 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder3.setHeight(130.0f); 
      cylinder3.setRadius(30.0f);   
  
      //Setting the position of the Cylinder 
      cylinder3.setTranslateX(300); 
      cylinder3.setTranslateY(75); 
       
      //Preparing the phong material of type Self Illumination Map 
      PhongMaterial material3 = new PhongMaterial();  
      material3.setSelfIlluminationMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif"));  
      
      //Setting the Self Illumination Map material to Cylinder3 
      cylinder3.setMaterial(material3);  
       
      //Drawing Cylinder4 
      Cylinder cylinder4 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder4.setHeight(130.0f); 
      cylinder4.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder4.setTranslateX(400); 
      cylinder4.setTranslateY(75); 
       
      //Preparing the phong material of type Specular Map  
      PhongMaterial material4 = new PhongMaterial();  
      material4.setSpecularMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif")); 
      
      //Setting the Specular Map material to Cylinder4 
      cylinder4.setMaterial(material4);  
       
      //Drawing Cylinder5 
      Cylinder cylinder5 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder5.setHeight(130.0f); 
      cylinder5.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder5.setTranslateX(100); 
      cylinder5.setTranslateY(300); 
       
      //Preparing the phong material of type diffuse color 
      PhongMaterial material5 = new PhongMaterial();  
      material5.setDiffuseColor(Color.BLANCHEDALMOND); 
      
      //Setting the diffuse color material to Cylinder5 
      cylinder5.setMaterial(material5);   
       
      //Drawing Cylinder6  
      Cylinder cylinder6 = new Cylinder();         
      
      //Setting the properties of the Cylinder 
      cylinder6.setHeight(130.0f); 
      cylinder6.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder6.setTranslateX(200); 
      cylinder6.setTranslateY(300); 
       
      //Preparing the phong material of type specular color 
      PhongMaterial material6 = new PhongMaterial();  
      
      //setting the specular color map to the material 
      material6.setSpecularColor(Color.BLANCHEDALMOND); 
      
      //Setting the specular color material to Cylinder6 
      cylinder6.setMaterial(material6);    
       
      //Drawing Cylinder7 
      Cylinder cylinder7 = new Cylinder();
      
      //Setting the properties of the Cylinder 
      cylinder7.setHeight(130.0f); 
      cylinder7.setRadius(30.0f);   
      
      //Setting the position of the Cylinder 
      cylinder7.setTranslateX(300); 
      cylinder7.setTranslateY(300); 
       
      //Preparing the phong material of type Specular Power 
      PhongMaterial material7 = new PhongMaterial();  
      material7.setSpecularPower(0.1); 
      
      //Setting the Specular Power material to the Cylinder 
      cylinder7.setMaterial(material7);         
      
      //Creating a Group object  
      Group root = new Group(cylinder1 ,cylinder2, cylinder3, 
      cylinder4, cylinder5, cylinder6, cylinder7); 
          
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 400); 
       
      //Setting camera 
      PerspectiveCamera camera = new PerspectiveCamera(false); 
      camera.setTranslateX(0); 
      camera.setTranslateY(0); 
      camera.setTranslateZ(-10); 
      scene.setCamera(camera); 
       
      //Setting title to the Stage 
      stage.setTitle("Drawing a cylinder"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

Javac CylinderMaterials.java
java CylinderMaterials

با اجرای این برنامه یک پنجره JavaFX ایجاد می‌شود که به ترتیب 7 استوانه با جنس‌های Bump Map، Diffuse Map، Self-Illumination Map، Specular Map، Diffuse Color، Specular Color و (BLANCHEDALMOND) Specular Power نمایش می‌دهد.

مدیریت رویداد در JavaFX

در JavaFX می‌توانیم یک اپلیکیشن GUI، وب‌اپلیکیشن و اپلیکیشن‌های گرافیکی توسعه بدهیم. در این اپلیکیشن‌ها هرزمان که کاربر با گره‌های اپلیکیشن تعاملی داشته باشد، یک «رویداد» (Event) رخ می‌دهد.

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

انواع رویدادها

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

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

رویدادها در JavaFX

JavaFX از مدیریت طیف گسترده‌ای از رویدادها پشتیبانی می‌کند. کلاس Event پکیج javafx.event یک کلاس مبنا برای یک رویداد است. یک وهله از هر زیرکلاس این کلاس یک رویداد است. چنان که اشاره کردیم JavaFX طیف متنوعی از رویدادها را مدیریت می‌کند که برخی از آن‌ها را در لیست زیر می‌بینید:

  • رویدادهای ماوس – این یک رویداد ورودی است که وقتی ماوس کلیک کند، رخ می‌دهد و توسط کلاس MouseEvent نمایش می‌یابد. این کلاس شامل اکشن‌هایی مانند کلیک شدن ماوس، فشرده شدن کلید ماوس، آزاد شدن کلید ماوس، جابجایی ماوس، ورود ماوس روی منطقه مشخص، خروج کرسر ماوس از منطقه هدف و غیره است.
  • رویداد کلید – این یک رویداد ورودی است که وقوع فشرده شدن یک کلید کیبرد را نشان می‌دهد و از کلاس KeyEvent استفاده می‌کند. این کلاس شامل اکشن‌هایی مانند فشرده شدن کلید، آزاد شدن کلید، زده شدن کلید و غیره است.
  • رویداد کشیدن – این نیز یک رویداد ورودی است که در زمان کشیده شدن ماوس رخ می‌دهد و با کلاس DragEvent نمایندگی می‌شود. این کلاس شامل اکشن‌هایی مانند ورود به حالت کشیدن، آزاد شدن از حالت کشیدن، ورود به منطقه کشیدن، خروج از منطقه کشیدن، کشیدن روی چیز دیگر و غیره است.
  • رویداد پنجره – این رویداد به کارهای نمایش/پنهان شدن پنجره مربوط است. این رویداد با کلاس WindowEvent نمایندگی می‌شود و شامل اکشن‌هایی مانند پنهان شدن پنجره، نمایش پنجره و غیره است.

مدیریت رویداد

مدیریت رویداد به سازوکاری گفته می‌شود که رویدادها را کنترل می‌کند و در مورد کاری که باید در ادامه انجام شود تصمیم می‌گیرد. این سازوکار کدی دارد که «دستگیره رویداد» (event handler) نام گرفته و در زمان وقوع رویداد اجرا می‌شود. JavaFX دستگیره‌ها و فیلترهای مختلفی برای مدیریت رویدادها ارائه کرده است. در این فریمورک هر رویداد دارای مشخصه‌های زیر است:

  • Target – تارگت یا هدف گرهی است که رویداد در آن رخ داده است. این هدف می‌تواند پنجره، صحنه و یا یک گره باشد.
  • Source – سورس به منبعی گفته می‌شود که رویداد را تولید کرده است. در سناریوی فوق ماوس منبع رویداد است.
  • Type – نوع رویداد رخ داده را مشخص می‌کند. در مورد رویداد ماوس، می‌توان به نوع‌های فشرده شدن کلید ماوس و همچنین آزاد شدن کلید ماوس اشاره کرد.

فرض کنید که یک اپلیکیشن با یک شکل دایره و دکمه‌های Play و Stop دارید که با استفاده از شیء Group درج شده‌اند.

اگر روی دکمه Play کلیک کنید، سورس رویداد ماوس خواهد بود و گره هدف دکمه Play و نوع رویداد تولید شده نیز کلیک شدن ماوس است.

مراحل مدیریت رویداد در JavaFX

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

ساخت مسیر

هر موقع که رویدادی تولید شود، مسیر پیش‌فرض/اولیه رویداد به وسیله ساخت «زنجیره مخابره رویداد» (Event Dispatch chain) تعیین می‌شود. این مسیر از گره استیج به سورس است. برای نمونه هنگامی که روی دکمه پخش ویدئو کلیک می‌کنیم، در ادامه یک مسیر مخابره رویداد ایجاد می‌شود.

مرحله به دست آوردن رویداد

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

مرحله بازبینی رویداد

در فاز بازبینی (Bubbling) رویداد، این رویداد از گره مقصد تا گره استیج (از پایین تا بالا) حرکت می‌کند. هر کدام از گره‌های مسیر زنجیره مخابره که یک دستگیره برای این رویداد ثبت کرده باشند، اجرا خواهد شد. اگر هیچ کدام از گره‌ها دستگیره‌ای برای این رویداد خاص نداشته باشند، در این صورت رویداد به گره روت می‌رسد و در نهایت پردازش تکمیل می‌شود.

دستگیره‌های رویداد و فیلترها

فیلترهای رویداد و دستگیره‌های رویداد در منطق اپلیکیشن قرار می‌گیرند تا یک رویداد را پردازش کنند. هر گره می‌تواند در بیش از دستگیره/فلیتر ثبت شود. در مورد گره‌های والد-فرزند، می‌توانید فیلتر/دستگیره مشترکی برای والدین ارائه کنید که به طور پیش‌فرض برای همه گره‌های فرزند پردازش می‌شود.

چنان که قبلاً اشاره کردیم، در طی رویداد، پردازش یک فیلتر است که اجرا می‌شود و در طی فاز بازبینی رویداد، دستگیره اجرا خواهد شد. همه دستگیره‌ها و فیلترها اینترفیس EventHandler را از پکیج javafx.event پیاده‌سازی می‌کنند.

افزودن و حذف فیلتر رویداد

برای افزودن یک فیلتر رویداد به گره، باید این فیلتر را با استفاده از متد ()addEventFilter کلاس Node ثبت کنید.

To add an event filter to a node, you need to register this filter using the method addEventFilter() of the Node class.

//Creating the mouse event handler 
EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() { 
   @Override 
   public void handle(MouseEvent e) { 
      System.out.println("Hello World"); 
      circle.setFill(Color.DARKSLATEBLUE);  
   } 
};   
//Adding event Filter 
Circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);

به همین ترتیب، می‌توانید یک فیلتر را با استفاده از متد ()removeEventFilter مانند مثال زیر حذف کنید.

circle.removeEventFilter(MouseEvent.MOUSE_CLICKED، eventHandler);

مثالی از مدیریت رویداد

در این بخش مثالی را مشاهده می‌کنید که وضعیت مدیریت رویداد با استفاده از فیلترهای رویداد را در JavaFX نشان می‌دهد. این کد را در فایلی به نام EventFiltersExample.java ذخیره کنید.

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.event.EventHandler; 

import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 

import javafx.scene.text.Font; 
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text; 
import javafx.stage.Stage; 
         
public class EventFiltersExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(25.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20);      
       
      //Setting the text 
      Text text = new Text("Click on the circle to change its color"); 
      
      //Setting the font of the text 
      text.setFont(Font.font(null, FontWeight.BOLD, 15));     
      
      //Setting the color of the text 
      text.setFill(Color.CRIMSON); 
  
      //setting the position of the text 
      text.setX(150); 
      text.setY(50); 
       
      //Creating the mouse event handler 
      EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() { 
         @Override 
         public void handle(MouseEvent e) { 
            System.out.println("Hello World"); 
            circle.setFill(Color.DARKSLATEBLUE);
         } 
      };  
      //Registering the event filter 
      circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);   
       
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
       
      //Setting the fill color to the scene 
      scene.setFill(Color.LAVENDER);  
      
      //Setting title to the Stage 
      stage.setTitle("Event Filters Example");       
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac EventFiltersExample.java
java EventFiltersExample

آموزش JavaFX

افزودن و حذف دستگیره‌های رویداد

برای افزودن یک دستگیره رویداد به یک گره باید این دستگیره را با استفاده از متد ()addEventHandler کلاس Node به صورت زیر ثبت کنید.

//Creating the mouse event handler 
EventHandler<javafx.scene.input.MouseEvent> eventHandler = 
   new EventHandler<javafx.scene.input.MouseEvent>() { 
   
   @Override 
   public void handle(javafx.scene.input.MouseEvent e) { 
      System.out.println("Hello World"); 
      circle.setFill(Color.DARKSLATEBLUE);             
   } 
};    
//Adding the event handler 
circle.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandler);

به همین ترتب می‌توانید یک دستگیره رویداد را با استفاده از متد ()removeEventHandler چنان که در کد زیر می‌بینید، حذف نمایید.

circle.removeEventHandler(MouseEvent.MOUSE_CLICKED، eventHandler);

مثالی از حذف/اضافه دستگیره‌های رویداد

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

import javafx.animation.RotateTransition; 
import javafx.application.Application; 
import javafx.event.EventHandler; 

import javafx.scene.Group; 
import javafx.scene.PerspectiveCamera; 
import javafx.scene.Scene; 
import javafx.scene.control.TextField; 
import javafx.scene.input.KeyEvent; 
import javafx.scene.paint.Color; 
import javafx.scene.paint.PhongMaterial; 

import javafx.scene.shape.Box; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text;  
import javafx.scene.transform.Rotate; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class EventHandlersExample extends Application { 
   
   @Override 
   public void start(Stage stage) {
      //Drawing a Box 
      Box box = new Box(); 
      
      //Setting the properties of the Box 
      box.setWidth(150.0); 
      box.setHeight(150.0);   
      box.setDepth(100.0); 
       
      //Setting the position of the box 
      box.setTranslateX(350);  
      box.setTranslateY(150); 
      box.setTranslateZ(50); 
       
      //Setting the text 
      Text text = new Text("Type any letter to rotate the box, 
         and click on the box to stop the rotation"); 
      
      //Setting the font of the text 
      text.setFont(Font.font(null, FontWeight.BOLD, 15));     
      
      //Setting the color of the text 
      text.setFill(Color.CRIMSON); 
      
      //setting the position of the text 
      text.setX(20); 
      text.setY(50); 
       
      //Setting the material of the box 
      PhongMaterial material = new PhongMaterial();  
      material.setDiffuseColor(Color.DARKSLATEBLUE);  
      
      //Setting the diffuse color material to box 
      box.setMaterial(material);       
       
      //Setting the rotation animation to the box    
      RotateTransition rotateTransition = new RotateTransition(); 
      
      //Setting the duration for the transition 
      rotateTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      rotateTransition.setNode(box);       
      
      //Setting the axis of the rotation 
      rotateTransition.setAxis(Rotate.Y_AXIS); 
      
      //Setting the angle of the rotation
      rotateTransition.setByAngle(360); 
      
      //Setting the cycle count for the transition 
      rotateTransition.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      rotateTransition.setAutoReverse(false);  
      
      //Creating a text filed 
      TextField textField = new TextField();   
      
      //Setting the position of the text field 
      textField.setLayoutX(50); 
      textField.setLayoutY(100); 
       
      //Handling the key typed event 
      EventHandler<KeyEvent> eventHandlerTextField = new EventHandler<KeyEvent>() { 
         @Override 
         public void handle(KeyEvent event) { 
            //Playing the animation 
            rotateTransition.play(); 
         }           
      };              
      //Adding an event handler to the text feld 
      textField.addEventHandler(KeyEvent.KEY_TYPED, eventHandlerTextField); 
       
      //Handling the mouse clicked event(on box) 
      EventHandler<javafx.scene.input.MouseEvent> eventHandlerBox = 
         new EventHandler<javafx.scene.input.MouseEvent>() { 
         
         @Override 
         public void handle(javafx.scene.input.MouseEvent e) { 
            rotateTransition.stop();  
         } 
      }; 
      //Adding the event handler to the box  
      box.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandlerBox);
       
      //Creating a Group object
      Group root = new Group(box, textField, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);      
      
      //Setting camera 
      PerspectiveCamera camera = new PerspectiveCamera(false); 
      camera.setTranslateX(0); 
      camera.setTranslateY(0); 
      camera.setTranslateZ(0); 
      scene.setCamera(camera);  
      
      //Setting title to the Stage 
      stage.setTitle("Event Handlers Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac EventHandlersExample.java
java EventHandlersExample

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

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

استفاده از متدهای آسان‌تر مدیریت رویداد

برخی کلاس‌ها در JavaFX برخی مشخصه‌های دستگیره رویداد را تعریف کرده‌اند. با تنظیم مقادیر این مشخصه‌ها با استفاده از متدهای setter متناظر، می‌توانیم یک دستگیره رویداد را ثبت کنیم.

اغلب این متدها در کلاس‌هایی مانند Node، Scene، Window و غیره حضور دارند و به این ترتیب در اختیار زیرکلاس‌هایشان نیز قرار می‌گیرند. برای نمونه برای افزودن یک «شنونده رویداد ماوس» (mouse event listener) به یک دکمه می‌توانید از متد آسان ()setOnMouseClicked بهره بگیرید:

playButton.setOnMouseClicked((new EventHandler<MouseEvent>() { 
   public void handle(MouseEvent event) { 
      System.out.println("Hello World"); 
      pathTransition.play(); 
   } 
}));

مثالی از متدهای آسان مدیریت رویداد

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

import javafx.animation.PathTransition; 
import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.event.EventHandler; 

import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.paint.Color; 

import javafx.scene.shape.Circle; 
import javafx.scene.shape.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class ConvinienceMethodsExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(25.0f);  
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20);      
       
      //Creating a Path 
      Path path = new Path(); 
      
      //Moving to the staring point 
      MoveTo moveTo = new MoveTo(208, 71);               
      
      //Creating 1st line 
      LineTo line1 = new LineTo(421, 161);        
      
      //Creating 2nd line 
      LineTo line2 = new LineTo(226,232); 
      
      //Creating 3rd line 
      LineTo line3 = new LineTo(332,52);        
      
      //Creating 4th line 
      LineTo line4 = new LineTo(369, 250);        
      
      //Creating 5th line 
      LineTo line5 = new LineTo(208, 71);       
      
      //Adding all the elements to the path 
      path.getElements().add(moveTo); 
      path.getElements().addAll(line1, line2, line3, line4, line5);     
      
      //Creating the path transition 
      PathTransition pathTransition = new PathTransition(); 
      
      //Setting the duration of the transition 
      pathTransition.setDuration(Duration.millis(1000));       
      
      //Setting the node for the transition 
      pathTransition.setNode(circle); 
      
      //Setting the path for the transition 
      pathTransition.setPath(path); 
      
      //Setting the orientation of the path 
      pathTransition.setOrientation(
         PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT);
      
      //Setting the cycle count for the transition 
      pathTransition.setCycleCount(50); 
      
      //Setting auto reverse value to true 
      pathTransition.setAutoReverse(false);
      
      //Creating play button 
      Button playButton = new Button("Play"); 
      playButton.setLayoutX(300); 
      playButton.setLayoutY(250); 
       
      circle.setOnMouseClicked (new EventHandler<javafx.scene.input.MouseEvent>() { 
         @Override 
         public void handle(javafx.scene.input.MouseEvent e) { 
            System.out.println("Hello World"); 
            circle.setFill(Color.DARKSLATEBLUE);             
         } 
      });   
      playButton.setOnMouseClicked((new EventHandler<MouseEvent>() { 
         public void handle(MouseEvent event) { 
            System.out.println("Hello World");  
            pathTransition.play(); 
         } 
      })); 
       
      //Creating stop button 
      Button stopButton = new Button("stop"); 
      stopButton.setLayoutX(250); 
      stopButton.setLayoutY(250); 
      
      stopButton.setOnMouseClicked((new EventHandler<MouseEvent>() { 
         public void handle(MouseEvent event) { 
            System.out.println("Hello World"); 
            pathTransition.stop(); 
         } 
      }));
      //Creating a Group object  
      Group root = new Group(circle, playButton, stopButton); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
      scene.setFill(Color.LAVENDER);  
      
      //Setting title to the Stage 
      stage.setTitle("Convenience Methods Example");  
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac ConvinienceMethodsExample.java
java ConvinienceMethodsExample

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

کنترل‌های UI در JavaFX

هر رابط کاربری شامل سه جنبه مهم زیر است:

  • عناصر UI – این‌ها عناصری بصری هستند که کاربر در نهایت می‌بیند و یا آن‌ها تعامل می‌یابد. JavaFX لیستی از عناصر پراستفاده و مشترک دارد که از موارد ابتدایی تا پیشرفته را شامل می‌شود و در ادامه راهنمای آموزش JavaFX آن‌ها را بیشتر توضیح می‌دهیم.
  • لی‌آوت‌ها – لی‌آوت‌ها شیوه سازمان‌دهی عناصر UI را روی صفحه تعریف کرده و حس و ظاهر نهایی آن‌ها را تعیین می‌کنند. این موضوع نیز در ادامه توضیح داده شده است.
  • رفتار – منظور از رفتار رویدادهایی هستند که در زمان تعامل کاربر با عناصر UI رخ می‌دهند. این بخش در فصل مدیریت رویداد این آموزش JavaFX توضیح داده شد.

JavaFX چند کلاس در پکیج javafx.scene.control ارائه کرده که برای ایجاد عناصر مختلف GUI استفاده می‌شوند. JavaFX از چندین کنترل مختلف مانند انتخاب‌گر تاریخ، دکمه، فیلد متنی و غیره پشتیبانی می‌کند. هر کنترل به وسیله یک کلاس خاص نمایندگی می‌شود و می‌توانید با ساخت وهله‌ای از این کلاس از این کنترل استفاده کنید. در جدول زیر فهرستی از کنترل‌های پراستفاده GUI در JavaFX را ملاحظه می‌کنید.

کنترل توضیح
Label شیء Label یا برچسب یک کامپوننت برای درج متن است.
Button این کلاس یک دکمه برچسب‌دار ایجاد می‌کند.
ColorPicker یک انتخاب‌گر رنگ کنترل‌هایی ارائه می‌کند که برای فراهم ساختن امکان انتخاب رنگ و دستکاری رنگ انتخاب شده کاربرد دارند.
CheckBox یک چک‌باکس کامپوننتی گرافیکی است که می‌تواند در حالت روشن یا خاموش باشد.
RadioButton کلاس دکمه رادیویی یک کامپوننت گرافیکی است که می‌تواند در یک گروه در حالت روشن یا خاموش باشد.
ListView کامپوننت لیست‌ویو یک لیست اسکرول‌شونده با آیتم‌های متنی در اختیار کاربر قرار می‌دهد.
TextField یک فیلد کامپوننتی متنی است که امکان ویرایش یک خط از متن را فراهم می‌سازد.
PasswordField فیلد رمز عبور یک کامپوننت متنی است که به طور خاص برای وارد کردن رمز عبور از سوی کاربر طراحی شده است.
Scrollbar نوار اسکرول یک کامپوننت گرافیکی است که به کاربر امکان می‌دهد تا یک صفحه یا بخش خاص از صفحه را اسکرول کند.
FileChooser کنترل انتخاب فایل یک پنجره محاوره‌ای نمایش می‌دهد که کاربر از طریق آن می‌تواند فایلی را انتخاب کند.
ProgressBar زمانی که وظیفه‌ای در حال انجام است، نوار پیشروی درصد تکمیل شدن این وظیفه را نشان می‌دهد.
Slider اسلایدر به کاربر امکان می‌دهد که به طور گرافیکی یک مقدار را با لغزاندن یک دستگیره درون یک بازه کران‌دار تنظیم کند.

مثالی از کنترل‌های UI در JavaFX

برنامه زیر مثالی است که یک صفحه لاگین را در JavaFX نشان می‌دهد. در این برنامه از کنترل‌های برچسب، فیلد متنی، فیلد رمز عبور و دکمه استفاده شده است. این کد را در فایلی به نام LoginPage.java ذخیره کنید.

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 

import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  
         
public class LoginPage extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200); 
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      //Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      //Setting title to the Stage 
      stage.setTitle("CSS Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac LoginPage.java
java LoginPage

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

برنامه زیر مثالی از یک فرم ثبت نام است که کنترل‌های انتخاب‌گر تاریخ، دکمه رادیویی، دکمه دوحالتی، چک‌باکس، نمای لیست، لیست انتخابی و غیره را نمایش می‌دهد. برای مشاهده این مثال کد زیر را در فایلی به نام Registration.java ذخیره کنید.

import javafx.application.Application; 
import javafx.collections.FXCollections; 
import javafx.collections.ObservableList; 

import javafx.geometry.Insets; 
import javafx.geometry.Pos; 

import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.CheckBox; 
import javafx.scene.control.ChoiceBox; 
import javafx.scene.control.DatePicker; 
import javafx.scene.control.ListView; 
import javafx.scene.control.RadioButton; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.scene.control.ToggleGroup;  
import javafx.scene.control.ToggleButton; 
import javafx.stage.Stage; 
         
public class Registration extends Application { 
   @Override 
   public void start(Stage stage) {    
      //Label for name 
      Text nameLabel = new Text("Name"); 
      
      //Text field for name 
      TextField nameText = new TextField(); 
       
      //Label for date of birth 
      Text dobLabel = new Text("Date of birth"); 
      
      //date picker to choose date 
      DatePicker datePicker = new DatePicker(); 
       
      //Label for gender
      Text genderLabel = new Text("gender"); 
      
      //Toggle group of radio buttons       
      ToggleGroup groupGender = new ToggleGroup(); 
      RadioButton maleRadio = new RadioButton("male"); 
      maleRadio.setToggleGroup(groupGender); 
      RadioButton femaleRadio = new RadioButton("female"); 
      femaleRadio.setToggleGroup(groupGender); 
       
      //Label for reservation 
      Text reservationLabel = new Text("Reservation"); 
      
      //Toggle button for reservation 
      ToggleButton Reservation = new ToggleButton(); 
      ToggleButton yes = new ToggleButton("Yes"); 
      ToggleButton no = new ToggleButton("No"); 
      ToggleGroup groupReservation = new ToggleGroup(); 
      yes.setToggleGroup(groupReservation);   
      no.setToggleGroup(groupReservation); 
       
      //Label for technologies known 
      Text technologiesLabel = new Text("Technologies Known"); 
      
      //check box for education 
      CheckBox javaCheckBox = new CheckBox("Java"); 
      javaCheckBox.setIndeterminate(false); 
      
      //check box for education 
      CheckBox dotnetCheckBox = new CheckBox("DotNet"); 
      javaCheckBox.setIndeterminate(false); 
       
      //Label for education 
      Text educationLabel = new Text("Educational qualification"); 
      
      //list View for educational qualification 
      ObservableList<String> names = FXCollections.observableArrayList( 
         "Engineering", "MCA", "MBA", "Graduation", "MTECH", "Mphil", "Phd"); 
      ListView<String> educationListView = new ListView<String>(names); 
      
      //Label for location 
      Text locationLabel = new Text("location"); 
      
      //Choice box for location 
      ChoiceBox locationchoiceBox = new ChoiceBox(); 
      locationchoiceBox.getItems().addAll
         ("Hyderabad", "Chennai", "Delhi", "Mumbai", "Vishakhapatnam"); 
       
      //Label for register 
      Button buttonRegister = new Button("Register");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(500, 500); 
       
      //Setting the padding    
      gridPane.setPadding(new Insets(10, 10, 10, 10));  
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(nameLabel, 0, 0); 
      gridPane.add(nameText, 1, 0); 
       
      gridPane.add(dobLabel, 0, 1);       
      gridPane.add(datePicker, 1, 1); 
      
      gridPane.add(genderLabel, 0, 2); 
      gridPane.add(maleRadio, 1, 2);       
      gridPane.add(femaleRadio, 2, 2); 
      gridPane.add(reservationLabel, 0, 3); 
      gridPane.add(yes, 1, 3);       
      gridPane.add(no, 2, 3);  
       
      gridPane.add(technologiesLabel, 0, 4); 
      gridPane.add(javaCheckBox, 1, 4);       
      gridPane.add(dotnetCheckBox, 2, 4);  
       
      gridPane.add(educationLabel, 0, 5); 
      gridPane.add(educationListView, 1, 5);      
       
      gridPane.add(locationLabel, 0, 6); 
      gridPane.add(locationchoiceBox, 1, 6);    
       
      gridPane.add(buttonRegister, 2, 8);      
      
      //Styling nodes   
      buttonRegister.setStyle(
         "-fx-background-color: darkslateblue; -fx-textfill: white;"); 
       
      nameLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      dobLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      genderLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      reservationLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      technologiesLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      educationLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
      locationLabel.setStyle("-fx-font: normal bold 15px 'serif' "); 
       
      //Setting the back ground color 
      gridPane.setStyle("-fx-background-color: BEIGE;");       
       
      //Creating a scene object 
      Scene scene = new Scene(gridPane); 
      
      //Setting title to the Stage 
      stage.setTitle("Registration Form"); 
         
      //Adding scene to the stage 
      stage.setScene(scene);  
      
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac Registration.java
java Registration

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

آموزش JavaFX

نمودارها در JavaFX

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

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

  • AreaChart
  • BarChart
  • BubbleChart
  • LineChart
  • ScatterChar
  • StackedAreaChart
  • StackedBarChart
  • و غیره

هر نمودار به وسیله یک کلاس نمایش می‌یابد و همه نمودارها به پکیج javafx.scene.chart تعلق دارند. کلاس Chart یک کلاسی مبنا برای همه نمودارها در JavaFX است و نمودار XY کلاس مبنای همه این نمودارها است که روی صفحه XY رسم می‌شود.

ایجاد یک نمودار

برای ایجاد یک نمودار باید موارد زیر را انجام دهید:

  • محور نمودار را تعریف کنید.
  • وهله‌ای از کلاس متناظر بسازید.
  • داده‌ها را آماده کرده و به نمودار ارسال کنید.

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

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

LineChart linechart = new LineChart(xAxis، yAxis);

چنان که در کد فوق می‌بینید، در زمان وهله‌سازی، باید دو شیء ارسال کنید که به ترتیب نماینده محور X و Y هستند.

تعریف کردن محور نمودار

به طور کلی محور نمودار می‌تواند به روش‌های زیر تعریف شود:

  • اعدادی مانند جمعیت، سن و غیره.
  • دسته‌بندی‌ها مانند روزهای هفته، کشورها و غیره.

در JavaFX محور نمودار یک کلاس مجرد است که محورهای ایکس و وای را نمایش می‌دهد. این کلاس دو زیرکلاس برای تعریف هر نوع از محور دارد که CategoryAxis و NumberAxis نامیده می‌شوند. به شکل زیر توجه کنید.

محور دسته‌بندی (Category Axis)

با ساخت وهله‌ای از این کلاس می‌توانید محور X و Y را طوری تعریف کنید که هر مقدار در راستای آن یک دسته‌بندی را نمایندگی کند. امکان تعریف محور دسته‌بندی با وهله‌سازی از کلاس مربوطه به صورت زیر وجود دارد.

CategoryAxis xAxis = new CategoryAxis();

برای این محور باید فهرستی از دسته‌بندی‌ها و برچسب‌ها مانند کد زیر تعریف کنیم:

//setting the list of categories.
xAxis.setCategories(FXCollections.<String>observableArrayList
      (Arrays.asList("n ame1"، "name2"….)));

//Setting label to the axis
xAxis.setLabel("name of the axis ");

محور عددی (NumberAxis)

با ساخت وهله‌ای از این کلاس، می‌توانید طوری محور X و Y را تعریف کنید که هر مقدار نماینده یک مقدار عددی باشد. امکان استفاده از هر نوع عدد از حمله Long، Double، BigDecimal و غیره وجود دارد. امکان تعریف محور عددی با وهله‌سازی از کلاس NumberAxis وجود دارد.

//Defining the axis 
NumberAxis yAxis = new NumberAxis();  

//Setting labelto the axis 
yAxis.setLabel("name of the axis");

ارسال داده‌ها به نمودارهای XY

همه نمودارهای XY روی صفحه XY نمایش می‌یابند. برای رسم مجموعه‌ی از داده‌ها روی یک نمودار باید یک سری مختصات X و Y تعریف کنیم. کلاس <X،Y> از پکیج javafx.scene.chart که امکان ارسال نقاط داده‌ها به نمودار را فراهم می‌سازد. این کلاس یک لیست observable از سری‌های نام‌دار نگهداری می‌کند. امکان دریافت لیست با استفاده از متد ()getData کلاس XYChart.Series وجود دارد.

ObservableList list = series.getData();

در کد فوق series یک شیء از کلاس XYChart.Series است. امکان افزودن داده‌ها به لیست با استفاده از متد ()add به صورت زیر وجود دارد:

list.add(new XYChart.Data(x-axis data، y-axis data));

این دو خط می‌توانند با همدیگر و به صورت زیر نوشته شوند:

series.getData().add(new XYChart.Data(x-axis data، y-axis data));

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

نمودار توضیح
Pie Chart نمودار دایره‌ای (Pie Chart) یک بازنمایی گرافیکی از مقادیری به شکل قطاع‌هایی از یک دایره با رنگ‌های مختلف است. این قطاع‌ها برچسب می‌خورند و مقدار هر قطاع در نمودار نمایش می‌یابد. در JavaFX نمودار دایره‌ای به وسیله کلاس PieChart از پکیج javafx.scene.chart نمایش می‌یابد.
Line Chart نمودار خطی یا گراف خطی اطلاعات را به شکل یک سری از نقاط داده‌ای نشان می‌دهد که با پاره‌خط‌های مستقیم به هم وصل شده‌اند. نمودارهای خطی شیوه تغییر یافتن داده‌ها در توالی‌های منظم زمانی را نشان می‌دهند. در JavaFX یک نمودار خطی به وسیله یک کلاس به نام LineChart نمایش می‌یابد. این کلاس به پکیج javafx.scene.chart تعلق دارد. با ساخت وهله‌ای از این کلاس می‌توانید یک گره LineChart در JavaFX ایجاد کنید.
Area Chart این نوع از نمودار برای رسم نمودارهای مبتنی بر مساحت دوبعدی استفاده می‌شود. این ناحیه بین سری‌های مفروض از نقاط و محورها رسم می‌شود. به طور کلی این نمودار برای مقایسه دو کمیت استفاده می‌شود. در JavaFX یک نمودار مساحت به وسیله کلاسی به نام AreaChart از پکیج javafx.scene.chart رسم می‌شود.
Bar Chart نمودار میله‌ای داده‌های گروه‌بندی‌شده را با استفاده از میله‌های مستطیلی نمایش می‌دهد. طول این میله‌ها بزرگی مقادیر را نشان می‌دهد. میله‌ها در نمودار میله‌ای می‌توانند به صورت افقی یا عمودی رسم شوند. در JavaFX نمودار میله‌ای با ساخت وهله‌ی از کلاس BarChart پکیج javafx.scene.chart نمایش می‌یابد.
Bubble Chart نمودار حبابی برای رسم داده‌ها سه‌بعدی استفاده می‌شود. بعد سوم به وسیله اندازه (شعاع) حباب‌ها نمایش می‌یابد. برای رسم این نمودارها باید از کلاس BubbleChart در پکیج javafx.scene.chart وهله‌سازی کنید.
Scatter Chart نمودار پراکندگی نوعی گراف است که در آن مقادیر روی صفحه دکارتی رسم می‌شوند این نو از نمودار معمولاً برای یافتن رابطه بین متغیرها مورد استفاده قرار می‌گیرد. برای رسم نمودار پراکندگی در JavaFX باید از کلاس ScatterChart در پکیج javafx.scene.chart وهله‌سازی کنید.
Stacked Area Chart در JavaFX یک نمودار مساحت پشته‌ای از طریق ساخت وهله‌ای از وسیله کلاس StackedAreaChart از پکیج javafx.scene.chart رسم می‌شود.
Stacked Bar Chart برای رسم یک نمودار میله‌ای پشته‌ای در JavaFX باید وهله‌ای از کلاس StackedBarChart از پکیج javafx.scene.chart بسازید.

بخش‌های لی‌آوت (کانتینرها) در JavaFX

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

JavaFX چند لی‌آوت از پیش تعریف شده مانند HBox، VBox، Border Pane، Stack Pane، Text Flow، Anchor Pane، Title Pane، Grid Pane، Flow Panel و غیره ارائه کرده است. هر یک از این لی‌آوت‌ها فوق‌الذکر به وسیله یک کلاس نمایش می‌یابند که همگی آن‌ها به پکیج javafx.layout تعلق دارند. کلاس Pane یک کلاس مبنا است که همه لی‌آوت‌های JavaFX را در برمی‌گیرد.

ایجاد لی‌آوت

برای ساخت یک لی‌آوت باید کارهای زیر را انجام دهیم:

  • ایجاد گره
  • وهله‌سازی از کلاس متناظر لی‌آوت مورد نیاز
  • تنظیم مشخصه‌های لی‌آوت
  • افزودن همه گره‌های ایجاد شده به لی‌آوت

ایجاد گره

قبل از هر چیز باید گره‌های لازم در اپلیکیشن JavaFX را با وهله‌سازی از کلاس‌های مربوطه ایجاد کنیم. برای نمونه اگر بخواهیم یک فیلد متنی و مثلاً دو دکمه پخش و توقف در یک لی‌آوت HBox اضافه کنیم، باید در ابتدا این گره‌ها را مانند کد زیر بسازیم:

//Creating a text field 
TextField textField = new TextField();       

//Creating the play button 
Button playButton = new Button("Play");       

//Creating the stop button 
Button stopButton = new Button("stop");

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

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

HBox hbox = new HBox();

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

پس از وهله‌سازی از یک کلاس، باید مشخصه‌های لی‌آوت را با استفاده از متدهای setter مربوطه تعیین کنیم. برای نمونه اگر می‌خواهیم فاصله‌ای بین گره‌های ایجاد شده در لی‌آوت HBox ایجاد کنیم، در این صورت باید مقدار مشخصه spacing را با مقدار صحیحی تنظیم کنیم. این کار با استفاده از متد setter به نام ()setSpacing مانند زیر انجام می‌شود:

hbox.setSpacing(10);

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

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

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

بخش‌های لی‌آوت

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

شکل توضیح
HBox لی‌آوت HBox همه گره‌ها را در اپلیکیشن در یک ردیف افقی منفرد می‌چیند. برای استفاده از آن باید وهله‌ای از کلاس HBox از پکیج javafx.scene.layout بسازید.
VBox لی‌آوت VBox همه گره‌ها را در اپلیکیشن در یک ردیف عمودی منفرد می‌چیند. برای استفاده از آن باید وهله‌ای از کلاس VBox از پکیج javafx.scene.layout بسازید.
BorderPane لی‌آوت BorderPane گره‌ها را در یک اپلیکیشن در موقعیت‌های بالا، پایین، راست، چپ و مرکز می‌چیند. برای استفاده از آن باید وهله‌ای از کلاس BorderPane از پکیج javafx.scene.layout بسازید.
StackPane لی‌آوت StackPane گره‌ها را در یک اپلیکیشن در موقعیت‌های روی هم مانند یک پشته می‌چیند. گرهی که در ابتدا اضافه شود در بخش تختانی قرار می‌گیرد و بقیه گره‌ها به ترتیب بالاتر از آن اضافه می‌شود. برای استفاده از آن باید وهله‌ای از کلاس StackPane از پکیج javafx.scene.layout بسازید.
Text Flow لی‌آوت Text Flow چندین گره‌ متنی را در یک گردش منفرد تنظیم می‌کند. برای استفاده از آن باید وهله‌ای از کلاس Text Flow از پکیج javafx.scene.layout بسازید.
AnchorPane لی‌آوت AnchorPane گره‌‌های موجود در اپلیکیشن را در فاصله معینی از هم تنظیم می‌کند. برای استفاده از آن باید وهله‌ای از کلاس AnchorPane از پکیج javafx.scene.layout بسازید.
TilePane لی‌آوت TilePane همه گره‌‌های موجود در اپلیکیشن را به شکل کاشی‌های با اندازه یکنواخت می‌چیند. برای استفاده از آن باید وهله‌ای از کلاس TilePane از پکیج javafx.scene.layout بسازید.
GridPane لی‌آوت GridPane گره‌‌های موجود در اپلیکیشن را به شکل شبکه‌ای از ردیف‌ها و ستون‌ها تنظیم می‌کند. این لی‌آوت در زمانی که می‌خواهید فرم بسازید بیشتر به کار می‌آید. برای استفاده از آن باید وهله‌ای از کلاس GridPane از پکیج javafx.scene.layout بسازید.
FlowPane لی‌آوت FlowPane همه گره‌‌های اپلیکیشن را درون یک flow قرار می‌دهد. یک flow افقی همه عناصر را در ارتفاع خود در برمی‌گیرد، اما flow عمودی این عناصر را در عرض خود جای می‌دهد. برای استفاده از آن باید وهله‌ای از کلاس FlowPane از پکیج javafx.scene.layout بسازید.

CSS در JavaFX

استایل‌شیت‌های آبشاری (Cascading Style Sheets) که به اختصار CSS نامیده می‌شود یک زبان طراحی ساده است که برای ساده‌تر ساختن فرایند قابل عرضه ساختن صفحه‌های وب طراحی شده است.

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

کاربرد CSS در JavaFX

JavaFX امکان بهره‌گیری از زبان CSS برای بهبود حس و ظاهر اپلیکیشن‌ها را فراهم ساخته است. پکیج javafx.css شامل کلاس‌هایی است که برای اعمال CSS روی اپلیکیشن‌های JavaFX استفاده می‌شوند. CSS شامل قواعد استایل‌بندی است که از سوی مرورگر تفسیر شده و سپس روی عناصر متناظر در سند HTML اعمال می‌شوند. یک قاعده CSS از سه بخش زیر تشکیل یافته است:

  • سلکتور (Selector) – سلکتور یا انتخاب‌گر یک تگ HTML است که عنصری که باید استایل‌بندی شود را تعیین می‌کند. این عنصر می‌تواند یک تگ مانند <h1>، <table> یا چیزهای مختلف دیگر باشد.
  • مشخصه (Property) – مشخصه نوعی خصوصیت تگ HTML است. به بیان ساده همه خصوصیت‌های HTML به مشخصه‌های CSS تبدیل می‌شوند. این موارد می‌تواند شامل color، border و غیره باشد
  • مقدار (Value) – مقادیر به مشخصه‌ها انتساب می‌یابند. برای نمونه یک مشخصه رنگ می‌تواند دارای مقادیر red، #F1F1F1 یا هر چیز دیگر باشد.

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

selector { property: value }

استایل‌شیت پیش‌فرض مورد استفاده از سوی JavaFX به نام modena.css است که در jar زمان اجرای JavaFX قرار دارد.

افزودن استایل‌شیت شخصی

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

Scene scene = new Scene(new Group()، 500، 400);
scene.getStylesheets().add("path/stylesheet.css");

افزودن استایل‌شیت‌های درون‌خطی

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

.button { 
   -fx-background-color: red; 
   -fx-text-fill: white; 
}

مثالی از استایل‌بندی

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

باید از کدی مانند کد برنامه زیر استفاده کنیم. کد زیر را در فایلی به نام CssExample.java ذخیره کنید:

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  

public class CssExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200);
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      // Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      // Setting title to the Stage   
      stage.setTitle("CSS Example"); 
         
      // Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

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

javac CssExample.java
java CssExample

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

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

آموزش پروژه محور JavaFX

یکی از دوره‌های ویدیویی فرادرس به آموزش JavaFX‌ به صورت پروژه محور اختصاص یافته است. در این دوره که طول آن ۱ ساعت و ۲۷ دقیقه است، «محمد جباری»، مدرس دوره، سعی کرده تا از طریق توسعه یک برنامه Media Player برای دسکتاپ، اقدام به آموزش JavaFX کند.

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

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

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

به این ترتیب به پایان این مقاله آموزش JavaFX می‌رسیم. در این مطلب تلاش کردیم تا شما را به روشی تفصیلی و جامع با این فریمورک همه‌کاره ساخت اپلیکیشن‌ها بر مبنای جاوا آشنا کنیم. JavaFX امکان ساخت اپلیکیشن‌های جاوا با رابط‌های کاربری مدرن مجهز به شتابدهی سخت‌افزاری را فراهم آورده و کاملاً پرتابل است. آخرین نسخه این پلتفرم نسخه 15 است که در شهریور 1399 منتشر شده است. شما نیز می‌توانید دیدگاه‌ها و پیشنهادهای خود را در خصوص موضوع این مطلب در بخش نظرات با ما و دیگر خوانندگان مجله فرادرس در میان بگذارید.

اگر این مطلب برای شما مفید بوده است، آموزش‌ها و مطالب زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۴ نفر
آیا این مطلب برای شما مفید بود؟
شما قبلا رای داده‌اید!
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

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