1. ホーム
  2. 質問と答え
  3. Electronのフォームを処理する適切な方法は何ですか？

Electronのフォームを処理する適切な方法は何ですか？

2017-04-09 16 views
16

フォームhtmlおよびsubmitイベントは、「レンダラー」の一部です。 提出されたデータは、メインプロセスで利用可能になるはずです。 フォームを送信し、そのデータをmain.jsでアクセス可能にする適切な方法は何ですか？Electronのフォームを処理する適切な方法は何ですか？

"remote"モジュールを使用してmain.jsの関数にデータを渡すだけでいいですか、それとも良い方法がありますか？

出典

2017-04-09 Elfy

+0

フロントエンドのフレームワークの視点か、純粋に電子かを尋ねていますか？ –

答えて

7

サービス（角度）を使用して、フォームデータをウィンドウで処理します。その後、必要に応じてremoteに通知してください。

// renderer.js 
let ipcRenderer = require('electron').ipcRenderer; 
ipcRenderer.send('submitForm', formData); 

// main.js 
ipcMain.on('submitForm', function(event, data) { 
    // Access form data here 
});

ます。また、バックにメッセージを送ることができます：あなたのrendererあなたは、あなたのmain.jsにあなたは、このイベントと渡されたフォームデータをキャッチし、ipcにデータを送信することができますから、

main.jsのrenderer。

どちらか同期：

// main.js 
ipcMain.on('submitForm', function(event, data) { 
    // Access form data here 
    event.returnValue = {"any": "value"}; 
});

それとも非同期：

// main.js 
ipcMain.on('submitForm', function(event, data) { 
    // Access form data here 
    event.sender.send('formSubmissionResults', results); 
}); 

// renderer.js 
ipcRenderer.on('formSubmissionResults', function(event, args) { 
    let results = args.body; 
});

出典

2017-04-17 20:30:08

3

ありこれを行う方法のいくつかのバリエーションがありますが、すべてはIPCを経由しています。

IPC（プロセス間通信）は、レンダリングプロセスからメインプロセスにデータを取得する唯一の方法であり、イベント駆動型です。これが動作する方法は、プロセスがリスンし、そのイベントが発生したときに何かを返すカスタム定義のイベントを使用できることです。

@Adam Eriによって記述された例は、ドキュメントに記載されているipcMain exampleのバリエーションですが、この方法はすべてに適合しません。

メニューを介してイベントを送信しようとすると（主にメインプロセスで実行される）、またはVueやAngularのようなフロントエンドフレームワークを通じてコン​​ポーネントを介してイベントを送信しようとすると、それが問題になるという理由がすぐに複雑になります。

私はいくつかの例を与える：あなたの点にWebContents

でリモート使用

を、はいあなたは電子remoteを使用することができますが、フォームの目的のためには、推奨されるアプローチではありません。 DR - このプロセスは、その同期性質によるデッドロックは、イベントオブジェクトを引き起こす可能性が発生する可能性があります：ドキュメントに基づいて、遠隔のポイントは、レンダラープロセス

TLから

使用メインプロセスモジュールにあります（ガベージコレクションのため）リークし、コールバックで予期しない結果につながります。

さらに詳しい説明はドキュメントから行うことができますが、最終的にはレンダープロセスでdialogとmenuのような項目を使用するように設定されています。

index.js（メイン処理）

const { app, BrowserWindow, ipcMain } = require('electron'); 
const path = require ('path'); 
const fs = require('fs'); 
const os = require('os'); 

let window; 

function createWindow(){ 
    window = new BrowserWindow({ 
     show: false 
    }); 

    window.loadURL(`file://${__dirname}/index.html`); 
    window.once('ready-to-show', function(){ 
     window.show(); 
    }); 

    window.webContents.openDevTools(); 

    let contents = window.webContents; 

    window.on('closed', function() { 
     window = null; 
    }); 
} 

exports.handleForm = function handleForm(targetWindow, firstname) { 
    console.log("this is the firstname from the form ->", firstname) 
    targetWindow.webContents.send('form-received', "we got it"); 
}; 

