طراحی ظاهر برنامه در الکترون (Electron) – آموزش Electron

  • پنج شنبه ۱۱ بهمن ۱۳۹۷
  • بازدید ۲۹۵ نفر

electron building ui 5794 تصویر

طراحی ظاهر برنامه در الکترون (Electron)

رابط کاربری (User Interface) برنامه های نوشته شده با الکترون، با استفاده از زبان های HTML، CSS و JavaScript طراحی می شود. بنابراین ما می توانیم از همه ابزار هایی که برای توسعه Front-End برنامه های تحت وب استفاده می شوند، در طراحی ظاهر برنامه های خود استفاده کنیم. شما می توانید از ابزار هایی مانند Angular، Backbone، React، Bootstrap و غیره برای ساخت برنامه های خود استفاده کنید.

نصب Bower

برای مدیریت بسته های مربوط به توسعه Front-End می توانید از سیستم مدیریت بسته Bower استفاده کنید. دستور زیر برای نصب آن استفاده می شود:

اکنون می توانید به تمامی فریم ورک ها، کتابخانه ها و افزونه های CSS و جاوا اسکریپت که برای توسعه Front-End استفاده می شوند، دسترسی داشته باشید.

برای مثال به منظور نصب آخرین نسخه از Bootstrap می توانید از دستور زیر استفاده کنید:

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

حال با استفاده از دستور زیر jQuery را نصب کنید:

بعد از نصب jquery یک فایل دیگر با نام view.js ایجاد کرده و محتوای زیر را در آن بنویسید:

محتوای فایل main.js:

محتوای فایل index.html:

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

خروجی برنامه:

electron building ui 5794 1 تصویر

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

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است