Öncelikle Selamın Aleyküm,
Siz de Kullandığınız işletim sisteminin pencere yapısı yerine kendi oluşturduğunuz pencere tasarımını kullanmak istiyorsanız, aşağıdaki yazdıklarımı okuyabilirsiniz. Konuyu uzatmadan basitçe anlatmaya çalışacağım.
Öncelikle varsayılan pencereden kurtulmamız gerekiyor. Ben de electron'un çalıştıracağı ana-script dosyası main.js ismiyle kaydedili. Sizde index.js veya belirlemiş olduğunuz başka bir isim ile kaydedilmiş olur. Bu dosyayı hatırlayacağınız üzere konsoldan npm init komutunu girdiğimizde oluşturuyoruz.
Bu dosya içerisinde pencere oluşturma fonsiyonu içerisine çerceve kaldırma kodunu ekleyeceğiz.
Pencere oluşturma fonksiyonun altına yazılmış win benim pencere değişkenim oluyor. Yani ana pencere bir değişiklik yapmak istiyorsak win değişkeni ile yapmamız gerekiyor.
frame = false kodu ile penceremizi kaldırıyoruz ve sadece içerik görünüyor. frame komutunun değeri varsayılan olarak true'dur. Yani sizde bu kodlar arasında frame komutu yoksa pencereniz varsayılan olarak gösteriliyor demektir.
resizable= false kodu ile penceremizin büyüklüğünün pencere kenarlarından çekildiğinde değişmesini engelliyoruz. Varsayılan olarak pencerelerin boyutunu değiştirebiliyoruz. Yani true'dur.
transparent = true kodu ile penceremizin saydamlığını ayarlayabiliyoruz. Yani sadece arkaplanın saydamlığını. Varsayılan olarak devredışıdır. Yani false'dur.
backgroundColor = #00FFFFFF penceremizin saydamlığını ve arkaplan rengini ayarlayan renk kodudur. Penceremizin varsayılan arkaplan rengi beyazdır. Yani #FFFFFF'dir. Baştaki iki tane "0" ise penceremizin saydamlık derecesidir. 0-99 arası değerler alır. Yani az görünürden-çok görünüre doğru. Eğer 100% görünür yapmak istiyorsak sadece 6 haneli renk kodunu yazmamız yeterlidir. Bu arada renk kodları HTML renk kodlarıdır.
win.setMaximizable(false); ise pencerenin ekranı kaplamasını engellemek içindir. Varsayılan olarak true'dur. Yani başlık çubuğuna veya ekran kaplama butonuna basıldığında ekranı otomatik olarak kaplar.
Bu kodlardan projenize göre işinize yarayacak olanları ekleyebilirsiniz.
Pencere yapılandırmamızı yaptığımıza göre artık butonlarımızı oluşturmaya geçebiliriz.
Butonlar için javascript kodları:
Tabi CSS kodları ile butonlarını konumunu ve tasarımını ayarlama size kalmış bir şey.
Gelelim Başlık Çubuğundan pencereyi sürükleyebilme işlemine;
Aslında bu işlem çok kolay. Başlık çubuğunun veya ekranın nereden sürükleyebilmek istiyorsanız o nesnenin style kodlarına aşağıdaki kodu ekliyoruz.
Electron Chrome alt-yapısını kullandığı için -webkit- ile kodumuzu yazıyoruz. "drag" ifadesi ile bu nesnenin mouse ile sürüklenebilir olmasını sağlıyoruz.
Burası önemli! Burayı okumayı unutmayın.
Eğer pencerenin durumunu değiştirmek istediğiniz butonlar, yani kapatma, küçültme gibi, drag style'ını atadığımız nesnedin üzerinde ise bu butonlar çalışmayacaktır.
Onun için bu butonların style kodları içine aşağıdaki kodu ekliyoruz.
Bu yazı yazmak için emek sarfettim. Kendi yazımdır. Daha fazla bilgi için aşağıdaki linke tıklayabilirsiniz.
https://electronjs.org/docs/api/frameless-window
İYİ FORUMLAR!!!
Siz de Kullandığınız işletim sisteminin pencere yapısı yerine kendi oluşturduğunuz pencere tasarımını kullanmak istiyorsanız, aşağıdaki yazdıklarımı okuyabilirsiniz. Konuyu uzatmadan basitçe anlatmaya çalışacağım.
Öncelikle varsayılan pencereden kurtulmamız gerekiyor. Ben de electron'un çalıştıracağı ana-script dosyası main.js ismiyle kaydedili. Sizde index.js veya belirlemiş olduğunuz başka bir isim ile kaydedilmiş olur. Bu dosyayı hatırlayacağınız üzere konsoldan npm init komutunu girdiğimizde oluşturuyoruz.
Bu dosya içerisinde pencere oluşturma fonsiyonu içerisine çerceve kaldırma kodunu ekleyeceğiz.
Pencere oluşturma fonksiyonun altına yazılmış win benim pencere değişkenim oluyor. Yani ana pencere bir değişiklik yapmak istiyorsak win değişkeni ile yapmamız gerekiyor.
frame = false kodu ile penceremizi kaldırıyoruz ve sadece içerik görünüyor. frame komutunun değeri varsayılan olarak true'dur. Yani sizde bu kodlar arasında frame komutu yoksa pencereniz varsayılan olarak gösteriliyor demektir.
resizable= false kodu ile penceremizin büyüklüğünün pencere kenarlarından çekildiğinde değişmesini engelliyoruz. Varsayılan olarak pencerelerin boyutunu değiştirebiliyoruz. Yani true'dur.
transparent = true kodu ile penceremizin saydamlığını ayarlayabiliyoruz. Yani sadece arkaplanın saydamlığını. Varsayılan olarak devredışıdır. Yani false'dur.
backgroundColor = #00FFFFFF penceremizin saydamlığını ve arkaplan rengini ayarlayan renk kodudur. Penceremizin varsayılan arkaplan rengi beyazdır. Yani #FFFFFF'dir. Baştaki iki tane "0" ise penceremizin saydamlık derecesidir. 0-99 arası değerler alır. Yani az görünürden-çok görünüre doğru. Eğer 100% görünür yapmak istiyorsak sadece 6 haneli renk kodunu yazmamız yeterlidir. Bu arada renk kodları HTML renk kodlarıdır.
win.setMaximizable(false); ise pencerenin ekranı kaplamasını engellemek içindir. Varsayılan olarak true'dur. Yani başlık çubuğuna veya ekran kaplama butonuna basıldığında ekranı otomatik olarak kaplar.
Bu kodlardan projenize göre işinize yarayacak olanları ekleyebilirsiniz.
Pencere yapılandırmamızı yaptığımıza göre artık butonlarımızı oluşturmaya geçebiliriz.
Butonlar için javascript kodları:
Kod:
const { remote }= require('electron'); //Electron yönetim modülünü ekle
var win =remote.getCurrentWindow(); //win değişkenini pencere kontrolü olarak ayarla
function kapat(){win.close();}//Pencere kapatma işlemi
function kucult(){win.minimize();}//Pencere küçültme işlemi
funtion kapla(){win.isMaximized() ? win.unmaximize() : win.maximize();}//Pencere ekran kaplama işlemiGelelim Başlık Çubuğundan pencereyi sürükleyebilme işlemine;
Aslında bu işlem çok kolay. Başlık çubuğunun veya ekranın nereden sürükleyebilmek istiyorsanız o nesnenin style kodlarına aşağıdaki kodu ekliyoruz.
Kod:
-webkit-app-region: drag;Burası önemli! Burayı okumayı unutmayın.
Eğer pencerenin durumunu değiştirmek istediğiniz butonlar, yani kapatma, küçültme gibi, drag style'ını atadığımız nesnedin üzerinde ise bu butonlar çalışmayacaktır.
Onun için bu butonların style kodları içine aşağıdaki kodu ekliyoruz.
Kod:
-webkit-app-region: no-drag;Bu yazı yazmak için emek sarfettim. Kendi yazımdır. Daha fazla bilgi için aşağıdaki linke tıklayabilirsiniz.
https://electronjs.org/docs/api/frameless-window
İYİ FORUMLAR!!!
