COMP1406 Tutorial 5. Objectives: Getting Started: Tutorial Problems:

Transcription

1 COMP1406 Tutorial 5 Objectives: Learn how to create a window with various components on it. Learn how to create a Pane and use it in more than one GUI. To become familiar with the use of Buttons, TextFields and Lists To become familiar with setting location/dimension/color/font of components. Gain a bit of practice writing simple event handlers. Getting Started: Download the Tutorial 5.zip file from the CULearn website. Place the Tutorial 5.zip file somewhere that you can unzip it... such as the Z drive in the labs. Select it and unzip it by selecting the file and then right-clicking and selecting Extract All... from the popup menu. From the dialog box that appears, click Extract. It should by default, extract to the same folder that contains the zipped file. To open the project in IntelliJ, select Open... from the File menu. Select the Tutorial 5 folder that is inside of the Tutorial 5 folder that you unzipped. MAKE SURE THAT YOU SELECT THE ONE INSIDE OF THE OTHER ONE (i.e., the inner one). The project should be loaded along with all of its original source files. Expand the project by clicking the triangle on its left. Click on the src subfolder. Tutorial Problems: 1) Create a class called DVDCollectionApp which will represent the graphical user interface (i.e., GUI) for a DVDCollection object. The GUI will have the following components laid out manually (i.e., a Layout should NOT be used): three Label objects, 3 ListView objects and 3 Button objects as shown below. In this example, the ListView components have widths of 200, 60 and 60, respectively and they all have a height of 150. The Add, Delete and Stats buttons have widths of 95, 95 and 60, respectively and all three have a height of 30. The buttons use 12pt Arial font. The margin around the window and between components is 10. The window is non-resizable and the overall window dimensions are 349 x

2 Here is some code that you can use as a template: import javafx.application.application; import javafx.scene.scene; import javafx.scene.layout.pane; import javafx.stage.stage; public class DVDCollectionApp extends Application { public void start(stage primarystage) { Pane apane = new Pane(); // Create the labels // Create the lists String[] titles = {"Star Wars", "Java is cool", "Mary Poppins", "The Green Mile"; String[] years = {"1978", "2002", "1968", "1999"; String[] lengths = {"124", "93", "126", "148"; // Create the buttons. The following code shows how to set the font, // background color and text color of a button: // b.setstyle("-fx-font: 12 arial; -fx-base: rgb(0,100,0); " + // "-fx-text-fill: rgb(255,255,255);"); // Don t forget to add the components to the window, set the title, // make it non-resizable, set Scene dimensions and then show the stage public static void main(string[] args) { launch(args); 2) A class called DVDButtonPane which is a subclass of Pane has been created in the tutorial for you. Add code so that it becomes a Pane that contains three buttons sized and spaced as shown below. You can make use of the button creation code that you used above, with minor adjustments: 3) To test our newly created DVDButtonPane, we will adjust our code from part (1). Create a class called DVDCollectionApp1 which contains the exact same code that you wrote from part (1) of this tutorial. Just create the class and then copy over all the code and alter the name of the class by adding a 1 after the name (i.e., DVDCollectionApp1). Take note of the location that the Add button was placed at in your code. Remove the code that adds the three buttons and add code that adds a new DVDButtonPane at 20 pixels to the right of the location that your Add button was originally placed at. If all was done correctly, your interface should look as shown below: 2

3 4) Now we will also use the newly created Pane in another interface. Create a class callled DVDCollectionApp2 to represent the GUI shown on the next page, which is similar, but has only one ListView (which is a list of DVDs now, instead of Strings) and contains three TextField objects. Here is some code that you can use to get you started: import javafx.application.application; import javafx.collections.fxcollections; import javafx.scene.scene; import javafx.scene.control.label; import javafx.scene.control.listview; import javafx.scene.control.textfield; import javafx.scene.layout.pane; import javafx.stage.stage; public class DVDCollectionApp2 extends Application { public void start(stage primarystage) { Pane apane = new Pane(); // Create the labels Label label1 = new Label("DVDs"); Label label2 = new Label("Title"); Label label3 = new Label("Year"); Label label4 = new Label("Length"); // Create the TextFields TextField tfield = new TextField(); TextField yfield = new TextField(); TextField lfield = new TextField(); // Create the lists ListView<DVD> tlist = new ListView<DVD>(); // Create the buttons DVDButtonPane buttonpane = new DVDButtonPane(); // Add all the components to the window apane.getchildren().addall(label1, label2, label3, label4, tfield, yfield, lfield, tlist, buttonpane); primarystage.settitle("my DVD Collection"); primarystage.setresizable(false); primarystage.setscene(new Scene(aPane, 548,268)); primarystage.show(); 3

4 public static void main(string[] args) { launch(args); Make sure that your interface looks the same before continuing. Hopefully, you can see the advantage of having a shared Pane (i.e., the code in each interface is reduced). 5) We will now make adjustments to the code to populate the interface with a DVDCollection object as its model. In the DVDCollectionApp2 class, add an attribute to store the model as follows: private DVDCollection model; Then create the following constructor, which will set that attribute to be the example DVDCollection that was defined in that model class: public DVDCollectionApp2() { model = DVDCollection.example1(); Recall that we used the setitems() method to add some items to a ListView: ListView<String> ylist = new ListView<String>(); String[] years = {"1978", "2002", "1968", "1999"; ylist.setitems(fxcollections.observablearraylist(years)); Modify your code so that the tlist ListView contains the list of DVD objects that are contained in the DVDCollection model. Here is what you should see: 4

5 You will notice that there are many null entries in the list (i.e., 95 of them). Create a method in the DVDCollection class called getdvdlist() which returns an array with only non-null DVDs in it and has the exact length corresponding to the dvdcount. Use this method in your interface... you should see the ListView as before, but without any null entries now. MORE CHALLENGING QUESTIONS: 6) Let us now see how to handle a button press event. Write an event handler in the DVDCollectionApp2 class so that when the user presses the Add button, a new DVD is added to the DVDCollection which contains the title, year and length that is currently written in the TextFields. The user would normally fill in the text fields with the new DVD s data and then press the Add button. Make sure a new DVD is added to the model and that the GUI is updated. You may have to look back at the notes from class (section 5.4) to remind yourself of how to write a button press event handler. Also, it may be a bit tricky to set up, as there are no Button objects in the DVDCollectionApp2 class because they are in the DVDButtonPane class. You will need to find a way to get access to those buttons in a clean way (e.g., get methods). 7) Write an event handler in the DVDCollectionApp2 class so that when the user presses the Delete button, the currently selected DVD in the ListView is removed from the DVDCollection. Make sure that the GUI is updated. In order to determine the actual item that has been selected within a ListView, you use the following code: alistview.getselectionmodel().getselecteditem() Make sure that you can remove the selected DVD from the model and update the GUI. 8) Write an event handler in the DVDCollectionApp2 class so that when the user clicks on a ListView item, the title, year and duration of the selected DVD is shown in the three respective TextFields. Make sure that the GUI is updated. In order to handle a ListView selection, we use a MousePressed event handler as shown below. You will still need to make sure though, that the selected item is not null. 5

6 alistview.setonmousepressed(new EventHandler<MouseEvent>() { public void handle(mouseevent mouseevent) { // Add your code here ); REMINDERS: Don't forget to save all of your work on a USB drive, or it to yourself. Make sure to complete the tutorial at home, as it will give you extra practice. 6