Congratulations!

[Valid RSS] This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://www.qtzar.com/feed/

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
  2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  4. xmlns:dc="http://purl.org/dc/elements/1.1/"
  5. xmlns:atom="http://www.w3.org/2005/Atom"
  6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  8. >
  9.  
  10. <channel>
  11. <title>Dec&#039;s Dom Blog</title>
  12. <atom:link href="http://www.qtzar.com/feed/" rel="self" type="application/rss+xml" />
  13. <link>http://www.qtzar.com</link>
  14. <description>Domino, Java, DevOps and more...</description>
  15. <lastBuildDate>Fri, 24 Mar 2017 12:30:00 +0000</lastBuildDate>
  16. <language>en-US</language>
  17. <sy:updatePeriod>hourly</sy:updatePeriod>
  18. <sy:updateFrequency>1</sy:updateFrequency>
  19. <site xmlns="com-wordpress:feed-additions:1">47106856</site> <item>
  20. <title>AJAX and ThymeLeaf For Modal Dialogs</title>
  21. <link>http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/</link>
  22. <comments>http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/#respond</comments>
  23. <pubDate>Fri, 24 Mar 2017 12:30:00 +0000</pubDate>
  24. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  25. <category><![CDATA[Domino To Spring]]></category>
  26. <category><![CDATA[Bootstrap]]></category>
  27. <category><![CDATA[Spring MVC]]></category>
  28. <category><![CDATA[ThymeLeaf]]></category>
  29.  
  30. <guid isPermaLink="false">http://www.qtzar.com/?p=1866</guid>
  31. <description><![CDATA[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&#8217;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 [&#8230;]]]></description>
  32. <content:encoded><![CDATA[<p>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&#8217;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.</p>
  33. <p>First of all I need a PersonController which will populate the modelmap with the selected persons attributes and then return a thymeleaf page.</p>
  34. <p><img data-attachment-id="1868" data-permalink="http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/2017-02-25_15-42-00/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?fit=814%2C312" data-orig-size="814,312" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_15-42-00" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?fit=300%2C115" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?fit=640%2C245" class="alignnone size-full wp-image-1868" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?resize=640%2C245" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?w=814 814w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?resize=150%2C57 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-42-00.png?resize=300%2C115 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  35. <p>This controller is very simple and very like all the other controllers it will respond on the /person/{Id} path and populate the modelmap with details of the selected person. I&#8217;m also adding in attributes for the person&#8217;s manager and their co-workers. The most important part however is the returned string at the end. In the other controllers I just returned a simple string that would match up to the thymeleaf html page that I wanted to render. This time, however, I have added a fragment name separated from the page name by a double colon. When this controller is called only a spamm portion of the modal/person.html page will be returned to the browser. Here is the corresponding fragment&#8230;</p>
  36. <p><img data-attachment-id="1869" data-permalink="http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/2017-02-25_15-57-30/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?fit=721%2C250" data-orig-size="721,250" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_15-57-30" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?fit=300%2C104" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?fit=640%2C222" class="alignnone size-full wp-image-1869" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?resize=640%2C222" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?w=721 721w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?resize=150%2C52 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-57-30.png?resize=300%2C104 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  37. <p>To get the modal dialog to display I have added an onClick event to the table row which will run a function called openPersonModal and pass in that rows person id number.</p>
  38. <p><img data-attachment-id="1870" data-permalink="http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/2017-02-25_15-59-11/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?fit=784%2C62" data-orig-size="784,62" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_15-59-11" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?fit=300%2C24" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?fit=640%2C51" class="alignnone size-full wp-image-1870" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?resize=640%2C51" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?w=784 784w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?resize=150%2C12 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_15-59-11.png?resize=300%2C24 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  39. <p>The function called the Spring MVC controller and is returned just the fragment of html code from Thymeleaf. I then pop this in to an empty div called personModalHolder which I had also added to the page and then I call the bootstrap function to show the modal.</p>
  40. <p><img data-attachment-id="1871" data-permalink="http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/2017-02-25_16-01-16/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?fit=367%2C164" data-orig-size="367,164" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_16-01-16" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?fit=300%2C134" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?fit=367%2C164" class="alignnone size-full wp-image-1871" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?resize=367%2C164" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?w=367 367w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?resize=150%2C67 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-25_16-01-16.png?resize=300%2C134 300w" sizes="(max-width: 367px) 100vw, 367px" data-recalc-dims="1" /></p>
  41. <p>At this stage we have a very simple, read only, phonebook using our auto generated test data. For the next few posts I&#8217;m going to take a break from writing code and I&#8217;m going to show how to create a pipeline in VSTS and Rancher and Docker to auto build and deploy our application. After that we will come back to the app to add some additional features to allow for editing and adding new people.</p>
  42. ]]></content:encoded>
  43. <wfw:commentRss>http://www.qtzar.com/ajax-and-thymeleaf-for-modal-dialogs/feed/</wfw:commentRss>
  44. <slash:comments>0</slash:comments>
  45. <post-id xmlns="com-wordpress:feed-additions:1">1866</post-id> </item>
  46. <item>
  47. <title>Highlighting The Selected Area With Thymeleaf</title>
  48. <link>http://www.qtzar.com/highlighting-the-selected-area-with-thymeleaf/</link>
  49. <comments>http://www.qtzar.com/highlighting-the-selected-area-with-thymeleaf/#respond</comments>
  50. <pubDate>Thu, 23 Mar 2017 12:30:00 +0000</pubDate>
  51. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  52. <category><![CDATA[Domino To Spring]]></category>
  53. <category><![CDATA[ThymeLeaf]]></category>
  54.  
  55. <guid isPermaLink="false">http://www.qtzar.com/?p=1861</guid>
  56. <description><![CDATA[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 [&#8230;]]]></description>
  57. <content:encoded><![CDATA[<p>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.</p>
  58. <p>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 &#8216;active&#8217; to the list item tag. Currently our side navigator fragment looks as follows.</p>
  59. <p><img data-attachment-id="1862" data-permalink="http://www.qtzar.com/highlighting-the-selected-area-with-thymeleaf/2017-02-25_13-29-13/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?fit=567%2C232" data-orig-size="567,232" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_13-29-13" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?fit=300%2C123" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?fit=567%2C232" class="alignnone size-full wp-image-1862" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?resize=567%2C232" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?w=567 567w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?resize=150%2C61 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-29-13.png?resize=300%2C123 300w" sizes="(max-width: 567px) 100vw, 567px" data-recalc-dims="1" /></p>
  60. <p>The list item tags for both the home link and the location links do not have any class associated with them at this stage.</p>
  61. <p>Using Thymeleaf you can use a conditional expression to set the class. A conditional expression if pretty much like a simple If/Then/Else statement like <strong>th:class=&#8221;${row.even}? &#8216;even&#8217; : &#8216;odd'&#8221;</strong>, You can also use nest conditional expressions using parenthesis like <strong>th:class=&#8221;${row.even}? (${row.first}? &#8216;first&#8217; : &#8216;even&#8217;) : &#8216;odd'&#8221;</strong>. You can also leave out the else part if you want which is what I have done in my code.</p>
  62. <p><img data-attachment-id="1863" data-permalink="http://www.qtzar.com/highlighting-the-selected-area-with-thymeleaf/2017-02-25_13-47-15/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?fit=798%2C237" data-orig-size="798,237" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_13-47-15" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?fit=300%2C89" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?fit=640%2C190" class="alignnone size-full wp-image-1863" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?resize=640%2C190" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?w=798 798w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?resize=150%2C45 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-47-15.png?resize=300%2C89 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  63. <p>To get this working correctly I had to add a new attribute to the model in both my home controller and my location controller called selectedLocation. It is manually set to &#8216;Home&#8217; in the home controller and it is programmatically set to the location name in the location controller.</p>
  64. <p><img data-attachment-id="1864" data-permalink="http://www.qtzar.com/highlighting-the-selected-area-with-thymeleaf/2017-02-25_13-56-54/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?fit=620%2C279" data-orig-size="620,279" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-25_13-56-54" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?fit=300%2C135" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?fit=620%2C279" class="alignnone size-full wp-image-1864" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?resize=620%2C279" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?w=620 620w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?resize=150%2C68 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-25_13-56-54.png?resize=300%2C135 300w" sizes="(max-width: 620px) 100vw, 620px" data-recalc-dims="1" /></p>
  65. <p>Now my phonebook correctly shows the currently selected area as highlighted in the side navigator.</p>
  66. ]]></content:encoded>
  67. <wfw:commentRss>http://www.qtzar.com/highlighting-the-selected-area-with-thymeleaf/feed/</wfw:commentRss>
  68. <slash:comments>0</slash:comments>
  69. <post-id xmlns="com-wordpress:feed-additions:1">1861</post-id> </item>
  70. <item>
  71. <title>Reuse More Code With ThymeLeaf Layouts</title>
  72. <link>http://www.qtzar.com/reuse-more-code-with-thymeleaf-layouts/</link>
  73. <comments>http://www.qtzar.com/reuse-more-code-with-thymeleaf-layouts/#respond</comments>
  74. <pubDate>Wed, 22 Mar 2017 12:30:00 +0000</pubDate>
  75. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  76. <category><![CDATA[Domino To Spring]]></category>
  77. <category><![CDATA[ThymeLeaf]]></category>
  78.  
  79. <guid isPermaLink="false">http://www.qtzar.com/?p=1850</guid>
  80. <description><![CDATA[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 [&#8230;]]]></description>
  81. <content:encoded><![CDATA[<p>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 easily achievable.</p>
  82. <p>I&#8217;ve created a new folder in my resources section called &#8216;layouts&#8217; and I&#8217;ve pulled over a copy of my homepage that I will convert in to a layout.  I forst need to add the xml namespace in to the HTML tag and then I can add a div with a tag of layout:fragment to the sections that will be replaced with the content that I&#8217;m supplying.</p>
  83. <p><img data-attachment-id="1851" data-permalink="http://www.qtzar.com/reuse-more-code-with-thymeleaf-layouts/2017-02-18_18-21-10/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?fit=802%2C377" data-orig-size="802,377" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-18_18-21-10" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?fit=300%2C141" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?fit=640%2C301" class="alignnone size-full wp-image-1851" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?resize=640%2C301" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?w=802 802w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?resize=150%2C71 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-21-10.png?resize=300%2C141 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  84. <p>You will also see that I&#8217;m still including some ThymeLeaf fragments as defined in the last blog entry, and I have changed how the head tag is setup by adding in a th:block ( because div is invalid in the head tag )  and for the title tag I now have a new layout:title-pattern tag that allows me to programmatically define the title using a combination of the layouts title and then contents title.</p>
  85. <p>Over on my home page I can now add the same namespace and also specify which layout I will be using by adding in a layout:decorate tag.</p>
  86. <p><img data-attachment-id="1852" data-permalink="http://www.qtzar.com/reuse-more-code-with-thymeleaf-layouts/2017-02-18_18-45-12/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?fit=561%2C234" data-orig-size="561,234" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-18_18-45-12" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?fit=300%2C125" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?fit=561%2C234" class="alignnone size-full wp-image-1852" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?resize=561%2C234" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?w=561 561w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?resize=150%2C63 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-45-12.png?resize=300%2C125 300w" sizes="(max-width: 561px) 100vw, 561px" data-recalc-dims="1" /></p>
  87. <p>The system will now merge the &lt;head&gt; elements from both the layout and the content pages  and then replace the layout fragments in the layout page with the layout fragments in the content page while ignoring anything else in the content page that is not part of the fragments.</p>
  88. <p>Over on my location page you can see where I am adding a ThymeLeaf fragment in the header for the DataTables CSS and where I have specified the custom-footer fragment so that I can also add in the DataTables scripts.</p>
  89. <p><img data-attachment-id="1853" data-permalink="http://www.qtzar.com/reuse-more-code-with-thymeleaf-layouts/2017-02-18_18-52-30/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?fit=665%2C626" data-orig-size="665,626" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-18_18-52-30" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?fit=300%2C282" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?fit=640%2C602" class="alignnone size-full wp-image-1853" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?resize=640%2C602" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?w=665 665w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?resize=150%2C141 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-18_18-52-30.png?resize=300%2C282 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  90. <p>As you can see a combination of ThymeLeaf Fragments and ThymeLeaf Layouts is very powerful and this is just scratching the surface of what ThymeLeaf can do.</p>
  91. ]]></content:encoded>
  92. <wfw:commentRss>http://www.qtzar.com/reuse-more-code-with-thymeleaf-layouts/feed/</wfw:commentRss>
  93. <slash:comments>0</slash:comments>
  94. <post-id xmlns="com-wordpress:feed-additions:1">1850</post-id> </item>
  95. <item>
  96. <title>Introducing ThymeLeaf Fragments</title>
  97. <link>http://www.qtzar.com/introducing-thymeleaf-fragments/</link>
  98. <comments>http://www.qtzar.com/introducing-thymeleaf-fragments/#respond</comments>
  99. <pubDate>Tue, 21 Mar 2017 12:30:00 +0000</pubDate>
  100. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  101. <category><![CDATA[Domino To Spring]]></category>
  102. <category><![CDATA[ThymeLeaf]]></category>
  103.  
  104. <guid isPermaLink="false">http://www.qtzar.com/?p=1839</guid>
  105. <description><![CDATA[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 [&#8230;]]]></description>
  106. <content:encoded><![CDATA[<p>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.</p>
  107. <p>Under my templates folder I&#8217;m going to create a new folder called fragments and in there I&#8217;m going to add a new html page called layout.html. I&#8217;m then going to move the html that makes up the side navigator to this html file and add in an extra ThymeLeaf tag.</p>
  108. <p><img data-attachment-id="1840" data-permalink="http://www.qtzar.com/introducing-thymeleaf-fragments/2017-02-17_16-26-43/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?fit=603%2C240" data-orig-size="603,240" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_16-26-43" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?fit=300%2C119" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?fit=603%2C240" class="alignnone size-full wp-image-1840" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?resize=603%2C240" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?w=603 603w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?resize=150%2C60 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-26-43.png?resize=300%2C119 300w" sizes="(max-width: 603px) 100vw, 603px" data-recalc-dims="1" /></p>
  109. <p>This tag identifies the div and everything between it and the closing div as the fragment called &#8216;sidenav&#8217;.</p>
  110. <p>Now back on both the home and location pages I can replace that entire block of code with one simple line.</p>
  111. <p><img data-attachment-id="1841" data-permalink="http://www.qtzar.com/introducing-thymeleaf-fragments/2017-02-17_16-29-47/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?fit=416%2C36" data-orig-size="416,36" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_16-29-47" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?fit=300%2C26" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?fit=416%2C36" class="alignnone size-full wp-image-1841" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?resize=416%2C36" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?w=416 416w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?resize=150%2C13 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-29-47.png?resize=300%2C26 300w" sizes="(max-width: 416px) 100vw, 416px" data-recalc-dims="1" /></p>
  112. <p>This tag tells the ThymeLeaf processor to replace this entire div ( and anything in the div ) with the fragment called &#8216;sidenav&#8217; from the file called layout in the fragments folder.</p>
  113. <p>If you restart the application now you won&#8217;t see any changes on the page but the side navigation bar is no longer duplicated across multiple pages so if you need to change it then you just have to update one file.</p>
  114. <p>You can add as many fragments as you want to a single fragment file or you could split them up in to different files. You could even use fragments to set all your head tags or load your scripts. I&#8217;ve setup a fragment for my global scripts and I have added an additional ThymeLeaf tag of th:remove=&#8221;tag&#8221;.</p>
  115. <p><img data-attachment-id="1842" data-permalink="http://www.qtzar.com/introducing-thymeleaf-fragments/2017-02-17_16-38-18/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?fit=655%2C119" data-orig-size="655,119" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_16-38-18" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?fit=300%2C55" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?fit=640%2C116" class="alignnone size-full wp-image-1842" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?resize=640%2C116" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?w=655 655w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?resize=150%2C27 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-38-18.png?resize=300%2C55 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  116. <p>What this does is it will remove the &lt;div&gt;&lt;/div&gt; tags and only render the contents which, in this case, are the two script tags.</p>
  117. <p>If you are using a fragment to setup all your css then you may run in to the issue of how to set a page title. To do this you can add parameters to a fragment. Here I&#8217;ve added a pageTitle parameter and I&#8217;m using it in the title tag.</p>
  118. <p><img data-attachment-id="1843" data-permalink="http://www.qtzar.com/introducing-thymeleaf-fragments/2017-02-17_16-43-47/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?fit=586%2C141" data-orig-size="586,141" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_16-43-47" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?fit=300%2C72" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?fit=586%2C141" class="alignnone size-full wp-image-1843" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?resize=586%2C141" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?w=586 586w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?resize=150%2C36 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-43-47.png?resize=300%2C72 300w" sizes="(max-width: 586px) 100vw, 586px" data-recalc-dims="1" /></p>
  119. <p>When I call this fragment I can then pass in a value to the parameter.</p>
  120. <p><img data-attachment-id="1844" data-permalink="http://www.qtzar.com/introducing-thymeleaf-fragments/2017-02-17_16-46-59/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?fit=723%2C34" data-orig-size="723,34" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_16-46-59" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?fit=300%2C14" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?fit=640%2C30" class="alignnone size-full wp-image-1844" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?resize=640%2C30" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?w=723 723w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?resize=150%2C7 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-46-59.png?resize=300%2C14 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  121. <p>or you could even calculate a title using a ThymeLeaf Expression</p>
  122. <p><img data-attachment-id="1845" data-permalink="http://www.qtzar.com/introducing-thymeleaf-fragments/2017-02-17_16-49-47/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?fit=947%2C38" data-orig-size="947,38" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_16-49-47" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?fit=300%2C12" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?fit=640%2C26" class="alignnone size-full wp-image-1845" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?resize=640%2C26" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?w=947 947w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?resize=150%2C6 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_16-49-47.png?resize=300%2C12 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  123. <p>So now you can break your application up in to smaller chunks and make reusable code sections for the frontend.</p>
  124. ]]></content:encoded>
  125. <wfw:commentRss>http://www.qtzar.com/introducing-thymeleaf-fragments/feed/</wfw:commentRss>
  126. <slash:comments>0</slash:comments>
  127. <post-id xmlns="com-wordpress:feed-additions:1">1839</post-id> </item>
  128. <item>
  129. <title>Adding More Fake Data</title>
  130. <link>http://www.qtzar.com/adding-more-fake-data/</link>
  131. <comments>http://www.qtzar.com/adding-more-fake-data/#respond</comments>
  132. <pubDate>Mon, 20 Mar 2017 12:30:00 +0000</pubDate>
  133. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  134. <category><![CDATA[Domino To Spring]]></category>
  135. <category><![CDATA[JavaFaker]]></category>
  136.  
  137. <guid isPermaLink="false">http://www.qtzar.com/?p=1834</guid>
  138. <description><![CDATA[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 [&#8230;]]]></description>
  139. <content:encoded><![CDATA[<p>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.</p>
  140. <p><img data-attachment-id="1831" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-38-38/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?fit=1029%2C320" data-orig-size="1029,320" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-38-38" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?fit=300%2C93" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?fit=640%2C199" class="alignnone size-full wp-image-1831" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=640%2C199" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?w=1029 1029w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=150%2C47 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=300%2C93 300w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=1024%2C318 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  141. <p>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.</p>
  142. <p>Thankfully there is an easier way using a Data Faker.</p>
  143. <p>First I need to add a new dependency to my pom file for the <a href="http://dius.github.io/java-faker/">JavaFaker</a> project on GitHub</p>
  144. <p><img data-attachment-id="1835" data-permalink="http://www.qtzar.com/adding-more-fake-data/2017-02-17_14-36-03/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?fit=408%2C105" data-orig-size="408,105" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_14-36-03" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?fit=300%2C77" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?fit=408%2C105" class="alignnone size-full wp-image-1835" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?resize=408%2C105" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?w=408 408w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?resize=150%2C39 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-36-03.png?resize=300%2C77 300w" sizes="(max-width: 408px) 100vw, 408px" data-recalc-dims="1" /></p>
  145. <p>Now in my DemoData class I just need to instantiate the Faker object and then I can call the different accessors to pull out different pieces of random data.</p>
  146. <p><img data-attachment-id="1836" data-permalink="http://www.qtzar.com/adding-more-fake-data/2017-02-17_14-39-04/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?fit=636%2C290" data-orig-size="636,290" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_14-39-04" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?fit=300%2C137" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?fit=636%2C290" class="alignnone size-full wp-image-1836" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?resize=636%2C290" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?w=636 636w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?resize=150%2C68 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-39-04.png?resize=300%2C137 300w" sizes="(max-width: 636px) 100vw, 636px" data-recalc-dims="1" /></p>
  147. <p>As I have three locations setup in my demo data I have also decided to randomly select one of the locations to put my fake data in to. I then encapsulate it in a loop and I can easily generate as much demo data as I need to properly test the application.</p>
  148. <p><img data-attachment-id="1837" data-permalink="http://www.qtzar.com/adding-more-fake-data/2017-02-17_14-58-03/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?fit=769%2C332" data-orig-size="769,332" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-17_14-58-03" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?fit=300%2C130" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?fit=640%2C276" class="alignnone size-full wp-image-1837" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?resize=640%2C276" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?w=769 769w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?resize=150%2C65 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-17_14-58-03.png?resize=300%2C130 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  149. <p>&nbsp;</p>
  150. <p>&nbsp;</p>
  151. <p>&nbsp;</p>
  152. ]]></content:encoded>
  153. <wfw:commentRss>http://www.qtzar.com/adding-more-fake-data/feed/</wfw:commentRss>
  154. <slash:comments>0</slash:comments>
  155. <post-id xmlns="com-wordpress:feed-additions:1">1834</post-id> </item>
  156. <item>
  157. <title>Add The People By Location Page</title>
  158. <link>http://www.qtzar.com/add-the-people-by-location-page/</link>
  159. <comments>http://www.qtzar.com/add-the-people-by-location-page/#respond</comments>
  160. <pubDate>Fri, 17 Mar 2017 12:30:00 +0000</pubDate>
  161. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  162. <category><![CDATA[Domino To Spring]]></category>
  163. <category><![CDATA[DataTables]]></category>
  164. <category><![CDATA[ThymeLeaf]]></category>
  165.  
  166. <guid isPermaLink="false">http://www.qtzar.com/?p=1819</guid>
  167. <description><![CDATA[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&#8217;ve started by copying the home.html page to it&#8217;s own file called location.html (to match the string returned by the controller in the last entry). I&#8217;ll break this in [&#8230;]]]></description>
  168. <content:encoded><![CDATA[<p>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&#8217;ve started by copying the home.html page to it&#8217;s own file called location.html (to match the string returned by the controller in the last entry). I&#8217;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.</p>
  169. <p>For the list of peoples details I&#8217;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&#8217;m going to make use of WebJars again and import it via a Maven dependency. I&#8217;m also excluding jQuery as I&#8217;m already importing newer version of it.</p>
  170. <p><img data-attachment-id="1823" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_09-59-48/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?fit=445%2C181" data-orig-size="445,181" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_09-59-48" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?fit=300%2C122" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?fit=445%2C181" class="alignnone size-full wp-image-1823" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?resize=445%2C181" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?w=445 445w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?resize=150%2C61 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_09-59-48.png?resize=300%2C122 300w" sizes="(max-width: 445px) 100vw, 445px" data-recalc-dims="1" /></p>
  171. <p>I then add the CSS and JS to my page using the same method as I did for BootStrap</p>
  172. <p><img data-attachment-id="1826" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-26-51/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?fit=749%2C83" data-orig-size="749,83" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-26-51" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?fit=300%2C33" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?fit=640%2C71" class="alignnone size-full wp-image-1826" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?resize=640%2C71" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?w=749 749w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?resize=150%2C17 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-26-51.png?resize=300%2C33 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  173. <p><img data-attachment-id="1825" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-06-14/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?fit=703%2C67" data-orig-size="703,67" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-06-14" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?fit=300%2C29" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?fit=640%2C61" class="alignnone size-full wp-image-1825" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?resize=640%2C61" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?w=703 703w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?resize=150%2C14 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-06-14.png?resize=300%2C29 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  174. <p>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.</p>
  175. <p>The interesting part of the table is the &lt;tr&gt; 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.</p>
  176. <p><img data-attachment-id="1827" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-29-11/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?fit=692%2C399" data-orig-size="692,399" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-29-11" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?fit=300%2C173" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?fit=640%2C369" class="alignnone size-full wp-image-1827" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?resize=640%2C369" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?w=692 692w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?resize=150%2C86 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-29-11.png?resize=300%2C173 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  177. <p>Finally I need to tell DataTables to activate against my new table. This is done with a little extra javascript. I&#8217;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.</p>
  178. <p><img data-attachment-id="1828" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-34-00/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?fit=387%2C90" data-orig-size="387,90" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-34-00" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?fit=300%2C70" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?fit=387%2C90" class="alignnone size-full wp-image-1828" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?resize=387%2C90" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?w=387 387w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?resize=150%2C35 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-00.png?resize=300%2C70 300w" sizes="(max-width: 387px) 100vw, 387px" data-recalc-dims="1" /></p>
  179. <p><img data-attachment-id="1830" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-34-44-2/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?fit=380%2C40" data-orig-size="380,40" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-34-44" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?fit=300%2C32" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?fit=380%2C40" class="alignnone size-full wp-image-1830" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?resize=380%2C40" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?w=380 380w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?resize=150%2C16 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-34-44-1.png?resize=300%2C32 300w" sizes="(max-width: 380px) 100vw, 380px" data-recalc-dims="1" /></p>
  180. <p>Now when I run my application and view my page I see the following results</p>
  181. <p><img data-attachment-id="1831" data-permalink="http://www.qtzar.com/add-the-people-by-location-page/2017-02-14_10-38-38/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?fit=1029%2C320" data-orig-size="1029,320" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-14_10-38-38" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?fit=300%2C93" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?fit=640%2C199" class="alignnone size-full wp-image-1831" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=640%2C199" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?w=1029 1029w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=150%2C47 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=300%2C93 300w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-14_10-38-38.png?resize=1024%2C318 1024w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  182. <p>It is starting to look good but kinda sparse. In the next section I&#8217;ll add some more fake data using a generator.</p>
  183. ]]></content:encoded>
  184. <wfw:commentRss>http://www.qtzar.com/add-the-people-by-location-page/feed/</wfw:commentRss>
  185. <slash:comments>0</slash:comments>
  186. <post-id xmlns="com-wordpress:feed-additions:1">1819</post-id> </item>
  187. <item>
  188. <title>Adding The People By Location Controller</title>
  189. <link>http://www.qtzar.com/adding-the-people-by-location-controller/</link>
  190. <comments>http://www.qtzar.com/adding-the-people-by-location-controller/#respond</comments>
  191. <pubDate>Thu, 16 Mar 2017 12:30:00 +0000</pubDate>
  192. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  193. <category><![CDATA[Domino To Spring]]></category>
  194. <category><![CDATA[None]]></category>
  195. <category><![CDATA[Spring MVC]]></category>
  196. <category><![CDATA[VSTS]]></category>
  197.  
  198. <guid isPermaLink="false">http://www.qtzar.com/?p=1809</guid>
  199. <description><![CDATA[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 &#8216;See All Staff In A Single Location&#8217; story over to the Active column. I can now return to IntelliJ and start building [&#8230;]]]></description>
  200. <content:encoded><![CDATA[<p>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 &#8216;See All Staff In A Single Location&#8217; story over to the Active column.</p>
  201. <p><img data-attachment-id="1810" data-permalink="http://www.qtzar.com/adding-the-people-by-location-controller/2017-02-12_13-53-23/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?fit=805%2C176" data-orig-size="805,176" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-12_13-53-23" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?fit=300%2C66" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?fit=640%2C140" class="alignnone size-full wp-image-1810" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?resize=640%2C140" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?w=805 805w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?resize=150%2C33 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_13-53-23.png?resize=300%2C66 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  202. <p>I can now return to IntelliJ and start building my next controller. I&#8217;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 it up correctly.</p>
  203. <p><img data-attachment-id="1811" data-permalink="http://www.qtzar.com/adding-the-people-by-location-controller/2017-02-12_14-00-30/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?fit=758%2C307" data-orig-size="758,307" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-12_14-00-30" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?fit=300%2C122" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?fit=640%2C259" class="alignnone size-full wp-image-1811" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?resize=640%2C259" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?w=758 758w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?resize=150%2C61 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-12_14-00-30.png?resize=300%2C122 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  204. <p>The @RequestMapping annotation is set as /location/{id}. This part in the curly brackets is a dynamic mapping so that the request mapping will match a url like /location/PA or /location/NY etc. You can, in theory, match multiple parts of the incoming request so that something like /location/{state}/{city} would match a url of /location/pa/pittsburgh.</p>
  205. <p>To extract the value that is being passed in on the dynamic RequestMapping you use the @PathVariable annotation in the methods signature.In this case I&#8217;m extracting &#8216;id&#8217; from /location/{id}. if I was writing a signature to match the state/city example above I would write something like location(@PathVariable(&#8220;state&#8221;) String state, @PathVariable(&#8220;city&#8221;) String city, ModelMap model).</p>
  206. <p>You will also notice I have autowired in the two repositories in my application and I&#8217;m adding all the locations in to the model just as I did with the main landing page (because the list of locations is displayed on all pages) and I have added a call to my personRepository that will return all the people in the specified location.</p>
  207. <p>Next I&#8217;ll add this info to a html template called location.html</p>
  208. ]]></content:encoded>
  209. <wfw:commentRss>http://www.qtzar.com/adding-the-people-by-location-controller/feed/</wfw:commentRss>
  210. <slash:comments>0</slash:comments>
  211. <post-id xmlns="com-wordpress:feed-additions:1">1809</post-id> </item>
  212. <item>
  213. <title>Adding Locations Data To The UI</title>
  214. <link>http://www.qtzar.com/adding-locations-data-to-the-ui/</link>
  215. <comments>http://www.qtzar.com/adding-locations-data-to-the-ui/#respond</comments>
  216. <pubDate>Wed, 15 Mar 2017 12:30:00 +0000</pubDate>
  217. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  218. <category><![CDATA[Domino To Spring]]></category>
  219. <category><![CDATA[None]]></category>
  220. <category><![CDATA[Model]]></category>
  221. <category><![CDATA[Spring Data]]></category>
  222. <category><![CDATA[Spring MVC]]></category>
  223. <category><![CDATA[ThymeLeaf]]></category>
  224. <category><![CDATA[VSTS]]></category>
  225.  
  226. <guid isPermaLink="false">http://www.qtzar.com/?p=1799</guid>
  227. <description><![CDATA[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 [&#8230;]]]></description>
  228. <content:encoded><![CDATA[<p>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.</p>
  229. <p>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.</p>
  230. <p>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&#8217;ve used the model.addAttribute method to create an entry called &#8216;locations&#8217; and the object passed in to that attribute is the findAll() method of the locationRepository.</p>
  231. <p><img data-attachment-id="1800" data-permalink="http://www.qtzar.com/adding-locations-data-to-the-ui/2017-02-10_14-32-20/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?fit=651%2C273" data-orig-size="651,273" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_14-32-20" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?fit=300%2C126" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?fit=640%2C268" class="alignnone size-full wp-image-1800" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?resize=640%2C268" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?w=651 651w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?resize=150%2C63 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-32-20.png?resize=300%2C126 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  232. <p>Now we need to turn our attention to the thymeleaf html page. I&#8217;ve added a bunch of other Bootstrap related changes to give the application a basic layout and I&#8217;ve decided that the list of locations should appear in the side navigator. I&#8217;m building a standard bootstrap styled navigation with some extra Thymeleaf magic.</p>
  233. <p><img data-attachment-id="1802" data-permalink="http://www.qtzar.com/adding-locations-data-to-the-ui/2017-02-10_16-08-41/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?fit=676%2C184" data-orig-size="676,184" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_16-08-41" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?fit=300%2C82" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?fit=640%2C174" class="alignnone size-full wp-image-1802" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?resize=640%2C174" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?w=676 676w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?resize=150%2C41 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-08-41.png?resize=300%2C82 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  234. <p>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 &#8216;location&#8217; for each iteration.</p>
  235. <p>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 @{&#8230;} 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 ${&#8230;} is a reference back to the loops variable and in this case we are pulling the id from the object.</p>
  236. <p>So the th:href will be translated to /location.html?locationId=xx where xx depends on the selected location.</p>
  237. <p>What if you don&#8217;t want location.html in the url and want to do something like /location/XX in that case your th:href would look like</p>
  238. <p><img data-attachment-id="1803" data-permalink="http://www.qtzar.com/adding-locations-data-to-the-ui/2017-02-10_16-38-58/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?fit=632%2C183" data-orig-size="632,183" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_16-38-58" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?fit=300%2C87" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?fit=632%2C183" class="alignnone size-full wp-image-1803" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?resize=632%2C183" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?w=632 632w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?resize=150%2C43 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-38-58.png?resize=300%2C87 300w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" /></p>
  239. <p><img data-attachment-id="1804" data-permalink="http://www.qtzar.com/adding-locations-data-to-the-ui/2017-02-10_16-41-16/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?fit=813%2C220" data-orig-size="813,220" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_16-41-16" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?fit=300%2C81" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?fit=640%2C173" class="alignnone size-full wp-image-1804" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?resize=640%2C173" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?w=813 813w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?resize=150%2C41 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_16-41-16.png?resize=300%2C81 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  240. <p>I&#8217;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&#8217;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.</p>
  241. <p><img data-attachment-id="1806" data-permalink="http://www.qtzar.com/adding-locations-data-to-the-ui/2017-02-10_17-01-50/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?fit=817%2C265" data-orig-size="817,265" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_17-01-50" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?fit=300%2C97" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?fit=640%2C208" class="alignnone size-full wp-image-1806" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?resize=640%2C208" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?w=817 817w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?resize=150%2C49 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_17-01-50.png?resize=300%2C97 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  242. <p>So looks like I&#8217;ll be building the location page so that you can see all the staff in a single location. I&#8217;ll drag that over to Active and start work on it next.</p>
  243. ]]></content:encoded>
  244. <wfw:commentRss>http://www.qtzar.com/adding-locations-data-to-the-ui/feed/</wfw:commentRss>
  245. <slash:comments>0</slash:comments>
  246. <post-id xmlns="com-wordpress:feed-additions:1">1799</post-id> </item>
  247. <item>
  248. <title>Checking Your Demo Data</title>
  249. <link>http://www.qtzar.com/checking-your-demo-data/</link>
  250. <comments>http://www.qtzar.com/checking-your-demo-data/#respond</comments>
  251. <pubDate>Tue, 14 Mar 2017 12:30:00 +0000</pubDate>
  252. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  253. <category><![CDATA[Domino To Spring]]></category>
  254. <category><![CDATA[None]]></category>
  255. <category><![CDATA[DevTools]]></category>
  256. <category><![CDATA[H2]]></category>
  257. <category><![CDATA[Spring Boot]]></category>
  258.  
  259. <guid isPermaLink="false">http://www.qtzar.com/?p=1793</guid>
  260. <description><![CDATA[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 [&#8230;]]]></description>
  261. <content:encoded><![CDATA[<p>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.</p>
  262. <p>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 SpringBoot sets it up for you when you have the spring-boot-devtools dependency added to your pom.xml file.</p>
  263. <p><img data-attachment-id="1794" data-permalink="http://www.qtzar.com/checking-your-demo-data/2017-02-10_13-56-34/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?fit=419%2C97" data-orig-size="419,97" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_13-56-34" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?fit=300%2C69" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?fit=419%2C97" class="alignnone size-full wp-image-1794" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?resize=419%2C97" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?w=419 419w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?resize=150%2C35 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-56-34.png?resize=300%2C69 300w" sizes="(max-width: 419px) 100vw, 419px" data-recalc-dims="1" /></p>
  264. <p>To access the H2 Console just start the application in your IDE and then access the console URL and click the connect button. You should not have to change any of the details in the rest of the dialog box.</p>
  265. <p><img data-attachment-id="1795" data-permalink="http://www.qtzar.com/checking-your-demo-data/2017-02-10_13-58-39/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?fit=487%2C409" data-orig-size="487,409" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_13-58-39" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?fit=300%2C252" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?fit=487%2C409" class="alignnone size-full wp-image-1795" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?resize=487%2C409" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?w=487 487w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?resize=150%2C126 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_13-58-39.png?resize=300%2C252 300w" sizes="(max-width: 487px) 100vw, 487px" data-recalc-dims="1" /></p>
  266. <p>Once connected you should see your two tables in the left navigator. If you click on the table name the SQL command to view the contents of the table should appear in the command box, just click on Run to load the table.</p>
  267. <p><img data-attachment-id="1796" data-permalink="http://www.qtzar.com/checking-your-demo-data/2017-02-10_14-06-38/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?fit=967%2C249" data-orig-size="967,249" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_14-06-38" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?fit=300%2C77" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?fit=640%2C165" class="alignnone size-full wp-image-1796" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?resize=640%2C165" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?w=967 967w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?resize=150%2C39 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-06-38.png?resize=300%2C77 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  268. <p>And if everything is correct you should see your demo data appear.</p>
  269. <p><img data-attachment-id="1797" data-permalink="http://www.qtzar.com/checking-your-demo-data/2017-02-10_14-10-38/" data-orig-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?fit=951%2C301" data-orig-size="951,301" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_14-10-38" data-image-description="" data-medium-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?fit=300%2C95" data-large-file="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?fit=640%2C203" class="alignnone size-full wp-image-1797" src="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?resize=640%2C203" alt="" srcset="https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?w=951 951w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?resize=150%2C47 150w, https://i2.wp.com/www.qtzar.com/wp-content/uploads/2017/02/2017-02-10_14-10-38.png?resize=300%2C95 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  270. <p>Now we can finally start adding the data to the UI&#8230;</p>
  271. ]]></content:encoded>
  272. <wfw:commentRss>http://www.qtzar.com/checking-your-demo-data/feed/</wfw:commentRss>
  273. <slash:comments>0</slash:comments>
  274. <post-id xmlns="com-wordpress:feed-additions:1">1793</post-id> </item>
  275. <item>
  276. <title>Adding Some Demo Data</title>
  277. <link>http://www.qtzar.com/adding-some-demo-data/</link>
  278. <comments>http://www.qtzar.com/adding-some-demo-data/#respond</comments>
  279. <pubDate>Mon, 13 Mar 2017 12:30:00 +0000</pubDate>
  280. <dc:creator><![CDATA[Declan Lynch]]></dc:creator>
  281. <category><![CDATA[Domino To Spring]]></category>
  282. <category><![CDATA[None]]></category>
  283. <category><![CDATA[Autowiring]]></category>
  284. <category><![CDATA[intelliJ]]></category>
  285. <category><![CDATA[Profiles]]></category>
  286. <category><![CDATA[Repositories]]></category>
  287. <category><![CDATA[Spring Data]]></category>
  288.  
  289. <guid isPermaLink="false">http://www.qtzar.com/?p=1779</guid>
  290. <description><![CDATA[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 [&#8230;]]]></description>
  291. <content:encoded><![CDATA[<p>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 that uses the repositories that we built earlier.</p>
  292. <p>For this demo data I&#8217;m going to use the data repositories method as it is quick and easy and doesn&#8217;t require any sql knowledge.</p>
  293. <p>Lets create a new class called DemoData that implements a Spring class called Application Runner. The class is also annotated with @Component which will allow it to be detected when the Spring Boot application starts.</p>
  294. <p><img data-attachment-id="1791" data-permalink="http://www.qtzar.com/adding-some-demo-data/2017-02-10_13-44-46/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?fit=431%2C42" data-orig-size="431,42" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_13-44-46" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?fit=300%2C29" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?fit=431%2C42" class="alignnone size-full wp-image-1791" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?resize=431%2C42" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?w=431 431w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?resize=150%2C15 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_13-44-46.png?resize=300%2C29 300w" sizes="(max-width: 431px) 100vw, 431px" data-recalc-dims="1" /></p>
  295. <p>Next we need access to the repositories. This is done by Autowiring them. Autowiring is a way to setup bean references in your code. Think of this as something similar to managed beans in XPages except you don&#8217;t need to edit any xml to get them working. Below is a constructor based autowire of the two repositories.</p>
  296. <p><img data-attachment-id="1783" data-permalink="http://www.qtzar.com/adding-some-demo-data/2017-02-10_10-49-11/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?fit=730%2C167" data-orig-size="730,167" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_10-49-11" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?fit=300%2C69" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?fit=640%2C146" class="alignnone size-full wp-image-1783" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?resize=640%2C146" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?w=730 730w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?resize=150%2C34 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-49-11.png?resize=300%2C69 300w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1" /></p>
  297. <p>First I create two private variables in the class that will hold the beans. Next I create a constructor for the class that takes in a parameter for each bean I&#8217;m autowiring and then those to the private variables. Lastly I need to make sure I add the @Autowired annotation to the constructor. I could also have written the auto wiring as follows</p>
  298. <p><img data-attachment-id="1784" data-permalink="http://www.qtzar.com/adding-some-demo-data/2017-02-10_10-58-37/" data-orig-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?fit=391%2C103" data-orig-size="391,103" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_10-58-37" data-image-description="" data-medium-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?fit=300%2C79" data-large-file="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?fit=391%2C103" class="alignnone size-full wp-image-1784" src="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?resize=391%2C103" alt="" srcset="https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?w=391 391w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?resize=150%2C40 150w, https://i1.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_10-58-37.png?resize=300%2C79 300w" sizes="(max-width: 391px) 100vw, 391px" data-recalc-dims="1" /></p>
  299. <p>but this is no longer recommended. If you see code examples like this then you can easily turn them in to constructor autowiring by allowing IntelliJ to convert them for you. Just click the code hint icon that appears when you click on the annotation and pick the constructor.</p>
  300. <p><img data-attachment-id="1785" data-permalink="http://www.qtzar.com/adding-some-demo-data/2017-02-10_11-01-41/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?fit=573%2C208" data-orig-size="573,208" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_11-01-41" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?fit=300%2C109" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?fit=573%2C208" class="alignnone size-full wp-image-1785" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?resize=573%2C208" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?w=573 573w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?resize=150%2C54 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-01-41.png?resize=300%2C109 300w" sizes="(max-width: 573px) 100vw, 573px" data-recalc-dims="1" /></p>
  301. <p>Now we just need a method that will run when the application runs. Because we extended ApplicationRunner there is a method that we can override called &#8216;run&#8217; and then we can add as much data to the repositories as we like.</p>
  302. <p><img data-attachment-id="1786" data-permalink="http://www.qtzar.com/adding-some-demo-data/2017-02-10_11-04-34/" data-orig-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?fit=572%2C299" data-orig-size="572,299" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="2017-02-10_11-04-34" data-image-description="" data-medium-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?fit=300%2C157" data-large-file="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?fit=572%2C299" class="alignnone size-full wp-image-1786" src="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?resize=572%2C299" alt="" srcset="https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?w=572 572w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?resize=150%2C78 150w, https://i0.wp.com/www.qtzar.com/wp-content/uploads/2017/03/2017-02-10_11-04-34.png?resize=300%2C157 300w" sizes="(max-width: 572px) 100vw, 572px" data-recalc-dims="1" /></p>
  303. <p>Here I have added one Location and one Person You can add as many as you want in your version. I do like the way that IntelliJ shows the argument names, this makes it really easy for when you next look at the code in a few months time.</p>
  304. <p>One question you might ask yourself is how do we stop this ApplicationRunner from running once the application is in production as we would not want that data showing in that environment. The answer is simple and is all to do with Profiles. I&#8217;ll cover profiles in a later entry when we get around to deployments.</p>
  305. <p>Now that we have data we can add it to our UI&#8230;</p>
  306. ]]></content:encoded>
  307. <wfw:commentRss>http://www.qtzar.com/adding-some-demo-data/feed/</wfw:commentRss>
  308. <slash:comments>0</slash:comments>
  309. <post-id xmlns="com-wordpress:feed-additions:1">1779</post-id> </item>
  310. </channel>
  311. </rss>
  312.  
  313. <!-- Dynamic page generated in 1.716 seconds. -->
  314. <!-- Cached page generated by WP-Super-Cache on 2017-03-26 12:37:23 -->
  315.  
  316. <!-- Compression = gzip -->

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//www.qtzar.com/feed/

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda