193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
AJAX and ThymeLeaf For Modal Dialogs
Fri, Mar 24th 2017 53
Highlighting The Selected Area With Thymeleaf
Thu, Mar 23rd 2017 57
Reuse More Code With ThymeLeaf Layouts
Wed, Mar 22nd 2017 103
Introducing ThymeLeaf Fragments
Tue, Mar 21st 2017 98
Adding More Fake Data
Mon, Mar 20th 2017 209
Add The People By Location Page
Fri, Mar 17th 2017 60
Adding The People By Location Controller
Thu, Mar 16th 2017 44
Top 10
Adding More Fake Data
Mon, Mar 20th 2017 209
Reuse More Code With ThymeLeaf Layouts
Wed, Mar 22nd 2017 103
Introducing ThymeLeaf Fragments
Tue, Mar 21st 2017 98
Add The People By Location Page
Fri, Mar 17th 2017 60
Highlighting The Selected Area With Thymeleaf
Thu, Mar 23rd 2017 57
AJAX and ThymeLeaf For Modal Dialogs
Fri, Mar 24th 2017 53
Adding The People By Location Controller
Thu, Mar 16th 2017 44
Adding Locations Data To The UI
Wed, Mar 15th 2017 29
Checking Your Demo Data
Tue, Mar 14th 2017 22
Managing your source code and issue tracking
Fri, Feb 10th 2017 10


Adding Bootstrap To The Frontend
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Declan Lynch    

Web applications need more than just html. You also need CSS, JavaScript, Images maybe even Fonts. All of these can be added to the resources/static folder in your SpringBoot application. Here I have added a phonebook.css file that will hold the custom css needed for my application.

And then you can reference them in your html file.

If you look carefully you will notice that there are TWO references to my phonebook.css file. The first is a normal href and it points to a path relative to where my html file is. The second is the th:href which references the css file in a @{}. This is one of the powerful constructs provided by Thymeleaf. As a natural templating engine I could open the home.html file in my browser from the filesystem and it will resolve the correct path to the css file, however when it is rendered by the Thymeleaf processor the original href tag is overwritten by the th:href tag and the @{} rewrites the url to an absolute base path for the application.

I also want to add Bootstrap to my application. I COULD just drop the entire bootstrap archive in to the correct css/js/images/fonts folders and then reference them using links just as I did above for the phonebook.css file. There would be nothing wrong with doing this and it would work perfectly but there is a better way.

Spring Boot applications are setup to support WebJars. A WebJar is a Java ARchive that contains all the css/js/images/font resources that you need for a particular application. You can add it to your project by adding a dependency to the WebJar that you require directly to the projects pom.xml

I have added a dependency to bootstrap v3.3.7 and a dependency to JQuery 3.1.1. I’ve also told the bootstrap dependency to exclude its own dependency on JQuery as it is an older 1.11.x version and adding the exclusion will help reduce the final size of the application.

Now I can add references to these webjars to my html file

Again I’m using the double href method. One pointing to an online version of the webjar and the other pointing to the internal version of the webjar. However this still isn’t great. I have to reference the version numbers in both the pom.xml file and the html files. If I wanted to upgrade to a newer version of Bootstrap or JQuery I would have a lot of files to edit.

There is an easy solution to this. Just add the following dependency to your pom.xml file.

And then remove the version number from the Thymeleaf version of the links in your html file and when it is rendered the locator will automatically dd in the correct version number from the pom.xml file.

While this still don’t update the standard url’s you only really need to use those standard urls if you are developing the html files offline so if you just need to update to a newer version of Bootstrap or JQuery due to a security fix and your testing scrips are done using the running application there would be no need to touch the html files anyway.



---------------------
http://www.qtzar.com/adding-bootstrap-to-the-frontend/
Mar 10, 2017
6 hits



