Electron Build Desktop Apps HTML\CSS\JS | Dialog, Sessions and Cookies 03

Key Takeaways

hey guys how you doing welcome to new video tutorial on the series of learning electron so you all watched the last Orioles if you're not go ahead and watch if yes so continue with me in the series in here so in the couple lost Orioles we've covered how getting started in what environment setup have talks about this electron a lot of training that willows do a real nice things and actually for today we're gonna talk about the dialogue so that was a very important thing for this top application so whether like there isn't an error awkward's on your application so we just can display a pop hop in here or like let's say a dialects name the dialogue with like an error logout says awkward on this like process or something or you can just open up a dialogue for opening a file like windows specific or specifically a dialogue for opening the files or pain images saving files all of these kind of things our dialogues and it's very easy to use with Elektra in here so all you need to do is include the remote as in you as you have done in here so it's from the electron modular so we can't get from the main process directly we need to use their modes module in here so for the dialogue we can do let's dialogue equals remotes the dialogue so dialogue all this what we need to do actually to get the dialogue modular so we can start using it right out of the box and I've created another button in here I just named it's my second button and open dialogue but it's just pretty simple think on my HTML file so we can just assign BTN and I have actually out of the bottom I was gonna see in here from document to get in behind II and now I'm gonna listen in the event cell add event listener and we're gonna use the clock event and actually we get the actual events objects and we all we do is actually open up a dialogue so we use our dialogue model urges a open show open dialogue if they show open dialogue gonna open like show us the dialogue for opening files and stuff so we can do show open dialogue the first thing is the configuration or the the options you want to pass in so you pass in an object let's say the title so which title you can pass in the limited files you want to open like images for like only PNG or JPEG or only exe a file or something like this you can get the full documentation of this from the electron the Ardell target rly and for that especially up in the dialog documentation so why don't come to the club board anyway so let me go back let's go see you can't get the dialogue so all the dialogue is very very self-explanatory some open data gates like the title default back and the options then the callback so the callback to go scroll all the way down it gonna give you the file paths so whenever he bristly or select the files you want to open it calls back the function and we chose the final path so you can open your files then and so this is how it works for the callback so let's say simple dialogue then here you put the vehicle back actually so the callback and file paths and so let's possible the block that's play open so simple statuses are gonna pass in or print just the file path so this will open up the dialogue on us on when clicking on the button so let me just draw make sure to npm run starts every dundas so let me just use that and I'm opening here 12 developer tools so when we click open dialogue we get a dialog in here this window specific dial if you are me on another platform let's say OSX Mac OSX you're gonna get your platform independent thing so this like cross platform so you get your platforms or whatever like let's say you select this paper or this thing and click OK you get the call back and it just prints out the fiber see usual epidermis disk soft yada yada yada and the actual file paths then then you can use like a file system open method to open up and pass this files then you can you you know how to do that this is like the platform independence specific open dialogue thing there's also a lot of other couple dialogue things so if we go back in there and like show save dialog they save dialogue whenever you want to save a file so you just open up the save dialog and tell the user where to save the file there's show pop message box and this cello music box is this very simple thing dialog show message box it gives also the melody the options in here so one of the options is message which is what is your message you want to deliver hey let's say so hey I know it's not working specifically sir okay I need to use the box waterway so hey message just like this and also there is a title so I'm gonna title what is the title of this one simple dialogue and the other one is the callback so probably there is nothing to passing in the callback and just call this one and that should open up the message so I believe the callback is gonna be triggered once we press ok so like message okay so let me just comment this out so we won't yes like dialogue conflicts between both of these file logs and try to refresh this one don't restart the whole application just refresh this you can go to view reload and reload everything in here open dialogue nice one so I'm just gonna see hey I am message and a simple dialogue you can press ok button and the callback gonna be tribute in here so there's also a couple things in here but you've got the policies like the one you can check out the documentation for more and more things and like all the the methods are available on the events trigger and all this kind of thing so you can use it right out of the box as you can see it's very very simple all the thing I want to mention in here in this tutorial is sessions and cookies so you're gonna need a lot of like to create a help cookies or the help of cookies so you're going to use it quite a lot so cookies are like piece of data if you're what developer so also electron offers us the cookies in here or over sessions so you can access the main session then get the cookies you can get the available cookies or you can set them as well so this is like the the main thing or the basic structure how to require the session and get a default session I've already like set up I think in here for just a simple thing let me call this one in here all the think it does in here is really very simple so I get this session and the session from the remote session the access to the electron session module then session the default session we should get the default session because each window are gonna get like this specific session in here if the web content change so just do session if you're working with just a single window then when opening other windows are going to be child windows of the main window don't worry just do a session default session then you feel access to the cookies then just set a cookie make sure to get or two on the set cookie to have three this three object values and p key values actually the name the volume and the URL like very others are required things if you're on put one of these the gonna get like a weird error so make sure to have three of those and also there's a callback with an error if any error gonna be triggered you can call it a login yourself example session default session cookies and set the cookie and after setting the cookie what I'm doing is getting the cookie actually all all the available cookies here you can pass in the field so let's say the name of the cookie is equals foo each cookie has the name of foo it gonna be like called back or passed back in here if I'm using nothing it gonna just put back or give us back all the cookies available out there which I'm doing in here and just calling counseling log them to the console so now if you can't refresh and we're gonna get an object in here and just an object of flames make sure like the cookies on array and here I would think so if you go to me as you can see local house and named Sifu and the path and secure false you can also set all of this kind of things in here and for the session of the value bar as you can see this our cookie upsetting me here so our cookie is very very she will useful for our like authentication for sending here there's file default headers all of these kind of things cookies are very very useful and electron offers them in a very very simple way actually so they are very very nice very specific actually and very easy to use there's also a couple of like events like when a cookie change they change events and do the cookie the cookie object gotta be triggers so you can you wouldn't know when the cookie has changed or not also a couple of methods for setting removing a whole cookie you can just cookies remove and you're gonna get remove the cookie out there it's very simple very very easy to use also very efficient when using cookies and also you can check out the from the documentation the session documentation because it's gonna be very very useful for you when developing a little application using sessions and solving all this kind of things using session as well another thing I want to mention in here before the end of this video tutorial is the browser view so browser view are also very very important things like let's say you wanna lay out another like web page let's say you wanna lay out our upside for my website in here into your application how you can do that using what the view here and as far as I can tell we have view or browser view has duplicated from electron they are seen notice like this with your module can be removed at any time from the from the electron so make sure to keep an eye on this watch it if it's gonna be removed but I'm just gonna put this explain this one in here because it's very very useful on your development thing so all you do is browser to view then like open a new browser window let's say then for the view you sets like each of no integration falls like this like configuration thing you can check it on on the documentation of down there and set the browser view for the window assembles this this house is going to be done very very easy to use and also very very simple so let me just do this I have here browser view so browser view equals remote dot browser view so this is how you can get it I believe this browser view is a comfortable that's okay on the beginning and here we can access or we can do our browser view so let me just redraw its simple browser view down here so actually what we do is create a browser view with this references in here so we'll just do that's view equals new browser or actually is not a compliment so let me just let me just go back over and make it comes to be and go down browser view and actually put some kind of an object in here from integration and copy-paste this time you know for fast iteration then to tell the window or whatever we know you want to attach this browser view to as you just say the window set browser view and passing in the view and you can set the balance like the the width and the height of the browser view and the x and y position of that then you kill the old URL from there let's say for example electron or any other website little bit down there into the browser view a simple test you can do that so let me just do this and to get actually the crunch window you can use the main j/s and export nodejs of all these kind of things and also remote model offers us a very very simple way to do that is get current window which is what because we are working on only one window in here you can just do this trick in you but if you are working on couple of like windows multi window application make sure to choose the right window for you here so get the right window which save or sorry so let me window let's say this is going to be equals your voice get Kurt's window and this is actually a function for the main window we can set browser view and then we pass in our view there actually for the view we set the bounds as symbols this how we can do it so view dot set bounds and for the boundaries X 0 1 0 and with let's say 500 or 400 PI it is going to be about and see 300 then Julie yogi URL for mixer you do view web content but Leo you are also view don't web content stop the old URL then you pass in a wall around them so let's say I wanna for example use the same URL like electron awesome audio and we should pass that in here and we should see power web view when we run the application so let me now must reload the application and let's check out the web view so I'm just gonna take bounce a couple of seconds to layout and boom yeah this is like where we have placed our view and as you can see this is the electrode page about getting in here you can load any other page over here though this gonna be very useful for you if you are using this application to like multiple pages parse pages things and stuff but I think this is deprecated I just want to show off this one for you if you find it useful please make sure to push that like button I guess this pretty much it guys for this tutorial it was very simple tutorial just taking out or covering a couple of things from electron API and make sure to check the documentation because I can't cover all of this like up modules in here on end of the electron a lot of vendors clipboard there is environment variables these minions are very simple and very soft explain it you can just get into that and start working with it or playing around with this and you're gonna get into the how how it works and it's really simple actually in the next toy hopefully cover the like the main or the the window in here or the ideally the taskbar here or the file window a party so how we can do it or how to customize this for your own you know like in the next one so the guys are watching I hope you really enjoy I will catch you in the next one