Electron Dialog !

showOpenDialog 사용

showOpenDialog를 사용하면 사용자가 하나 이상의 파일 또는 폴더를 선택할 수 있습니다. 선택된 경로는 문자열 배열로 반환됩니다.

 

 

showOpenDialog 를 사용하면 파일 또는 폴더를 열 수 있습니다. 열린 대화 상자를 표시하려면 다음을[1-1]을 실행하세용

const { dialog } = require('electron')

const selectedPaths = dialog.showOpenDialog();
console.log(selectedPaths);

showOpenDialog는 사용자가 선택한 경로가 포함 된 문자열 배열을 반환합니다. 대신 콜백 메서드를 사용하기로 결정하면이 메서드가 반환 undefined됩니다.

 

사용할 showOpenDialog 옵션이 더 있습니다. 옵션 을 확인하려면 문서 를 살펴보십시오 .

에서 전자 - 가이드 응용 이 코드는 showOpenDialog를 표시하는 데 사용된다. 또한 ipc를 사용하여 기본 프로세스와 렌더러 프로세스간에 통신합니다.

const { ipcMain, dialog } = require('electron')

ipcMain.on('show-open-dialog', (event, arg)=> {

  const options = {
      //title: 'Open a file or folder',
      //defaultPath: '/path/to/something/',
      //buttonLabel: 'Do it',
      /*filters: [
        { name: 'xml', extensions: ['xml'] }
      ],*/
      //properties: ['showHiddenFiles'],
      //message: 'This message will only be shown on macOS'
    };

    dialog.showOpenDialog(null, options, (filePaths) => {
      event.sender.send('open-dialog-paths-selected', filePaths)
    });
})

위에서 볼 수 있듯이 일부 ipc-stuff가 사용됩니다. 상기 봐 dialog.js 응답이 처리되는 방식 메시지가 전송되고 방법을 볼 수 있습니다.

 

showSaveDialog 사용

저장 대화 상자는 사용자에게 대화 상자를 표시하고 선택한 경로가 포함 된 경로를 반환합니다.

 

Electron showSaveDialog를 사용하는 방법을 살펴 보겠습니다. 저장 대화 상자는 사용자가 선택한 경로가 포함 된 문자열을 반환합니다. 저장 대화 상자 만 표시하려면 최소한 이것이 필요합니다.

const { dialog } = require('electron')

const savePath = dialog.showSaveDialog(null);
console.log(savePath)

그러나 다른 대화 상자 와 마찬가지로 더 많은 작업을 수행 할 수 있습니다.

 

const { dialog, app } = require('electron')

const options = {
  defaultPath: app.getPath('documents') + '/electron-tutorial-app.pdf',
}
dialog.showSaveDialog(null, options, (path) => {
  console.log(path);
});

위의 코드는로 저장 대화 상자를 열 때 사용자에게 경로와 파일 이름을 제안합니다 defaultPath. app.getPath 를 사용 하여 사용자 문서 폴더의 경로를 얻은 다음 filename.pdf를 추가합니다.

또한 경로를 제공하는 콜백 메소드가 사용되도록 변경했습니다. 내가 보는 것을 권 해드립니다 showSaveDialog 문서를 사용할 수있는 더 어떤 옵션을 볼 수 있습니다.

 

showMessageBox 사용

showMessageBox는 사용자에게 질문을 표시하는 데 사용될 수 있으며, 답변에 따라 무언가를합니다.

 

showMessageBox를 사용하면 사용자가 선택할 수있는 버튼 세트없이 메시지를 표시 할 수 있습니다.

메시지 상자를 표시하는 데 필요한 최소 코드는 다음과 같습니다.

const { dialog } = require('electron')

const response = dialog.showMessageBox(null);
console.log(response);

그러나 정보가없고 OK 버튼이있는 상자 만 표시됩니다. 대화 상자는 사용자가 클릭 한 버튼의 색인이 포함 된 응답을 반환합니다.

메시지 상자에 정보 추가

상자, 질문 및 두 개의 단추에 더 많은 정보를 추가하고 콜백 메소드도 사용할 수 있습니다.

const options = {
    type: 'question',
    buttons: ['Cancel', 'Yes, please', 'No, thanks'],
    defaultId: 2,
    title: 'Question',
    message: 'Do you want to do this?',
    detail: 'It does not really matter',
    checkboxLabel: 'Remember my answer',
    checkboxChecked: true,
  };

  dialog.showMessageBox(null, options, (response, checkboxChecked) => {
    console.log(response);
    console.log(checkboxChecked);
  });

 

 

• type 메시지 상자에 다른 아이콘을 표시합니다.
• buttons 버튼으로 표시 될 문자열 배열입니다.
• defaultId 상자를 열 때 어떤 버튼을 선택해야하는지 설정합니다.
• title 일부 플랫폼에서 제목을 표시합니다.
• message 메시지를 표시합니다.
• detail 메시지 아래에 더 많은 텍스트를 표시합니다.
• checkboxLabel상자에 확인란도 표시 될 수 있습니다. 이것에 대한 레이블입니다.
• checkboxChecked 확인란의 초기 값

체크 아웃 대화 상자 문서를 더 많은 정보와 당신이 다른 설정에 대해 설정할 수있는 값을 얻을 수 있습니다.

 

showErrorBox 사용

showErrorBox는 사용자에게 오류를 표시하는 데 사용됩니다.

전자 대화 상자 showErrorBox 를 사용하여 사용자에게 오류 메시지를 표시하십시오. 별로 :

1. 기본 프로세스에서 호출하십시오.
2. 대화 상자가 필요합니다.
3. 제목과 메시지가있는 showErrorBox ()를 호출하십시오.    

const { dialog } = require('electron')

dialog.showErrorBox('Oops! Something went wrong!', 'Help us improve your experience by sending an error report')