منو ها (Menus) در الکترون – آموزش Electron

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

electron menus 5817 تصویر

منو ها (Menus) در الکترون

برنامه های دسکتاپ دارای دو نوع منو هستند، منوی برنامه (نوار بالای برنامه) و منوی کلیک راست. در این بخش به بررسی منو ها (Menus) در الکترون می پردازیم. ما از دو ماژول Menu و MenuItem برای ایجاد منو ها استفاده خواهیم کرد. توجه داشته باشید که این دو ماژول فقط در فرآیند اصلی (Main Process) در دسترس هستند. به منظور استفاده از این ماژول ها در فرآیند های رندر کننده باید از ماژول remote استفاده کنیم که در این بخش از آموزش الکترون آن را نیز بررسی می کنیم.

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

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

حال یک فایل جدید index.html ایجاد کنید. این فایل را خالی بگذارید. سپس با استفاده از دستور زیر برنامه را اجرا کنید:

خروجی برنامه را در تصویر زیر مشاهده می کنید:

electron menus 5817 1 تصویر

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

محتوای فایل HTML:

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

electron menus 5817 2 تصویر

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

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

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