Recent Blog Posts
53
AJAX and ThymeLeaf For Modal Dialogs
Fri, Mar 24th 2017 8:30p   Declan Lynch
The final part of the basic phonebook application is being able to click on a person and see details about them. For this part I’ve decided for now not to open a new page but to open the persons details in a modal dialog box on the current screen just so I can demo how to do ajax calls using Spring and Thymeleaf. First of all I need a PersonController which will populate the modelmap with the selected persons attributes and then return a thymeleaf page. This controller is very simple an
57
Highlighting The Selected Area With Thymeleaf
Thu, Mar 23rd 2017 4:30p   Declan Lynch
Now that I have pulled the side navigation menu out in to its own reusable code fragment I can now make a small adjustment to it to highlight the currently selected option in the navigator. In the Domino/XPage world this would be the script that you write to add a css class to a menu item using the selected property. For the bootstrap based side navigator that I am using in this application you can add a background color to the side navigator by adding a css class of ‘active’ to the
103
Reuse More Code With ThymeLeaf Layouts
Wed, Mar 22nd 2017 12:30p   Declan Lynch
As you saw in the last entry you can use ThymeLeaf Fragments to split out reusable parts of your html pages so that you can just drop them in where needed just like Custom Controls in XPages. Another great XPage concept was using a Custom Control to design the main layout of your page and then drop the content for the page that you are displaying in to a facet on that custom control. With an add-on to ThymeLeaf, which is automatically supplied when using ThymeLeaf with SpringBoot, this is also e
98
Introducing ThymeLeaf Fragments
Tue, Mar 21st 2017 12:30p   Declan Lynch
When I created my people by location page I just copied the entire home page of the application. I now want to make a few changes to the side navigator but if I leave things as they are now I would have to make those changes in all pages that share the side navigator. In the XPages world we had custom controls which could be used to break your page in to separate components and ThymeLeaf has a similar concept called Fragments. Under my templates folder I’m going to create a new folder cal
209
Adding More Fake Data
Mon, Mar 20th 2017 12:30p   Declan Lynch
In the last entry we added our new People By Location page and when we looked at in the the browser is was fairly empty apart from the one test user. Not very easy to do any proper testing with just one entry. You COULD if you wanted add a bunch more test users manually but what if you wanted to test with a few thousand users, that would be a lot of copy/pasting. Thankfully there is an easier way using a Data Faker. First I need to add a new dependency to my pom file for the JavaFaker project o
60
Add The People By Location Page
Fri, Mar 17th 2017 12:30p   Declan Lynch
Now that the controller is created and has been committed to our source control it is time to create the page that is associated with it. I’ve started by copying the home.html page to it’s own file called location.html (to match the string returned by the controller in the last entry). I’ll break this in to components in a later part but for now a quick copy is all I need to get the exact same layout as the home page. For the list of peoples details I’ve decided to use Da
44
Adding The People By Location Controller
Thu, Mar 16th 2017 12:30p   Declan Lynch
Now that we have the main landing page of the application created it is time to build our next page. To start the process of I have gone to VSTS and dragged the ‘See All Staff In A Single Location’ story over to the Active column. I can now return to IntelliJ and start building my next controller. I’m going to add a new controller class to the application called LocationController. Don;t forget to annotate the called with the @Controller annotation so that Spring MVC will pick
29
Adding Locations Data To The UI
Wed, Mar 15th 2017 12:30p   Declan Lynch
Now that we have our demo data and we have confirmed that it exists when we start the application it is time to add it to the Thymeleaf based UI. First we need to add it to the data model that is used when the page is rendered. If we return to our HomeController class we need to make a couple of changes. First we need to get access to the LocationRepository bean. We do this by adding an Autowired reference the bean using the same method that we did when building the demo data. Then we need to ad
22
Checking Your Demo Data
Tue, Mar 14th 2017 6:30p   Declan Lynch
Now that we have the demo data how do we know that it is actually working and getting in to the database. It would be rather pointless trying to add the data to the UI if there is no data to add. If you are using a persistent datasource then you can just use whatever databases tools you normally use to check the tables, but in our case we are using an in-memory database that disappears when the application is exited. Thankfully, however, the H2 in-memory database does have an admin console and S
7
Adding Some Demo Data
Mon, Mar 13th 2017 12:30p   Declan Lynch
Before we can start displaying data in our application we need to add some demo data. You could point the data source to be an external persistent data source that contains test data instead of using an in-memory data source that is lost each time to stop the application or you could load up the in-memory data source with demo data each time the application is started by using either a sql file containing statements to add the data or by writing a script that runs when the application starts th




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition