Juce Tutorial 02- The Main Content Component Window

hey what's up everybody I'd like to welcome you to your next tutorial on the juice framework and today we're going to be talking about the main content component window okay now the main content component window differs a little bit from our last tutorial which was on the document window and that the document window controls the basic functionality of the of them of the app so it basically controls your closing and minimizing of the app itself whereas the main content component actually holds all of your UI material so all of your knobs all of your sliders pretty much all of your content is held within the main content component window okay so we're just going to jump right into the juice here and we're going to create a new project now before we start I should mention that this tutorial that I'm about to give is based roughly on a juice tutorial on their website of the same name and I'll go ahead and I'll link the website in the in the commentary below so if you want to check that out so what we're going to do is we're going to create a GUI application and what that's going to do is that's going to create the main content component class for us okay so I'm just going to click on that and as usual I'm just going through this process of creating a new project just for people that are unfamiliar so we call this UI tutorial one I'll just set this and here I will click create on the next code and we see here that we have three C++ files we have a header file for the bake component a CPP file for the main component then our main CPP which controls the juice application so let's just go ahead and open that up in Xcode so while that's opening an Xcode I'm just going to talk a little bit about the component class so as I've said before the component class is what holds all of your UI material like your knobs sliders text so on and so forth and the way that they've organized this is into a hierarchy of kind of parent parent components and then underlying child components and so the child components are owned by the parent component so you might have like one section that might be like let's say it's a filter section so then the filter and the resonance would both be with it owned by a parent component if that makes any sense I hope it does so let's go ahead and jump in here so we are going to do a whole lot of coding this tutorial what we're going to do is we're just going to kind of explain and try to break down what's actually going on here because this is just an important concept to really understand ok so if we go into the into the main CPP file here everything is pretty much the same ok except that excuse my Bulldog by the way P here is learning in the background so pretty much everything is the same this is just a class which is our document window class which we - which we discussed in our last tutorial one thing that is a little bit different is that we have this line of code here which is set content owned ok and that says new main content component all that really means is that that's a new object of our main component and then true let's see if we can just click in here so resize to fit when content changes sighs okay so that just means exactly what it says pretty much okay so so yet so this so this line of code here is really what's can what's actually creating our named component okay so if we go into the main component itself then we see in the header file we have two functions here we have the paint function and we have the resize function now I'm just going to kind of pause for a second and take a look at this keyword override and go into this a little bit because this was something that I wasn't aware of and I suspect that some of you might not be aware of it as well so I'm just going to try to explain that just a little bit so when as I said before your component your components are organized into a hierarchy of parent and children components okay so they're owned by parents and they're inherited so what happens is that every component is going to have its own paint and resized functions now what override does is that is a keyword that ensures that you know that each component is going to have its own paint its own paint and resized functions that only control that component okay so it's overriding the functionality of the paint and resized function that arm that its parent has basically so and that that keyword is more for people to to be aware that that paint function is its own function for that component okay so the paint function is how the component is actually drawn to the screen so anything that has to do with graphics knobs dials all of that stuff goes in the paint function okay resized is what happens if your window was resized so any sort of functionality that controls whether your component gets bigger or smaller so on and so forth that would be controlled in resized okay so let's go into the CPP and see what's written there's some default content here so there's nothing in the resized function I'm not going to go into that at the moment but if we look here we see some very basic functionality okay so we have a fill all okay fill all just actually sets the background color for our screen okay background color ID is just a default color so it's so it hasn't really been set to a color yet but they need a color there so that otherwise it would just be opaque okay so then we have a set font set color so we got hello world that's just written to the screen okay so now if we go back into the main dot CPP as I said before because I'm just connecting now how okay so how is this main component actually getting into our main juice application and it's with this line of code here okay but with the words creating the object and then paint is actually the paint function is actually called when the application starts okay so we're just going to compile them right here it's compiling and as as it's compiling I'm just going to let you know we we don't have we don't have the window set to resize but if we did then the resize function would actually be called whenever the component changes any size and that includes when the application actually starts ok so if I just bring the window here ok we can see that HelloWorld is written in white in the center of the screen ok so you might be wondering well how does it know how big the window is ok so if we go into our main component of CPP we can look in the constructor and we can see that the size has been set to 600 400 which controls where our hello world is written because we have the justification centered okay so ah let's see do I have anything else to go over ok so uh just a couple of notes here you should never call the resize function yourself as I said before the resized the the resized function is called whenever this mean whenever the component is actually resized ok so I don't have it set to resize at the moment but if I did this whenever I'm whenever I change the size of that resized would be called over and over again and um just to go over the owned so you might be wondering what set content owned actually means and what this means is that now the document window actually owns the the main content component for the lifetime of the program ok and then these other ones are things that these other functions or calls that we went over last time in our last tutorial so it's using just the native title bar which is our native OSX title bar here and then get with and get height is just coming from our set size function 600 400 okay and then finally we need to set it visible to actually see the content okay so if I just close that out and I set this to false rather than true we would we would only see the background we wouldn't actually see the hello world where is it we don't actually see anything well yeah so so we don't see anything because that's right because it won't know what the size is so we would so the size would be zero so okay so if I set this to true again and then there it is is back hello world okay so this is where I'm going to end the tutorial it's kind of a short one today next week we'll be going more in depth with the component class and also with the graphics class which allows us to add different colors drawings and shapes to our components so I hope soon I hope you enjoyed this tutorial be sure to subscribe for future tutorials thanks for listening and see you next time

Channel: The Audio Programmer

Views: 14,382

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: WJYlJkLafFc

Length: 12min 16sec (736 seconds)

Published: Wed May 31 2017