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 5
Adding A Dockerfile to the project
Mon, Apr 3rd 2017 6
Getting Your Rancher API Keys
Fri, Mar 31st 2017 4
Defining Your VSTS Build
Thu, Mar 30th 2017 8
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 8
Extending Your Rancher Environments
Tue, Mar 28th 2017 5
Top 10
Who Are You?
Wed, Feb 8th 2017 9
Introducing ThymeLeaf Fragments
Tue, Mar 21st 2017 8
A VSTS Build Agent For Rancher
Wed, Mar 29th 2017 8
Defining Your VSTS Build
Thu, Mar 30th 2017 8
What language should I move to?
Wed, Feb 1st 2017 7
Deciding on a frontend
Fri, Feb 3rd 2017 7
Getting started with IntelliJ
Wed, Feb 22nd 2017 7
Committing The Code To VSTS
Fri, Feb 24th 2017 7
Branching Out On Your Story
Tue, Feb 28th 2017 7
Controlling The Frontend
Wed, Mar 8th 2017 7


Add The People By Location Page
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
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 DataTables. This is a jQuery plugin for displaying table data in interactive tables that adds filtering and pagination as required. Just like Bootstrap I could add the DataTables to the static folders in my resources but instead I’m going to make use of WebJars again and import it via a Maven dependency. I’m also excluding jQuery as I’m already importing newer version of it.

I then add the CSS and JS to my page using the same method as I did for BootStrap

We then need to add our table to the page. This is just a standard html table. It has been styled using the BootStrap table styling with the bootstrap table striping and bootstrap table border classes.

The interesting part of the table is the <tr> tag. You can see that here I am using another th:each tag to do a thymeleaf based loop of add the data that was passed in to the model under the people attribute.

Finally I need to tell DataTables to activate against my new table. This is done with a little extra javascript. I’ve elected to out the javascript in to its own file in the static/js folder called phonebook.js and then add it on to the page via a script tag.

Now when I run my application and view my page I see the following results

It is starting to look good but kinda sparse. In the next section I’ll add some more fake data using a generator.



---------------------
http://www.qtzar.com/add-the-people-by-location-page/
Mar 17, 2017
6 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
5
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
6
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&
4
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
8
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
8
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
5
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
4
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
6
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
6
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