The Browser Window class in Election
The Browser Window class is one of the first Classes in Electron.js that one will want to work with. It is possible to have an electron app without using it, but chances are I am going to want to have at least one if not more windows to work with, and to do so I will want to use this class.
There is also one other class that I think that a developer should be aware of right alway also, which is the Menu class. This Menu class as the name suggests is how to go about creating a custom menu for one or more windows in the application. So in todays example I am just going to be taking a few more steps forward from my hello wold example that I started with with Menus also while looking more into what can be done with the browser window class, starting with maybe the set menu method of the browser window class. I have found thus far that this is the method that I am going to want to use when it comes to having more than one kind of menu for more than one kind of window.
What to know first before reading more on Browser Window
The full source code for this example is on Github
I have set up a electronjs examples repository in my Github account that I will be using to park all the source code examples that I make while learning and writing about electronjs. The source code examples for this post alone can be found here in the for post folder of the repository. This might in some cases be the best way to go about reproducing what I am working with here on your end.
I have more basic posts on the Browser Windoe class
This is my first post on the browser window class, and when I wrote it I was still fairly new to using electronjs. Sense then I have wrote one new post on a single method of the browser window class that has to do with one of the static methods of that class that has to do with getting all the current open windows.
In the hello world example that I started out with I all ready made use of one browser window class method that is the load file method that will load an html file that is relative to the root folder of the application folder. I am once again using the method to load html files, now one of each kind of window in this example that are in an html folder.
One new Browser Window class method that I am using now in this example is the set menu method of the browser window class that I think I will now be using for every situation in which I will want a custom menu from now on. The reason why I say that is that in the hello world example I made use of the set Application Menu of the Menu class, which seems to make it so that any calls to change the Menu after that will be ignored. It would seem thus far that if I want to change what the menu is on the fly, I will not want to use the menu class method to set what the custom menu is, but rather use this set Menu method of the Browser Window class. However this alone might still not be a done deal, as I am still not sure if the set menu method is what I want to use when making an application that will work on a wider range of operating systems.
When creating a child window I have found that I do want to make use of the parent property to set what the parent window is for the child window. There is one main thing to keep in mind with this parent property and that is that when I close the main parent window, that should also close any and all child windows as well on top of that in such a case. Well at least that is the kind of behavior that I would want in mode cases, if not for some reason then maybe the parent property is not all that important it would seem. The value of the parent property should be a reference to the instance of browaerWindow that is the parent for this child window, and one way to go about getting such a reference if one is not all the ready would be to use the BrowserWindow.fromId static method. This way of getting a reference to a browser window instance involves giving a integer that is the id of the window, the way that i have things set up here the window of an id of 1, should always be the main window.
Another key difference between the menu for the parent window and the child window is that I do not want a file menu at all for that menu. That is that I do not want to be able to quit the whole application from the child window, so I just did away with that menu all together.
3 - The HTML Folder
I then also have a html folder that I will be using to store the html files for both a main window as well as a child window, as well as any and all additional files that will compose the client side system of the application. As of revision 1 of the example this includes two html files, a css file, and a single client.js file that is used to work with the public api that is being used by way of the preload.js file.
3.1 - The window main html file
The main html file for a main window of this example just has some text the says that this is the main window of the application. In the head of the html file I also also linking to a css file that is shared with the other html file that composes the html for a child window.
3.2 - The Window child html file
I then have a whole other html file for a child window of this example.
3.4 - Style CSS
I then have some shared css between the two html files.
4 - Conclusion
There is a great deal more to write about when it comes to the browser window class, this single post alone does not even make a dent in the surface. I will likely make future revisions to this post at some point in the future as a log more hours working with electron.js, but for now this will be it. As of this writing I am still fairly new to electron js, and I can see that this is the kind of framework that is going to take a while to learn as there is a whole lot of ground to cover.
In any case I think that the main goal of any future revisions of this example will still to just create a simple tech demo type application that just helps to demonstrate how to make use of certain critical features of the Browser Window class. However in order to really cover a great deal of what there is to work with in the browser window class I also need to at least work out some basics of many other classes while I am at it. Event with revision 1 of this example I think I have all ready covered certain basics of what I should be aware of, but in time I will want to make at least one, if not more additional revisions beyond this.