Making Apps With JavaFX COMP110 - Lecture 23

Transcription

1 Making Apps With JavaFX COMP110 - Lecture 23

2 COMP110 UTA Applications Have the TAs helped you this semester? Join us and help continue to improve COMP110 in the Spring! Application now open on COMP110.com

3 JavaFX Apps We have all the fundamental skills needed to build basic apps There s a lot of knowledge about built-in classes, interfaces, and methods we don t yet have Good news, though: you don t need it if you can ask the right questions! Google and StackOverflow have your back. How do I make a label clickable in Scene Builder? Today: very high level pass through JavaFX application development process.

4 Big Ideas of App Design It is good practice to separate data, visuals, and interactions between the data/visuals into three distinct classes: Models are classes where we represent our data. Views are responsible for the apps visuals, look, and feel. Controllers are responsible for handling user interactions with the view that change the model.

5 How do we make Views? You ve already built a view in Emoji! You constructed instances of JavaFX Shapes. Label, Button, TextField, Slider, Checkbox these are all classes in JavaFX too. Building user interfaces entirely by hand in code can take a lot of effort. You ll learn more on this in COMP401! We ll use a tool called JavaFX SceneBuilder to help. I m going to talk through the following slides in class while working through examples. The slides that follow are for reference and you do not need to follow along from home.

6 Starting a new JavaFX Project (1/7) Today s materials are included in Lecture. We are not going to walk through the next series of slides in class and you do not need to remember any of this. However, if you wanted to try building your own app, here s how you would start: 1. Eclipse: File > New > Java Project Give it a name and click finish. 2. Expand the project, right click on the src folder and add a package. For personal projects, your ONYEN is fine. 3. Right click on the package and add a new Class. Give it a name like MyFirstApp. 1. For Superclass select Browse type Application and look for javafx.application 2. Check the public static void main box

7 Starting a new JavaFX Project (2/7) 4. In the main method, add: <your app s class name>.launch(args); This static method call kicks off JavaFX 5. The start method Eclipse generated for you is where your application will begin. 6. There s some boilerplate code you ll need to add to your start method to load a view from Scene Builder: FXMLLoader fxmlloader = new FXMLLoader(getClass().getResource( view.fxml )); Parent view = fxmlloader.load(); Scene scene = new Scene(view, Region.USE_PREF_SIZE, Region.USE_PREF_SIZE); stage.settitle("compfeed Quiz"); stage.setscene(scene); stage.show();

8 Starting a new JavaFX Project (3/7) 6. In SceneBuilder, drag over Pane from the left hand sidebar. 7. Then drag in something like a Label and change the Label s text 8. Save the file in your project s src folder > package 9. Name it view.fxml 10. Right click on your project in Eclipse and select Refresh 1. Unfortunately you have to do this EVERY time you change something in Scene Builder 11.You should see your app running!

9 How do you bind a View to a Controller class? Add another class to your package named Controller (or some more specific name) In Scene Builder, on the left hand side pane, select the Controller tab In Controller class box, type out the fully-qualified classname (package.class) of your controller, i.e. <onyen>.controller Save! (4/7) Refresh the project in Eclipse. It should still run!

10 How do you bind a View to a Controller class? (5/7) Add a public void method named initialize to your Controller. JavaFX will call this method once everything you bind in the following steps gets called. If it s feeling like there s a decent amount of magic happening your feeling is correct. Working within a framework often requires a lot of initial setup.

11 How do you bind interactions to call methods in your controller? (6/7) Select the control in Scene Builder On the Right Hand Side Inspector Select the Code Section Find the Action you want, i.e. On Action Enter a method name. Add that method to your Controller. Add a parameter of the correct type search docs for ActionEvent, MouseEvent, KeyboardEvent, etc.

