Thymeleaf and Roo AND Twitter Bootstrap – the missing code

(note: this is the missing part from the “Thymeleaf and Roo AND Twitter Bootstrap” entry)

Let’s rewrite index.html to make it more Bootstrap-like, the way the scaffolding document says.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" media="screen" href="../../bootstrap/css/bootstrap.css"
    th:href="@{/bootstrap/css/bootstrap.css}" />
</head>

<body>
    <div th:include="blocks :: header"></div>
    <div id="container">
        <div th:include="blocks :: menu">Menu</div>
        <div>
            <h2 th:text="#{welcome_titlepane(#{application_name})}">Welcome dear</h2>
        </div>
    </div>

Important things to notice here:

  • instead of a table the page is now laid out with the Bootstrap div styles
  • don’t forget to add a class=”span12″ also to the header block if you want it to still look like a page header
  • you can add also the bootstrap-responsive.css – but it won’t make much of a difference right now
  • in production you’ll want the -min version of the css files

This way also the 90’s theme went away. I know it will be missed but life does go on… Start the server, resize your browser window around and see how they rearrange. Nice? Nice. Even the header logo resizes… Now do the same changes to your other html files.

thyme11Now if you group also your buttons and style them Bootstrap-like…

<td colspan="2"><div class="btn-group">
        <input type="submit" class="btn btn-primary" ...

…and finally split your error messages and give them a nice label to contain the field names, like this

<td colspan="2" th:if="${#fields.hasErrors('*')}">
    <div th:if="${#fields.hasErrors('fullName')}" th:with="err=${#fields.errors('fullName')}">
        <span class="label label-important"
            th:text="#{label_com_thymetest_domain_person_fullname} + ': '">Full name: </span><span
            th:text=" ${#strings.arrayJoin(err,', ')}"> is incorrect!</span>
    </div>

Here we go, Bootstrap!
thyme12

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s