app.on('ready', function(){ 
    createWindow(); 
});

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Electron App</title> 
    </head> 

    <body> 

     <form action="#" id="ipcForm2"> 
      First name:<br> 
      <input type="text" name="firstname" id="firstname" value="John"> 
      <br> 
      Last name:<br> 
      <input type="text" name="lastname" id="lastname" value="Smith"> 
      <br><br> 
      <input id="submit" type="submit" value="submit"> 
     </form> 

     <p id="response"></p> 

     <script src='renderFile.js'></script> 
    </body> 
</html>

renderFile.js（プロセスレンダリング）

const { remote, ipcRenderer } = require('electron'); 
const { handleForm} = remote.require('./index'); 
const currentWindow = remote.getCurrentWindow(); 

const submitFormButton = document.querySelector("#ipcForm2"); 
const responseParagraph = document.getElementById('response') 

submitFormButton.addEventListener("submit", function(event){ 
     event.preventDefault(); // stop the form from submitting 
     let firstname = document.getElementById("firstname").value; 
     handleForm(currentWindow, firstname) 
}); 

ipcRenderer.on('form-received', function(event, args){ 
    responseParagraph.innerHTML = args 
    /* 
     you could choose to submit the form here after the main process completes 
     and use this as a processing step 
    */ 
});

伝統的なIPC

の

index.js（メイン処理）

const { app, BrowserWindow, ipcMain } = require('electron'); 
const path = require ('path'); 
const fs = require('fs'); 
const os = require('os'); 

let window; 

function createWindow(){ 
    window = new BrowserWindow({ 
     show: false 
    }); 

    window.loadURL(`file://${__dirname}/index.html`); 
    window.once('ready-to-show', function(){ 
     window.show(); 
    }); 

    window.webContents.openDevTools(); 

    let contents = window.webContents; 

    window.on('closed', function() { 
     window = null; 
    }); 
} 

ipcMain.on('form-submission', function (event, firstname) { 
    console.log("this is the firstname from the form ->", firstname) 
}); 

app.on('ready', function(){ 
    createWindow(); 
});

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Electron App</title> 
    </head> 

    <body> 

     <form name="ipcForm" onSubmit="JavaScript:sendForm(event)"> 
      First name:<br> 
      <input type="text" name="firstname" id="firstname" value="John"> 
      <br> 
      Last name:<br> 
      <input type="text" name="lastname" id="lastname" value="Smith"> 
      <br><br> 
      <input type="submit" value="Submit"> 
     </form> 

     <script src='renderFile.js'></script> 
    </body> 
</html>

renderFile.js（プロセスレンダリング）

const ipcRenderer = require('electron').ipcRenderer; 

function sendForm(event) { 
    event.preventDefault() // stop the form from submitting 
    let firstname = document.getElementById("firstname").value; 
    ipcRenderer.send('form-submission', firstname) 
}

使用WebContents

可能3番目のオプションはです0を使用して、メインプロセスからレンダラープロセスにアクセスします。この説明はremoteドキュメントのセクションからです。あなたが見ることができるように

概要

、電子とフォームを処理する方法には、いくつかのオプションがあります。あなたがIPCを使う限り、あなたは大丈夫です。それをあなたが困ってしまうようなものに使うことができます。私はフォームを扱うためのプレーンなjavascriptオプションを示していますが、そうするための無数の方法があります。フロントエンドフレームワークをミックスに取り入れると、さらに面白くなります。

私は個人的には従来のIPCアプローチを使用します。

あなたのために物事をクリアする希望！

出典

2017-04-19 16:37:35

+1

私は伝統的なIPC方法があなたによれば推奨されない理由はまだ明らかではありません。角度のようなフレームワークを使用しないとどうなりますか？ – JerryGoyal

+0

上記の要約を読むと、より明確になります。私は伝統的なIPCの外では何もお勧めしません（あなたはこの答えを上記のAdamのものと混同しなければなりません）。私はフレームワークなしでこれを行う方法の例をあなたに与えます –

関連する問題

 関連する問題