 G'day all our robots here. We are still stuck with the dodgy webcam But we have a fresh cup of tea and we are going to have a look at task 3 So task 3 is a task you're kind of doing with us not on your own Because there's a lot of strange things going on. Well, I shouldn't say strange There's a few new things to learn that we're going to show you how to learn Now the skill we're picking up here is API diving Learning how to get into the Java API to see what's in there Modern developers we got massive libraries available to us, but we got to work out how to see inside them and use them So the task you got given is to draw a 20 by 20 grid on the 720 by 720 window That's very easy if you're back in processing land, but we're not we're in Java land So there's a little bit more to deal with Got on the left here my example solution. So when you see me looking over there, that's what I'm doing I'm doing this the example solution is an old one and and I'm really fiddling with it a little bit So I'm half doing this live and half doing it off an example I don't want to go too far off into the weeds, but I still want you to see what it's like to do this my or yourself Okay So I know I want to do this with AWT, which is a Java library I can go looking up Java documentation, but I don't love what Java documentation gives me a Lot of it's out of date because Java's so Java API though is a genuinely good safe place to go looking now I'm Java 8 in this course So I'll just make sure I get the right API I receive platform 8 good and I kind of know where I'm looking so I'll do let's see if I can get this to snap well nicely and That's this one So back over to my actual code and the main So I kind of know where I'm going I know I'm going to be using Java AWT and a tiny bit of Java swing to get something under the screen And then I want those topics dropped. They're not in this course We need them to get something on the screen though one of the designs in this course is that we do graphics and user interfaces ourselves instead of relying on libraries Because that exposes lots of fun things for us to think about but we can't actually draw on the screen by ourselves We do have to hook into the libraries at least somewhere and then try and do as much of it as cells as we can So as the course goes on and we ask you to do functionality X or functionality Y Don't go looking up how to do that and swing or AWT. You might get an answer, but it's not the answer It's got to do with this course But we do have to hook into it to get us going so I want a J-frame I know that a J-frame is anyone going to get something on the screen And then I really just want to control the canvas on that J-frame So my main class instead of being a main class by itself Has to extend a J-frame And now I'm like what the heck's a J-frame we can see that the VS code is helpfully telling me it's from JVax swing Because it knows all the standard libraries and I'm gonna have to import that JVax. So JVax was Java extensions Swing.J-frame. I think I also have to use a J-panel But after that I actually want to use the Java.AWT.Star. That's where most of my graphics is going to come from There's a Java abstract windowing toolkit. It just needs more basic graphics So I'm extending a J-frame. What does it mean to extend a J-frame? Well, it's a thing that can pop up on the screen All you have to do with a J-frame is say what's going to happen when it runs But you'd still have to actually make it run. So Main is the J-frame, but Main also has the main method So what the main method now does is build a new version of itself So this this object is Building itself which feels a bit weird, but it's a static main method that's doing it You should think of the static main method as kind of being separate So it's built One of itself and then because that thing it's built as a J-frame. It can just run That something will happen But we don't know what yet So I better to find that run method to explain what I mean by running So the run method is on the main class Can be private I suppose but I just get in the habit of doing Public everything here because privacy doesn't really matter in this context Actually, I don't think I need the main method the run method just yet. I'll get to the run method in a minute The main I'll need a constructor though. So why don't we come in this out? I'm trying to learn the keyboard shortcuts as we go. I'm not succeeding I'm not normally a VS code user, but I should be So this constructs the main window and then just whatever but we better write a constructor So there'll be a built-in constructor that it uses but that doesn't do much of interest So we make our main constructor Now here we're going to tie into a bunch of things that a J-frame knows how to do and if I go to Jabax Swing J-frame in here Javax swing So it's just Javax swing and then down in the all classes section. I should see the J-frame up here Often you're doing a Google search to get to these things, but I know where I'm going. This shows me all the methods available When that J-frame take me a lot of experimentation and maybe a few tutorials to learn what I really want to be doing here I know that I want to set up the default close operation because J-frames when they open you can't close them You got to control see the whole application Set default close operation, and I just want to set it to and what to exit on close I know these are the special magic things, but if I look in that documentation, they'll all be there So if I look for set So default close operation click on that and it'll tell me the different Things I can do on close do nothing hide dispose eggs. Well, which closes down the whole thing Let's just run this to see what it does. I'm curious So job is doing its thing and Running does absolutely nothing It's running and that's that not super surprising Because These things don't actually appear on the screen yet Set visible true pack is is useful for other things Let's set visible truth. See if that's enough to get on the screen Oh, we haven't even set it given it a size yet. So it's probably still not appearing on the screen That's something's appeared. There it is. It's this thing up here in the top left and J frame has appeared good Okay, now what I really want to do is I'm going to put onto this a canvas Which is just representative of a sheet of paper that I can draw on so I'm going to make myself a canvas as a Subclass and it's unfortunate. We have to jump to subclasses so sweet, but we can do that We'll learn a little bit more about well, we'll learn more about subclasses. I guess if you go along that I get huge menus I could make a separate class, but it's a waste of file space public So this is my canvas that I want to be able to draw directly on and it turns out you can draw straight onto something called a j-panel which comes from the Library as well. So I better import the j-panel as well. So I just go to importing star from swing Some people prefer to import everything explicitly I tend not to Now I'm going to get rid of this serialized error window In a minute Same one way. Well, actually, why don't we do that now? Do I have the magic incantation over here? Yes so This extend this error that comes up the serializable class main does not declare a static variable Static final serial version UID field or type long This is like a Java programming convention because classes might be serialized Which means turned into text and stored somewhere And then you want to read them back out one of the things to make a serialized class work Well, is that it should have a version new ID? We're not writing this class out to something and reading this class back in and that is just going to confuse the situation for us when we're learning about Programming so I'm going to avoid it And I'm going to avoid it by telling VS code a brand new setting Which is just please don't please ignore this problem. We'll take hold eventually. Let's see if it does Well, that's a better error, but it's still got the original one. Maybe I have to restart the The something to make it happen. Well, maybe I Okay, I've checked it in now. We'll see if it goes away at some point if it doesn't I'll keep trying to make it go away What do they say on the quick fix? So most of these errors have a quick fix Add default add generated. No, I don't want to add a serial ID because it can make things ugly. I'll show you what it does Didn't do anything. It's like that's a problem with the plug-in All right back to the actual action. See if we can get that missing serial ID to take hold at some point Put you down. We don't need you again. This is just a place where we can put some Preferences to get Visual Studio code uses these are from Eclipse. It's true, but Visual Studio code knows how to use them All right, what does my canvas do? my canvas is a J panel which is just going to go straight on top of the J frame and that I can draw on to because you can always draw On to J panels. They've got a special paint method, which is very useful So I'll give it a constructor And then a constructor I'm going to say what size the canvas wants to be because you saw the J frame was tiny The J frame will be the size of whatever has to go inside it So if I set the preferred size now size comes in as as not just like I think you can do it as two numbers But it another way to do it is with a whole dimension object, and this is a Java style of programming Everything's an object even the number 7 27 20 next to each other for X and Y are a dimension And that dimension would have needed to be imported, but I think it's coming from JwT So that error about not using AWT went away. All right, nice So now we've got a preferred size. I think if we run it again We'll find that it's bigger because the preferred size will take account. Nope not bigger yet Ah, I know it's not be it because I made a canvas, but I haven't added the canvas to the J frame So let's do that. It's like to add something to a J frame We'll first make it then we add it and This set content pane sounds a bit strange But what it means is the J frame is just empty at the moment We're saying what should be the content of the J frame? Well, it's our canvas now That's where the pack comes into it because the pack method will will resize the J frame so that it's big enough for the J panel so the J panel is that gray section there Mm-hmm. Very nice. So we're getting there. We're getting there. I'm gonna drop this one Because I don't think we need it at all. I think I've got way far ahead of myself Next so the worksheet told me that I wanted to draw a 20 by 20 grid So how do I draw on to a canvas? Well, can't J panels I have a paint method. All I have to do is to find that paint method and I'm overwriting an existing method So I'm gonna add the override keyword So this is all this machinery is set up this paint method It's already being called on that J panel. It's just that it's some an empty paint method So it's not doing anything, but if we override it with our own paint method We can make it do fun things and the paint method is always passed in a graphics object Which represents the grayness on the panel. It just represents the thing you can draw on Okay, so this is the spot where any drawing I do We'll go on to the on to the screen. How do I draw on to a graphics object? Well, I'll probably come back up here and start looking in the documentation again graphics is in AWT Not in Javex swing. So I've got to come back up here to Java AWT there and On the left-hand panel I can find the graphics Object Yeah, there's a graphics and a graphics 2d One's a subclass of the other but we can just do everything off of graphics In this course So you can see the methods available under the kinds of things we might do in a draw clear a rectangle draw a 3d rectangle Draw some characters Draw an image draw an oval polygon For us, we're going to draw some lines There are multiple ways to get a grid on the screen We can either draw a bunch of vertical lines and a bunch of horizontal lines or we can draw a bunch of rectangles Ultimately drawing rectangles works better in this course. So let's do it that way So it's gonna I'm gonna have to draw the instructions said 20 by 20 Rectangles each of them 35 pixels high. So let's make the four Wanted me to start at position 10 And then I was less than 710 because it wanted a border of 7 10 on the other side Do I want to draw one at 7 10? No, I don't and I has to go up by 35 each time and drawing Grid so I'm gonna have to do let's just do one line for now. So Rect I think is what I want but it's on the graphics object. So it's G dot draw Rect good and it wants an X and a Y position so that X is zero and let's just make the Y position 10 for now that I sorry in 10 and It wanted something else didn't it? Where did your parameters go? Nope It's gotten a bit confused So let's come over here to see what draw Rect once it wants an X and a Y and a width and a height So we know the width and the height is 35 Five each time so that'll draw at least one line of rectangles. I hope I think it's gonna draw it on a ball on the gray background though. So maybe I should draw color in the background first Let's try and see There we go. Yep They've been drawn in the background and they're not filled in because draw rectangle doesn't fill them in I actually wanted fill rectangle So this works a little bit differently to processing you go draw function Fill rectangle and control of five then they'll get drawn I think with whatever the fill color is the fill color is black. It's not really what I wanted. I Wanted a fill color of white and the background of black and the processing that's it's slightly different processing I have to set the Rope I think Color and with colors I can just do color dot Okay, so the way I have to do this I think so I'm gonna do it is first I'm gonna set the color to black and then I'm going So I first I'm gonna set the color to white to make sure the order comes out great Then I'm gonna fill a white rectangle And then I'm gonna set the color to black draw the outline of it Five and this gets me much more what I wanted. All right, that's basically what I wanted But now I want to do that another 20 times down So this is gonna have to be a nested loop J equals J will start from 10 and go to less than 7 10 and go up by 35 as well puts this new one down here and All of this needs to tab in further So that would be No, I still don't know. I still don't know where my shortcuts I better go off and learn there my suppose Okay, I think that's what I want. I think that's gonna draw my grid The paint method is where the action is but the paint method is getting called Because the canvas is on the J frame and the J frame is visible This is all the internal workings of the swing and AWT from here on Didn't work. So let's have a look at the problems abort syntax error on Something that doesn't belong there From here on we're gonna take control of the rendering We're not gonna rely on swing or AWT anymore because once we've hit this paint method we're in control once we've got our own canvas We're in control. We need the J frame in the panel just to get going and then we're like, yeah We don't just do anything else. You have to say I've broken something. I've broken it because that's an I not a J And stop it from there and control f5 Nope, that's not working up because I didn't update that you would all saw that while you were watching this didn't you? That should be the J It should be the J. This is why we better if I could do the live streaming of this. You could tell me while I'm doing it There we go. We've got our grid Very nice. So we've hooked ourselves into Value of local windows not used That's true. It doesn't look like it's used but just building it does all the hard work So we can ignore that that problem We've hooked into the bits we need to know about Java. We've got control now Hopefully we can do the other parts. Is there anything I've missed out on here? No This is the tips video. So It's more than just tips. It's pretty much how to do it Up in the next tasks. Yeah, the next task here we're doing by yourself Okay, that's all for now