This course is out of date and does not reflect our standards or industry best practices.
Transcript from the "Export HTML File Solution" Lesson
[00:00:00]
>> Steve Kinney: So our mission is to implement the save HTML button. So we need another function, cuz let's not overload the one we have. We'll call it exports.saveHtml. And that we don't, we're always gonna ask for a file, so we don't need to pass on a filename, all we really need is that html content, so you can call it html, you can call it content, I'm gonna call it content for uniformity.
[00:00:32] And, it's very similar, this time we're gonna ask for a file dialog.showSaveDialog.
>> Steve Kinney: Pass in some options, in this case the title is going to be, let's call it Save HTML.
>> Steve Kinney: The default path, you can set it to whatever you want, I'm gonna set it to desktop.
[00:01:05]
>> Steve Kinney: And the filter is gonna be a little bit different from last time.
>> Steve Kinney: We'll have a name of HTML Files this time. And we'll go ahead and give it the extensions of html, htm, is all the ones I can think of.
>> Steve Kinney: We'll say if there's no file after all that, return.
[00:01:40] Otherwise, fs.writeFileSync, the file we just and the content we passed in. And this should be most of the way there. We will do one tiny Mac OS optimization in a second but let's make sure this works before we do anything else. So in this case, we'll go back to the render, and we'll do the savehtml button, we'll add EventListner.
[00:02:19]
>> Steve Kinney: This time we do mainProcess,
>> Steve Kinney: saveHtml.
>> Steve Kinney: And we'll give it the htmlView and the innerHTML.
>> Steve Kinney: Now, we've changed the main process, so we have to kill the app.
>> Steve Kinney: And restart it.
>> Steve Kinney: Type some content.
>> Steve Kinney: All right, so now we can save it. And at this point it's defaulting to the desktop.
[00:02:59]
>> Steve Kinney: That's an HTML file. You can see we still edited there's no saved file at all cuz we didn't save a file that's totally what we expect. But we do have this new file on the desktop with some content. One thing that you might have noticed is that if I'd go let's say to our different apps with this new text made document.
[00:03:22] In Mac OS, a brand new one, is, I get this nice dropdown sheet, right? But if I go to save in Firesale, do the save HTML, it opens like this. And even then, I don't even get the title in here, which is lame. But, we can actually have the same implementation that we saw with the drop down sheet that we're used to in MacOS as we do in a Nato application.
[00:03:51] For Windows and Linux what we're about to do is nothing. But again some of your users might be using MacOS. So considering the amount of effort it's going to take for us, I think it's probably worth it. So, in our main JS, turns out that dialogue.showSaveDialogue actually can take, it has that one overload.
[00:04:13] It can take an optional first argument, which is the window that you would like the sheet to drop down from, right? Now, if you have many windows, you have to pass a reference to the correct window. But if you have only one main window like we do, you can go ahead to all three of these and just do mainWindow.
[00:04:37]
>> Steve Kinney: mainWindow.
>> Steve Kinney: And one more.
>> Steve Kinney: mainWindow.
>> Steve Kinney: So we'll kill the app and start it back up again.
>> Steve Kinney: Open the file. Now you can see, it drops down from that window. It's the little things that matter.