Explore Existing Code8:46 with Craig Dennis
Our awesome designer, Susan, wrote some HTML and CSS mockups for the project. I converted them to fxml and CSS. Let's go over it.
Okay, so like I said, Susan and I talked through the problem space. 0:00 She made some mock-ups, and we used the tool that we use here called Envision. 0:04 So Susan submitted these designs and it blew me away. 0:09 It's so good, right? 0:12 So we started talking through a couple of things. 0:14 Like see how the time is using different elements for each digit? 0:16 We talked through how we should probably just have a single element, for 0:19 training wise. 0:22 I did like the idea though. 0:23 It reminds me of one of those old school alarm clocks. 0:24 Susan and I are in different offices, so you can actually click the page and 0:27 leave a comment, and it will shoot her an email and 0:31 she'll know exactly what I'm talking about. 0:34 So she fixed that time to be a single element and then marked it up. 0:36 Now she created HTML in CSS, and I translated it, and I just finished. 0:40 Here, let me show you what I got. 0:45 So first, let me just start by saying I'd love to have done this together, but 0:47 it would have taken forever, and honestly we have better stuff to do. 0:51 These courses can only be so long, right? 0:53 This is basically just an exercise in translating. 0:56 And with enough time, I'm sure you could have done something similar and 0:58 probably even better. 1:01 Now I encourage you to try this and do it on your own. 1:02 I learned a ton doing it, actually. 1:04 The code is available in the Download section. 1:06 Please make sure to check the teacher's notes on this video. 1:08 So let me do a quick walk through of the shell that I built for us. 1:11 But first, let's go ahead and let's run it. 1:15 Ooh right? 1:19 Now, none of it works, so don't get too excited. 1:21 It's basically just place holders, you know, scaffolding. 1:23 So let's take a quick look at the HTML and CSS that Susan sent over. 1:26 I kept it in the mocks directory over here. 1:30 Okay, so if you open this timer out of HTML, this is the HTML for the focus time, 1:33 when things have gone into focus time, 1:37 now this will run in a web browser just like this. 1:39 I'm gonna drag that over that opened up on another monitor for me. 1:44 And see how this is the web browser and this is what it looks like in the web 1:46 browser, so we did a pretty good job of making that, translating that over. 1:49 So let's take a look at what that HTML is. 1:53 I really love how straightforward this is. 1:56 This is HTML, and it's very much like what we've seen. 1:59 It's very much like XML, right. 2:02 Here's some tags. 2:04 They open and they close. 2:05 HTML's not strict, so it doesn't actually always have to have a closing tag. 2:07 So you'll see here this link up here doesn't have a closing tag. 2:12 Couple things I want to point out here. 2:16 Notice how it says class? 2:17 This is just like our style class, but 2:18 it's not a reserved word over here in HTML. 2:20 In our FXML, class of course means our Java class, 2:23 so it's called style class on our side and class here in HTML. 2:25 So if we move down here, this h1 here, this is a heading. 2:30 So it's like a semantic way of saying hey, here, this is a heading. 2:34 She used a p tag for paragraph and 2:37 gave it the class of time so that she could later style that. 2:39 She did a button, and 2:43 notice how she was able to put an image inside of the button here, so 2:43 she was able to nest the image, and image is one of those tags that's not closing. 2:48 And then she put the text there of resume. 2:53 Here's a form, and inside there's a thing called a text area. 2:57 Now we haven't gotten to those yet, but 3:00 what that basically is is a multi line text box. 3:03 JavaFX has a direct translation of this. 3:06 So this is all pretty digestible, right? 3:10 Let's go take a peek at her CSS. 3:11 So I'm gonna open up styles.css here. 3:13 You'll see a lot of familiar patterns in here, namely the selector and 3:19 how we open things and how we close things. 3:24 And also what you'll see is the key value. 3:26 Now notice that her keys don't start with -fx- like ours do. 3:30 But what I wanna point out is that we could combine these together and 3:34 it wouldn't break anything. 3:37 But I figured that we'd keep our files separate just to keep things more clear. 3:38 All right, so 3:43 I think we're ready to take a look at our FXML file that I built from her HTML file. 3:44 So as you can see, 3:55 we have everything in a vertical box since everything is stacked that way. 3:55 And here, we use the optional children tag. 4:00 And inside of it, we'll use labels for title and time. 4:04 I'm gonna go ahead, I'm gonna open up, I'm gonna run that again, so 4:09 we can have that sit right next to us. 4:12 Right? So here's the label for the title. 4:18 Here's the time. 4:21 And then we have buttons. 4:23 And I used a horizontal box that allows you to set two buttons next to each other, 4:24 so that's what I used. 4:28 Now for the buttons, I had to do some interesting tricks and 4:30 this could probably be improved. 4:32 But let's look at restart first. 4:34 So I'm gonna scroll down to where restart is, and it's right here. 4:35 So what I did was I used a stack pane. 4:42 And remember, stack panes allow you to lay something on top of another thing. 4:45 So what I did, was I put the icon on the first level, and 4:49 then I put a see-through button on top of it. 4:52 So if you click, you click the button. 4:55 Now, I called this style a nested action, 4:57 so I could style them all sort of the same way. 4:59 Cuz the buttons above are very similar, they've got the picture next to the image. 5:02 I was unable to do exactly how nice HTML was able to do that. 5:07 It was a little bit more difficult over here in the FXML side of things. 5:10 Note how I'm using the SVGPath. 5:15 Now this is a bit weird, but there currently 5:18 isn't way that I could find to embed an SVG file, so I had to inline the path. 5:20 So if you haven't seen SVG before, and 5:25 I hadn't actually, I'm gonna take the course here on Treehouse about it. 5:27 If you open one of these up you'll look, hey look, here's some more markup. 5:31 And this is the way that it defines itself, and 5:36 basically here is the path that defines what it looks like. 5:38 So if you take this path here, this is the path. 5:43 And so, that tells how to draw the shape. 5:47 That explains how to draw a shape. 5:50 So if we flip back, 5:54 I just in-lined it here because there was no way to bring a file across. 5:55 I'm sure that's something that they'll add here soon. 5:59 So let's scroll up to the other two nested actions. 6:02 So what I did was I used the stack pane, and 6:04 I placed two of these nested actions on top of each other. 6:07 Because we want to show the play button when it's playing and 6:10 show the pause button when it isn't. 6:13 So the way I did this was by hiding and showing in CSS based on selectors. 6:15 Now this is a common pattern and we'll go over it here in just a bit. 6:19 So let's get past these buttons here. 6:23 And if you get down here, here's the text area. 6:25 Right, remember I said there was a direct translation? 6:27 And finally, I converted the pomodoro was an SVG, but I converted it to an image, 6:29 just so I could show you here how images look. 6:34 It's pretty straightforward, right? 6:37 So if we look up, it's just fairly clean mark up right? 6:38 Just a set of vertically aligned elements. 6:41 Okay. Now for the CSS. 6:44 Now, since our backgrounds are high contrast, 6:49 I always want to make sure that all text on any element is white. 6:51 If you want otherwise, you have to overwrite it. 6:55 So that's what star does for us. 6:58 It means everything. 6:59 That pound FFF here is hexidecimal. 7:01 Check the teacher's notes for more on this. 7:04 It means white. 7:06 Now everything else on here selector wise you've seen already, except for, 7:07 let's see. 7:12 Here's one that we haven't shown. 7:14 So see how the padding is overridden for a normal button? 7:16 Now what this is saying is it's saying when normal buttons are up here, so 7:21 these are normal buttons, and this is saying, 7:25 anything that's inside of a restart class, change the button. 7:26 So the restart button was a little bit wider, so 7:30 I had to change the padding between the two. 7:32 So here's the padding at 37, and down here I had to change it to 43. 7:33 One thing that I found is that the SVG path elements don't get a class of 7:39 .svg-path as you'd expect, and 7:42 I plan on filing an issue on that with the JavaFX Project. 7:44 Oh yeah, and this font here, this Varela Round, that might look a little bit weird. 7:48 I downloaded it from Google Fonts and 7:52 I included it in the resources of this project. 7:54 Let's look at how I used it in Main real quick. 7:58 So if we open up Main over here, all right so this is again it's Main, 8:01 it extends the application and Main calls and 8:05 it launches the args just like we were doing before. 8:07 This is how you load a font. 8:10 You do the GIT resource, and you call to external form on it. 8:11 The second parameter here is the default size. 8:16 So you'll see that I put in a ten here. 8:18 So, if you don't specify a font size, it will default to ten. 8:20 This is kind of a normal way to do things. 8:23 The other thing that's a little bit different here is I said setResizable 8:26 is equal to false, what that means is that we take a look at our app, 8:29 I can't resize it, right, if I grab the corner of it. 8:33 Some windows you're able to that with, and this application you are not. 8:35 All right, so 8:39 now that we've got our scaffolding all set up, let's get to the coding. 8:42
You need to sign up for Treehouse in order to download course files.Sign up