İPUCU

Seçenekler

Electron İle Menü Yapımı

02-02-2019 00:01
#1
King Kong - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
03/2017
Mesajlar:
2.397
Teşekkür (Etti):
158
Teşekkür (Aldı):
424
Konular:
153
Ticaret:
(0) %
Merhaba Arkadaşlar... Electron'u Anlatmama Gerek Yok Sanırım Bugün Electron İle Nasıl Menü Yapılır Onu Anlatacağım.


Öncelikle Bir app.js Ve Bir Tanede index.html Dosyası Açınız.

Daha Sonra app.js'ye Gelin Ve Aşağıdaki Kodları Yazın Kodların Açıklamalarını Yanına Ve Konunun Aşağısına Yazacağım.

Kod:
const {app,BrowserWindow,Menu} = require('electron')
var path = require('path')
var url = require('url')
app.on('ready',function(){
    var window = new BrowserWindow({width:800,height:600})
    window.loadURL(url.format({
        pathname:path.join(__dirname, "notepad.html"),
        protocol:'file',
        slashes: true
    }))// Pencere Oluşturduk

    window.setTitle("THT Konu") // Pencerenin Başlığını Belirledik.
    const template = [
        {   
            label:"Dosya",
            submenu:[
                { label:"Aç", click: function() { window.webContents.executeJavaScript("window.alert('Aç Butonu Çalıştı')") }, accelerator: 'Ctrl + S' },
                { label:"Yeni", click: function() { console.log("Yeni") }, accelerator: 'Ctrl + N' },
                { label:"Farklı Kaydet", click: function() { console.log("Farklı Kaydet") }, accelerator: 'Ctrl + Alt + S' },
                { label:"Kapat", click: function() { app.quit() }, accelerator: 'Ctrl + W' },
        ],
        }
    ]// Menü Template'ini Oluşturduk

    const menu = Menu.buildFromTemplate(template) // Menüyü Build Ettik
    Menu.setApplicationMenu(menu) // Uygulamanın Menüsünü Belirledik.
})
index.html'yi Kendinize Göre Doldurun Onunla İşimiz Yok... Daha Sonra Cmd'ye Gelip electron . Yapıp Projeyi Başlatırsanız Çalıştığını Görürsünüz.

Kod Açıklamaları:

Kod:
const template = [
        {   
            label:"Dosya",
            submenu:[
                { label:"Aç", click: function() { window.webContents.executeJavaScript("window.alert('Aç Butonu Çalıştı')") }, accelerator: 'Ctrl + S' },
                { label:"Yeni", click: function() { console.log("Yeni") }, accelerator: 'Ctrl + N' },
                { label:"Farklı Kaydet", click: function() { console.log("Farklı Kaydet") }, accelerator: 'Ctrl + Alt + S' },
                { label:"Kapat", click: function() { app.quit() }, accelerator: 'Ctrl + W' },
        ],
        }
    ]
1.Kısımda template Değişkeni Oluşturduk
2. Kısımda İse label Menünün İsmi.
3. Kısımdaki submenu İse Menünün Alt Menüsü.
4. Kısımda İse yine label ile alt menünün İsmini Belirledik. click ise tıklanınca fonksiyon çalıştırmamıza yarıyor. accelerator İse Kısayol Eklemenize Olanak Tanıyor.



Örnek Resimler:




Kullanıcı İmzası
Konu King Kong tarafından (02-02-2019 00:03 Saat 00:03 ) değiştirilmiştir.

02-02-2019 00:03
#2
K4R4 BELA - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
01/2019
Mesajlar:
294
Teşekkür (Etti):
15
Teşekkür (Aldı):
40
Konular:
10
Ticaret:
(0) %
Hocam elinize emeğinize sağlık yararlı bir konu olmuş.
Kullanıcı İmzası
Arsız olursan Dünya ayaklarına serilir..
05-02-2019 02:12
#3
Üyelik tarihi:
01/2019
Nereden:
NPCAN GARDAŞ
Mesajlar:
127
Teşekkür (Etti):
13
Teşekkür (Aldı):
31
Konular:
23
Ticaret:
(0) %
Electron Ne Demek Onu Bana Açıklayabilirmisiniz?
Kullanıcı İmzası
Uzman Çöpçü
05-02-2019 02:22
#4
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
Ticaret:
(0) %
Alıntı:
Abdurcabbar´isimli üyeden Alıntı Mesajı göster
Electron Ne Demek Onu Bana Açıklayabilirmisiniz?
Sorumu yanlış anlamayın fakat, Google üzerinden araştırmanız herkes için daha kolay olmayacak mı?
Kullanıcı İmzası
05-02-2019 02:32
#5
Üyelik tarihi:
01/2019
Nereden:
NPCAN GARDAŞ
Mesajlar:
127
Teşekkür (Etti):
13
Teşekkür (Aldı):
31
Konular:
23
Ticaret:
(0) %
Alıntı:
ksc10´isimli üyeden Alıntı Mesajı göster
Sorumu yanlış anlamayın fakat, Google üzerinden araştırmanız herkes için daha kolay olmayacak mı?
Araştırdım Zaten Ama Anlamadım
Kullanıcı İmzası
Uzman Çöpçü
05-02-2019 02:39
#6
BufGix - ait Kullanıcı Resmi (Avatar)
Kıdemli Yazılımcı
Üyelik tarihi:
08/2015
Nereden:
Phobos/Space
Mesajlar:
1.023
Teşekkür (Etti):
314
Teşekkür (Aldı):
443
Konular:
74
Ticaret:
(0) %
Alıntı:
Abdurcabbar´isimli üyeden Alıntı Mesajı göster
Electron Ne Demek Onu Bana Açıklayabilirmisiniz?
Electron; Html, Css, Javascript kullanarak masaüstü uygulamalar yapanızı sağlayan bir JavaScript frameworküdür.
Kullanıcı İmzası
~Cahile gelmez benden hayır
Konu BufGix tarafından (05-02-2019 02:51 Saat 02:51 ) değiştirilmiştir.
05-02-2019 02:48
#7
ALcatraz' - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
05/2013
Nereden:
İstanbul
Mesajlar:
4.266
Teşekkür (Etti):
968
Teşekkür (Aldı):
1752
Konular:
1022
Ticaret:
(0) %
Alıntı:
easyly´isimli üyeden Alıntı Mesajı göster
Electron; Html, Css, Javascript kullanarak masaüstü uygulamalar yapanızı sağlayan bir JavaScript frameworküdür.
Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.
Kullanıcı İmzası
En çok ne zoruma gidiyor biliyor musun? "Ülkem" diye kaydetmiştin beni telefonuna. Kalbimi parçalara ayırdın, hani vatan bölünmezdi?

Yokluğun bilinç altımdayken , varlığın kimin altında merak ediyorum.
Konu BufGix tarafından (05-02-2019 02:51 Saat 02:51 ) değiştirilmiştir.
05-02-2019 02:54
#8
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
Ticaret:
(0) %
electron e ku "çarçoveya jssel" ye ku destnîşan kir ku dîskera dîsketê
-kurdish
Kullanıcı İmzası

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ı