일렉트론 시작 - 5 (Electron study, dialog, 알림창 띄우기)

일렉트론을 하다보면 간단하게 alert 또는 confirm 기능을 사용해야되는 경우가 생깁니다.

이럴때는 javascript에서 하는 것 처럼 html에 코딩하게되면...input type text 부분이 먹통이 되어버리는 경우가 발생 합니다.

 

아래 샘플코드를 예를들어 설명 하면,

<input type='text' value='' id='data' />
<input type='button' value='등록' onclick='saveData()' />

<script>
const { ipcRenderer } = require('electron');

function saveData(){
    if(confirm('내용을 변경하시겠습니까?')){
        var data = document.getElementById('data').value;
        ipcRenderer.send('저장하는곳', {data:data})
        alert('전달하였습니다.');
    }
}
</script>

 

요런코드가 있다고 가정하여보자. 전혀 어렵지 않는 코드 입니다.

단순하게 input type text에 있는 값을 저장하는 모습 입니다.

그런데..이런식으로 confirm이나 alert을 사용하게 되면 input type text가 읽기전용(readonly)처럼 변해 버립니다.

다시 말해 클릭도 안되고 입력도 안되는 현상이 되어 버립니다.

 

그래서 이러한 confirm이나 alert을 자바스크립트의 UI로 구성하지 않고 시스템에서 제공되는 기능으로 사용하려면 dialog라는 모듈을 사용해야 합니다.

위 코드를 dialog로 사용해서 변경하여 보았습니다.

<input type='text' value='' id='data' />
<input type='button' value='등록' onclick='saveData()' />

<script>
const { ipcRenderer } = require('electron');
const { dialog } = require('electron').remote;  //새로 사용할 질문창

const options = {
    type: 'question',  //종류
    buttons: ['취소', 'Yes', 'No'],  //버튼 스타일
    defaultId: 2,  //고유 아이디
    title: '제목',  //제목
    message: '메시지 입니다.',
    detail: '세부내용입니다.',
    checkboxChecked: false,  //체크박스(메시지를 저장합니다 이런 기능)
};

function saveData(){
    dialog.showMessageBox(null, options).then(function(res){
        if(res.response == 1){
            var data = document.getElementById('data').value;
            ipcRenderer.send('저장하는곳', {data:data})    
            dialog.showMessageBox(null,{type:'info',title:'Ok', message:'전달했습니다.'});  
        } else {
            dialog.showMessageBox(null,{type:'info',title:'Ok', message:'취소했습니다.'});  
        }
    });
}
</script>

 

간단하게 메시지를 사용해서 물어보는 코드 입니다.

showMessageBox라는 함수를 사용하면 정상적으로 동작하는 모습을 볼 수 있습니다.

Promise형태로 되어있어서 then 함수를 통해서 콜백 데이터를 받을 수 있습니다.

콜백 데이터가 1인경우 "예" 를 누른 값 입니다.

 

조금 더 세부적인 내용은 아래 공식 사이트를 참고하여주세요~

https://electronjs.org/docs/api/dialog

dialog | Electron