alright so let's now start taking a look
at transforming nodes now javafx allows alright so let's now start taking a look
us to transform nodes in the scene graph at transforming nodes now javafx allows
which means we can do things like we're us to transform nodes in the scene graph
take them which means we can do things like we're
zoom in on them animate them and also take them
apply other effects zoom in on them animate them and also
let's start by adding a label to our ui so apply other effects
go back to a sample . fXML file so gonna let's start by adding a label to our ui so
add that below the radio button we go back to a sample . fXML file so gonna
added so its going to label.... add that below the radio button we
... added so its going to label....
... ...
...just to confirm ...
will run it to make sure the label ...just to confirm
showing alright there's our label showing java will run it to make sure the label
fx effects bit of a mouthful so close showing alright there's our label showing java
it down and let's now zoom in on that fx effects bit of a mouthful so close
label by calling the labels set scale X it down and let's now zoom in on that
and set scale y methods we're going to label by calling the labels set scale X
add an ID to the labels so we can do and set scale y methods we're going to
that so label text equals javafx add an ID to the labels so we can do
elements and it's going to be... that so label text equals javafx
....go to our elements and it's going to be...
controller dot java file and we need to ....go to our
first create an instance or add an instance controller dot java file and we need to
variable for the label so... first create an instance or add an instance
.... variable for the label so...
... ....
... ...
.... ...
....
... ...
let's just run this to confirm this work ...
that it does work there it is all let's just run this to confirm this work
be it not fitting where it was before that it does work there it is all
but it's definitely zoomed-in now so be it not fitting where it was before
typically wouldn't do that when the but it's definitely zoomed-in now so
application first runs well actually typically wouldn't do that when the
zoom in and out in response to some user application first runs well actually
interaction for example we might want to zoom in and out in response to some user
zoom in when the user roles their mouse interaction for example we might want to
button while the cursor is over the zoom in when the user roles their mouse
label or perhaps when the user hovers button while the cursor is over the
over the label let's actually do the label or perhaps when the user hovers
later so when the user hovers over the over the label let's actually do the
label we scale it up so that do that we later so when the user hovers over the
need to add an event listener that label we scale it up so that do that we
listens form mouse enter and need to add an event listener that
mouse exit events when the cursor enters listens form mouse enter and
the label we're going to zoom in mouse exit events when the cursor enters
on it and when the cursor exits the the label we're going to zoom in
label zoom out so let's go and have a on it and when the cursor exits the
look at doing that so close down back to label zoom out so let's go and have a
the controller so will delete the look at doing that so close down back to
code of the initialize method and the controller so will delete the
instead we're going to do is create code of the initialize method and
these two events or event instead we're going to do is create
handlers to be more precise these two events or event
... handlers to be more precise
... ...
.. ...
..
... ...
....so we've ...
created event handlers we need to ....so we've
associate those event handlers with the created event handlers we need to
label in our fxml file so let's go ahead associate those event handlers with the
and do that and with the way we can do label in our fxml file so let's go ahead
that is just to come down here and and do that and with the way we can do
put.... that is just to come down here and
.... put....
... ....
... ...
ok alright let's try this and see now ...
if it's going to work so we got our default ok alright let's try this and see now
interface and if I hover over going if it's going to work so we got our default
into it zooms to double the interface and if I hover over going
size as soon as I leave and move outside into it zooms to double the
the area it actually goes back to the size as soon as I leave and move outside
regular size again pretty cool the area it actually goes back to the
now you might imagine doing this when regular size again pretty cool
the user can't see details when the UI is now you might imagine doing this when
in its default size and we want them to the user can't see details when the UI is
have to zoom into other areas of the UI in its default size and we want them to
that is of interest to them so apart of have to zoom into other areas of the UI
zooming like this javafx also allows us that is of interest to them so apart of
to rotate controls so lets actually try zooming like this javafx also allows us
rotating the label 90 degrees and one to rotate controls so lets actually try
way of doing that is back in the sample rotating the label 90 degrees and one
. fXML and we can come down here way of doing that is back in the sample
just start of the line and put rotate . fXML and we can come down here
equals... just start of the line and put rotate
...if you run that run equals...
it you can see where labels looking now ...if you run that run
and this still works because the zoom it you can see where labels looking now
in and zoom obviously is smart enough to and this still works because the zoom
figure out that the text was rotated 90 in and zoom obviously is smart enough to
degrees and rotate it in place figure out that the text was rotated 90
alright so moving on let's try adding a degrees and rotate it in place
drop shadow to one of our buttons now alright so moving on let's try adding a
we're going to do this using code drop shadow to one of our buttons now
because fxml support for effects is we're going to do this using code
sketchy as at the time that i'm because fxml support for effects is
recording these videos now we can define sketchy as at the time that i'm
a couple of the available effects in the recording these videos now we can define
FXML using CSS but unfortunately not all a couple of the available effects in the
of them so going to use the set effect FXML using CSS but unfortunately not all
method here to set a drop shadow on the of them so going to use the set effect
button and we're going to do that in the method here to set a drop shadow on the
controller's initialized method we have button and we're going to do that in the
to declare an instance variable for the controller's initialized method we have
button in the controller first let's go to declare an instance variable for the
back and do that button in the controller first let's go
so we need a button it's going to be... back and do that
... so we need a button it's going to be...
... ...
.... ...
....
... ...
alright so now when we run this we ...
should see our button 4 has got a alright so now when we run this we
drop shadow you can see the drop shadow should see our button 4 has got a
around button 4 now if you want to drop shadow you can see the drop shadow
you can change the radius color and around button 4 now if you want to
other properties of the drop shadow by you can change the radius color and
setting its properties so quite a other properties of the drop shadow by
a deal of setting its properties so quite a
flexibility there doing things a a deal of
along those lines alright so that's flexibility there doing things a
obviously only a very quick introduction along those lines alright so that's
to transforming nodes to see all the obviously only a very quick introduction
effects you can go to this link that i'm to transforming nodes to see all the
going to take you to the browser now we effects you can go to this link that i'm
have it their it's got lots more details going to take you to the browser now we
about the various effects that you have it their it's got lots more details
can actually implement in your apps for about the various effects that you
example i'm going to select one and have can actually implement in your apps for
a look it gives you an example code as example i'm going to select one and have
well to we'll see how to do things this a look it gives you an example code as
case a high-level effect that makes well to we'll see how to do things this
broader portions of the input image case a high-level effect that makes
appear to glow based on a configurable broader portions of the input image
threshold appear to glow based on a configurable
alright let's get back to IntelliJ threshold
continue our look at some other features alright let's get back to IntelliJ
of the javafx we're going to start continue our look at some other features
looking at the file chooser class now of the javafx we're going to start
it's a very rare client application that looking at the file chooser class now
doesn't offer some type of open and save it's a very rare client application that
functionality doesn't offer some type of open and save
now fortunately the file chooser class functionality
means we don't have to reinvent the now fortunately the file chooser class
wheel and write these open and save means we don't have to reinvent the
dialogues that's because the file wheel and write these open and save
chooser class does everything we'll dialogues that's because the file
need and in addition it can be chooser class does everything we'll
customized it doesn't descend from the need and in addition it can be
node class customized it doesn't descend from the
so can't be added to the scene graph in node class
other words we can add it to layout but so can't be added to the scene graph in
that's okay because the file chooser ui other words we can add it to layout but
does everything we want hopefully that's okay because the file chooser ui
does everything that we want does everything we want hopefully
there's no need to embed it in a window does everything that we want
with other UI elements is the point I'm there's no need to embed it in a window
getting here getting at here with other UI elements is the point I'm
alright so let's actually try changing getting here getting at here
buttons 1 text first go back to the sample alright so let's actually try changing
. fXML button1 going to change the text buttons 1 text first go back to the sample
there instead of saying button... . fXML button1 going to change the text
... there instead of saying button...
... ...
.... ...
....
what we're going to do is we're going to call ...
this show open dialogue method which what we're going to do is we're going to call
opens the show shows or shows the file chooser in open this show open dialogue method which
mode but to do that we have to pass in a opens the show shows or shows the file chooser in open
parent window for the file chooser so mode but to do that we have to pass in a
what we have to do is go back to our parent window for the file chooser so
simple . fXML we need to assign a what we have to do is go back to our
fx ID to our grid pane so that simple . fXML we need to assign a
we can achieve so coming back fx ID to our grid pane so that
up here to our grid pane... we can achieve so coming back
.... up here to our grid pane...
...go back to our ....
controller what we need to do add a ...go back to our
listener to the grid pane so... controller what we need to do add a
... listener to the grid pane so...
... ...
.. ...
so let's actually do that and we run ..
it will just show you what this null so let's actually do that and we run
does it will just show you what this null
so firstly if we click on the Open does
button here our file chooser does open so firstly if we click on the Open
but if we click on the main window we button here our file chooser does open
can still interact with it but if we click on the main window we
in fact we can click on again and open a can still interact with it
second dialog boxes as you can see here and in fact we can click on again and open a
you can even close the main window and second dialog boxes as you can see here and
the file chooser remains up an overall you can even close the main window and
or both of them in this case which I'll just the file chooser remains up an overall
cancel out there and clearly that's not or both of them in this case which I'll just
something that we want its not a cancel out there and clearly that's not
good way to create an application that something that we want its not a
does that what we want the file chooser good way to create an application that
to do or to be modal so that the user has does that what we want the file chooser
to navigate to a file or cancel the to do or to be modal so that the user has
dialogue before they can interact with to navigate to a file or cancel the
the main window again so that's the dialogue before they can interact with
reason that we're passing the main the main window again so that's the
window as the parent and by doing that reason that we're passing the main
we should actually get the behavior we window as the parent and by doing that
want here so if we go back to the we should actually get the behavior we
controller we changed null now we want here so if we go back to the
change that... controller we changed null now we
...so run this app change that...
again click open theirs our dialog box and notice ...so run this app
when I'm clicking on that i'm clicking but I again click open theirs our dialog box and notice
can't get access to it I can't move this at all when I'm clicking on that i'm clicking but I
it's actually completely modal so we can't get access to it I can't move this at all
have to actually make an operation it's actually completely modal so we
select a file or alternatively click on have to actually make an operation
cancel to go back to the window again so select a file or alternatively click on
we can only open one file chooser as cancel to go back to the window again so
well and noticing also that the close we can only open one file chooser as
button was deactivated on the main hello well and noticing also that the close
world window we can't literally do button was deactivated on the main hello
anything there until we've actually world window we can't literally do
made a decision or done something with anything there until we've actually
the file chooser alright so by default made a decision or done something with
the file chooser initially choose shows the file chooser alright so by default
the default file system view of the the file chooser initially choose shows
operating system that's running on the default file system view of the
instead we want to show the last operating system that's running on
directory the user save to or a directory instead we want to show the last
that they specified perhaps in the directory the user save to or a directory
application settings so to have the file that they specified perhaps in the
chooser initially open to a specific application settings so to have the file
directory we can use the set initial chooser initially open to a specific
directory method directory we can use the set initial
alright so let's run again and open the directory method
file chooser but this time lets select a alright so let's run again and open the
directory instead of a file so i'm going file chooser but this time lets select a
to run it again directory instead of a file so i'm going
open to run it again
we're gonna go to folder where I stored open
some of the projects for this course we're gonna go to folder where I stored
let's have selected this source code some of the projects for this course
folder click on open notice I couldn't let's have selected this source code
do that folder click on open notice I couldn't
so when I did that when I selected the do that
directory and actually and click on open so when I did that when I selected the
it actually open the folder rather than directory and actually and click on open
allowing is to actually select the it actually open the folder rather than
directory of that we actually or allowing is to actually select the
folder that we wanted to in this directory of that we actually or
scenario so in other words sometimes we folder that we wanted to in this
want the user to be able to choose a scenario so in other words sometimes we
directory and not file so if we do want to want the user to be able to choose a
choose a directory we need to use the directory and not file so if we do want to
directory chooser instead because we're choose a directory we need to use the
using the file chooser at the moment again directory chooser instead because we're
just to confirm that file chooser is using the file chooser at the moment again
working i can select a file their just to confirm that file chooser is
click on open it does return back to the working i can select a file their
main dialogue so if we want to do a click on open it does return back to the
directory there instead of a file and main dialogue so if we want to do a
what we need to do is use directory directory there instead of a file and
chooser as i mentioned and just to see what we need to do is use directory
how it works lets actually try adding chooser as i mentioned and just to see
that.... how it works lets actually try adding
.... that....
alright so this ones a bit different we ....
need to actually use a.... alright so this ones a bit different we
we run that again we should find there need to actually use a....
we can choose a directory so open go we run that again we should find there
back up one level to my source code we can choose a directory so open go
folder now I can click on source back up one level to my source code
code click on open and notice this time folder now I can click on source
it's now chosen the actual directory code click on open and notice this time
instead of opening like it did last time it's now chosen the actual directory
that's directory chooser and instead of opening like it did last time
incidentally same deal there it expects that's directory chooser and
the only window to be passed to it and incidentally same deal there it expects
that's why we were able to use the the only window to be passed to it and
exact same command the same parameter that's why we were able to use the
...and just exact same command the same parameter
to confirm that's working lets actually ...and just
add a bit more code here.... to confirm that's working lets actually
... add a bit more code here....
... ...
.. ...
..
... ...
let's try running that to see whether we ...
do get a response so we run open firstly if I let's try running that to see whether we
cancel chooser was cancelled open do get a response so we run open firstly if I
again this time we're going to select cancel chooser was cancelled open
a folder the source code open you can see again this time we're going to select
we get the folder name here I get the a folder the source code open you can see
full path back from the directory that we get the folder name here I get the
was chosen pretty cool so full path back from the directory that
open it again though you may have was chosen pretty cool so
noticed if we open the folder we seeing open it again though you may have
that only thing we can actually select noticed if we open the folder we seeing
here are folders you can see these other that only thing we can actually select
files but they aren't selectable and here are folders you can see these other
depending on your operating system you files but they aren't selectable and
may not even see the files at all but on depending on your operating system you
a Mac we can still see the files but may not even see the files at all but on
with only got the ability to select a Mac we can still see the files but
folders and depending on your with only got the ability to select
operating system as well you might find folders and depending on your
it down here where it's got open it operating system as well you might find
might have the text select folder in the it down here where it's got open it
case of a mac though it still shows as might have the text select folder in the
open I'm gonna finish the video case of a mac though it still shows as
here now when we get back here to this open I'm gonna finish the video
in the next video we're going to start here now when we get back here to this
looking at at the file chooser again and in the next video we're going to start
would talk about something called looking at at the file chooser again and
extension filters so see you in the next would talk about something called
video extension filters so see you in the next