Turkhackteam.net/org - Turkish Hacking & Security Platform  
Geri git   Turkhackteam.net/org - Turkish Hacking & Security Platform >
Programlama
> Javascript > Electron





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

Electron

Yeni Konu aç Cevapla
 
Seçenekler
Alt 10-01-2019 22:01   #1
  • Teğmen
  • Üye Bilgileri
Üyelik tarihi
01/2016
Nereden
Burdan
Mesajlar
Konular

Teşekkür (Etti): 38
Teşekkür (Aldı): 138


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



Ö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!!!



___________________________________________

 Offline  
 
Alıntı ile Cevapla
Teşekkür

kralfelix Teşekkür etti.
Alt 10-01-2019 22:03   #2
  • Yarbay
  • Üye Bilgileri
Üyelik tarihi
06/2017
Nereden
Merdekan
Yaş
24
Mesajlar
Konular

Teşekkür (Etti): 0
Teşekkür (Aldı): 720




gozel bilgi icin tesekurler isine yarayacak arkadaslar oolacakdir (:



___________________________________________

█║▌│█│║▌║││█║▌║▌║
© Copyright 2017
MERDEKAN
 Offline  
 
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından paylaşılmaktadır.
Bu konular yasalara uygunluk ve telif hakkı konusunda yönetimimiz tarafından kontrol edilse de, gözden kaçabilen içerikler yer alabilmektedir.
Bu tür konuları turkhackteamiletisim [at] gmail.com mail adresimize bildirebilirsiniz, konular hakkında en kısa sürede gerekli işlemler yapılacaktır.
Please Report Abuse, DMCA, Harassment, Scamming, Warez, Crack, Divx, Mp3 or any Illegal Activity to turkhackteamiletisim [at] gmail.com

Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz.
Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.



         

Powered by vBulletin® Copyright ©2000 - 2019

TSK Mehmetçik Vakfı

Türk Polis Teşkilatını Güçlendirme Vakfı

Google+

paykasa
web tasarım

wau