Save dialog box

Saving dialog.showsaveDialog () is a lot easier now that most of their apis are the same and only some of them are different, so if you’ve already mastered the previous dialog.showsaveDialog (), it’s a lot easier. This time we are going to make a save button to save the fixed contents to the file.

Make a save button

Start by writing a button in index5.html:

<button id="saveBtn">Save the file</button>
Copy the code

Then add the following code to the 

const saveBtn = document.getElementById('saveBtn')
    saveBtn.onclick = function(){
        dialog.showSaveDialog({
            title:'Save file',

        }).then(res= >{
            console.log(res)
        }).catch(err= >{
            console.log(err)
        })
    }
Copy the code

There is more to it than that. For example, if you import the FS module in Node and stream files, you can actually generate a file. First, introduce the FS module.

 const fs = require('fs')
Copy the code

Then, after saving, write to the file.

saveBtn.onclick = function(){
    dialog.showSaveDialog({
        title:'Save file',
    }).then(res= >{
        console.log(res.filePath)
        fs.writeFileSync(res.filePath,'wechat official Account: Code Program Life')
    }).catch(err= >{
        console.log(err)
    })
}
Copy the code

Once you’ve done that, you can type it in the terminalelectron .Let’s open up the app and preview it. That’s all for this video.

Message dialog box

Open file dialog box and save file dialog box we have learned, this section will learn the most common message dialog box dialog.showmessagebox (), it is a lot of properties, so we first look at its related properties.

ShowMessageBox Properties

It has too many attributes, so we only select some common attributes to explain. If you use them in your work, you can check the relevant API on the official website first, and then use them according to your needs.

  • Type: String, optional, icon style, yesnone,info,error,questionandwarning
  • Title: String title of the pop-up box
  • Messsage: String, mandatory message box content, this is mandatory
  • Buttons: Array types that return an index value (subscript)

Make a confirmation dialog

Start by adding a button to index5.html.

 <button id="msgBtn">Pop-up dialog box</button>
Copy the code

Then the content of this dialog box is also very simple, is a simple pop-up sentence, the user can click “OK” or “cancel”. The code is as follows:

var msgBtn = document.getElementById('msgBtn')
    msgBtn.onclick = () = > {
        dialog.showMessageBox({
           type:'warning'.title:'Hello World'.message:'How are you?'.buttons: ['good'.'bad']                
       }).then(res= > {
           console.log(res); })}Copy the code

You can see in the callbackresThere is aresponseThis one will give us an array of indices that return buttons, so we know which button the user clicked on, and we can interact accordingly.

ShowMessageBox is encouraged because it’s more flexible than alert in JS, you can set buttons, you can set titles. These are the three most commonly used dialogs, but there are also two less commonly used dialogs, which I won’t cover here.