TransWikia.com

Crear otra ventana en electron con react js

Stack Overflow en español Asked on December 4, 2021

Terminé mi app y estoy haciendo un dashboard para poder manejar mis datos desde una app de escritorio creada con electron y react.

Para poder usar estas dos tecnologías juntas, primero creé mi proyecto con la cli de react npx create-react-app y luego agregué un electron.js al lado del index.html que se encuentra dentro de la carpeta public.

Les dejo mi código y luego explico mi problema:

import React from 'react'
import Paper from '@material-ui/core/Paper';
import Card from '@material-ui/core/Card';
import { makeStyles } from '@material-ui/core/styles'
import { IconButton, Typography } from '@material-ui/core';
import AddOutlinedIcon from '@material-ui/icons/AddOutlined';

export default function Articulos(props) {


const addArticle = ()=>{
    //aqui la logica para crear una nueva ventana que obviamente no se como hacerlo
}

const classes = useStyles()
return (
    <>
        <Paper onClick={addArticle} elevation={9} className={classes.add}>
            <Card className={classes.container}>
                <IconButton >
                    <AddOutlinedIcon className={classes.button}/>
                </IconButton>
                <Typography className={classes.footer}>
                    Agregar un nuevo articulo
                </Typography>
            </Card>
        </Paper>
    </>
)
}

Necesito crear una ventana nueva cuando se dispare el evento addArticle, pero no se como crearlo, es mi primera vez en esto .

One Answer

Estuve revisando esta respuesta. Y a lo que entendí en tu main.js de electron debes de agregar lo siguiente

app.setAsDefaultProtocolClient(protocol[, path, args])

protocol es un string y es el nombre del protocolo sin ://.

Path y args son opcionales.

Un ejemplo del main.js sería el siguiente

const {app, BrowserWindow} = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);
app.setAsDefaultProtocolClient('foo')

este es el link de la documentación de electron con respecto a app.setAsDefaultProtocolClient.

para testear si funciona y no modificar tus elementos podrías agergar un link

<a href="foo://">App electron</a>

también debes de agregar en el package.json el protocolo. ve la parte que dice build

{
  "name": "foobar",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^3.0.7",
    "electron-builder": "^20.38.2"
  },
  "dependencies": {},
  "build": {
    "appId": "foobar.id",
    "mac": {
      "category": "foo.bar.category"
    },
    "protocols": {
      "name": "foobar-protocol",
      "schemes": [
        "foo"
      ]
    }
  }
}

Answered by alejandro00 on December 4, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP