How to Build a Swing GUI with IntelliJ IDEA

hello everyone in this video we're going to go through the drop tutorials lesson learning swing with the NetBeans IDE with the IntelliJ IDEA IDE instead so for those of you who are new to drop tutorials these are some great resources available for free on Doc's oracle.com now they have a trail called learning swing with the NetBeans IDE that has these 1 2 3 4 5 different lessons in them now these lessons go through how to set up a little Celsius convertor where you can enter in the degrees in Celsius in a text field there's a nice label here press the convert button and it'll grab whatever number is in the text field convert it into a double convert it into degrees Fahrenheit and then show that result here in this label so this example is a really great way to get started working with swing and Java and in this particular lesson getting used to using the NetBeans IDE now I won't go through this example using a different IDE IntelliJ IDEA this is also a very common IDE I like using IntelliJ IDEA because it has the same key bindings as used in Android studio which is actually based on the intelligent platform ok so let's get started the first thing we're going to do is move on to the first lesson setting up the Celsius convertor project so go ahead and open IntelliJ IDEA click create new project and we're going to try and make this as similar as possible to the NetBeans example so that you can use it as a reference so in this example the project is named Celsius convertor project and that's what we'll name ours as well so here's our empty project the first thing when you do is add a form so go ahead and expand your project and you'll see an empty source folder right click on that source folder go new and if we were going to code this GUI by hand programmatically we'd say new Java class which is definitely an option we could do this however since we're following this tutorial here which uses a GUI or a form builder we're going to instead go new and go down to swing UI designer and click GUI form for our form name we're going to follow this example and we're going to call it Celsius converter GUI GUI stands for graphical user interface here it doesn't really matter what layout manager you choose because we're not really worried about making this particular GUI look pretty we're just trying to get it running so I'm gonna leave the default grid layout manager click make sure that the create Mountain class check marks is clicked and hit OK now what's kind of cool about this is two files are made one is a Java file and one is a form file so the form file opens by default and this is where we can drag and drop components from our pallet in order to build our graphical user interface now this is really where IntelliJ IDEA and NetBeans start to differ because if you look at our Java file it's empty and let's say we go ahead and add a jlabel onto our form onto our jpanel nothing's added to our code but if you look at the example in NetBeans you get a lot of boilerplate code here given to you by default now if you look even more closely this code gives you a class Celsius converter GUI that inherits from jframe now in our example we have a J panel we don't have a J frame so we are going to have to write some code in order to set up a J frame we'll get to that here shortly so I'm just letting you know that because of differences in the IDE and the form builders and the GUI builders we are going to be diverting a little bit here not by choice but because we have to okay so we have a lot of similar editors or panels not to be confused with J panel in our IDE so like we have our canvas here we have our palette we have our property panel and we have the component tree which is like the inspector so let's go ahead and delete this label I just put it on here just for looks give her these spacers it was just an example the first thing that we're gonna want to do is set the title of our J frame so I don't have a J frame I have a J panel but we can give this J panel a unique name and we can refer to that J panel by name as a variable in our code I've set up a J frame so let's call this main panel and now that I've given this an identifier it has a variable in my associated Java file pretty cool so like I said we need a form in the NetBeans IDE the GUI builder gives you a J frame right default we have to create that J frame ourselves so let's have our class Celsius convertor GUI inherit from J frame we're gonna need a constructor that's going to accept a string representing the name of our app the name of our frame this is what's gonna show up in the title bar so for example what shows up up here so public Celsius converter GUI string app name or string title it's up to you we'll call our superclass so which is a jframe constructor passing in our title a little bit of boilerplate code that we need to type in here I'll explain it a little bit but the purpose is to get through our tutorial here and come back later and read the tutorial the later trails on-the-job tutorials and learn about all the details of the code we're about to write here so they stop set default close operation so okay frame exit on close this dot set content pane this is where we're going to set the content that's gonna go in our forum in our J frame and this is why we have a reference to our J panel here so we can make a connection to what we're building and the Builder to what's actually going to be instantiated at runtime and this top pack okay great now our code isn't going to run unless we have a main so let's go ahead and write out our favorite line of Java code okay so we have a main now this is the main entry point to our program we need to instantiate a J frame and lucky for us we have a jframe class it's our Celsius convertor GUI remember this inherits from J frame and we can pass in the title for our program let's do my Celsius convertor so we've made the jframe object and now we need to set visible to be true so that we can actually see it head up to run click run you'll need to make a new configuration for our Celsius convertor GUI go ahead and click this is selecting one file as your main you can see it's building and it's running and look at that we have a little form okay so here is our J frame and it has a title right here and a Jade panel here that has no content on it this is our content pane awesome alright so let's close that and check in and see we're at following along with our NetBeans tutorial okay so title they have Celsius convertor I put my cell c2 convertor in there just to make it a little more personal okay now we're ready to add a jtextfield this is where the user can enter in the degrees of Celsius so head over to our form builder we're gonna look at our palette for a jtextfield here's a jtextfield let's drag it on to our canvas onto our panel and like I said earlier we're not gonna try and make this look pretty we're just gonna try and get it to work so you can kind of see where the jtextfield kind of wants to bind to go ahead and drop it somewhere on the left top side like I said we don't care too much where it goes at this point so we need to give we don't need to we'd like to give this text field a field name this is gonna meet the variable name back in our code so let's call it Celsius text field enter I look over at the Java code I can see that now I have a jtextfield Celsius text field attribute awesome now I can refer to it in the code alright let's add a jlabel to the right of our jtextfield let's call this Celsius label when I'm actually ever going to refer to the Celsius label in code but it's still nice to have description variable names and I'm going to scroll a little bit down in the property inspector here and under text I'm going to change the label to be Celsius this is just a label for what the user should be entering into our text field okay next I'm going to grab a J button this is gonna be our convert button same thing I'm gonna give it a custom field name so I have a nice variable name and my cook I'll call it convert button and under text I'm gonna rename button to convert so the user knows well what happens when they press this button we're almost done with our layout we do need one more label over here for Fahrenheit jlabel shove it in this little corner over here label Fahrenheit and Fahrenheit label okay this looks really good let's go ahead and run our cook and check out what our jframe looks like now so here it is we've got a guy's text field where we can enter in some numbers or you get some text it doesn't matter we've got a convert button that only press nothing happens let's work on that next checking in with the tutorial I've got our jlabel RJ button our second key label great we are cruzi right along we're not gonna mess with the size because we're using a different layout we've already changed our default variable names aha this is the spot we want to be at register the event listeners so when the user clicks on the convert button we want some code to execute in our Java file that's going to grab the text in the text field convert it to a double value convert that double value into its Fahrenheit value and then update our Fahrenheit label with that Fahrenheit value all right so we need to click on our button we can do that over here in the component tree right-click create listener we want an action listener this is for when the user clicks on it go ahead and click action performed this is our callback and this is going to add to our convert button an action listener with one callback action performed okay in action perform we need to do a few things grab the text from the Celsius text field and update the Fahrenheit label so we could type this all out or we can just copy and paste some code from the tutorial grab this code right here paste it we need to update the names of our variables for our J components because they're a little bit different so temp text field this is going to be Celsius text field and our Fahrenheit is me spelling Fahrenheit incorrectly okay great save it and run it so I'm going to enter in 100 degrees Celsius which we know is 212 degrees Fahrenheit click convert and look we've got 212 degrees Fahrenheit now we do have some layout issues here but for the most part in a minimal working example we were able to get this job tutorials for net being example working for IntelliJ IDEA so that brings us to the end of the Java tutorials tutorial let me know if you have any questions and hopefully it worked for you and you know a little bit more about how to use IntelliJ IDEA and its swing GUI builder thanks for watching

Channel: Gina Sprint

Views: 78,235

Rating: 4.842382 out of 5

Keywords: java, javaswing, intellij, intellijidea

Id: -SmNpKskfJc

Length: 16min 30sec (990 seconds)

Published: Mon Aug 12 2019