199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
Latest 7 Posts
Building the Release Definition
Wed, Apr 5th 2017 2
Creating A Dummy Service In Rancher
Tue, Apr 4th 2017 5
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 8
Getting Your Rancher API Keys
Fri, Mar 31st 2017 4
Defining Your VSTS Build
Thu, Mar 30th 2017 7
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 3
Extending Your Rancher Environments
Tue, Mar 28th 2017 5
Top 10
Who Are You?
Wed, Feb 8th 2017 11
Deciding on a frontend
Fri, Feb 3rd 2017 9
AJAX and ThymeLeaf For Modal Dialogs
Fri, Mar 24th 2017 9
What language should I move to?
Wed, Feb 1st 2017 8
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 8
Getting started with VisualStudio Team Services
Mon, Feb 20th 2017 7
Reuse More Code With ThymeLeaf Layouts
Wed, Mar 22nd 2017 7
Defining Your VSTS Build
Thu, Mar 30th 2017 7
Getting To The Java Roots of XPages – Part 14
Mon, Mar 18th 2013 6
Getting To The Java Roots of XPages – Part 11
Wed, Mar 13th 2013 6

Adding Locations Data To The UI
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
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 add this to the model. The model is pretty much a java map of strings and objects. In the highlighted line below you can see that I’ve used the model.addAttribute method to create an entry called ‘locations’ and the object passed in to that attribute is the findAll() method of the locationRepository.

Now we need to turn our attention to the thymeleaf html page. I’ve added a bunch of other Bootstrap related changes to give the application a basic layout and I’ve decided that the list of locations should appear in the side navigator. I’m building a standard bootstrap styled navigation with some extra Thymeleaf magic.

In my LI tag I have a th:each attribute. This is similar to a repeat control in xpages and is written like a loop in java. the ${locations} is  the locations attribute from the model and the th:each will loop through them using a variable name of ‘location’ for each iteration.

In the A tag I have a th:href that contains a thymeleaf expression that will be converted to a url. While it may look a little complex its not really that difficult. Firstly the expression is surrounded with @{…} this tells the thymeleaf renderer that the url being generated is absolute to the base of the application. This allows you to move the application on an application server to a different subpath and none of the paths in the application will break. Next is the reference to the html page that is going to be displayed next /location.html. After that is a section in round brackets, anything in here will be converted to parameters on the url and the path surrounded with the ${…} is a reference back to the loops variable and in this case we are pulling the id from the object.

So the th:href will be translated to /location.html?locationId=xx where xx depends on the selected location.

What if you don’t want location.html in the url and want to do something like /location/XX in that case your th:href would look like

I’m going to leave it like this for my application so that I can show you a great feature in the Spring MVC request mapping controllers next but for now I’v completed my first task of showing a list of the location on the main home page of the application. I can now return to VSTS and drag that card over to the done column and see what is next up to do.

So looks like I’ll be building the location page so that you can see all the staff in a single location. I’ll drag that over to Active and start work on it next.

Mar 15, 2017
5 hits

Recent Blog Posts
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
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
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&
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
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
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
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
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
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
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