Building web apps in Java with Vaadin 8 (full) [w/ subs]



00:00:00 – hi there my name is Marcus Helberg and
00:00:02 – in this video I'm going to show you how
00:00:04 – you can build web apps in java using the
00:00:06 – bottom framework so if you are familiar
00:00:09 – with bottom it's an Apache to license to
00:00:12 – open source framework that has around
00:00:14 – 250,000 active developers worldwide
00:00:17 – around forty percent of Fortune hundred
00:00:20 – companies are using button internally
00:00:23 – and behind spring-mvc we are the number
00:00:26 – to a java-based web framework out there
00:00:29 – in this video I'm going to show you a
00:00:32 – few things first we're going to take a
00:00:34 – look at what it really takes to build a
00:00:36 – complex water and web application and
00:00:38 – what we mean by modern web application
00:00:41 – after that we're going to have a very
00:00:43 – quick run through of the basics of baden
00:00:46 – just so you can kind of follow along and
00:00:48 – then we're going to spend the bulk of
00:00:49 – the video doing hands-on development to
00:00:52 – build an actual full step web
00:00:54 – application using the man framework so
00:00:58 – let's jump in first
00:01:01 – what do you mean by modern web
00:01:02 – applications when I'm talking about
00:01:04 – modern applications i'm talking about
00:01:06 – apps that should first of all be fast
00:01:09 – they should be good-looking they should
00:01:12 – be able to handle big amounts of data
00:01:14 – and they should be able to support
00:01:16 – basically any kind of device or browser
00:01:19 – and not require the user to have any
00:01:23 – kind of plug into installed on their on
00:01:26 – their device so a using the traditional
00:01:30 – way of building web applications there
00:01:32 – are several things that we need in order
00:01:34 – to do this first of all obviously we
00:01:37 – need something on the server that can
00:01:38 – pass this data to the client and back so
00:01:42 – we'll need some sort of breast
00:01:43 – controller on the client then we'll need
00:01:46 – some sort of template that kind of lays
00:01:48 – out everything in the browser will need
00:01:52 – some CSS to make it look nice and then
00:01:54 – depending on how complex the application
00:01:57 – this will need a little too a lot of
00:02:00 – JavaScript to kind of tie all these
00:02:01 – pieces together and all this can get
00:02:05 – really complex very quickly so that's
00:02:09 – what we have on has taken it to
00:02:11 – ourselves to fight for simplicity
00:02:12 – when it comes to web development the way
00:02:16 – we do that is by simplifying the model
00:02:19 – used for building web applications
00:02:21 – involved in everything is a component so
00:02:25 – if we want to text field and a button we
00:02:27 – instantiate a new text field and a new
00:02:28 – button every component gets laid out by
00:02:33 – layout so in the previous example these
00:02:35 – two components are inside of a
00:02:36 – horizontal layout if we change that to a
00:02:39 – vertical layout their order would change
00:02:42 – they would be stacked on top of each
00:02:43 – other instead of next to each other if
00:02:48 – we want to add any kind of user
00:02:50 – interaction to our application which you
00:02:52 – probably want to do that's ready to do
00:02:54 – to do in baden the way we do that is by
00:02:58 – listening for user interaction so any
00:03:00 – kind of component in the bottom
00:03:01 – framework the user can interact with
00:03:03 – will trigger different types of events
00:03:05 – whenever those interactions happen in
00:03:08 – this case we're going to add a click
00:03:10 – listener to the button component and
00:03:13 – whenever a user clicks the button
00:03:15 – we're going to add a new label to the
00:03:17 – layout with the value in the text field
00:03:19 – so if you run this can see that i can
00:03:24 – type in hello i click the hello value
00:03:27 – gets shown and if i change the value and
00:03:30 – keep clicking the value gets updated a
00:03:35 – lot of times so when we're working with
00:03:37 – bigger applications
00:03:38 – we're not interesting dealing with the
00:03:40 – data from fields just individually
00:03:44 – rather we want to tie that data and that
00:03:46 – data to a object in this case we have a
00:03:50 – person object just a plain java object
00:03:52 – this could be an entity for instance so
00:03:56 – in order for us to tie this to our form
00:03:57 – that we have here we'll use a binder
00:04:00 – class of type person will then tell the
00:04:04 – binder to bind the instance filled with
00:04:08 – this particular layout what that's going
00:04:11 – to do is it's going to look at the names
00:04:12 – of our text fields and it's going to
00:04:14 – look at the fields in the person object
00:04:16 – to match those by name
00:04:19 – we can definitely configure this but
00:04:22 – this is a very simple way that you could
00:04:24 – do data binding
00:04:25 – with kind of convention over
00:04:28 – configuration finally our button here
00:04:33 – and listen for the click event and try
00:04:36 – to write the beam if there are no
00:04:39 – validation errors and then she finally
00:04:41 – show sure the value in a notification so
00:04:44 – let's try this had been a first name and
00:04:48 – the last name and press save and we can
00:04:52 – see that we have the notification
00:04:54 – they're showing person not to string so
00:04:56 – that's actually coming from the person
00:04:57 – object itself a lot of times also in
00:05:02 – applications we need to deal with lists
00:05:04 – of a lot of data invited to something
00:05:06 – that we can do very easily so in this
00:05:09 – case we're going to build a data grid
00:05:10 – the grid gets instantiated by just
00:05:14 – creating a new instance of the grid
00:05:16 – object
00:05:18 – we're then going to define some columns
00:05:20 – on it by passing in a function reference
00:05:23 – to a first-name lastname an email and
00:05:26 – setting captions to those columns to
00:05:28 – whatever we want it to be finally we
00:05:32 – call our service which we have auto
00:05:34 – wired in here and get people that will
00:05:38 – just return a list of job objects and
00:05:41 – based on that vitamin will be able to
00:05:43 – generate the columns that we just
00:05:44 – defined and the user can scroll through
00:05:47 – and sort all of this data a lot of times
00:05:53 – though we have much more data that we
00:05:55 – can kind of recently pull out of the
00:05:56 – database at once
00:05:58 – most likely the users not even gonna
00:05:59 – look at all of that data and even if
00:06:01 – they do they're not going to need all
00:06:03 – hundred thousand most at the same time
00:06:05 – so if we want to do that we can kind of
00:06:09 – keep the common definitions the same but
00:06:11 – instead of querying the database and
00:06:15 – setting the items to collection what we
00:06:17 – can do is set a data provider this takes
00:06:20 – into Landis one that gets in parameters
00:06:24 – for sort order offset limit and those we
00:06:28 – can pass on to our service to kind of
00:06:31 – page the data matching the other lambda
00:06:35 – here just returns the total count of
00:06:37 – objects in our
00:06:39 – in our database so with that data
00:06:42 – provider in place we can now give the
00:06:44 – end user the same exact experience but
00:06:47 – from in terms of our application running
00:06:50 – we're no longer touching the entire
00:06:52 – database where only fetching data in
00:06:54 – small pages as they are needed any page
00:06:58 – fetches will get triggered automatically
00:06:59 – as the user is crawling along now
00:07:03 – another thing that tends to take up a
00:07:05 – lot of time when we're building web
00:07:06 – applications is making things look nice
00:07:08 – to help developers tackle that
00:07:11 – environment where shipping with a theme
00:07:13 – engine called follow and will allows you
00:07:16 – to define some parameters that it uses
00:07:19 – to then build a theme that's cohesive
00:07:21 – and coherent through front of the entire
00:07:24 – library of components that we have so in
00:07:27 – this first example we have a background
00:07:29 – color that has a lightness value of one
00:07:32 – hundred percent if we change nothing but
00:07:35 – the lightness value to thirty-three
00:07:37 – percent you can see that the same engine
00:07:39 – not only change the background color to
00:07:42 – a dark grey but also understood that we
00:07:44 – can't have a black text on a dark grey
00:07:46 – background that wouldn't be legible so
00:07:48 – it's actually going to calculate same
00:07:51 – values for all the parameters that you
00:07:53 – don't said so it's going to set the text
00:07:54 – value to kind of light gray to give
00:07:58 – enough contrast to be read by defining
00:08:03 – so further parameters things like
00:08:04 – border-radius and devils and shadows we
00:08:08 – can really customize the UI to look
00:08:11 – anywhere from the previous kind of web
00:08:15 – app interface to this windows like
00:08:18 – interface than anything in between so
00:08:21 – the theme engine will really allow you
00:08:23 – to customers here
00:08:24 – do I look and feel probably ninety five
00:08:27 – percent of the way they're the kind of
00:08:29 – remaining five percent of configuration
00:08:33 – for customization that you want to do in
00:08:35 – terms of your company's look at feel you
00:08:37 – can then build on top of this team with
00:08:40 – just plain CSS source s ok so that's
00:08:46 – pretty much the theory
00:08:47 – so to sum sum that up everything in
00:08:51 – button is a component
00:08:52 – these components get laid out by layout
00:08:55 – you add interactions to your components
00:08:58 – by listening for events and finally you
00:09:01 – do all of this in Java so let's put this
00:09:04 – knowledge to you and try to build a full
00:09:07 – second application in around 30 minutes
00:09:10 – with button in this video I'm going to
00:09:12 – stick to a very classical example
00:09:15 – project with to-do app and we're going
00:09:18 – to base this to-do app on spring
00:09:20 – initializer spring initializer if you're
00:09:23 – unfamiliar with it is just a way for us
00:09:26 – to really quickly bootstrap a spring
00:09:29 – project that will include a built-in web
00:09:32 – server and out of configure dependencies
00:09:35 – for a bunch of technologies that we that
00:09:39 – we specify so let's jump into spring
00:09:41 – initializer here we can keep everything
00:09:43 – as it is we're just going to declare the
00:09:46 – dependencies that we want
00:09:47 – look you want web want a thought in what
00:09:52 – jpa for the entity management and
00:09:56 – finally we're going to use an in-memory
00:09:58 – h2 database and then finally uh press
00:10:02 – the generate project button here and
00:10:03 – that's going to download the zip file
00:10:05 – I've imported the palm file into my into
00:10:10 – my intelligence here and you can see
00:10:12 – that we have a very bare-bones maven
00:10:14 – project here so in our Java folder we
00:10:17 – only have the spring boot application
00:10:19 – stub nothing else and we have a palm
00:10:24 – file with the dependencies that we
00:10:27 – defined so we have jpa and we have web
00:10:29 – and so on to the dependencies here i'm
00:10:32 – going to add dev tools which is a string
00:10:37 – boot development to library that enables
00:10:40 – auto reloading of changes color code so
00:10:44 – we can move a little bit faster in our
00:10:46 – in our code here so I'll turn on
00:10:48 – pavement auto import we can close this
00:10:53 – and actually get started building the
00:10:56 – application so what we don't have in
00:10:59 – this application yet is anything but
00:11:01 – specific we've imported dependencies but
00:11:04 – we don't have any body coach
00:11:06 – we can't run this quite yet in order to
00:11:09 – do that we need to do a couple of things
00:11:10 – we're going to first create a new class
00:11:13 – we're going to call this to DUI DUI will
00:11:17 – extend you I from the bond package
00:11:20 – enabled application the UI class is the
00:11:24 – entry point into your application and it
00:11:26 – basically maps one-to-one with the
00:11:29 – browser window in order for this to get
00:11:33 – picked up by the spring boot server and
00:11:37 – get shown we're going to annotate this
00:11:40 – with a spring you I annotation button
00:11:44 – has a spring tide on that's included
00:11:47 – here that will want to configure a
00:11:50 – server that gets deployed based on on
00:11:53 – this UI ok so that's enough
00:11:57 – configuration let's get started with the
00:11:59 – actual coding now I'm gonna break this
00:12:01 – into a lot of small steps just kind of
00:12:03 – keep things easy to follow along
00:12:06 – you don't definitely don't need to kind
00:12:08 – of split this into social message when
00:12:11 – you're building your applications but if
00:12:15 – we're going to take a look at the to the
00:12:18 – application that we have been mentally
00:12:20 – put that into smaller pieces but we kind
00:12:22 – of end up doing is first set up a layout
00:12:28 – then we're gonna add a header and we're
00:12:34 – going to add a form that's the former we
00:12:37 – add new tasks to our to do list and
00:12:40 – we're going to add a to do list that's
00:12:43 – the actual list of to do's that we have
00:12:45 – finally we're going to add a delete
00:12:49 – button for deleting the completed items
00:12:52 – we can then use the ID to go and
00:12:55 – implement this message and get started
00:13:02 – so for the
00:13:04 – layout here we're going to use the most
00:13:08 – simple layout that we have a vertical
00:13:10 – layout so implement new vertical layout
00:13:15 – we're going to save that into a field
00:13:17 – called call it routes that's the route
00:13:21 – play out and then we're gonna set the
00:13:24 – content of our UI so to set the content
00:13:28 – of the browser window to this route
00:13:29 – layout so the browser window can only
00:13:32 – contain one component in our case that's
00:13:35 – going to be a very kaleia that we can
00:13:36 – then use to display several components
00:13:39 – alright so for the header we need to
00:13:43 – display the text to do so let's go ahead
00:13:45 – and add that to our route layup at
00:13:50 – component create a new label and get the
00:13:55 – text to do simple enough now for the
00:14:01 – form it's not quite as simple so if you
00:14:03 – remember in the form we have a text
00:14:05 – field and a button next to it so if you
00:14:07 – recall from the slice of a while back in
00:14:11 – order to have components displayed
00:14:13 – side-by-side we need to have them in a
00:14:15 – horizontal layout so what we need to do
00:14:17 – here is we need to put the text field
00:14:20 – and the button horizontal layout and
00:14:22 – then add that to the root layout so that
00:14:24 – we get to lay out that we're looking for
00:14:26 – so let's do that we're going to create a
00:14:30 – new horizontal layout we're going to
00:14:31 – call that for layout then we're going to
00:14:35 – create a new text field we're going to
00:14:40 – call that task
00:14:41 – we're gonna create a new button with the
00:14:46 – caption ad and we're gonna put that into
00:14:53 – a variable so what we don't need to do
00:14:57 – is just go ahead and add those to the
00:14:59 – four layup that component task ahead
00:15:07 – and then finally I'd for layout to our
00:15:10 – roots layout ok for the to do list i'm
00:15:19 – going to do something a little bit
00:15:20 – different so instead of just
00:15:22 – differentiating a component here i'm
00:15:24 – going to use a take advantage of the
00:15:26 – fact that we're running in a spring
00:15:27 – container and actually autowire end a
00:15:29 – new class so we're going to call this to
00:15:31 – do layout and obviously this is not
00:15:35 – something that exists yet so we need to
00:15:37 – create at first the new layout itself
00:15:40 – will just extend vertical layout so you
00:15:45 – remember the aspect that we had all the
00:15:47 – tools are just listed on top of each
00:15:49 – other
00:15:49 – this is a common pattern when developing
00:15:52 – bond applications that you extend any
00:15:55 – other base classes in the bottom library
00:15:57 – itself and then you give them some more
00:16:00 – specific functionality that's relevant
00:16:02 – to your application in order for this to
00:16:05 – get picked up by spring and eligible for
00:16:08 – audio wiring we need to meditate this
00:16:10 – with a spring component annotation if
00:16:13 – you're coming from a spring back garden
00:16:15 – wondering why this is connected to
00:16:16 – spring component that's just component
00:16:18 – that's just so that it wouldn't conflict
00:16:22 – with the button UI component class so it
00:16:27 – does the same thing just a to avoid an
00:16:29 – Amy cultured alright so let's leave that
00:16:32 – as it is right now and go back to our UI
00:16:35 – class so we have our to do layout the
00:16:39 – only thing we need to do is just add it
00:16:41 – to our would play out that you have like
00:16:48 – that and final thing we need to do is
00:16:52 – add a button for deleting completed like
00:17:02 – that
00:17:03 – alright so if everything works know we
00:17:06 – should be able to go ahead and run this
00:17:08 – application let's go to our browser here
00:17:13 – that out go to localhost 8080 and wait
00:17:19 – for this to start okay so you can see
00:17:24 – that we have kind of all the all the
00:17:26 – pieces that we're looking for we have
00:17:28 – the wedding here we have the form here
00:17:29 – we have the delete button
00:17:32 – obviously we don't have any tasks right
00:17:33 – now so that doesn't work so let's uh
00:17:36 – start off by fixing the layout problems
00:17:40 – make everything look nice and then
00:17:41 – continue on from there to actually build
00:17:46 – a functionality
00:17:47 – let's go back into our code here and the
00:17:50 – first thing we need to do is here in our
00:17:53 – route layout we want to have everything
00:17:54 – centered if you remember it up the
00:17:57 – suspect that we're going against so
00:18:00 – we're just gonna call the default
00:18:02 – component alignment to middle center
00:18:04 – like that
00:18:05 – alright so that's the first thing for
00:18:10 – the label will want to add a style name
00:18:14 – so that we can make it look bigger so we
00:18:18 – can call header dot and filing develop
00:18:22 – the invention that i mentioned earlier
00:18:23 – comes built in with a bunch of
00:18:27 – ready-made style names for common use
00:18:29 – cases like this so we can just give it
00:18:31 – the style name of label h1 and that's
00:18:34 – gonna make it nice and big for us for
00:18:39 – the form layout i want that to be eighty
00:18:43 – percent white so that so that not from
00:18:49 – this or it's not the entire width of our
00:18:52 – UI here and likewise for the to do
00:18:54 – layout we're going to make that the same
00:18:56 – with so to do layout dots with eighty
00:19:02 – percent like that
00:19:03 – go ahead and build that since we have
00:19:06 – those devtools enabled let's go start a
00:19:09 – rebuild here and that should get
00:19:11 – deployed
00:19:14 – alright so we're making progress it
00:19:21 – doesn't look exactly the way that we
00:19:24 – wanted it to
00:19:25 – there's something really fishy going on
00:19:27 – with the form here so so if we go into
00:19:32 – the dev tools here and extend this
00:19:36 – little bit to make it easier to treat
00:19:37 – and take a look at the sexual of what
00:19:41 – what gets generated we can see that we
00:19:43 – have the horizontal layout here and then
00:19:46 – we have two of these divs called the
00:19:48 – slot you can see that those are two
00:19:50 – equally spaced but the end result that
00:19:55 – we're getting is not really what we want
00:19:56 – what we want to do is kind of tell the
00:19:59 – layout that this text field should get
00:20:01 – all the space that this button doesn't
00:20:04 – need so in terms of CSS that would be
00:20:07 – very similar to flexbox involved in what
00:20:10 – we uses expand ratios instead of just
00:20:14 – letting the components to the layout
00:20:18 – like this we can actually use another
00:20:23 – API called add components and expand
00:20:26 – your task and then just add the other
00:20:29 – component the add components and extend
00:20:35 – will instruct the layout to give this
00:20:37 – test text field all the extra space
00:20:40 – that's available in the layout so in our
00:20:42 – case anything that the button doesn't
00:20:44 – need explicitly will be given to the to
00:20:48 – the text field we can also go ahead and
00:20:51 – fix that button so if you remember it's
00:20:54 – supposed to be kind of blue so we'll add
00:20:58 – style name and again we can use some of
00:21:02 – the built-in once and said this to the
00:21:07 – primary button theme so the primary
00:21:09 – button see and just kind of highlights
00:21:11 – that visually makes it more apparent to
00:21:13 – the user that this something that they
00:21:14 – can click on also we didn't have an
00:21:18 – actual text ad there in r-spec rather we
00:21:21 – had an icon so we can send icon here too
00:21:25 – an icon in the bottom I cost library and
00:21:31 – of course remove the caption here let's
00:21:33 – go ahead and build this and go back to
00:21:36 – her browser and that looks much better
00:21:40 – so now we have all the kind of pieces
00:21:43 – that we need in order to actually start
00:21:45 – building in the functionality so the
00:21:50 – first thing we need to do to actually
00:21:51 – make this a working application is to
00:21:54 – create a new class called to do and save
00:22:01 – us some typing I've already made a
00:22:02 – template for to do so to do is just a JP
00:22:05 – entity with a string for the text and a
00:22:09 – boolean for the done nothing nothing
00:22:12 – fancy about that the other thing that
00:22:15 – we're going to do is we're going to
00:22:17 – create a to-do auditory and that's going
00:22:24 – to be an interface extending JP a
00:22:28 – repository of type to do with a key of
00:22:32 – long and if you're unfamiliar with
00:22:37 – spring boot
00:22:38 – this is everything that we need to do
00:22:40 – provide an order for spring boot to
00:22:42 – provide us with a fully functional
00:22:44 – repository that we with basic criminal
00:22:47 – operations that we can then use to the
00:22:49 – query our database also to make it a bit
00:22:54 – easier to work with this demo app i'm
00:22:56 – gonna create a new file here called data
00:22:59 – sequel in the resource directory that
00:23:03 – just populate the database with some
00:23:05 – with some test data so let's save that
00:23:10 – let's build our application and see what
00:23:14 – we have
00:23:15 – alright so obviously nothing changed yet
00:23:19 – because we haven't taken any kind of
00:23:22 – advantage of using those new introduce
00:23:25 – our preposterous that we just created so
00:23:27 – let's go back into the to lay out that
00:23:29 – we left unimplemented earlier here we're
00:23:33 – gonna first of all our wire and the
00:23:36 – repository
00:23:38 – to depository repo and we're also add
00:23:42 – adding a post construct message where we
00:23:48 – can set up this class so because we're
00:23:50 – in a spring container we can't reliably
00:23:52 – use the the constructor of art class to
00:23:55 – do the setup because the to your posture
00:23:59 – wouldn't have been injected by then so
00:24:02 – we're gonna make an init method and
00:24:04 – annotated that with a post construct
00:24:06 – meditation and we can actually do the in
00:24:10 – a initialization in here so when we hit
00:24:14 – this what we want to do is kind of go to
00:24:19 – the database pull up all the to use and
00:24:22 – show them so we're going to create a new
00:24:25 – method set to do and we're going to call
00:24:29 – it with repo to find off use the ID
00:24:37 – again to implement this method and what
00:24:42 – we want to do here is first of all
00:24:43 – remove all components so I want to be
00:24:46 – able to call this method over and over
00:24:48 – again and if I've already called it
00:24:50 – before I want to make sure that i remove
00:24:52 – any previous to do this before I add any
00:24:54 – new once once we've done that we can
00:24:57 – call to do stop for all our for each
00:25:00 – sorry to do and for each to do then what
00:25:05 – we want to do is just call add component
00:25:07 – with you to do layout call this to do to
00:25:16 – item layout and passion to do something
00:25:19 – then what we need to do is go and create
00:25:24 – this class and we're not going to
00:25:29 – implement component here whether we're
00:25:32 – going to extend horizontal layout so
00:25:35 – here if you remember what we want is a
00:25:39 – check box with the to do text next to it
00:25:42 – so again we're going to extend the
00:25:43 – horizontal layout to build a layout that
00:25:45 – we want
00:25:47 – we're going to do here then
00:25:50 – create those components through need a
00:25:53 – checkbox we're going to call that done
00:25:57 – sorry I'm gonna put into a field called
00:26:00 – done and we're going to create a new
00:26:02 – text text field we're going to put their
00:26:07 – field call text and these names now are
00:26:13 – exactly the same ones that were using in
00:26:15 – our JP entity so that we can use that
00:26:18 – data binding trick that I showed you
00:26:19 – earlier before we do that let's just add
00:26:24 – these two components to our layout and
00:26:31 – then go ahead and build this and make
00:26:36 – sure that we are still on track
00:26:38 – ok so what we can see here is that we
00:26:44 – did get three of those layouts which
00:26:46 – means that it was able to go to the
00:26:48 – database pull-up three of those two dues
00:26:51 – and create this what we still haven't
00:26:54 – done is obviously populated these with
00:26:58 – the right data from the to do and also
00:26:59 – they look a little bit weird
00:27:01 – so let's take care let's take care of
00:27:03 – those things right now so first of all
00:27:08 – the text field we want to add a style
00:27:12 – name from the Coliseum again there's a
00:27:17 – text field border less styling there so
00:27:20 – that way we can hide the border but
00:27:22 – still let the user change the text also
00:27:27 – what I want to do is the same thing that
00:27:29 – we did for the form earlier so instead
00:27:31 – of adding both done and text directly
00:27:35 – i'm going to instruct the stark the
00:27:38 – layout tell it should allocate the space
00:27:41 – between these so the done component
00:27:43 – should just get whatever space it needs
00:27:45 – and then the text field can expand and
00:27:47 – take any any excess space that's
00:27:50 – available to it we're going to call it
00:27:54 – that components and extend this text
00:27:58 – finally just to make things look a
00:28:01 – little bit nicer we can start the
00:28:04 – default alignment to the left that way
00:28:11 – their horses very clear centered
00:28:15 – okay so that should take care of the
00:28:18 – look-and-feel part the other part then
00:28:21 – it is of course to actually bind the
00:28:24 – data so for that we're going to create
00:28:26 – one of those binder classes new binder
00:28:31 – that's going to be a type to do dot
00:28:36 – class going to import the one from
00:28:40 – cotton and say that to a variable called
00:28:44 – binder and then call binder dot find
00:28:49 – instant filled with this and what this
00:28:52 – is going to do is look at the fields and
00:28:55 – this layout and match goes to the fields
00:28:59 – it to do object
00:29:01 – finally we're going to call binder that
00:29:03 – set being with the to do that was passed
00:29:06 – in like that
00:29:09 – let's save that build it and see where
00:29:13 – we are all right yeah so we can see we
00:29:24 – have the check boxes here populated
00:29:27 – depending on on the status and we have
00:29:31 – the text here and it's headed well so
00:29:34 – that's all nice course we don't have a
00:29:38 – way of adding new to do yet so let's go
00:29:41 – ahead and implement that to do that
00:29:45 – we're going to go back to our UI class
00:29:46 – here and to the form part what we need
00:29:53 – to do again is to add a click listener
00:29:55 – for hooking up that functionality so
00:29:59 – we're going to call a dot click listener
00:30:01 – and on the click event what we want to
00:30:06 – do is first of all we're going to need
00:30:08 – to create a new to do that
00:30:12 – uses the text from the tech field to
00:30:15 – test get value and what we want to do
00:30:19 – with this to do well obviously we need
00:30:22 – to add that to the list of to do so
00:30:24 – we're gonna just call to the layout and
00:30:30 – we're just gonna call add-on that create
00:30:37 – a method here and what do we want to do
00:30:40 – when we're adding it to do well first of
00:30:42 – all we need to call we pulled out save
00:30:45 – to do and then we need to update the UI
00:30:51 – and what this update to all basically
00:30:55 – it's the traduce to all the tools that
00:30:57 – are available and that's what we did up
00:30:59 – here so we can just go ahead and
00:31:01 – refactor this into a method call update
00:31:05 – like that now in order to make this
00:31:11 – little bit nicer what we can do is once
00:31:15 – we've actually added up to do we can
00:31:17 – call a task dark clear so we're going to
00:31:22 – clear the field so you can immediately
00:31:24 – start typing healthy new in there then
00:31:26 – we can also call + that focus which will
00:31:29 – put the focus back into that field so
00:31:31 – it's easier to just continue working
00:31:33 – obviously would be nice if you was
00:31:36 – focused from the beginning so we can go
00:31:38 – ahead and do that the final little ux
00:31:42 – week that I want to do is I want to add
00:31:44 – a click shortcut for the add button so
00:31:50 – this way we can hook up the enter key to
00:31:54 – actually click the button so that you're
00:31:56 – very busy person with a lot of to do you
00:31:58 – don't have to actually move your mouse
00:31:59 – to add to do so we can just do the code
00:32:06 – to enter like that see that
00:32:15 – go back to your browser okay look world
00:32:21 – and that works can change something
00:32:27 – refresh you can see that we have are all
00:32:31 – our changes we have the new task here as
00:32:35 – well so what really remains here is to
00:32:38 – implement this newly completed so the
00:32:44 – way we're going to do that is we're
00:32:46 – going to this to do repository we're
00:32:48 – gonna add a new method gonna be delete
00:32:52 – why done taken up
00:32:56 – liliana have done and this seems to run
00:33:01 – in a transaction so we're going to add a
00:33:03 – transactional annotation on this with
00:33:07 – that in place the implementation gets
00:33:10 – super simple so we're going to go into a
00:33:12 – button and a click listener to it so you
00:33:16 – can see that we can add to click
00:33:17 – listener also in line when you're
00:33:19 – creating the button and we want to do
00:33:21 – here is just called to do layout delete
00:33:26 – completed then go and implement this and
00:33:37 – call we pulled up
00:33:39 – we are done
00:33:45 – true so deadly it all the ones that have
00:33:47 – to done value to true and then call
00:33:49 – update say that build go back into our
00:33:56 – browser refresh presently completed all
00:34:03 – right so that's it for the coat if you
00:34:06 – want to go in and look at the code maybe
00:34:08 – fork the code and continue on it on your
00:34:11 – own you can find my code on github
00:34:14 – underbody Marcus and spring good to do
00:34:17 – it
00:34:18 – also if you find any any mistakes or
00:34:20 – anything go ahead and just filed issues
00:34:24 – there now i'll try to fix them
00:34:26 – alright so I
00:34:28 – at this point if you're unfamiliar with
00:34:30 – bottom and just look or watch me code
00:34:33 – that you're probably wondering what the
00:34:35 – heck just happened like your writing
00:34:37 – java there's HTML happening in the
00:34:40 – browser and what kind of magic is going
00:34:44 – on here so in order to illustrate that
00:34:46 – let's look at a very simple example we
00:34:48 – have a text field and have a button
00:34:50 – added to layout and for the button here
00:34:55 – we had a quick listener that just gets
00:34:58 – the value from the name text field and
00:35:00 – shows that in a notification so what
00:35:06 – happens when a user comes into about the
00:35:08 – application is that they're gonna
00:35:09 – download an initial HTML bootstrap page
00:35:12 – that just download that CFS the theme
00:35:16 – that you included
00:35:18 – it's gonna download a JavaScript kind of
00:35:22 – rendering engine if you will so we're
00:35:24 – not cross compiling your java code into
00:35:27 – JavaScript that's getting run on the
00:35:29 – browser itself rather we're sending over
00:35:32 – a JavaScript that just knows how to
00:35:34 – construct the Dom for each of the
00:35:36 – component in our library all of this if
00:35:40 – you include the entire set of components
00:35:43 – is around 300 k you can optimize this
00:35:45 – further if needed to speed up the first
00:35:49 – load with that place we get the
00:35:52 – components visible and we can start
00:35:54 – working with this so i can go ahead and
00:35:56 – change by name in here press the button
00:35:58 – and we'll have two sons of the hood here
00:36:00 – is that very small Jason message gets
00:36:04 – sent over Ajax now this is obviously
00:36:07 – just tudo code but what kind of happens
00:36:10 – is that first of all it figures out what
00:36:12 – changed since last time are obviously
00:36:15 – the value of the text will change so we
00:36:17 – need to send that over and there was a
00:36:20 – quick comment on the button and it just
00:36:22 – kind of takes the information puts an
00:36:25 – adjacent object to send it over then on
00:36:29 – the server the framework takes that
00:36:30 – information and it translates that's
00:36:33 – actually running this this listener in
00:36:38 – the jvm so our click listen here
00:36:41 – we'll get run at this is some code
00:36:43 – that's running on the server we can get
00:36:47 – the value from our text field just that
00:36:49 – was passed over from the browser and we
00:36:52 – can show a notification I think that
00:36:55 – notification again will create this
00:36:58 – little Jason message saying that hear
00:37:02 – the updates to the UI since last time
00:37:04 – there's a new notification on component
00:37:07 – and it should have the caption of hi
00:37:09 – marcus so again we're not generating all
00:37:14 – HTML template that we're sending over
00:37:16 – we're not moving to a new page we're
00:37:18 – just sending a small diff of the UI what
00:37:22 – has changed in the last time that we
00:37:25 – called so we're keeping the
00:37:27 – communication super lightweight super
00:37:29 – efficient and that way we cannot keep
00:37:34 – the UI fast and responsive and also
00:37:37 – allow you to not have to deal with with
00:37:40 – the communication there's another really
00:37:43 – nice side benefit to us actually
00:37:45 – centralizing all the communication in
00:37:48 – the application and that is that while
00:37:51 – we're using ajax currently at the
00:37:53 – default mechanism through which were
00:37:55 – communicating you can very easily switch
00:37:58 – that over its using a WebSocket matter
00:38:00 – of fact that's just a single annotation
00:38:02 – on your UI class so adding and at push
00:38:05 – annotation on your class that's going to
00:38:09 – tell a lot in that if possible of setup
00:38:12 – WebSocket connection with this client
00:38:14 – when it comes and if it doesn't support
00:38:16 – WebSockets going to go through a whole
00:38:18 – list of different fallback protocols in
00:38:22 – order to find something that's gonna
00:38:23 – deliver the same kind of user experience
00:38:25 – to the to the end user and that's really
00:38:29 – handy if you want an application where
00:38:31 – your Lord it back and driven you have
00:38:34 – things happening on the server that
00:38:36 – you're monitoring or you have data
00:38:38 – coming in trading data or financial data
00:38:41 – or what kind of data you have maybe
00:38:43 – monitoring at factory or something
00:38:47 – the only thing to keep in mind when
00:38:49 – you're updating your bod code from a
00:38:52 – separate thread is that you need to
00:38:55 – take care of flogging the botton session
00:38:57 – fortunately there's a easy way of doing
00:39:00 – that and that's by calling to access
00:39:03 – method on the UI class so you can pass
00:39:07 – in the runnable to the access method and
00:39:10 – that animal is gonna get run with the
00:39:12 – proper locking in synchronization taken
00:39:15 – care of
00:39:17 – obviously one of the part of things that
00:39:21 – i mentioned earlier that are important
00:39:23 – building modern that's is the ability to
00:39:26 – work on different devices so one has a
00:39:29 – very strong support for building
00:39:31 – responsive layouts that can kind of
00:39:34 – respond to during viewport sizes and
00:39:37 – really get good ux for any kind of
00:39:40 – device we actually have two different
00:39:43 – ways that you can accomplish that are
00:39:45 – three if you also count in CSS media
00:39:49 – queries
00:39:50 – the first one is also see if it's based
00:39:52 – with the syntax that we have here you
00:39:57 – can give it with range for a specific
00:39:59 – part of your application and then
00:40:03 – defined styles based on that so it's
00:40:05 – very much the same ideas for media
00:40:07 – queries just that you're able to target
00:40:09 – specific components also not just device
00:40:13 – width or height for that matter
00:40:16 – there's also a possibility for you to
00:40:20 – add a browser window resize listener to
00:40:23 – hear your page that way you can
00:40:27 – programmatically change out the actual
00:40:29 – components that you're showing to the to
00:40:33 – the client so this is something that
00:40:35 – might be really useful if you have huge
00:40:38 – changes in the UI depending on what kind
00:40:41 – of device you're working with
00:40:42 – so say if you're showing a data table
00:40:45 – for desktop users but only want to show
00:40:48 – a little summary chart for mobile users
00:40:51 – using this approach would allow you to
00:40:54 – only send over the UI code needed for
00:40:57 – that specific device at that time that
00:41:00 – way you're not sending over both
00:41:02 – implementations and only hiding are
00:41:04 – showing them based on
00:41:06 – based on the device used bottom comes
00:41:12 – with built-in support for all major
00:41:13 – browsers including ie11 we have an
00:41:17 – extensive suite of tests that get run
00:41:20 – every night against all the changes
00:41:22 – making sure that all the components
00:41:24 – continue to work in all the different
00:41:26 – browsers and operating system condos
00:41:28 – that we're supporting so that's one less
00:41:31 – thing that you need to worry about in
00:41:33 – your application development the
00:41:37 – architecture that we have where you're
00:41:39 – writing your code in Java on the server
00:41:41 – and we're essentially using the browser
00:41:44 – as a rendering engine allows us to give
00:41:47 – you a very strong security kind of
00:41:51 – foundation for your application
00:41:53 – so for instance say you have a delete
00:41:57 – button that should only be visible to
00:41:58 – admin users but not to anyone else
00:42:01 – involved in if you're if you have a
00:42:03 – conditional statement that hides that
00:42:05 – component for non admin users if
00:42:11 – somebody had say been able to record the
00:42:14 – user interaction admin use that and
00:42:16 – actually tried to trigger the same
00:42:19 – request for themselves but it would
00:42:23 – immediately understand that since the
00:42:26 – button is not the button is not being
00:42:29 – shown right now it can accept any kind
00:42:32 – of interaction they would just deny that
00:42:35 – also there are a whole bunch of other
00:42:38 – security-related good practices that are
00:42:42 – built into the framework itself that
00:42:44 – kind of take care of a lot of the things
00:42:47 – that you should be thinking of when
00:42:50 – building laughs but not necessarily
00:42:51 – always remember to do the other big
00:42:57 – benefit of using Laden is that you get
00:43:00 – to really take all the benefits of
00:43:04 – running on the JVM and in the java
00:43:07 – ecosystem in general so you're able to
00:43:11 – use your favorite IE debugging tools
00:43:14 – testing libraries locking libraries
00:43:17 – profilers
00:43:19 – you name it anything that you can run
00:43:22 – with java will run very well with modern
00:43:26 – and general so you have the added
00:43:28 – benefit of this whole big ecosystem
00:43:30 – that's been dealt over the years that
00:43:34 – you can take advantage in your body and
00:43:36 – application
00:43:39 – another benefit that the Varden
00:43:42 – architecture given says is that we've
00:43:45 – been able to also deliver a super stable
00:43:48 – api for the product so one is currently
00:43:52 – on version 8 and has been around for 16
00:43:55 – years but in fact predates ajax for
00:43:59 – instance by several years but due to our
00:44:03 – API having the strong level of
00:44:05 – obstruction between your code being on a
00:44:07 – fairly high level where you're dealing
00:44:10 – with things like button and grid and
00:44:12 – horizontal and vertical layouts we've
00:44:16 – been able to change how we implement
00:44:18 – those in the browser overtime as
00:44:21 – technology progresses so we've been able
00:44:23 – to keep the browser implementation up to
00:44:28 – speed with the latest and greatest
00:44:29 – technologies while still maintaining the
00:44:32 – same API for the end user or less that
00:44:36 – means that you can easily expect to be
00:44:39 – able to maintain about an application
00:44:41 – for several years without having to
00:44:44 – rewrite it the same way that you would
00:44:46 – most like to have to with many of the
00:44:48 – client-side technologies out there now
00:44:53 – obviously our components that even
00:44:55 – though it's super extensive can't kind
00:44:59 – of contain a solution for every single
00:45:02 – problem out there so we've built in a
00:45:04 – lot of extensibility into the framework
00:45:06 – the easiest way of accomplishing this is
00:45:10 – by going to our added directory
00:45:12 – this is a directory where community
00:45:14 – members from the bottom community have
00:45:17 – created their own add-ons UI components
00:45:20 – or how elko helper libraries and made
00:45:23 – them available in an open source license
00:45:26 – to anyone else so there's a good chance
00:45:29 – that you would find why you looking for
00:45:31 – in the 700
00:45:33 – or so I don't available on this
00:45:35 – directory we also have some commercial
00:45:43 – atoms that we offer in on top of the
00:45:45 – open source framework we for instance
00:45:47 – have a great fully-featured charting
00:45:50 – library that you can use to visualize
00:45:54 – data in your application we have a
00:45:56 – spreadsheet library where you can
00:45:57 – actually edit an open Excel spreadsheets
00:46:02 – in your web application we also recently
00:46:07 – introduced a new dragged and dropped you
00:46:09 – are designer that can help speed up the
00:46:12 – development of your UI by giving you
00:46:15 – kind of the WYSIWYG look into the UI as
00:46:19 – it's getting built so you can drag in
00:46:22 – components and you can change their
00:46:25 – attributes and captions and styles and
00:46:28 – you can see how does reflect the end
00:46:31 – result as you're going along that's
00:46:37 – really nice with the designer to is it
00:46:39 – not only for laying out components but
00:46:42 – it will also show you how the changes
00:46:44 – you make to your CSS will reflect to the
00:46:48 – end result so you can easily tweak
00:46:50 – around see if those parameters and the
00:46:52 – Holocene parameters and get live
00:46:55 – feedback on how those are gonna affect
00:46:58 – your end result so if you got interested
00:47:03 – in getting started with Laden head on
00:47:04 – over to our website and look at any
00:47:07 – other tutorials or other health videos
00:47:10 – that we have out there we have in
00:47:13 – addition to the spring boot starter
00:47:15 – there are tons of archetypes for maven
00:47:18 – or four popular ideas that you can use
00:47:21 – to get the project setup quickly finding
00:47:25 – will run on pretty much any any servant
00:47:28 – container out there and if you're using
00:47:30 – spring or Joey you can take full
00:47:32 – advantage of those through the spring
00:47:35 – Joey plugins that we have finally are
00:47:39 – just going to leave you with the thought
00:47:41 – that were always there to help you so if
00:47:44 – you have any any questions with on
00:47:46 – developing
00:47:46 – and or if you need training or actual
00:47:49 – professional services around building
00:47:51 – enough with button please reach out to
00:47:53 – us we've helped hundreds of companies in
00:47:56 – the past succeed with their bottom
00:47:58 – projects and we'd be very happy to help
00:48:00 – you to thank you and if you have any
00:48:03 – questions post them in the comments
00:48:05 – below or tweet me at market he'll break
00:48:08 – thank you


Video Url:
http://youtu.be/qUBt8k4pQgQ

Comments

comments