193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Building the Release Definition
Wed, Apr 5th 2017 6
Creating A Dummy Service In Rancher
Tue, Apr 4th 2017 8
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 9
Getting Your Rancher API Keys
Fri, Mar 31st 2017 5
Defining Your VSTS Build
Thu, Mar 30th 2017 7
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 12
Extending Your Rancher Environments
Tue, Mar 28th 2017 6
Top 10
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 12
AJAX and ThymeLeaf For Modal Dialogs
Fri, Mar 24th 2017 10
Controlling The Frontend
Wed, Mar 8th 2017 9
Add The People By Location Page
Fri, Mar 17th 2017 9
Setting Up Your Rancher Infrastructure
Mon, Mar 27th 2017 9
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 9
Getting started with IntelliJ
Wed, Feb 22nd 2017 8
Creating A Dummy Service In Rancher
Tue, Apr 4th 2017 8
Deploying Your Applications
Mon, Feb 13th 2017 7
Mapping Out Your Ideas
Mon, Feb 27th 2017 7


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
4 hits



Recent Blog Posts
6
Building the Release Definition
Wed, Apr 5th 2017 12:30p   Declan Lynch
The Release definition in VSTS allows you to define the steps needed to be taken to deploy a build of your application to your deployment environments. On the Releases tab of your project you click on the ‘New Definition’ button and then select the ‘Empty’ profile. On the next screen it will automatically fill in your current VSTS project and the VSTS build definition so you can just go ahead and click Create. First things first is rename the autogenerated definition nam
8
Creating A Dummy Service In Rancher
Tue, Apr 4th 2017 12:30p   Declan Lynch
The last thing that we need to do before we can create the deployment scripts is to create a dummy service in Rancher that we can then replace with our deployed application. We need to do this because our deployment scripts need to reference a service id and will fail if the id doesn’t exist yet. In the Rancher interface create a new ‘Stack’ for your applications. Stacks are a way to organize different applications together. Give your stack a name and click on the create butto
9
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 12:30p   Declan Lynch
Before we can deploy anything to Rancher it needs to be in a docker image so I’ll be asking my VSTS scripts to build a docker image that can then be uploaded to a Docker container/image repository before being deployed to the Rancher server. To create the Docker image I need a Dockerfile added to the project and I need to also tell my build script to copy it to a location that the release script can access. First I will create a new folder in my project under src/main called ‘docker&
5
Getting Your Rancher API Keys
Fri, Mar 31st 2017 12:30p   Declan Lynch
Before we can start the process of automatically deploying our application to Rancher we need to setup the API access keys that will allow you to use the Rancher Command Line Interface and API. Load up Rancher and log in as your administrator account and make sure that you are in the correct environment ( you will need to do this process in each environment that you will be deploying to ) and then go to the API menu. There are two kinds of API keys in Rancher. There are Account Keys and Environm
7
Defining Your VSTS Build
Thu, Mar 30th 2017 12:30p   Declan Lynch
The build definition in VSTS is designed to build and compile your code and then take the resulting build and save them to an artifact store. You can create build definitions for Visual Studio applications, XCode applications, Android applications and, of course, Java applications. In VSTS go to the Build & Release section of your project and then make sure you are on the Builds tab. Click on the New Definition button to get started. You should see a list of predefined build templates, th
12
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 12:30p   Declan Lynch
By default Visual Studio Team Services provides you with one hosted pipeline and one private pipeline when you are using the free services. You can add additional pipelines at a cost of $15 a month if you need them however a single pipeline should work ok for a small team. The private pipeline is something that you run on your own infrastructure and Microsoft provides pipeline agents that will run on Windows, OS X and Linux machines. These agents will listen to your VSTS account and accept jobs
6
Extending Your Rancher Environments
Tue, Mar 28th 2017 4:30p   Declan Lynch
In the last post we setup the Rancher server and added our first Rancher Host. One of the nice features of Rancher is that you can setup multiple environments so that you can keep your Development testing system separate from your QA system and separate from the Production system yet keep a single Rancher server orchestrating it all. Click on the ‘Environment’ tab and select the option to ‘Manage Environments’ The first thing I’m going to do is rename the Default e
9
Setting Up Your Rancher Infrastructure
Mon, Mar 27th 2017 9:30p   Declan Lynch
Before we can build and deploy our application we will need to first setup the infrastructure. I’ve decided that I’m going to be using Docker as the container service and Rancher as the orchestration layer. This blog post is just a quick overview of how to create a basic demo Docker/Rancher infrastructure. If you are considering using Docker/Rancher for production that I would highly encourage you to do plenty of additional research beyond this posting before setting anything up. Fo
10
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
7
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




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