so when we left off at the end of the last video we had a functional main
UI but the user couldn't really do much except look at hard coded data and
we added right at the end of the last video a menu item that will let the user add another todo
item to the list so now we need to create the UI the user we'll see when
they press the Menu item so we've got the menu in place if we run our application
we've got an option their to click to select rather a new to-do item but we need to
implement that functionality within the application so what we gonna do is
display a dialog that will accept a short description
the details and the deadline for the new item and when the user presses the dialogs
ok button we'll create a new to-do item at that point we'll then add it to the
list in our data model and then update the data in the list view on the screen and we will
also select the new items so that the user can see the details and deadlines
they just entered on screen now before Java 8u40 there wasn't any support for
dialogue that really was a huge oversight and on the part of JavaFX
developers now they may have believed that developers were mainly only going to use
JavaFX for web and mobile applications perhaps where dialogs don't really make as much
sense but that hasn't turned out to be the case and most desktop applications
used dialogs so to create a dialog using early versions of JavaFX
even simple dialogs that just display confirmation message and an OK
button to do that we had to create a whole new window and take care most of
the background plumbing code ourselves but fortunately JavaFX 8u40
introduced the dialogue and dialogue pane classes and that makes creating
dialogues a lot easier now at the same time JavaFX also added support for a bunch of
common dialog types and we are gonna use one of the canned dialog types later but to start
off we are going to create a custom dialog for the add new to do item case now if you're running a JDK
earlier than Java 8u40 you won't be able to use to the dialogue and dialogue
pane classes and you should really upgrade to the latest JDK version their
isn't really a solid reason not too update
and just to check what version you are running a couple of ways of doing it but
the simplest ways just to right click on the project name come down here to open module
settings and it should show you where you've got too module selected it will
show you the module SDK project is SDK 8.1 and you can just opened that up
and have a look at the version their in this case of I've got 1_8_.0_73 so that is effectively sort
of like 8u73 so you really want a number basically that is version 8 and greater than
the number 40 to be able to use this and again as I said theirs no real reason not
to update to the latest version of Java 8 so I suggested you do that now in terms
of the dialogues UI we can't create this in the same FXML file that we've used
so far in our application for the main window that's because each FXML file can really
only have one root node and meaning ultimately one scene graph now our dialogue we
use a different scene graph from the main window so we would have to create a new FXML
file and then associate a separate controller with it as well and unfortunately theirs
no support in IntelliJ to do this so in other words we really have to do this
ourselves so start by coming over here to the package basically the same level that we've got our FXML
file and click in that we got that on the screen there now and basically
just click here in the package
new file and call this one...so every instance of the dialogue
wraps a dialogue pane instance in other words a dialogue pane is always a
top level layout of a dialogue what we do is we gonna copy the bare bones from the
main windows FXML file into the dialogue
FXML file so just we got something to start with so lets go back temporarily to our main window
we want to copy this first border pane....copy that and go back to our to do dialogue we just created
and paste that in their we are gonna change...
...and the other thing we need to do is
change our controller because that's pointing to the controller that we have Associated for the
main window so let's make that instead of controller.....
...
the error disappears because the class now exists so lets talk about how the dialogue pane
works now as a layout manager that is used for dialogue as you can probably guess and it allows
us to set 4 properties namely the header graphic content and buttons now
each property expects a control because we are often want to display text for the header
in the content the dialogue pane also has to convenient properties
header text and content text and what we want the header or content to display a string using the
convenience property saves us from having to create a label property
for the text now if both the non-text property and the text properly is set then
the non text properly will take precedence for example if we set the header
property to a control and we also set the header text property the header value
will be used and then the header text value will be ignored
now there are additional rules that dictate what happened to the header when the
graphics properties set and we won't go into those for our application right now
but if you're interested you can consult the dialogue pane documentation and I'll put that on
the screen so you can check that at your leisure
theirs the link their on the screen....
..so that refer to that link if you need to for more information about the dialogue pane
lets go back to building our dialogue UI now we don't really need to put anything
into the header text but will do it anyway just to see what it looks like on screen so the way
we do it is we create a header text sections so....
....
...now notice this looks a bit different when we set the text to a control
usually there's a text properly in this case header text is the Text property it's a
string property and consequently its contents consists of a string so now we'll set the content
area for the dialogue so we need to display more than just text and this is where
the user will typically input the to do the to do time
short description
the details and the deadline so we really need three label controls a
text field control a text area control and a date picker control and we want our
labels and input fields to line up nicely so why don't we use a grid pane layout to help us
with that and the grid is gonna consequently have three rows and 2 columns first
column will contain rather than label controls let's start
by adding a content element to our FXML below the header text....
....
...so first add the label and text field for the short description so....
....
...so that is
our short description now so let's go ahead and add the labels and controls
for the details and deadlines so put a deadline label into the first column
on the second row so...
...
...so that's a text area and finally we got our deadline and
that will be...
....
....so that is our basic interface but we also need an ok and
cancel buttons however will add those through code
now JavaFX provides a set of predefined buttons that can use but currently their is no FXML
support for them and I'm sure that will come in later versions of Java
FX as I mentioned earlier the dialogue pane itself is new to Java 8u40
so its relatively new to Java FX so where do we add the code to add the buttons and show the
dialogue so thinking about it you thought first be to do it in the dialogues controller but that would
actually be incorrect we show the dialogue when the user presses file on
the main windows menu and then New so we have to handle this in the
main window's control because that's where the functionality is so what we want
to do is add an event handler to the controller class and lets go and do that
this is the controller classic controls the main window as opposed to putting it
in the dialog control so let's go ahead and add that and what
I'll do now is delete that commented out code and put this below
in the initialize so want to add a method show new item dialogue we will call it...
....
....so when the user presses
file and select new we want our new
dialogue to pop up so first what we need to do is need to create an instance of the dialogue
class so let's go ahead and do that its gonna be...
...now we want this dialogue to be modul and what that means is that while the dialogue is
visible the users won't be able to interact with any other part of the
applications UI in other words they won't be able to interact with dialogue while its open if they click on the
main window to give it focus nothing will happen so they will have to dismiss the dialogue by
clicking the ok or cancel button or by clicking the close button in the upper
right hand corner of the dialogue before they can ultimately interact with the
main window again and by default when we created dialogue using this dialogue class the
dialogue will be modul so it's not something you need to change by the default and most
of the times you will want a dialogue box to be modul so what we want to do is we want
to assign an ID to the border pane in the main window FXML so that we can access it...because
it currently has got an ID so...
....and its good practice to set the dialogues parent which is
usually the window the dialogue was open from and we could set the owner to
null and the JavaFX runtime would still block input to other parts of the
application
but lets set the owner so we can see how it's done then the owner has to be of type
window and this is the reason that we're setting the ID so to get the parent
window instance we need to assign the ID to this border pane and the
we can refer to it in the controller so let's go back to our controller code and we can
now add an instance variable for the border pane so....
...so now that we've done that we can ask the boarder
pane for the reference to its parent and we can do that by calling get scene which
will return a scene from the border pane and then will call scenes get window
method and set the result as the owner of the dialogue so now we've set that
main pane lets go back to the code we are adding here in show new item dialogue and
we can type in....
.....and you probably recall that we load our main window FXML in main.java and we
created an instance of the dialogue class but that doesn't load the UI we defined
in the FXML so we have to load the FXML here and we do it the same way that we do it
in a main class once we've done that will have to set $dialogues dialogue pane to the
dialogue pane we defined in the FXML so go ahead and add that code now so its going to
be...and reason we are adding a try block is that the
load method can throw an IO exception so we need to catch that so put that code in
....
....so this video has gone on for quite some time
s we are gonna stop this video now in the next video I'm gonna continue on and now that
we've created to dialogue here in code
we are gonna add the buttons to the dialogue pane so see you in the next video