Я установил пакет электронных модулей для реализации вкладок в электронном виде, как показано ниже.
package.json
{
"name": "Backoffice",
"version": "1.0.0",
"description": "BackOffice application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "Karthik",
"license": "ISC",
"devDependencies": {
"electron": "^2.0.8",
"electron-tabs": "^0.9.4"
}
}
main.js
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const path = require("path");
const url = require("url");
const TabGroup = require("electron-tabs");
let win;
const tabGroup = new TabGroup();
function createWindow() {
win = new BrowserWindow();
win.loadURL(url.format({
pathname:path.join(__dirname,'index.html'),
protocol:'file',
slashes:true
}));
win.on('closed',()=>{
win = null;
})
}
app.on('ready', function(){
createWindow();
const template = [
{
label : 'Backoffice',
submenu: [
{
label : 'Account Management',
click : function () {
let tab = tabGroup.addTab({
title: "Electron",
src: "http://electron.atom.io",
visible: true
});
}
},
{
label : 'HR Management',
click : function () {
console.info("CLICK HM menu");
}
},
]
}
]
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
});
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<title>BackOffice</title>
<link rel = "stylesheet" href = "styles.css">
<link rel = "stylesheet" href = "node_modules/electron-tabs/electron-tabs.css">
</head>
<body>
<h1>BackOffice</h1>
<div class = "etabs-tabgroup">
<div class = "etabs-tabs"></div>
<div class = "etabs-buttons"></div>
</div>
<div class = "etabs-views"></div>
</body>
</html>
Я получаю следующую ошибку при запуске npm start
App threw an error during loadReferenceError: document is not defined at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:3:1)
at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:421:3)
at Module._compile (module.js:642:30)
at Object.Module._extensions..js (module.js:653:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:504:12)
at Function.Module._load (module.js:496:3)
at Module.require (module.js:586:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\DEV_2018\nodejs_workspace\electron\menu-demo\main.js:11:18)
Почему я не могу загрузить пакет электронных модулей.
Что вызывает эту ошибку? Как создать новую вкладку при нажатии на меню приложений в электронном?
В основном мое требование - реализовать вкладки, которые мы видим в eclipse IDE. При нажатии на каждый исходный файл открывается новая вкладка, и мы также можем перетащить вкладку в eclipse.
Может быть, потому что ты звонишь
const tabGroup = new TabGroup();
до того, как страница загрузится.
Попробуйте разделить его на
let tabGroup;
и внутри createWindow ():
tabGroup = new TabGroup();
Редактировать: Вы должны изменить const на let или var, извините
Я все еще получаю ту же ошибку. Ошибка находится в строке const TabGroup = require ("electronics-tabs").
Правильно ли вы установили модуль? Если вы получаете сообщение об ошибке во время выполнения функции require (), это может быть связано с установкой вашего пакета. Попробуйте сделать чистую установку: github.com/brrd/electron-tabs
Я правильно установил модуль. У меня установлена версия 0.9.4. const TabGroup = require ("electronics-tabs") отлично работает, если используется внутри index.html. Я предполагаю, что эта проблема связана с тем, что tabGroup не может найти объект документа HTML.
В документация для electron-tabs
упоминается вызов его из процесса рендеринга, но вы делаете это в основном процессе. Основной процесс - это то, откуда вы управляете электронным API, например открывать окна, как в main.js
. Каждое окно браузера создает новый процесс визуализации, который может взаимодействовать с основным процессом или управлять своим собственным документом и веб-APIS.
Вы получаете ошибку, document is not defined
, потому что у основного процесса нет доступа к DOM, потому что вы можете открывать несколько браузеров из одного и того же основного процесса; он не знал бы, что использовать. Итак, что вам нужно сделать, это поместить сценарий в процесс рендеринга. Создайте renderer.js
и поместите туда код electron-tabs
(const TabGroup = require("electron-tabs");
). Затем в ваш index.html
вставьте <script src = "renderer.js"></script>
, и он должен работать.
Я получаю сообщение об ошибке - Справочная ошибка: tabGroup не определена в main.js, когда я переместил код электронных вкладок (const TabGroup = require ("electronic-tabs"); в render.js. Я считаю, что код TabGroup должен быть там в main.js, так как я хочу открыть вкладку при нажатии любого меню, а код меню находится в main.js
Для меня было бы полезно и более понятно, если бы вы могли вставить весь исходный код. Заранее спасибо.
«Я считаю, что код TabGroup должен быть в main.js» Нет, не должно. Вы должны инициализировать его в Renderer и просто поставить в известность из Main
Да, это правильно. Элемент меню, которым вы управляете в main.js
, - это верхняя строка меню, такая как «Файл», «Правка», «Просмотр» и т. д. ВСЕ код electron-tabs
должен быть в renderer.js
, так что все, что ссылается на TabGroup. Вот почему вы получаете эту ошибку, потому что const tabGroup = new TabGroup()
и tabGroup.addTab(...)
все еще находятся в main.js
. Чтобы общаться от основного процесса к процессу рендеринга, что, кажется, вы хотите сделать при событии строки меню, посмотрите на ipcMain и ipcRenderer.
правильное использование ipc из MenuItems может быть непростым, см. мой ответ с рабочим кодом
Как подробно объяснил @ coolreader18, вы должны использовать electron-tabs
в Процесс рендеринга
Это означает, что вы должны уведомлять html из main.js, когда вы щелкаете пункт меню. Щелчок MenuItem
предоставляет вам вызывающего абонента BrowserWindow
, чтобы вы могли отправить ему сообщение.
main.js
...
{
label: 'Account Management',
click: function (menuItem, browserWindow, event) {
browserWindow.webContents.send('add-tab', {
title: 'Electron',
src: 'http://electron.atom.io',
visible: true
})
}
},
...
index.html
<body>
...
<script>
const { ipcRenderer } = require('electron')
const TabGroup = require('electron-tabs')
const tabGroup = new TabGroup()
ipcRenderer.on('add-tab', (event, arg) => {
tabGroup.addTab(arg)
})
</script>
</body>
Пожалуйста, предложите импортировать модуль в электронном виде, чтобы реализовать вкладки при нажатии на меню, если «электронные вкладки» не являются правильным модулем для реализации вкладок в электронном виде.