198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Building the Release Definition
Wed, Apr 5th 2017 0
Creating A Dummy Service In Rancher
Tue, Apr 4th 2017 1
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 3
Getting Your Rancher API Keys
Fri, Mar 31st 2017 2
Defining Your VSTS Build
Thu, Mar 30th 2017 1
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 3
Extending Your Rancher Environments
Tue, Mar 28th 2017 3
Top 10
AJAX and ThymeLeaf For Modal Dialogs
Fri, Mar 24th 2017 11
Deploying Your Applications
Mon, Feb 13th 2017 9
Putting It All Together
Wed, Feb 15th 2017 7
Reuse More Code With ThymeLeaf Layouts
Wed, Mar 22nd 2017 7
But what about the data?
Mon, Feb 6th 2017 6
What language should I move to?
Wed, Feb 1st 2017 5
Getting To The Java Roots of XPages – Part 12
Thu, Mar 14th 2013 5
Getting started with IntelliJ
Wed, Feb 22nd 2017 5
Deciding on a frontend
Fri, Feb 3rd 2017 4
Adding The People By Location Controller
Thu, Mar 16th 2017 4


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

For the frontend we are going to be using Thymeleaf. When you add Thymeleaf to your project using the spring-boot-thymeleaf-starter you will get support for both Thymeleaf V2.x and Thymeleaf V3.x. By default the V2.x support is activated by the starter but if you want to use V3.x then you can easily add some properties to your pom.xml file. I want to use V3…

Once you have updated the pom.xml file it it time to create the applications first page. This is done in the resources/templates folder and should be called home.html to match the string returned by the controller we created.

The html file is a standard html file but I have added a xml namespace declaration to the html tag to indicate that I’m using thymeleaf. This helps the IntelliJ html editor to provide extra hints and autocompletion for thymeleaf tags. I have not added any thymeleaf tags just yet but I will in the future. I would also suggest that you update your IDEs code template to add the tag there so that you don’t have to do it ever time in your projects.

If you were to run the application right now it would look fairly boring…

 

In the next part I will spruce it up a little by adding a simple Bootstrap layout..



---------------------
http://www.qtzar.com/starting-the-frontend/
Mar 09, 2017
2 hits



Recent Blog Posts
0
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
1
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
3
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&
2
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
1
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
3
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
3
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
3
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
11
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
2
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