We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Creating a JavaFX World Clock App from Scratch

00:00

Formal Metadata

Title
Creating a JavaFX World Clock App from Scratch
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
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
This is a quick tour of advanced topics on how I created a sci-fi looking World Clock application using zero (NO) 3rd party Java library dependencies (Just pure Java). The advance topics you'll get to explore are the following: - Animation - WebView - Custom UI styling - Scene Builder tool - Jlink - Integration of external Weather & Map Service APIs
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
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
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
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
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
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
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
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
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
State of matterClique-widthSource codeNumberRight angleGreatest elementComputer fileJava appletProgram flowchart
Cross-site scriptingDemosceneTrigonometryJava appletConstructor (object-oriented programming)MereologyBridging (networking)Presentation of a groupChainProcess (computing)Link (knot theory)Scripting languageLevel (video gaming)
Slide ruleLink (knot theory)Run time (program lifecycle phase)Bridging (networking)OracleJava appletBuildingModul <Datentyp>Open set
Transcript: English(auto-generated)
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.
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
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.
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
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.
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
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
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
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,
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
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.
So here's a config and close button. config to add in new countries and cities. So in this field, and in SunnyVal,
here you'll notice styling, California, country code, US, you don't have to put that.
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
by 5 hours. This is optional. You can hit save, and in these fields, there's validation
and these have validation also.
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
you to move them positionally and then you can delete them. So there you have it.
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
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
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
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.
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.
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.
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
can actually do this over the group, the fourth item. Let's try
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
here, what you can see is the stroke width. I'm going to change that to four. And this stroke type,
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
the inside or centered. Based on the width of the stroke. You kind of want it centered. These are typical stroke attributes
for the circle or any shape for that map. Here, you see this 100 radius.
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.
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
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
arc actually hovers over it.
So, next up is the actual hour hand arm. That would be an arc.
So, fill in the shape section for that there. Just make sure so in the same
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
simply be similar width.
So, here in the design tool,
where you see the color, it says color fill. And in the opacity, you just start taking that and taking it to there.
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.
It gives it that on the ends of the arc or any bends that you can make them rounded or squared off or just
flat. Let's see. Okay. Also,
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
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
is, we can change the color now. Give it the orange in the demo.
We also want to kind of give it a little bit of transparency.
So, next what we do is make the length of it a little shorter.
We'll make that we'd also center it
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
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,
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
pane puts them kind of centered. So, what you want to do is position that over top of the track. Now that
we have the hour hand arc over it's track we can now give it a glow effect.
Next we can enter a secondary
effect into the first effect. Now for the last part of the clock is to create the
hour hand tip. Here you'll notice the circles
quite large so let's make that a little bit smaller.
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
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.
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
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
also the tip of the arm to position it around the clock face. Now we'll launch the world clock application with different backgrounds.
Last but not least is custom styling to a UI form in JavaFX to allow the user to enter in locations
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
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
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.
Next section is how you would describe the background information and also the border. In this section like we saw before we have the
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
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
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
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
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
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
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.
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
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
let me know.