Getting started with HTMX in Spring Boot with Thymeleaf

in this tutorial you're going to learn about the basics of HTM X and how to use it in spring now we're going to do this by talking about it a little bit at a high level and then we're going to dive into some examples and learn about some of the fundamentals of HTM X now I've been writing code for as long as I remember back since the dinosaurs roam the Earth and when I got started and you wanted to build Dynamic web applications you would use something like PHP asp.net or a personal favorite of mine cold fusion now with this approach you make a request to the server you do some type of dynamic capabilities maybe talk to a database you pull in the information and it would generate all the HTML needed and send that back in a single request uh this worked for a while but then we kind of moved on to the world of Web 2.0 and this is where jQuery really started to rise right uh being able to make things like Ajax requests and just get like a certain set of data now if you've ever worked with with spring MVC and one of the template engines like Tim Leaf you know that this is a similar approach right you make a request to an endpoint it renders a template that template could get some information from the database and it would return all of the HTML back to you what if there is a way that inside of a template you could make a request to the server get a certain set of HTML and return that back to the template without ever having to leave that templ template is that something you'd be interested in I bet it would that is the promise of HTM X and that is what you are going to learn about today so before we get started I want to leave you with a couple resources HTM x.org really great place to start uh getting a quick start how you can use it there's a book there's a whole bunch of sponsors um the one thing I like here is if you go into the examples this is really I got started here's some whole bunch of different examples and I tried transla some of these into spring and time leaf and uh some of them were easy some of them were harder but uh we're going to go through a few of those today so check out the examples check out the docks uh so we're going to talk mainly about a few attributes today uh we'll kind of build on this in further uh demos further tutorials but here's a good introduction and then you want to look at things like Ajax triggers so we're going to do an HX get an HX post here are different ways to do that um there's different targets so how do you want to Target uh an element uh there's also different ways of swapping things out do I want to swap the inner HTML the outer HTML here are all the different ways that you can swap out information so that's Resource number one Resource number two is going to be this GitHub repository hello HTM X now there is a main branch with a readme that contains all the final source code for everything that we're going through and there is a start gear Branch so if if you want to clone this repository and use the start here Branch you can fill in the necessary HTM X attributes to make these demos work if you don't care about that you can just download the main and get all of the final source code so with that uh if you do want to follow along please clone this repository open it up in your favorite IDE and I will do that I'm going to open it up in intellig and using the start here Branch we'll go through each of these demos and talk about some of the way days that we can add Dynamic features to our applications with that let's write some code all right so we are in the application here in intellig now remember we are on the start here Branch uh if you want to jump over to the main branch that will contain all of the final source code all the answers and uh that I will go ahead and leave a link in the description below I know we just saw it but just in case you need it later so we're going to go through these demos one by one again I didn't want to like type these out together because this would be a very very long uh intro and I want going to get through more demos to kind of see more of the fundamentals so our first demo um and again uh if you go into the read me uh this kind of explains all the different demos that we're going through so the first demo we have a message controller now we are adding the at controller annotation uh that kind of signifies this as a spring MVC controller we're giving it our request mapping of sl01 then our git mapping so the root of sl01 is just to return the index template so if we go into resources templates 01 we can see there's an index and this is what returns kind of the template that we're going to display so if we were to do this now um we would just see a div here uh that has a banner and it has like a green background and then it has a button and you can click the button to load the banner content now this doesn't work yet um but we'll get into that in just a second there's another mapping uh to pull the banner fragment so the banner fragment is here this is the content that we are actually going to um add to that Banner so we're going to have we have this like green Banner but then we're going to have some text in it so in this place we have a default message in a default message so there'll be like a title on a message and actually this should say default title right so we have default title and the default message and then we have an X to kind of dis like get rid of it if you want to but that's not implemented so let's walk through how this works now again none of this works right now so we can even go ahead and run this application and if we see that now we have this green bar we have a button but if we click it nothing happens so what we want to do is take a look at uh some of the HTM X attributes that allow us to add these Dynamic capabilities so we're going to come down here into our button and I'll go ahead and add our first one which is hxg so this is going to perform a oops we're not in there so this is going to be an HX git and this is to perform a git request to a particular P point in this case we are going to go to sl01 Banner and again that is from here we have a mapping for that so 01 Banner here we're adding a couple attributes to the model the title and the message so spring iio 2024 join us in Barcelona Spain from May 30th to the 31st and we're returning a fragment and that fragment is that Banner so that Banner is here and then we uh go ahead and add the title in the text and this is using time leave so what's important here though is when we make this request we are not returning a full HTML page we are returning just this fragment just this little bit of HTML then what we want to say is okay where are we going to Target that HTML where do we want to place that HTML in this document so I'm going to say HX Target and that Target is going to be Banner so the ID is Banner that's where we are going then there's some different modes of swapping so we're going to say HX Swap and these are all really depending on how like your HTML is set up do I want to you know swap it with the outer HTML the inner HTML before something after something ni there's a whole bunch of different ways that you can Target how you're going to swap out the HTML in this case I'm saying I just want to go ahead and Target the outer HTML okay so with that in place I think that's all we need I'm going to go ahead and rerun our application and we're going to open up this app here again now I'm going to go ahead and click the load Banner content and now you see what happened there we got that text more importantly I'm going to go into the dev tools and I'm going to go to look at the network here let me refresh this click on that and if we look at Banner uh let me kind of make some more room here you can see that all it's returning is the HTML from that banner. HTML that fragment so all we're doing is making a call to an endpoint getting the HTML that we want and swapping it out we didn't have to reload the entire page and so that is demo number one all right so I'm here in the read me and we're going to take a look at demo number two which is loading a website dynamically without leaving the page uh so we have our website loader controller this takes a URL from a form and will dynamically return an i if frame with that URL uh website. HTML fragment Returns the iframe so you type in a URL you click load and it will load here so let's see how this works so if we go into our number two again we have our index which just returns that template so that template is the index so if we look at index uh again I I guess we didn't mention this in the first one but this is a Time Leaf template we are including the HTM x uh script from the website now in a production environment we would probably go about this a little bit of a different way um and I'm including all of tailwind and again I wouldn't do this in production but for demo purposes this works out best so I have a form inside that form I have a div I have a URL so we have some text here you can type in a URL and then we have a button to load and then I have a div called uh with an ID of iframe container this is where the iframe will load by HTM X so from that I also have a website uh HTML fragment and all this fragment is it's called website uh it has an iframe container this is setting up the iframe with a source being the URL that we put in that input box so let's make take a look at how we can go ahead and make this work what we're going to do at the form level so let's come up here to the form at the form level we're going to say I want to make this an HX post and what we're going to post to is slo2 load URL so let's take a look at O2 URL and load URL so this is going to take in a request parameter so our string our URL and then we're going to use the model to go ahead and add an attribute so we're logging the URL that was requested we're adding that to uh the attribute because in the frag ment website. HTML we use that URL and then what we'll do is we'll get that um we'll basically get that back that uh just that HTML that we care about and we have to add it somewhere right so the way that we do that we saw this in the last one we want to set an HX Target so Target is equal to um our iframe container and then what do we how do we want to swap that out so H HX swap is equal to and we're going to use the outer HTML so uh let's go ahead and rerun that and head over to the browser and I'll go to O2 and now we have our URL and I put in a uh default value of my website so if we go ahead and click on load we should see it low down here that is great now let's go ahead and change this to something else spring.io well maybe it doesn't like the cross site let's see spring i.net and there we go cool so that is demo number two pretty exciting um again none of these are like terribly um groundbreaking but what we're doing is we're learning a lot of the basics the fundamentals using these different attributes and again all of this can be found in the HTM X website documentation uh but I thought these were some good examples to kind of learn some of this stuff so with that let's move on to demo number three all right so we're going to take a look at demo number three which is loading more contacts this example demonstrates how to load more contacts using HTM X the initial page load returns uh index HTML like we've been doing uh but it only contains three contacts when you click the load contacts button uh a call is made to the contacts controller to request the next three contacts the response is then inserted into the Dom using HTM X again we're not refreshing the entire page we're just kind of getting some HTML back and inserting that into the Dom so let's look at how this might work so number three go in here and and we're going to go to the contacts controller so the first thing you'll notice is we have this dependency on something called a faker so if you look in the palm. XML uh I've included this dependency I've done a video probably a few uh on this in the past and this is a way to just get fake data so I want to get a bunch of contacts but I don't want to just like type in some gibberish I want some like actual contact info this is a really great library for faking data so I cre get an instance of this through a Constructor injunction I probably set this up somewhere I'm not sure where uh yeah there it is so I I create an instance of Faker there and I get it here so uh let's look at what we have here so we have this list which will return the index so this is the root this is going to say I'm going to add an attribute name here called context and it called is create context method which just creates three uh so that is the first one so if we look at number three and we look at the index we can see uh we have um a title a description there's a load context button and then down here I have a table with some header rows and I have um our contacts rows so this includes name email and ID and so what this is saying is do a replace with a contact row and this is our fragment here so this is what's going to get replaced with um so the first time we load three the next time we call it we want to call this load method which is basically going to create three more and use that uh fragment to um create to create some HTML that we can go ahead and insert into the Dom and again it just has um the contact name email and ID and that contact is coming from a record um that's how we're representing a contact here so we need to make this work we need to when we click the load contacts button somehow call that endpoint and insert that uh here but we don't want to like replace this right because we probably already have three contacts there we basically want to tend to it so let's look at how we can do this so I think in our button here we are going to do a couple of things so uh the first that I want to do is I want to say uh hxg I want to make a call to slash contacts SL load uh what is the target where am I targeting this so Target is equal to uh if we go down here we see uh tbody ID equals rows so I'm going to say rows and then HX swap what are we doing with this um we don't want to do the outer HTML because again that would like replace everything so this is going back to you really want to take a look at the documentation and look at what uh swaps are available for you in this case I want to say before end so before the end of this would basically give me another row and that's what this defines is a row of data so I think this is going to work let's go ahead and rerun our application and go back to the browser and I'll go over to slash conts and now I get this list so I have the list here's three that loaded right away if I click the button nothing happens let's find out what happened wrong uh 500 from contacts SL load so let's figure that out so contacts slash load that's this one o I moved some things around and that is not what we want so let's go ahead and rerun that and reload this and now every time we click it we basically get three random contacts and it just gets appended to the end all right so now we are here on our final demo which is number four add a new contact it says coming soon because I haven't really flushed this out all the way but I think the the barebone stuff is there to get you going but this example demonstrates how to add a new contact using HDMX the initial page loads returns uh that should be wrong that'll be 04 index.html which contains the initial list of users when you click on the add user button a moto window will open up with a form allowing you to add a new user so um yeah let's go ahead head and take a look at this so if we go into uh number four this is going to be the user controller and the user controller is uh using a repository to kind of save information we have a user controller uh the index will return the index again we got to kind of update this so that is going to be sl04 and what that's going to do is call the user repositories find all method to return to all of the users there's a couple uh endpoints in here to add user Modo so this pulls up the modal so that is 04 modal and if we look in 04 you'll see the modal uh this contains like the modal window um and then we have get fake user if we want to get a fake user again let's update all of these Dan to the make the right ones and then we have a Save which will basically save a new new user so this returns o4 new user form which is the form that's going to be contained inside of the modal window so let's take a look at how we can make this work all right so in here we have this users uh here's a list of users we have a button this button is for for adding a new user so this is kind of where we will add some interactivity and then we have our list of users so this is going to iterate over all the users in our syst system so the first thing we need to do is be able to add um the some kind of Click Handler here to like open up that Modo window so what we're going to do is we're going to say hxg and what are we going to get we're going to get the users add user model let's double check that if we go back into here and go into user controller we have an add user model which is basically going to return 04 uh model and that is our our fragment that contains the modal window so we have a fragment called modal and then this is uh displaying a modal window with uh some form stuff inside of there so we have that that should um give us what we need there now we need to Target this where are we adding this to so we're going to say HX Target and the way a modal window works I'm going to Target the body so that is going to add add it to the body and then where in the body do I want it I want to go ahead and Swap this out before end so let's just see if we can get that modal window working uh I'm going to go ahead and go back to the browser and this time I will go to sl04 and this is probably because we have something screwed up there again uh 04 index 04 index that looks pretty good oh users um so we want to go to users sorry and now we have our list of users so we have three users here now what we want to do is click on this add user and hopefully open up a modo window and there it is cool so far so good now we need to do something in this add new user form all right so we get this Moto back and I just want to add something here to kind of load some data so we don't have to fill it out every time I have that fake users endpoint so um I think what I'll do here is on um I think I have a get fake user let me go back to the browser yes so I have ADD fake data let's do that right there on a and I'm going to add uh an hxg to SL userset fake user and then we'll go ahead and say HX Target is going to be my new form so form new user and then um how do I want to swap that out I'm going to just say uh the outer HTML right so let's see what that does uh let's go ahead and rerun that head back to the browser reload this click add new user add some fake data uh nope let's see what's going wrong there hm HTML Target air okay I mean HTM X Target air so frm new user um yeah that would not be right I need the ID not just the name so let's go ahead and reload that and add new user and add fake data and go ahead and save but that save doesn't work yet so the next step would be to really add the uh save um to this and so I don't have that yet but I don't think that's anything very interesting when it comes to uh HTM X because I think what I would do here in this instance is the save would actually just post to that save method and then return and then I would do a page reload there so the interactivity that I'm that I'm basically adding using htx is the idea of popping up this uh dialogue box and adding fake data the save button i' would probably just send a full page refresh and then that way once I save it I'm basically redirecting back to the index anyway and loading all of the contacts that are in my repository so I think we can uh call that demo partial success if you want to go ahead and finish that out um that's fine by me all right I hope you enjoyed that introduction to HDMX in spring with time Leaf now we didn't get into it but there are other templ engines out there and this will work with most of those template engines so if you have a preference for a template engine that's perfectly fine I kind of like Tim Leaf because they call a natural processing template engine meaning even if you don't have something there these are still HTML templates that you can hand off to a designer and have them work on them so this was a lot of fun this was just getting our feet width this is kind of the introduction to HDMX I'd love to hear from you are you using HTM X if so what are you doing with it if you're not using HTM X this is kind of your introduction into it and you like what you see what would you like to see next I'd like to kind of explore this topic a little bit more uh maybe just start building some different components or different parts of an application and maybe will lead up to like building a full-fledged application so with that you know what time it is friends if you found value in this do me a big favor leave me a thumbs up subscribe to the channel and as always happy coding [Music] yeah yeah

Channel: Dan Vega

Views: 5,989

Keywords: dan vega

Id: cjL0n1NApRA

Length: 25min 34sec (1534 seconds)

Published: Tue Jun 04 2024