Creating a JavaFX World Clock App from Scratch
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 637 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/52800 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
EmailSoftware developerSystem programmingJava appletSoftwareClient (computing)Drop (liquid)Scripting languageDemosceneCross-site scriptingTrigonometryMobile appDampingBitSpacetimeCodePhysical systemDemosceneBuildingLine (geometry)Coma BerenicesGoodness of fitTwitterProcess (computing)TorusArithmetic progressionSound effectProjective planeDisk read-and-write headJava appletSlide ruleIntegrated development environmentComputer animation
01:40
Reading (process)Chi-squared distributionFingerprintSystem programmingJava appletProjective planeDemosceneGame controllerRight angleModul <Datentyp>Cartesian coordinate systemRevision controlDemo (music)Metropolitan area networkPlug-in (computing)Bit ratePhysical systemActive contour modelComputer animation
02:50
BuildingSocial classDefault (computer science)Process (computing)Revision controlSystem programmingJava appletTime zoneDifferent (Kate Ryan album)Field (computer science)Free variables and bound variablesDemosceneMultiplication signTunisTouchscreenMereologyArithmetic meanClosed setCentralizer and normalizerValidity (statistics)Configuration spaceArithmetic progressionSource codeComputer animation
06:29
TrailSummierbarkeitCurveEllipseCylinder (geometry)CircleLibrary (computing)GUI widgetFocus (optics)Shape (magazine)Cache (computing)Scale (map)Social classLocal GroupLine (geometry)MetreData typeAddressing modeCubic graphUsabilityHierarchyCuboidDemosceneSheaf (mathematics)MereologyPosition operatorState of matterCircleArc (geometry)ArmProcess (computing)Group actionPoint cloudMedical imagingTrailArrow of timeAreaComponent-based software engineeringRight angleCuboidSound effectDisk read-and-write head
09:24
Clique-widthCursor (computers)Inheritance (object-oriented programming)Data typeSquare numberOrientation (vector space)Limit (category theory)Line (geometry)RotationScale (map)Singuläres IntegralForm (programming)Cartesian coordinate systemBound stateAsynchronous Transfer ModeCache (computing)Software testingDefault (computer science)Linear mapGradientAcoustic shadowShape (magazine)Type theoryRadiusCircleIntelligent NetworkDemonVector graphicsClique-widthArc (geometry)Attribute grammarComputer animation
12:27
Line (geometry)Local GroupSmoothingCuboidCurveCubic graphData typeEllipseCylinder (geometry)Limit (category theory)GradientClique-widthLattice (order)MetreCircleActive contour modelSquare numberCursor (computers)Focus (optics)RoundingOrientation (vector space)Electronic mailing listOpen setChord (peer-to-peer)Inheritance (object-oriented programming)Linear mapAsynchronous Transfer ModeCache (computing)Default (computer science)Software testingBound stateOnline helpRotationLengthRadiusAngleDreizehnRadarAreaDegree (graph theory)TrailDemosceneCircleLink (knot theory)Kritischer Punkt <Mathematik>ArmSheaf (mathematics)TheoryPosition operatorGraph coloringMathematicsType theoryLengthAnglePoint (geometry)Arc (geometry)BendingShape (magazine)Default (computer science)Demo (music)Clique-widthBitMereologyRoundness (object)Computer animation
18:31
Cache (computing)Electronic data interchangeStack (abstract data type)Software testingSound effectLine (geometry)RoundingDefault (computer science)Cross-site scriptingInheritance (object-oriented programming)Social classFocus (optics)Cursor (computers)Bit rateSound effectArc (geometry)MereologyTouchscreenComputer animation
19:40
Cursor (computers)Clique-widthSound effectData typeLine (geometry)Orientation (vector space)CircleLocal GroupInheritance (object-oriented programming)Square numberCantor setScale (map)Cartesian coordinate systemRotationBound stateSinguläres IntegralGradientLimit (category theory)Linear mapRadiusGraph coloringCircleSound effectMereologyGradientGroup actionComputer animation
21:56
IntegerDegree (graph theory)Cross-site scriptingTrigonometryEmpennageComputer fontRobotState of matterClique-widthInformationSheaf (mathematics)ArmCartesian coordinate systemTime zoneGame controllerExtension (kinesiology)State of matterDifferent (Kate Ryan album)Square numberArithmetic progressionPresentation of a groupMereologyForm (programming)Position operatorUniform resource locatorConfiguration spacePixelSocial classComputer fontGraph coloringShape (magazine)CircleTrigonometryArc (geometry)AngleFunctional (mathematics)Order (biology)RoboticsSet (mathematics)Intelligent NetworkNumberGreatest elementMassProcess (computing)Sound effectComputer animation
25:46
State of matterClique-widthSource codeNumberRight angleGreatest elementComputer fileJava appletProgram flowchart
26:40
Cross-site scriptingDemosceneTrigonometryJava appletConstructor (object-oriented programming)MereologyBridging (networking)Presentation of a groupChainProcess (computing)Link (knot theory)Scripting languageLevel (video gaming)
27:04
Slide ruleLink (knot theory)Run time (program lifecycle phase)Bridging (networking)OracleJava appletBuildingModul <Datentyp>Open set
Transcript: English(auto-generated)
00:03
Welcome to my talk. Hi everybody, my name is Carl D. and I'm going to show you how I created a cool-looking sci-fi, JavaFX-based world clock app from scratch. But first, a little bit about myself.
00:21
I work for Azul Systems and you'll find me on Twitter often tweeting about all things Java and JavaFX. Enough about me, let's get started. If you just really want to dig into the code, just head over to my GitHub account at github.com slash carld slash
00:40
world clock. If you are a beginner, I highly recommend that you go to openjfx.io for great tutorials on how to set up your projects using your favorite IDE or your favorite build tool such as Maven or Gradle.
01:00
This is an overview of the current progress of the world clock app. As far as the advanced topics, they will be referenced at the end of the slides. Before we begin the project, here are the project requirements. You'll be using Maven, Java 15 or greater, JavaFX 15
01:20
or greater, and Scene Builder from Gluon HQ, and Git, of course, on your command line, and my GitHub account at github.com slash carld slash world clock. That's where you clone the project and get ready and get started.
01:41
Before I get into Scene Builder and actually showing you how I designed it with the clock face and how I assembled things, I just want to run the application and demo what it kind of looks like and what the kind of styling that I was going for
02:02
and some of the controls just to see what it looks like. This is what the project looks like, assuming that you've cloned the project. Just making sure
02:21
I have the right versions of things, so okay, I have these SDK man and I switched to Azul. Here, all you have to do is run the project
02:40
with that command. That's the Maven plugin to launch a JavaFX modular application. Here's the launching of the clock. Here we have two cities, locations, one in Pasadena,
03:01
Maryland in the US, Amsterdam in the Netherlands, with two different time zones using Greenwich Mean Time. One is in Central European Time and Eastern Standard Time in the US. Here in this
03:20
page, or this front screen, I have placeholders for the weather and I have a placeholder for the map, which is still in progress and haven't worked on that yet.
03:40
So here's a config and close button. config to add in new countries and cities. So in this field, and in SunnyVal,
04:05
here you'll notice styling, California, country code, US, you don't have to put that.
04:20
Minus 8, the offset is from the UK, which is zero offset in the UK from here in the East Coast would be negative 5 and California would be negative 8 so they're in the future
04:41
by 5 hours. This is optional. You can hit save, and in these fields, there's validation
05:00
and these have validation also.
05:42
So once entered, you can switch back. Here I use JavaFX animation and it adds the new city. Back to the form, here I can highlight each item. These buttons allow
06:02
you to move them positionally and then you can delete them. So there you have it.
06:21
Next, I will use the scene builder tool to show you how I draw and design the clock face. Before going into the scene builder tool, let me explain the parts of the clock face. On the left is an HBox with text nodes denoting the city and
06:42
state or country, date info, and in the next position is a group node comprised of simple JavaFX shapes such as arcs and circles. And lastly is part of the HBox is an image
07:02
of a cloud which denotes the weather. Here you'll notice the red arrows pointing at the hour hand track, the hour hand arc, and the hour hand tip. Here's the scene builder tool and on the left here you'll see the various
07:22
components that you can drag onto the canvas area in this WYSIWYG tool. So, like I said earlier, this is comprised of an HBox with a section here and a section in the middle and a section on the right.
07:40
In this scenario, to be brief, I already have the parts that comprise of the minute hand parts of the clock. So here, under the group, expand that.
08:01
This is the minute hand or the minute area track where the arc and the circle which represents the tip of the arm is, it sits on top of that track.
08:20
So, our job right now is to mimic this for the hour hands. So, what we'll do here is over here, cut the circle, what you want to do is just drag it over, you
08:40
can actually do this over the group, the fourth item. Let's try
09:00
to collapse this. And stop so you can see it. In this part, what you want to do is have a little cheat sheet. So, this track right here, what you want to do is
09:28
here, what you can see is the stroke width. I'm going to change that to four. And this stroke type,
09:42
I would want it centered. This is how vector graphics actually is when it comes to shapes. They typically you can draw the circle spanning outside the actual circle or
10:02
the inside or centered. Based on the width of the stroke. You kind of want it centered. These are typical stroke attributes
10:20
for the circle or any shape for that map. Here, you see this 100 radius.
10:41
Of course, we want to reduce that to 35, which is which makes it right there. And then next would make it transparent in the center.
11:25
There you go. Here, I just make it opaque. Zero opacity. So, it makes it transparent in the center. And then, of course, this black
11:41
of the stroke. Here, I would make it that nice little gray. Kind of makes it look when you have a darker theme in science fiction or whatnot. It kind of looks like a shadow or as the hour hand
12:03
arc actually hovers over it.
12:29
So, next up is the actual hour hand arm. That would be an arc.
12:42
So, fill in the shape section for that there. Just make sure so in the same
13:01
manner as the circle, this arc is very similar. It first fills it with a default color. What we want to do is make this area transparent and the stroke would
13:21
simply be similar width.
14:00
So, here in the design tool,
14:05
where you see the color, it says color fill. And in the opacity, you just start taking that and taking it to there.
14:24
Then once you're there, what you want to do is, again, similar to the circle, you want to change some of these stroke types.
14:47
It gives it that on the ends of the arc or any bends that you can make them rounded or squared off or just
15:02
flat. Let's see. Okay. Also,
15:25
so next, what you want to do is in this area, the actual arc type, there's three different ones. There's the open, the
15:42
cord, and the round. So, what you want to do is just make it open. It kind of looks like the letter C. So, now what you want to do
16:02
is, we can change the color now. Give it the orange in the demo.
16:35
We also want to kind of give it a little bit of transparency.
16:46
So, next what we do is make the length of it a little shorter.
17:17
We'll make that we'd also center it
17:21
just like we did with the minute hand arc. This is the critical part where the start angle and the length have to be it's a counterclockwise
17:41
starting at three o'clock which is zero degrees. So, at the start angle it's zero degrees. And then the length so we're just designing so we kind of want it looking like three o'clock. So,
18:00
at that point it would be 90 degrees counterclockwise. From three o'clock to the 12 o'clock position gives you the little nice arc that sits like that. So, now that it looks in this manner what you want to do is position it so you want it in a stack
18:21
pane puts them kind of centered. So, what you want to do is position that over top of the track. Now that
18:51
we have the hour hand arc over it's track we can now give it a glow effect.
19:20
Next we can enter a secondary
19:22
effect into the first effect. Now for the last part of the clock is to create the
19:41
hour hand tip. Here you'll notice the circles
20:00
quite large so let's make that a little bit smaller.
20:29
Since the hour hand tip is in the center now we want to position it. Since it's in a group we have to use the translate X and move it at 35 matching the radius
20:42
of the circle. Now for the last part of the hour hand tip what you want to do is make it look like a glowing orange ball.
21:46
For the glowing orb effect you want to make sure the gradient first stop color is white. To continue the progress of our world clock
22:00
in part 2 I actually used trigonometry to position the arc and the circle of the minute hand and the hour hand. Here I use lambda functions to receive the hour and the minutes in order to calculate the extent angle and
22:23
also the tip of the arm to position it around the clock face. Now we'll launch the world clock application with different backgrounds.
22:52
Last but not least is custom styling to a UI form in JavaFX to allow the user to enter in locations
23:01
for different time zones for the world clock. For the last part of this presentation I'm going to show you how I styled the locations configuration form. Mostly what I'll do is explain how I
23:22
styled the save button which is very similar to all the other controls. If you just understand pseudo states and when the mouse hovers over the button. So here's a styling for the save button
23:41
with the class .save- location-button The first part describes the font information. Here I have a custom font Roboto medium and the rest is describing the font.
24:03
Next section is how you would describe the background information and also the border. In this section like we saw before we have the
24:22
save button and when you hover over a button here are the insets or the background insets for this state. Next is how it's armed. This is when
24:42
you press it but you don't let go yet. The insets if you notice there's three spots where the color is aqua where the first position says zero
25:02
zero zero zero. That's saying that the outer part or the shape of the background there's no insets where it's aqua. Then the next color is black which is indented or
25:20
inset one pixel and then the next is the aqua again which makes the aqua square that's surrounding the save actually offset as if it looks like it's being pressed which is
25:41
the insets are four two two and four. Another thing to note about the insets is of the four numbers that you get the first number is the top the second number is the right
26:00
the third number is the bottom and the last is the left hand side so when they are reduced. So if you want to learn more about CSS a really good resource which is a little hard to dig but what you want to do is
26:22
look at the source code of JavaFX and look for Medina CSS Medina dot CSS. It's a file that's located in the source code and that shows you how it was originally done.
26:42
So this is the last part of the presentation I hope you enjoyed it. This part is under construction still so the map API's and the weather API's and Jlink and JavaFX's JavaScript bridge is
27:01
it's in the links below. So thank you for having me I hope you have a great conference and if anyone has any questions
27:21
let me know.