Use a WYSIWYG editor - Java Tutorial

- [Instructor] You might be wondering, what exactly does a WYSIWYG editor look like? IntelliJ has a visual GUI editor referred to as the Swing UI Designer. Every IDE might have a slightly different look and feel for its WYSIWYG editor. So let's take a minute to review the editor in IntelliJ. To use the Swing UI Designer framework, we can right click here on our src folder and say, New, go down to Swing UI Designer, GUI form. We have to give the form a name, so I'm going to keep it simple and just call it WYSIWYG and click OK. Now, I'm going to close the console on at the bottom so I can see more of my WYSIWYG editor. There are four sections of this editor that I want to point out. This is the form workspace where the graphical user interface is created by adding components from the palette, you basically click on them in the palette and drag them over. Also, notice that the JPanel is a component that's already added by default when I created this new form. So if we look over in the Component Tree, the Component Tree is where you'll see a list of all the components that have been added to the form. So right now we just have JPanel and we'll add some more in a second. Next we want to take a look at the Property window. This window shows the properties for the currently selected component. So in our case, it shows the properties for JPanel. And finally, we want to take a look at the pallete, which contains a list of all the UI components that can be added to the form. We can see over here, we have some spacers at the top, A JPanel, a ScrollPane, a Button. All right, once you have a plan for what you want the look and feel of your user interface to look like, we can use this WYSIWYG tool to drag and drop components onto the panel. So let's go ahead and drag some over. Maybe we want to have a label at the top that we can change to be a title. We might want to add a button so I can drag over a Jbutton. We might want to even have a check box or a text field. Notice that the property window is changing every time I select a different component. So over on the left notice, if I click on Label, it highlights the label in the form view here and down under properties it says, what is the field name for this label. So I'm going to give it a field name of lblTitle. It's important to name all of your fields. And if I scroll down, you'll see there's lots of things that I can change. I can change the horizontal alignment, I can make it centered. I can change the font to make it bigger or smaller. And most importantly, I can change the text that appears in that label. So let's go ahead and change that to say, "Hello World." Okay, I'll click off it so you can see over here on the right, it made that update. Let's click on the button. And I'm not going to go through all of these, but what you would do next is you would change the button. Maybe it's going to be a click me button, and you can change the values, you can change what it says on the button. So I can say, Click Me and we'll see those changes reflected over here on the right. And finally, if you want to preview the way that the form looks, you can right click anywhere on the form and click Preview. So this is the look and feel of the WYSIWYG editor in IntelliJ. Again, remember it's called the Swing UI Designer.