12 How do you get references to Controls in your view in your controller? (7/7) Add a private instance variable in your Controller class. Its type should be the same as the the type in Scene builder. (You can see this in the right hand side it will say Properties : <Control Class>, like, Properties: Label ) Pick a name for it and remember the name. Import javafx.fxml.fxml; Add this annotation just above your private Label _result; Back in Scene Builder, select the control. Go to the Code panel on the right hand side. In the fx:id field provide the same name as the instance variable. Save, refresh your project in Eclipse. Now this instance variable will be bound to the View control once JavaFX initializes your Controller.

13 DidDukeWinApp This is the initial basic app we worked through on the previous slides. In class we ll implement the handleclickbutton method of DidDukeWinController.java To run, run DidDukeWinApp first public void handleclickbutton(actionevent event) { System.out.println("Button clicked! ); _result.settext( No! ); _result.settextfill(color.red); }

14 Break

15 Application State true Initialization Show Next Question User Clicks Answer More Qs? false Display Outcome with Most Points

16 How would you relate these words to describe the model or flow of a BuzzFeed Quiz? Quiz Question Choices Outcomes Check-in on PollEv when you have sentences relating these concepts together.

17 How we ll model a Quiz: Quiz List of Questions Scoring is a map of Outcomes to Points Question Prompt Choices are a map of Answers to Outcomes

18 How we ll model a Quiz: Question class _prompt: String _answers: Map<String, String>: Answers to Outcomes QuizModel class _questions: List<Question> _scores: Map<String, Integer> Outcomes to Points

19 Code Walk QuizModel - Represents the data and state of a quiz. Can: restart and ask for result. Question - Represents the data for a single question. QuizController - Handles progressing through the application s state by handling events. QuizApp - Where our program begins. Where we initialize a QuizModel with questions.

20 Show next question. How do we do that? We ask the _quiz Model for the next question. We load the prompt to the _prompt label. We load each choice in each of the _choices labels.

21 How do we work with a Set and an Array simultaneously? Sets don t have indices, but arrays do. How would you put every element of a Set into an array? Our Labels are in an array but our Choices are a Set of Strings. How do loop through both a Set and an Array at the same time? In the nextquestion method of QuizController, let s try writing a for-each loop that also employs a counter variable for working through the array of Label _choices.

22 _prompt.settext(_question.getprompt()); Set<String> modelchoices = _question.getchoices(); int i = 0; for (String choice : modelchoices) { _choices[i].settext(choice); i++; }

23 How do we handle an answer click? Let s implement handleclicka We want to: 1. Ask the label which choice it has as its text. Why? 2. Ask the current question: what princes is the result of this answer selection. 3. Add one to the QuizModel s tally for that particular outcome. 4. Move on to the next question.

24 String choice = _a.gettext(); String result = _question.getresult(choice); _quiz.addtally(result); this.nextquestion();

25 Hands-on: Calculate the Correct Princess In QuizModel.java find the getresult() method In the _scores Map, find the key with the maximum. How? 1. Before you loop, declare a variable to hold the maximum value you ve seen. Initialize it to Before you loop, declare a variable to hold the key associated with that value. It should be a String. 3. Loop through each of the keys in the _scores Map. Is its value greater than the biggest you ve seen before? If so, Assign the key and value to the variables above. 4. Return the largest key you found. Check-in on PollEv when complete.

26 int max = 0; String winner = ""; for (String key : _scores.keyset()) { if (_scores.get(key) > max) { max = _scores.get(key); winner = key; } } return winner;

27 The Fundamentals of COMP110 The ideas you re learning in this class are universal to programming problems in general Look at the concepts needed to make a BuzzFeed Quiz: Methods and Method Calls Int, String Variables Arrays, Sets, For-each Loop If Statements for Conditional Logic

28 Bonus: Exporting a Runnable JAR Now that we have an app how do we make it so that we can run it outside of Eclipse? Right Click on your Project Select Export > RUNNABLE Jar In Launch Configuration select your App s Name and Project Pick a Destination (Like desktop) Select Extract required libraries Follow through to finish!