ElectronJS Üst Menüyü Değiştirme

ElectronJS Üst Menüyü Değiştirme

ElectronJS Üst Menüyü Değiştirme

  15 dakika Okuma Süresi
Merhabalar, ElectronJS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde uygulamalarımızda üstte olan menüyü değiştirmeyi anlatacağım. Hadi başlayalım !

Projeyi yazıp çalıştırdığınızda üstte File, Edit, View, Window ve Help olmak üzere 5 elemanlı bir menü var ve bu menü otomatik olarak geliyor. Tabiki bu menüyü değiştirmek yada kaldırmak mümkün.
Tabi bunu yapabilmek için bi tane NodeJS projemizin olması gerekiyor. Hemen bi proje oluşturup CMD ile proje klasörüne geçerek NodeJS projesine çevirelim. Bunun için
npm init
komutunu girip proje başlığı, yazar, sürüm gibi bilgileri doldurabilir, yada bu adımları ön tanımlı bilgilerle doldurmak isterseniz
npm init --yes
komutunu girebiliriz.
Ardından ElectronJS paketini NPM ile indirip kuralım. Yine terminalden
npm install electron
komutunu girelim. ElectronJS paketini kurduktan sonra bir önceki dersimizde anlattığımız gibi hızlı bir şekilde uygulamamızı oluşturalım. Bu yazıyı okuduğunuza göre ElectronJS ile uygulama oluşturma ve BrowserWindow kavramlarını bildiğinizi varsayıp hızlıca kodu verelim.

const electron=require('electron');
const url=require('url');
const path=require('path');
const {app,BrowserWindow } = electron;
app.on('ready', () => {
    let mainWindow = new BrowserWindow();
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'main.html'),
            protocol: 'file:',
            slashes: true
        })
    );
});
Elbette Javascript dosyamız ile aynı dizinde olan bir main.html dosyası oluşturmayı ve içine bir şeyler yazmayı unutmayın :)Projeyi şu anki haliyle çalıştırırsanız üstteki menünün geldiğini göreceksiniz fakat biz menüyü kaldırmak istiyorduk, asıl işimiz şimdi başlıyor :)

ElectronJS'de, bahsettiğimiz üstteki menünün adı Menu (çok mantıklı bir isim dimi :)) ve elbette bu sınıfı sayfada çağırmamız gerekiyor. Bunun için 4. satırda yazdığımız const {app,BrowserWindow } = electron; satırını const {app, BrowserWindow, Menu } = electron; şeklinde düzenleyelim.

Menü yapısını oluşturmak için dizi kullanacağız, dizinin her bir elemanı menünün her bir seçeneği olacak. Alt menüleri oluşturmak için ise dizinin her elemanına obje şeklinde yine menüler ekleyeceğiz. Menü başlığını label anahtar kelimesi ile oluşturup, ona alt menü eklemek için ise submenu anahtarını kullanacağız. Elbette submenu'de bir menü olacağı için onu da diziden oluşturup içeriğine yine obje yardımıyla alt menüler ekleyebiliriz.
Teorik kısım biraz anlamsız gelebilir fakat dediklerimi koda dökersek daha açıklayıcı olacaktır.
Örnek olması için Windows'taki Not Defteri'nin üstünde bulunan menüyü tasarlayalım.
Menü elemanlarını bir dizi içinde tutacağız demiştik ya hani, işte şimdi globalde bir tane dizi oluşturalım, menü elemanları program çalışma aşamasında değişmeyeceği için const tipinde yapabiliriz. Öncelikle ana menüyü yapalım, sonrasında alt menüleri ayrı menüler oluşturarak ekleyelim.

const mainMenu = [
    {
        label: 'Dosya',
        submenu: dosyaSubMenu
    },
    {
        label: 'Düzen',
        submenu: duzenSubMenu
    },
    {
        label: 'Biçim',
        submenu: bicimSubmenu
    },
    {
        label: 'Görünüm',
        submenu: gorunumSubmenu
    }
];
Evet üst menüyü oluşturduk ve her birine kendi isminde alt menüler ekledik fakat bu alt menüleri de oluşturmamız gerekiyor. Az önce de bahsettiğim üzere alt menüler de bir menü olmalı.

dosyaSubMenu alt menüsünü oluşturmakla başlayalım;

