Juce Tutorial 01- The Document Window Class

hey what's up everybody I'd like to welcome you to you a second juice framework tutorial today we're going to be going over the document windows class which is what allows us to create a blink window for our app where we can change his appearance and size as I've said before I'm learning to use myself so I'm going to be creating these new tutorials as I learn and I hope that they're going to help you learn as well and because I'm just learning the juice framework I'm going to be a little bit more thorough with the way that I'm going through these classes and through these tutorials so I'm going to be basically uh trying to explain everything that I can rather than just throwing in random functions without explanation so I help I'm hoping that that helps everybody out so as I said before today we're going to be going through the document windows class and that's going to allow us to create basically a blank slate with maximize and minimize windows and closed windows for us to create our application this is going to follow closely the juice application window class tutorial that's on their website and I'm going to link that below there's also a project that I'm going to link below as well that I've downloaded from the juice website and this is what I'm going to be following along with and I would advise you to download that project as well and follow along so you can learn so I'm just going to open this project here which is main window tutorial about juicer so we're just going to go through just the steps I like to do a lot of repetition to try to get to know the workflow of something new so just going through opening the producer and we have our main dot CPP file here so now we're just going to open it up in Xcode okay we're on Mac once again it's just going to wait for that to okay so I've taken a look at this already and kind of gone through it so I'm going to explain it to you the best that I can this may look like a lot to really take in but trust me when you break it down it's a little bit more simple then than it probably looks at first so first we have a class called main window tutorial application which we can see inherits from another class called the juice application this is just really what allows the juice framework in your app to kind of start and shut down when it needs to shut down so it's just you know you're kind of overriding functionality so these functions here are just kind of your basic functionality for the juice framework okay and then if we scroll down a little bit further we see another class that's inside of this that's called main window which inherits from what we were discussing before the document window class okay so what we're going to do first is we're going to just command click into document window command click into this class here just so we can take a look and see the documentation on what exactly the document window class is okay so we're going to click in there and I should mention that in my readings I've seen that what they say is that when you're creating a class within juice what you would normally do is inherit from a juice class in this in this type of fashion that will allow you to have the functionality that you need to do whatever you need to do and then also to create new things is you need to add more scope to your class okay so here we go the documentation is really good in juice so we can see here that it just says that the document class is a resizable window that has title bar maximize minimize and close buttons okay now if we scroll down just a little bit we can take a look at the constructor okay which we which we had here so we see that there's that we have our constructor here that has a set of parameters so we're just taking a look at what those are about okay so um so here we have just an explanation here up above so we have a name for our window background got a background color and then the required buttons now I found it really interesting the way that these buttons are set up and it was something new that I that I learned and I thought that I should just take a moment to just kind of go through that for other people that might not know so this this approach that they are taking to adding certain buttons or taking them away is called a bit mask okay and I've just kind of typed this down real quick so if you know about bitwise operations this is basically where instead of talking about numbers specifically your your you're actually talking about the numbers as they're in binary and using these to actually create functions so that might have a little bit confusion that might sound a little bit confusing let me see if I can explain a little bit better so um if we look here okay and if we go back to thinking about numbers in binary okay if we just look here at this zero zero zero one okay that's one that's the number one in binary right so and then if we look at zero zero one zero that's the number two in binary and then four in binary is zero one zero zero okay and then seven in binary is zero one one okay so if we just look over here to the left the way that they've got these title button bars title bar buttons rather so you can see that the minimize button is would be button one maximize button would be button to close button would be for if you want all the buttons it would be seven okay which is a little bit strange but I find it really interesting and so you can see that I shouldn't take too long on this but I just found it really fascinating so you can see here that if it's just the one in the in the one spot then it's just minimized if it's just the one in the two in the twos spot then it would be the maximize button and then just the one in the fours spot then it would be just the close button but if it's all three of them then it's all the buttons okay so yeah I just found that interesting and I'll link you to a tutorial video on on bit and asks and yeah it's the tutorial that I've read and juice said that they use that quite often as well so something that you probably want to pick up if you don't know it already okay so going back so we have the document window constructor as I said before okay so it has a name okay and then if we look if we go back just above here to our initialize okay so the applications initialization kids that's what happens when the application first starts okay so we've got main window equals new main window get application names that so if I compile that right now okay and then a so I'm just going to pilot quickly here okay just waiting okay so we can see here that we have a window that's called main window tutorial which is the same as my app name okay and we can see that it's it's three hundred by two hundred it was in the center of the screen when it compiled and then set visible is the true which just means that it appears on the screen okay so let's just change a couple things here okay so as I said before this uses a bit mask to to create the which buttons up here and which ones disappear okay so let's just try button number four right okay there's a couple different ways that we can do this okay so that's just the close button okay so we could we can call that two ways we can either call it I just I just calling the number four okay so if I go back into the documentation again four is the close button okay it's not very intuitive is it so probably a better way of saying it would probably be document window we got lost here where am I document window all buttons okay okay so let's see if that does it great and now we have all of our buttons back okay so we see that the background color is black let's just change that so once again we can just command click into here just see what options we have in terms of colors okay we can see all of these colors let's just try lime green there we go window with a lime green background okay we can change the size here okay and now we have a bigger window awesome okay so now what we can do is we can just take a look to see what other functionality that we can get from from this window okay so the way that I want to do that is by just looking in the juice API itself okay so if we go here to the juice API just the documentation okay so what are we looking for okay so we need to look in the document window klass okay so we just go down here to D I know some of you might be like oh this is you know can you just go faster but I really just want to go through this because this is something that was really useful to me and that I really needed to learn just to get into the kind of flow of how how this framework actually works okay so just bear with me so so we got document window class reference okay so this tells us all of our all of our functions okay and we can just scroll down here see what other functionality that we have so I've already looked through this didn't really see anything that looked really kind of you know that I could demonstrate really easily but thought it'd be cool just to go down here so it also shows here what what other classes that is inheriting okay so we can see that it's inheriting from the resizable window class okay so it says public member functions so we can use some of these functions from resizable liberals resizable window class top window class so let's just click it if we click in here in this arrow it'll show us what we can what we can do here okay so public member functions inherited from resizable window okay so we got one here set background color okay so let's let's just try that real quick okay so we'll just do set background color okay and then I'm going to do colors just from just from what I see up here okay then we got we got a selection of colors here so it was lime green let's make it back to black again okay and let's see what happens so there we go it's black again okay so let's see that there's some other stuff that we can do quite easily okay so we got this one set resizable okay so should be resizable I don't know exactly what that means so I'm just going to click in here okay I've already done this but you know this is just to help you out just to understand kind of the workflow a little bit okay so we're just going to click in here see a little bit more about the function itself okay and then it gives a really good explanation on how that works okay whether it's resizable at all is the first parameter and these are two boolean's okay use bottom right hand corner resizer okay so resizing the window using the bottom right hand corner okay so let's just give that a try real quick so we got set pretty sizable okay and I'm just going to put true and true again compiled okay great so what we have is see if I put my mouse here in the bottom right hand corner I can resize the window pretty cool okay so that's great okay let's see if there's anything else I'll do I'll do one more here okay so we go let's go into top level window okay look a class that the document window is inheriting from okay and here's another one that I checked out that was from the juice tutorial set using native title bar okay so this means whether an OS native title bar will be used or a juice one okay so if we look right now at what we have at the moment so we see that this isn't the same as an OSX title bar but we can set it that way if we one so if we just close out and then we just put set using a dove title bar it's a boolean so we're going to put true okay and then just recompile it seated okay so now we can see that we have the native OSX title bar which is really nice okay so so this is where I'm going to stop and I hope that helps you out I'd love to hear your feedback so give me comments below and be sure to subscribe if you haven't already and the next lesson we're going to talk about the component class and the main window component this is where we're going to put all of our sliders and knobs so on and so forth so hope you learned a lot see you next time

Channel: The Audio Programmer

Views: 31,762

Keywords: audio programming, creative coding, audio coding, creative programming, digital signal processing, dip, plugins, vst, software development, ableton, max map, c++, sample rate, bit depth, nyquist theorem, juce framework, tutorial, beginner, easy, games development, games programming

Id: OPSKfPWdr90

Length: 17min 43sec (1063 seconds)

Published: Thu May 25 2017