EletronJS Uygulama Boyutlandırma

Herkese merhaba, ElectronJS yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda ElectronJS ile uygulamayı boyutlandırmayı anlatacağım. Hadi başlayalım !

Proje Oluşturma

Bildiğiniz üzere ElectronJS ile bir uygulama oluşturmak için öncelikle bir tane NodeJS projesi oluşturmamız gerekiyor. Bunun için terminali açıp projeyi oluşturmak istediğimiz dizine geçerek

npm init --yes

komutunu giriyoruz. Ardından projenin oluşturulmasını bekliyoruz.

electron Paketini Projeye Ekleme

Proje oluşturulduktan sonra ilk olarak Electron paketini projemize eklememiz gerekiyor. Bunun için yine terminal ekranında

npm i electron

komutunu giriyoruz. Bu komut ile NPM, electron paketini indirecek ve projeye dahil edecektir.

Electron paketini de oluşturduğumuza göre artık Electron ile bir uygulama oluşturabiliriz.

Uygulama Oluşturma

ElectronJS ile bir uygulama oluşturmak için de app sınıfını kullanıyoruz. Uygulamayı oluşturduktan sonra uygulama penceresi oluşturmak içinde BrowserWindow sınıfını kullanıyoruz. NodeJS’de bir paketi (sistem paketi dahi olsa) kullanmak için öncelikle ilgili paketi NodeJS kodu yazdığımız dosya içerisinde çağırmamız gerektiği için app ve BrowserWindow sınıflarını electron paketi içerisinden çağıralım. Bunun için sayfanın en başına gelerek

const {app, BrowserWindow} = require('electron');

kod satırını yazmamız gerekiyor. İlgili paketleri de çağırdığımıza göre artık uygulamayı ve uygulama içerisinden uygulama penceresini oluşturabiliriz.

BrowserWindow sınıfını kullanabilmek için öncelikle yeni bir nesnesini türetmemiz gerekiyor. Constructor olarak pencere ayarlarını JSON formatında verebiliriz yada parametre vermeden oluşturarak Electron tarafından belirlenmiş default özelliklerle de uygulamayı oluşturabiliriz.

Uygulama Boyutunu Sabit Yapma

Electron ile uygulamamıza sabit bir boyut vermek istiyorsak BrowserWindow sınıfından yeni bir nesne oluştururken constructor fonksiyonuna gönderdiğimiz JSON içerisinde width ve height değerlerini doldurmamız gerekiyor. Buradaki width uygulama genişliğini, height ise uygulama yüksekliğini temsil ediyor. Bu değerlerin number tipte olması gerekiyor ve bu verdiğimiz değerlere göre uygulama boyutunu ayarlıyor, tabi piksel olarak. Örneğin uygulamanın genişliğinin 300px, yüksekliğinin 500 piksel olmasını istiyorsak width değerine 300, height değerine 500 vermemiz gerekiyor. Yani kodumuz şöyle olmalı;

const win = new BrowserWindow({
    width: 300,
    height: 500
});

Uygulamayı Tam Ekran Yapma

Bu şekilde yaparak uygulamayı kendi belirlediğimiz boyutlarda yapabiliriz fakat bilgisayar yada monitör ekranının boyutları kadar yapmakta mümkün. Bunun için screen sınıfını kullanmamız gerekiyor ve bu sınıf Electron paketi altında bulunuyor. Yani bu sınıfı da Javascript dosyası içerisinde çağırmamız gerekiyor. Az önce app ve BrowserWindow sınıflarını çağırdığımız kod satırını şu şekilde düzenlersek istediğimiz şeye ulaşacağız;

const {app, BrowserWindow, screen} = require('electron');

Ekran boyutlarını almak için screen sınıfı altında bulunan getPrimaryDisplay() fonksiyonunu kullanacağız. Bu fonksiyon bilgisayar ekranıyla ilgili bilgilerin bulunduğu bir sınıfı bize döndürecek. Fakat bu sınıf altında sadece ekran boyutları bulunmuyor, ekran ile ilgili bir çok bilgi bulunmakta. E biz sadece ekran boyutlarını almak istiyorsakta, getPrimaryDisplay() fonksiyonundan dönen değer altında bulunan workAreaSize nesnesinin width ve height değerlerini kullanacağız. Burada bulunan workAreaSize nesnesi çalışma ekranını temsil ediyor. Çalışma ekranı ise örneğin Windows’ta taskbar adını verdiğimiz ekranın en altında bulunan ve o anki açık uygulamaların ve sabitlediğimiz uygulamaların kısayollarının bulunduğu alan. workAreaSize nesnesi ile sadece kullanıcı tarafından kullanılan alanı alabiliyoruz, ki bu sayede alttaki taskbara herhangi bir müdahalemiz yada o alanı kapatma gibi bir durumumuz olmuyor.