const dosyaSubMenu = [
    { label: 'Yeni', accelerator: 'CommandOrControl+N' },
    { label: 'Yeni Pencere', accelerator: 'CommandOrControl+Shift+N' },
    { label: 'Aç', accelerator: 'CommandOrControl+O' },
    { label: 'Kaydet', accelerator: 'CommandOrControl+S' },
    { label: 'Farklı Kaydet', accelerator: 'CommandOrControl+Shift+S' },
    { label: 'Sayfa Yapısı' },
    { label: 'Yazdır', accelerator: 'CommandOrControl+P' },
    { label: 'Çıkış' }
];
Her bir object nesnesi içerisinde bulunan label anahtarını biliyoruz fakat accelerator'da neyin nesi derseniz, kısayol oluşturmak için kullanıyoruz bu abiyi. CommandOrControl ise Windows'ta Ctrl, MacOS'ta Command tuşu anlamına geliyor. ElectronJS, uygulamanın çalıştırıldığı işletim sistemine göre Ctrl yada Command tuşunu kısayol için tanımlayacaktır.

Sıra geldi duzenSubMenu'ye;

const duzenSubMenu = [
    { label: 'Geri Al', accelerator: 'CommandOrControl+Z', enabled: false },
    { type: 'separator' },
    { label: 'Kes', accelerator: 'CommandOrControl+X' },
    { label: 'Kopyala', accelerator: 'CommandOrControl+C' },
    { label: 'Yapıştır', accelerator: 'CommandOrControl+V' },
    { label: 'Sil', accelerator: 'Delete' },
];
Burada ilk label'a ait olan enabled anahtar kelimesi ile o seçeneğin aktif yada pasif olmasını ayarlayabiliyoruz. Elbette false verdiğimiz için bu seçenek seçilemeyecektir.
İkinci object nesnesi içerisindeki type ile de o seçeneğin tipini belirtebiliyoruz. Burada separator kullandık ve bu seçeneğin bir ayraç olduğunu, kullanıcı tarafından seçilemeyeceğini, iki seçeneği birbirinden ayırmak için kullanılacağını belirtiyoruz.

Şimdi gelelim bicimSubMenu'ye;

const bicimSubmenu = [
    { label: 'Sözcük Kaydır' },
    { label: 'Yazı Tipi' }
];
Evet burada dümdüz iki seçenek ekledik, seçeneklerin herhangi bir kısayolu yok, aralarında ayraç yok :) Bu şekilde de kullanabiliyoruz demek için ekledim.

Geçelim gorunumSubmenu'ye;

const gorunumSubmenu = [
    {
        label: 'Yakınlaştır',
        submenu: [
            { label: 'Yakınlaştır', role: 'zoomIn' },
            { label: 'Uzaklaştır', role: 'zoomOut' },
            { label: 'Varsayılan Uzaklaştırmayı Geri Yükle', accelerator: 'Ctrl+0' }
        ]
    },
    { label: 'Durum Çubuğu', type: 'checkbox' }
]
Şimdii işin rengi biraz değişti, çünkü biz gorunumSubMenu verisi ile zaten alt menü ekliyorduk, bide onun ilk seçeneğine bi alt menü ekledik ve Yakınlaştır ve Uzaklaştır seçeneklerinde gördüğünüz üzere role anahtarı var ve birinde zoomIn, diğerinde zoomOut yazıyor. role anahtar kelimesi ile o seçeneğin ne görev yapacağını belirtebiliyoruz. Tabiki zoomIn ve zoomOut değerlerini kafaya göre yazmadık, ElectronJS'in kendi bünyesinde olan parametrelerden yazdık. zoomIn ile o seçeneğin sayfayı büyüteceğini, zoomOut ile de sayfayı uzaklaştıracağını belirttik.
İkinci alt menüde de type anahtar kelimesi var, bu anahtar kelimeyi daha önceden gördük fakat parametre olarak checkbox verdik. Bu sayede seçenek seçildiğinde o seçenek içinde bulunan checkbox'ın işaretlemesini değiştirebiliriz. Yani kullanıcı o seçeneği seçtiğinde seçenekte bulunan checkbox işaretli ise işareti kalkacak, işaretli değilse işaretlenecek ve bizde buna göre kontrol ederek gerekli yapılandırma ve ayarları yapabiliriz.

Evet bu kodları yazıp terminal ekranından electron . komutunu girerek uygulamayı çalıştırabilir ve eklediğimiz menüleri görebiliriz.
Yalnız submenuleri ana menüden önce oluşturmamız gerekiyor. Yani dosyaSubMenu, duzenSubMenu, bicimSubMenu ve gorunumSubMenu menülerini oluşturduktan sonra mainMenu ana menüsünü oluşturup alt menüleri ona eklememiz gerekiyor. Aksi halde alt menüler oluşturulmadığı için ana menü tarafından görünmeyecek ve eklenemeyecektir.

