İPUCU

Seçenekler

Electron - Küçültme (_), Ekran Kaplama (□), Kapatma (X) butonları ve Başlık Çubuğu Yapımı

10-01-2019 22:01
#1
ksc10 - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
01/2016
Nereden:
Burdan
Mesajlar:
410
Teşekkür (Etti):
41
Teşekkür (Aldı):
146
Konular:
74
Ö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ı:
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şlemi
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.
Kod:
-webkit-app-region: drag;
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.
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!!!
Kullanıcı İmzası
kralfelix Teşekkür etti.

10-01-2019 22:03
#2
cewl - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
06/2017
Nereden:
Merdekan
Yaş:
24
Mesajlar:
2.652
Teşekkür (Etti):
0
Teşekkür (Aldı):
725
Konular:
165
gozel bilgi icin tesekurler isine yarayacak arkadaslar oolacakdir (:
Kullanıcı İmzası

Hansi quruhin bele Movlasi var?! Sielerin Hz Abbasi var!

Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler

Yetkileriniz
Sizin Yeni Konu Acma Yetkiniz var yok
You may not post replies
Sizin eklenti yükleme yetkiniz yok
You may not edit your posts

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodları Kapalı
Trackbacks are Kapalı
Pingbacks are Kapalı
Refbacks are Kapalı