Join Todd Perkins for an in-depth discussion in this video Creating a UI with the Swing framework, part of Learning Java Applications (2012).
Using the Swing framework, you can create a visual interface for your applications. In the Swing framework, elements start with a capital J. So we have JComboBbox, JTextArea, JLabel, JScrollPane. So the first thing we are going to do is create something called a JPanel. So the data type is going to be JPanel-- this is at the bottom of the constructor, right below load data--and we will call this panel. And a panel is basically a grouped visual area.
We will set that equal to new JPanel. Then we'll set the layout of the panel, so panel.setLayout, and the layout is going to be a newBoxLayout. Now a box layout enables you to align things horizontally or vertically. So we can do that within each unique panel. So in the parentheses after new BoxLayout, you need to pass in two parameters.
The first one is the element that the box layout is being applied to, so panel and then a comma, and then we pass in the alignment, which is going to be BoxLayout, capital B, capital L, .PAGE_AXIS, all caps. So that's going to be vertical. There is also line axis, which goes along with the flow of a line on a page, which is a horizontal layout. Go down to the next line. And then what we want to do is we want to display the panel, so we actually need to use the Add method to add it to the screen.
So type add, and that's a method of JFrame, which this class is extending, as you could see here. So we are putting the panel on the screen. We just is pass in panel into the parentheses. The next line we will create a panel for the labels. And the way it's going to work is it will have the combo box and then the text area going vertically, and then below that is going to be a horizontally aligned set of labels. So let's create a panel for the labels so that we can align them horizontally.
So JPanel and we will call this labelPanel and set it equal to new JPanel. Now I'll need to set the layout, so labelPanel.setLayout. It's going to be a new BoxLayout as well. And in the constructor for BoxLayout we will pass in labelPanel and then BoxLayout.LINE_AXIS. So remember, that's going to be horizontal.
Then we are going to add the price label and the length label to the label panel, so labelPanel.add. And we will first pass in the priceLabel and then on the next line, instead of directly adding in the lengthLabel, we are going to put in some space. So labelPanel.add and then in the parenthesis we are going to create space by creating something called a dimension. To do that, type in Box with a capital B .createRigidArea, and then we pass in a dimension.
So create a new dimension, and this is going to be a horizontal and vertical dimension. So we are specifying the size of space in between the object. So the Dimension constructor is going to take two parameters: first the width and then the height. So we will pass in 15 and then 0. So you have 15 pixels in between the labels. And then we'll add in the length label. So labelPanel.add and then in the parentheses we will pass in lengthLabel.
Then we are going to add one more set of space, and this is going to be to separate the length label from the button. And so we will copy and paste the code to create some space between the length label and the button that we are going to add in just a second. We will set a default text for the price label, so priceLabel.setText, and pass in the string Price: $ and then 0.
Now in the next line we will set default text for the length label, so lengthLabel.setText, and then pass in the string Length: and then 5 miles. On the next line we are going to set the value of our combo box, and we will automatically populate it with the data from our XML. And we look at how to do that right now. So combo equals new JComboBox and in the parentheses we are going to pass in an array of items. And to get the array, we will type titles, which is an array list, .toArray.
That will automatically populate the combo box with all of the elements from our XML data. And then panel.add(combo), on the next line panel.add, and here we are going to create some vertical space, so Box.createRigidArea, pass in a new Dimension. And the dimension is going to be 0 for the width and 15 for the height. Remember that the panel is aligning items vertically along the page access, not to be confused with the label panel, which is using the line or horizontal axis.
Onto the next line. textScroller equals new JScrollPane, so the scrollable area and in the parentheses of the constructor we will pass in textArea and then a comma, ScrollPane, capital S, capital P, Constants.VERTICAL_SCROLLBAR_AS_NEEDED, all caps, separated by underscores, and then a comma. We will pass in a value for the horizontal scrollbars, so, ScrollPaneConstants.HORIZONTAL_ SCROLLBAR_NEVER and to the next line, textArea.setLineWrap passing true. Next line, textArea.setRows.
That's going to be an integer, and the number of rows we want to display is 10. This essentially controls the vertical size of the textArea. textArea.setWrapStyleWord and pass is true, so this does word wrap instead of a letter wrap, and we will add the text scroll to the panel, so panel.add, and in the parentheses pass in textScroller. Onto the next line. panel.add, and we will put in some more space, and so we will type box.createRigidArea. We will pass in a new Dimension, and that will be 0 for the width and another 15 for the height.
Make sure to add a semicolon to close out that statement. And then we are going to add the label panel to the main panel, so panel.add, pass in labelPanel. Then finally, we will create the button and put it inside of the label panel. So JButton, capital B, will be the data type, call this btn, set it equal to a new JButton, and in the constructor we will pass in the string "Book Now." This is the string that's going to be on the button. And on the next line, labelPanel.add, and then will pass in the button. And finally for the last line we will set an initial item selected in the combo box.
So combo.setSelectedIndex, pass in 0, semicolon to add that statement. And after we have typed this massive block of code, let's save and test and we should see the visual elements in the window. Going to test this as a Java Application, click OK, and there is my window. It's the appropriate size. I have the combo box with all of the data populated from the XML, some space, and then I have a text area that's 10 lines high, and then I have the default text labels that are organized with the button horizontally, and there's space between them and the text area.
So I will close out that. So we have successfully used the Swing framework to create a layout for our app. Remember that when you're using the Swing framework use the add method to place an object on the screen and use an array to populate a ComboBox.
- Working with Eclipse
- Using MySQL database drivers
- Displaying data from a database as XML
- Loading XML data from the web
- Displaying data based on user input
- Publishing a desktop application
- Understanding applets
- Building the layout
- Viewing the app on an Android device