Bu verilere göre uygulamayı tam ekran yapmak için az önce oluşturduğumuz win değişkenini şu şekilde değiştiriyoruz;

const win = new BrowserWindow({
    width: screen.getPrimaryDisplay().workAreaSize.width,
    height: screen.getPrimaryDisplay().workAreaSize.height
});

Uygulama Yeniden Boyutlandırmayı Engelleme

Şimdi uygulamayı tam ekran yaptık, e bide uygulama sadece tam ekran çalışsın, kullanıcı ekran boyutlarını değiştiremesin istiyorsanız işte o zaman resizable adında boolean değer alabilen bir nesneyi de BrowserWindow sınıfı nesnesi oluşturma aşamasında vermemiz gerekiyor. resizable değeri true uygulama boyutu değiştirilebilir, false ise değiştirilemez oluyor. Default olarak true olduğundan sizde true yapmak istiyorsanız birşey yapmanıza gerek yok fakat boyutlandırılmasını istemiyorsanız işte o zaman false değer vermeniz gerekmekte.

Buna göre win değişkenini tekrardan oluşturalım;

const win = new BrowserWindow({
    width: screen.getPrimaryDisplay().workAreaSize.width,
    height: screen.getPrimaryDisplay().workAreaSize.height,
    resizable: false
});

Son yazdığımız kod ile birlikte uygulama tam ekran olarak açılacak ve kullanıcı uygulama boyutlarını değiştiremeyecektir.

Uygulama alt yapısı hazır, artık uygulamayı oluşturabiliriz.

Uygulamanın Oluşturulması

electron paketi altından app nesnesini çağırdık ya, bu nesne daha önce dediğim gibi uygulamanın kendisini ifade ediyor ve içerisine bir uygulama penceresi eklenmediği sürece bir işe yaramıyor. app nesnesi sayfa içerisine dolduğu anda da uygulama penceresini yani BrowserWindow nesnesini içeri aktarmak gerekiyor. app nesnesinin hazır olduğunu anlamak ve buna göre BrowserWindow nesnesi doldurmak için app nesnesinin whenReady ve activate eventlerini kullanıyoruz. whenReady eventi asenkron bir fonksiyon, activate ise tipik bir Javascript eventi gibi davranıyor ve kullanılıyor.

2 farklı yerde (hem whenReady hemde activate eventleri içerisinde) BrowserWindow nesnesine ihtiyacımız olduğu için BrowserWindow nesnesi ürettiğimiz kodları yeni bir fonksiyon içerisine almamız daha faydalı olacaktır. whenReady asenkron bir fonksiyon olduğu için then() fonksiyonu ile senkron hale getirebilir ve sonrasında yeni oluşturacağımız fonksiyonu çağırabiliriz. activate eventi de tipik bir Javascript eventi olduğu için doğrudan callback fonksiyonu içerisinde yeni oluşturacağımız fonksiyonu çağırabiliriz. Şimdi teorik olarak anlattığım şeyleri pratiğe dökelim ve Javascript kodunu yazalım;

function createWindow() {
    const win = new BrowserWindow({
        width: screen.getPrimaryDisplay().workAreaSize.width,		// Uygulamayı ekranın genişliği kadar yap
        height: screen.getPrimaryDisplay().workAreaSize.height,		// Uygulamayı ekranın yüksekliği kadar yap
        resizable: false						// Uygulamanın yeniden boyutlandırılmasını engelle
    });
}

app.whenReady(() => createWindow());
app.on('activate', () => createWindow());

Sonuç

Eveet bu kodları yazıp projeyi çalıştırdığınızda tam ekran ve yeniden boyutlandırılmayan bir uygulama penceresi açılacaktır 🙂 Projeyi çalıştırmak için isterseniz terminal ekranından electron . komutu ile (hata verirse npx electron .) yada bu komutu package.json içerisinde yeni bir script olarak ekleyerek terminal üzerinden npm script_adı şeklinde kullanarak yapabilirsiniz.

Tüm ElectronJS yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.