İstediğimiz menü tasarımını yaptık fakat uygulamaya eklemedik, eklemek için ise BrowserWindow yani uygulama ekranını oluşturduktan hemen sonra sayfaya çağırdığımız Menu sınıfının static tipteki setApplicationMenu() fonksiyonunu kullanacağız. Bu fonksiyon ise parametre olarak menüyü istiyor fakat biz object nesnesi oluşturduk, henüz menüye çevirmedik. Object nesnesini menüye çevirmek için ise yine Menu sınıfı altındaki static tipte olan buildFromTemplate() fonksiyonunu kullanacağız. Bu fonksiyon ise object nesnesini parametre olarak istiyor.
Teorik kısmın kod dilindeki karşılığı şöyle olacak;
Menu.setApplicationMenu(Menu.buildFromTemplate(mainMenu));
Projeyi çalıştırdığımızda her seçenek için şöyle görüntüler oluşacaktır;
ElectronJS
ElectronJS
ElectronJS
ElectronJS
ElectronJS
Bunlar gibi bir çıktı görürseniz sorun yok demektir, hata alır yada farklı bi görüntü alırsanız sizi yazının başına davet ediyorum :)

Elbette menü özellikleri sadece bunlarla kısıtlı değil, daha onlarca menü özelliği (type, role, accelerator) bulunmakta ve resmi dökümandan hepsine detaylı bir şekilde ulaşabilirsiniz. Resmi dökümana ulaşmak için tıklayınız

Evett bu dersimizde bu kadardı, yazdığımız tüm kodları toplu olması için aşağıya bırakıyorum;

const electron = require('electron');
const url = require('url');
const path = require('path');

const { app, BrowserWindow, Menu, ipcMain } = electron;
app.on('ready', () => {
    mainWindow = new BrowserWindow({});
    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, 'main.html'),
            protocol: 'file:',
            slashes: true
        })
    );
    Menu.setApplicationMenu(Menu.buildFromTemplate(mainMenu));
});
const dosyaSubMenu = [
    { label: 'Yeni', accelerator: 'CommandOrControl+N' },
    { label: 'Yeni Pencere', accelerator: 'CommandOrControl+Shift+N' },
    { label: 'Aç', accelerator: 'CommandOrControl+O' },
    { label: 'Kaydet', accelerator: 'CommandOrControl+S' },
    { label: 'Farklı Kaydet', accelerator: 'CommandOrControl+Shift+S' },
    { label: 'Sayfa Yapısı' },
    { label: 'Yazdır', accelerator: 'CommandOrControl+P' },
    { label: 'Çıkış' }
];
const duzenSubMenu = [
    { label: 'Geri Al', accelerator: 'CommandOrControl+Z', enabled: false },
    { type: 'separator' },
    { label: 'Kes', accelerator: 'CommandOrControl+X' },
    { label: 'Kopyala', accelerator: 'CommandOrControl+C' },
    { label: 'Yapıştır', accelerator: 'CommandOrControl+V' },
    { label: 'Sil', accelerator: 'Delete' },
];
const bicimSubmenu = [
    { label: 'Sözcük Kaydır' },
    { label: 'Yazı Tipi' }
];
const gorunumSubmenu = [
    {
        label: 'Yakınlaştır',
        submenu: [
            { label: 'Yakınlaştır', role: 'zoomIn' },
            { label: 'Uzaklaştır', role: 'zoomOut' },
            { label: 'Varsayılan Uzaklaştırmayı Geri Yükle', accelerator: 'Ctrl+0' }
        ]
    },
    { label: 'Durum Çubuğu', type: 'checkbox' }
]
const mainMenu = [
    {
        label: 'Dosya',
        submenu: dosyaSubMenu
    },
    {
        label: 'Düzen',
        submenu: duzenSubMenu
    },
    {
        label: 'Biçim',
        submenu: bicimSubmenu
    },
    {
        label: 'Görünüm',
        submenu: gorunumSubmenu
    }
];
Tüm ElectronJS derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.


  • İçeriği Paylaş:

İÇERİĞİ DEĞERLENDİR

Toplam Değerlendirme Sayısı: 0
Toplam Değerlendirme: 0 / 5

Cevap Yaz