TUTORIAL - Electron JS - Custom Title Bar / Frameless Window - IPC Main/IPC Renderer - MODERN GUI

[Music] hi guys wandersun here today i bring you the first tutorial on electron js in this tutorial i will teach you how to create a personalized title bar using the ipc main and ipc renderer connections which is the correct way to work inside electron without using the remote functions the focus of this tutorial will be on the functions to create this personalized title bar not on the html and css part if you are not yet subscribed to the channel subscribe to not miss any videos and leave your like to help bring more videos i will leave this link for you in the video description where you can follow step by step the process of creating a new project using electron and nodejs as a requirement you need to have nodejs installed on your machine if you don't have it you can access the link as shown in the video and do the installation before we start to run an electron application we need to create some files manually we will do that later in this video [Music] to start i will create a folder on the desktop and open the powershell to execute the commands that will be requested soon type the command npm init y to start the creation of an initialization file for our project after that run the second command to install the electron inside the current folder this process can take a few seconds once this is done open the vs code to create the other files for the application startup create the files main.js and preload.js at the root of the project and inside the folder src createthefileindex.html [Music] after that copy the following code and paste it into the main.js file this file is responsible for the main actions of the application in the back end [Music] now do the same for the index.html file this file will be responsible for the interface of our application [Music] finally repeat the process for the filepreload.js you can learn more about this file by reading the electron documentation [Music] now inside the file package replace the line test with the command start as shown in the video this command will run our application by a node js's npm commands within visual studio code i am using two extensions one is the npm to recognize the start line that we have just created and does not need to manually enter the codes and the second is the browser preview responsible for giving us in real time the html application interface [Music] at the bottom left will appear the npm scripts that we created inside the file package see that inside it we already have the command start that we created previously and that will run the application see that when we run the application and error is generated this error is because we need to rename the file index.js to main.js see that the application starts but without any content inside this is because we need to change the directory of the file index.html inside the file main.js i will add some more parameters inside this file that will be node integration context isolation and dev tools and finally change the path of index.html as shown in the video [Music] [Applause] [Music] see that the application is now displayed correctly and we can see the developer tools by pressing the control plus shift plus i keys to display the preview of the application inside the vs code just press the f1 key on the keyboard and type open active file in preview we will create new folders inside the src folder which are the styles js images and icons folders inside the js folder we will create a javascript file called app functions.js where we will put the main functions of the application that send data to main.js after that create a file called style.css [Music] i prepared an html interface to streamline our tutorial these files will be available to patreon supporters here on the channel i added a core palette and some icons inside the src folder that are also available for download to the channel [Music] supporters once this is done i will replace the html we created earlier with the one i created and also add the css i just created to the style file if you want to create a similar style just pause the video and create the style and html as shown in the video [Music] see that when reloading the page we can already see the whole new layout being [Music] displayed inside the main.js file we will create some properties to define the minimum height and width of the application this is very important to not break the user interface we will also add the frame parameter as false to hide the standard title bar [Music] to add the drag function in the window we use a line inside the css file the parameter webkit app region is dragged this parameter will say that this div will have the option to drag the window see that when we remove this parameter the window will no longer have the option to be moved this parameter gives us the function of dragging the window and we fit it as we want using the standard windows feature [Music] within the top bar class i also added a new parameter called webkit user select this will disable any text selection within the html after reorganizing the scripts inside the vs code we will create our functions to minimize maximize restore and close the application inside the file app functions.js we will impose the ipc renderer which has the function of reading and sending parameters asynchronously to the file main.js let's use the close buttons close btn id and add a click event to it using the add event listener when clicked it will send a parameter called close at to the main.js file inside the main.js file we will import the ipc name it will asynchronously read the parameters that we passed through the ipc renderer inside the function create window add the parameter ipc on taking the value close app that we will send after the close button is pressed i will create a console to see if the parameters are sent it is necessary to leave the context isolation as false otherwise these parameters are not [Music] accessible [Music] see that you are correctly sending the event to maine.js done that we will add the function when closed to close the application [Music] see that everything is working correctly after that we will repeat the same action but now to minimize the window we will send the parameter minimize app don't forget to change the id to the minimize button [Music] i enter the main it will check if the parameter minimize app has been set if it is the application will be minimized with the function when minimized [Music] within the app functions.js we will send the parameter maximize restore app don't forget to change your button id to the max residential app [Music] [Applause] [Music] uh [Music] [Applause] [Music] [Applause] see that everything is working properly the next step is to check the status of the window if it is maximized it will restore the application and if it is restored it will maximize it [Music] see that everything is working properly [Music] now what we are going to do is change the applications icon when the window is maximized and restored [Music] with the win on function we can check events within our application in which case we will identify the maximize event that is triggered whenever the window is maximized when the window is maximized it will send an event to the user interface where with the web contents we will send these maximized parameter that will change the application icon soon we will do the same for when the window is restored and take the parameter on maximize [Music] create a variable of type const by taking the id of our maximize and restore button right after creating a new function called change maximize and restore btn this function will change the title and also change the class that contains the icons these titles are displayed as tool tips for the user when the mouse rests on any element [Music] let's add a function to remove the maximize btn class and add the restore btn class [Music] see that these classes contain the png icons of our application let's add an else to reverse the process within our function [Music] that done the next step is to take these events that were sent from maine.js using web contents and fire our function as false or true as shown in the video [Music] there we finished all actions to replace the standard windows title bar in our application [Music] as extra content i will show you how to create a sidebar that can be used as menus in our projects [Music] create a boolean variable to check the status of the side menu [Music] that done add the id of the button show hide menus to the event add event listener as click and create a const to get the properties of our sidebar in this case my sidebar [Music] let's create a check that if the menu bar is expanded it will change its width to the value of 0 pixels and if it was hidden it will change to the width of 280 pixels [Music] see that it is not working to find out the errors we can open the developer tab and check the application console [Music] note that the document function was misspelled so let's rename and run our application again [Music] everything is working properly now and we come to the end of another tutorial if you are not subscribed to the channel please subscribe and leave the like if you like this video also consider being a patreon supporter to have access to the project's source codes thanks to all patreon supporters [Music] see you in the next video you

Channel: Wanderson

Views: 80,941

Keywords: Electron JS, Electron, JS, JavaScript, Desktop App, App, Node.JS, Modern GUI, Vs Code, Custom Title Bar, Interface, Template, HTML, CSS

Id: 6OcAoXr40oE

Length: 17min 50sec (1070 seconds)

Published: Sat Mar 20 2021