MVC Java Tutorial

well hello internet and welcome to my MVC Java tutorial my goal here is to teach you completely how to use the model-view-controller it is extremely simple if you have ever had any problem with it in the past those problems are going to be over by the end of this tutorial so what is the MVC I think the reason why people get confused about it is the name model-view-controller kind of confusing not really though you could instead refer to it as the data interface coordinator because basically all it does is separates all data and calculations into the model class and separates the interface into the view class and then the controller class is going to coordinate all interactions between the view and the model that is all it is and I'm just going to jump right into the code and show you how it works so let's get into it so here we are got my Eclipse open and I'm going to create the model first because it is the simplest part of this whole entire thing and the model is just simply going to hold all the data and perform all the calculations needed and that is it it won't even know the view exists so we're just going to go public class calculator model and all the code is available in a link underneath of the video you should get it because it's heavily commented and it will help you understand and of course it is free so what I'm going to do here this program is just going to add two values and display them on the screen and the final value is going to be calculation value just going to sum two numbers put them on the screen that's it so then I need to provide all the methods that are going to be needed to perform these calculations on this data so I'm going to create a method called add two numbers going to get an int names first number and another one second number and guess what it's going to add them that's all it's going to do and it's going to store them in calculation value first number and this might seem very simplistic but I promise you this is the basics of an MVC and it can be applied in any way and this program could be definitely elaborated on and turned into a full functioning calculator if you'd like or whatever you want to do with it and then we have to provide a way to get my calculation value returned Julia should wow you and that is it there's the model it's done what does it do it contains the data which is just calculation value it performs the method that is needed and provides access to the data that is all the model does in all MVC's so now let's get into the view this is probably the most complicated part of it calculator view is the name and the only reason it's complicated is the interface part that's it the actual code that is part of the view is very simple so we're going to have the capability to perform and catch events whenever the user is going to click on things and then that is and then we're going to import some swing components so that we'll be able to make ourselves an interface and then I'm just going to come in here public class calculator view extends jframe and this is the java stuff from making the interface doesn't really have anything to do with the Model View controller or the view in this situation so we're going to allow the user to enter a number and let's make it 10 wide and then I'm just going to build the interface right here exactly the way that I would have it on the screen so there's going to be a block in there where they're going to be able to enter a number then I'm going to put a addition sign new jlabel you could skip to the end of the tutorial if you wanted to see what the final thing is going to look like and then come back because I haven't built it yet that's the reason why I can't show it to you all right then what makes sense after that is I'm going to have another block where they're going to be able to enter the second number easy enough and then I'm going to need to have a button that they can click on to perform the calculation che button and it's going to have the word calculate on it guess I could have put some and then finally jtextfield solution and like I said before the model doesn't know anything about the view it doesn't even know it exists and let's just make that 10 so so there's that now that we have all our components to find that we're going to use and like I just said if that in any way confuses you don't worry about it this can be applied to any language this is just job as specific now I'm going to set up the interface it's going to display on the screen its equal to nu J panel and then you can forget about this altogether all this is going to do is whenever they click on the X to close the application it's going to make sure that the application is indeed closed I'm just going to click exit on close and then let's just set a size I know I don't need that big of a area I'm going to say 600 pixels wide 200 pixels tall and then I'm going to add all of my components that I'd created above to the panel save myself some time and this is going to be second number and this guy is going to be actually I want this to be edition label she's going to be the Plus on second number calculate button everything's just going to be displayed in a the exact order that I have here calc solution and then I just want to add calc panel to the jframe which that's what calculator view is is the jframe and that is the end of setting up components that is all I need to do that is what's going to be displayed I'm going to go and provide a way to get access to the first number and this is just going to return I'm going to have to turn this into an integer because it returns whenever I call get text it returns a string so I have to do that get text like that and there we are and then we're going to do pretty much the identical same exact thing for the second number and then we're going to perform pretty much exactly the same thing to get the calculation so calc solution and calc solution which is going to get me whatever is inside of the J text fields say J text field is going to have whatever is entered in there it's going to return that for me that is what get text does and then we have to provide a way to set the value of calc solution because the model is going to do that calculation for me but the model doesn't know about the existence of the view so the controller part is going to have to actually set this I'm just going to name that solution and if I want to set the value for that jtextfield I'm just going to go set text and then it's going to come over as an integer so I am going to convert it into a string like I said you can just get all this code and copy and paste it if you don't want to type it out and then this is probably the most complicated part of the whole thing I'm going to add a way so that whenever a button is clicked on my little calculator here that the controller is going to be alerted to that fact that's all action listener and I'm going to call this listen for calc button so whenever the calc button is clicked on it's going to go and call the controller and say hey controller you handle this because I'm the view I don't do anything like that let me go calculate button add action listener so it's going to listen for the action being the clicking of the calculation button and of course it gives me an error because that doesn't exist anymore I haven't created the controller yet and then let's also say like what are we going to do if they go and click on the calculation button without entering any numbers or whatever though that's going to trigger an error so we want to be able to handle that and that is all the view does is handle what is being viewed and let's just have a little pop-up show up here so message dialog this can be my screen and then whatever the error message is that they pass over and that is the end of the view it's not complicated quite simple all it is is a view that is it doesn't do much of anything else so now let's go into the actual calculator controller and this guy is going to handle interactions between everything so I know I needed action events and all that stuff I'm just going to let that come up here on its own calculator controller and since it is the only thing that knows about the view person in the view and the model we're going to store that inside of it and then we're going to go and create a constructor for it and then we're going to pass in calculator view the view and calculator model the model just makes much more sense if you just think of that as data I think this is the guy that's kind of confusing then just this love you is equal to the view that was passed in here and this the model is equal to the model that was passed in now what I got to do is tell the view that whenever the calculate button is clicked to execute the action performed a method that is going to be in the inner class called calculate listener below which I'm going to create here in a second I'm just going to go this with all of you because I want to refer to this objects version of the view not love you that was passed in here and I'm going to go add calculate listener new calculate listener when I create that constructor here in a second so just copy that and I'm just going to have this be an inner class calculate listener implements action listener so we can listen to what's going on with our view with our controller and it's going to give me a message that I need to implement my unimplemented methods which is going to be action performed which I mentioned before and this is where all of the interaction is going to occur so I'm going to go first number second number and then because I don't know if the user of my view or my interface is going to enter both numbers before they hit calculate I have to surround everything with a try block so that I can stop any errors from being triggered verse number and to get the first number entered I'm just going to come in here and go get first number and that's going to get whatever is in the view and store it in there the value and then I'm going to do the same thing for second number and this is second number there we are then I have to go okay hey model you perform all my calculations remember the controller doesn't do anything except and all the interactions between the view and the guy that's going to perform our calculations and that's going to be first number second number pass those in there and the model is going to remember store that in calculation value right like that and then I'm going to go to the view all right well I want you to set my calculation solution there it is right there however I need to actually get it and it is stored in the model because that's where all the data is and I have to say get calculation value that is stored inside of there right this guy right here get calculation value that's all and we're pretty much done I think I had to do is catch the error that's going to be triggered and the error that will be triggered if they do not enter a number into one part of my calculator and hit calculate the view display error message remember and what do I want to say I'll say you need to enter two integers and that is that so now I just need to go create all these objects and I'm going to do that inside of MVC calculator Java so just give me in here and go calculator view with all of you is equal to new calculator view and then what do I need to do I need to create the model just call that the model new calculator model and as you can see they don't know each other exists and then I need to create the controller that's going to allow those two to interact with each other without knowing that either one exists so in this situation I'm going to have to pass in the model and the views so it knows what to work with the view and the model and then the final thing I need to do is actually make the view visible on the screen and I just set visibility to true and that does that for me and I have one little air add calculate listener I have the names wrong that's all I need to call add calculation listener instead that sort of stuff that happens sometimes when I do this stuff out of my head just bounce in there and the air goes away and then bounce over into calculator view and just change this to listener for calc button and there we are problem solved and execute and there you can see opens up on our screen and I can enter one plus two and hit calculate and get three and change this to 4 and hit calculate and get six and whatever you would like and as you can see you could easily add a whole calculator interface on this or most anything you could ever want all you're going to need to do is add additional methods to the model or additional data and everything just works so that is my tutorial on NBC I hope it is now completely understandable if not leave any questions or comments below otherwise till next time

Channel: Derek Banas

Views: 518,140

Keywords: MVC Java Tutorial, mvc video tutorial, mvc tutorial, model view controller, model view controller example, java mvc tutorial, mvc tutorial video, mvc java example, java model view controller, Java (programming Language)

Id: dTVVa2gfht8

Length: 13min 16sec (796 seconds)

Published: Thu Feb 21 2013