Currently with my BSP based WM electron window resizes to accommodate the screen, according to browserWindow options focusable tag should prevent it, bug when I tap on my app, the window isn't focused and doesn't listen for inputs.
What other flag would me have my window not affected by BSP based WM
My current flags for browserWindow with gets affected by WMs
const mainWindow = new BrowserWindow({
width: 650,
height: 400,
center: true,
frame: false,
resizable:false,
alwaysOnTop: true,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
Related
I have a menu in my application that when you click on document properties another window pops up, but the application menu is also being inherited by this window, so you can open the document properties window from the document properties window. I just want to disable the menu for the document properties window,the only way I've been able to achieve this was by making the window frameless, but I still want the title bar to show, so that's not the solution I'm looking for.
I've tried using docProps.removeMenu(), docProps.setMenu(null), and even docProps.setApplicationMenu(null). I've moved it around, tried making docProps a global variable, nothing has worked.
This is my code:
//Create references for modules that require electron
const { app, BrowserWindow, Menu } = require('electron')
//Create a global reference for the main window
let mainWindow
function createWindow () {
//Create the browser window
mainWindow = new BrowserWindow({
minWidth: 300,
minHeight: 300,
backgroundColor: '#888888'
})
//Load the index.html file
mainWindow.loadFile('index.html')
//Reload the main window on resize
mainWindow.on('resize', function () {
mainWindow.reload()
})
}
function createAppMenu () {
//Create application menu template
const template = [
{
label: 'File',
submenu: [
{
label: 'Document Properties...',
click: function () {
docProps = new BrowserWindow({
width: 250,
height: 300,
resizable: false,
title: 'Document Properties'
})
//This isn't working and I'm not sure why
docProps.removeMenu()
}
}
]
},
{
label: 'Edit'
},
{
label: 'View'
},
{
label: 'Window'
},
{
label: 'Help'
}
]
//Build app menu from template
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
//Call the createWindow function once electron has finished initializing
app.on('ready', function () {
createWindow()
mainWindow.maximize()
createAppMenu()
})
You can see the entire project at https://github.com/Leglaine/ElectroText
The only error message I get is when I try to call docProps.setApplicationMenu(null), it says that setApplicationMenu cannot be called on docProps, but I didn't really expect that to work anyway. Thanks in advance for your help!
win.removeMenu() and win.setMenu(null) seem to be currently broken in Electron when you have already set an application menu via Menu.setApplicationMenu()
Try setting an empty menu like this
docProps.setMenu(Menu.buildFromTemplate([]))
How to implement background service using electron.
i'm having a trouble can anyone tell me how to start a background
service using electron which runs even after closing the app. i have
tried many solutions but all of them stop the service after closing
the app.
You can use tray. here is an example (source):
"use strict";
// [run the app]
// $ npm install electron
// $ ./node_modules/.bin/electron .
const {app, nativeImage, Tray, Menu, BrowserWindow} = require("electron");
let top = {}; // prevent gc to keep windows
app.once("ready", ev => {
top.win = new BrowserWindow({
width: 800, height: 600, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
top.win.loadURL("https://google.com/");
top.win.on("close", ev => {
//console.log(ev);
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
// empty image as transparent icon: it can click
// see: https://electron.atom.io/docs/api/tray/
top.tray = new Tray(nativeImage.createEmpty());
const menu = Menu.buildFromTemplate([
{label: "Actions", submenu: [
{label: "Open Google", click: (item, window, event) => {
//console.log(item, event);
top.win.show();
}},
]},
{type: "separator"},
{role: "quit"}, // "role": system prepared action menu
]);
top.tray.setToolTip("hello electrol");
//top.tray.setTitle("Tray Example"); // macOS only
top.tray.setContextMenu(menu);
// Option: some animated web site to tray icon image
// see: https://electron.atom.io/docs/tutorial/offscreen-rendering/
top.icons = new BrowserWindow({
show: false, webPreferences: {offscreen: true}});
top.icons.loadURL("https://trends.google.com/trends/hottrends/visualize");
top.icons.webContents.on("paint", (event, dirty, image) => {
if (top.tray) top.tray.setImage(image.resize({width: 16, height: 16}));
});
});
app.on("before-quit", ev => {
// BrowserWindow "close" event spawn after quit operation,
// it requires to clean up listeners for "close" event
top.win.removeAllListeners("close");
// release windows
top = null;
});
Yes, it is possible by using electron-process npm library.
ref :- https://www.npmjs.com/package/electron-process
First you will have to register the module which you want to run in background, just create simple background.html,
--background.html--
add below lines in script tag,
const background = require('electron-process').background;
background.registerModule(require('../main/snippets/SnippetsManager'));
In main process just create one browser window in which your background.html will run and keep it as hidden window,
--main.js--
app.once("ready", ev => {
service = new BrowserWindow({
width: 80, height: 60, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
service.loadURL("file://' + __dirname + '/background.html");
service.on("close", ev => {
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
});
Hope it helped,
Regards.
Electron is not designed to run in background. If you are closing
application then it will terminate all processes related with it.
Electron is only used to provide GUI layer. After all it is hybrid application and it doesn't interact with core OS services to live
itself like background service.
Apart from this there are two options:
If you write a service with something else, say a node or .net application, then you probably could use Electron to interact with that service (via bundled Node accessing Windows APIs).
Create feature like system tray. Minimise application to system tray.
Ref Link
Ive searched everywhere on how to make the corners rounded of my browserWindow.
How can I achieve rounded corners?
I've tried making it transparent. But nothing works.
Hers my code:
/**
* we need to keep a global reference of the window object. If we don't, the
* window will be closed automatically when the js object is garbage collected
*/
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1800,
height: 1000,
frame: false,
transparent: true,
icon: __dirname + 'icon.png'
})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', function () {
/**
* Dereference the window object, usually you would store windows in an
* array if your app supports multi windows, this is the time when you
* should delete the corresponding element.
*/
win = null
})
}
For transparency try using the opacity property. The range is from 0 to 1
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1800,
height: 1000,
frame: false,
radii: [5,5,5,5],
transparent: true,
icon: __dirname + 'icon.png'
})
My site has a top bar with dropdown buttons and a bottom bar with other information. In the main body I have a panel with 2 items-> a map and a grid.
On the map I have an afterrender listener which can detect mobile browser. On detecting a mobile browser I want to make the map full screen removing everything else in the window adding a button to go back to regular screen.
items: [{
xtype: 'gmappanel',
listeners: {
afterrender: function (map, eOpts) {
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
//make the map full screen
}
}
}
},
anotherGrid
]
You can wrap up your gmap panel into a window with maximized config:
Ext.create('Ext.window.Window', {
maximized: true,
title: 'Map',
frame: false,
modal: true,
renderTo: Ext.getBody()
}).show();
https://fiddle.sencha.com/#fiddle/1gnj
I have been working on developing a custom extjs console to enable author drop an asset using html5smartfile component. But somehow, the html5smartfile component is not working the way it should. The Area where an author can drop an asset is not displaying. The same is working fine if I am creating a CQ5 dialog. But in my case where i have created a window it's not working.
I have declared my smartfile component like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false
};
But this is rendering like this:
After a lot of work, I found out that the CQ5 dialog updates the view for the component but in case of my window, I have to update it myself. Thus, with a slight manipulation, i just succeeded in displaying the drag area by tweaking the declaration like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false,
listeners: {
afterlayout: function () {
this.updateView();
}
}
}
So now the panel looks like:
But still the Drag and Drop is not working. My Window declaration is like this:
win = new CQ.Ext.Window({
height : 750,
width : 700,
layout : 'anchor',
// animateTarget : btn.el,
closeAction : 'close', // Prevent destruction on Close
id : 'manageLinkWindow',
title : '<b>Multi Link Widget Dialog</b>',
frame : true,
draggable : false,
modal : false, //Mask entire page
constrain : true,
buttonAlign : 'center',
items : [assetLinkDropField]
});
}
I think you should not use
ddAccept: 'video/.*',
This allows only videos from the content finder to be dragged and dropped. It should be "image/".
Verify your other extjs properties / configs for html5smartfile if the above doesn't resolves your problem.