From 7e49305c9248231d4dcaa1dbe31158b554a74ab6 Mon Sep 17 00:00:00 2001
From: Kai Moritz <km@juplo.de>
Date: Mon, 1 Sep 2014 15:18:09 +0200
Subject: [PATCH] Umstellung auf Thymeleaf: Schritt 3 - Versucht, das Projet
 umzustellen
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Ergebnis: Möglichkeiten von Thymeleaf+Tiles zu eingeschränkt/kompliziert.
---
 .../juplo/branding/web/ApplicationConfig.java |  22 ----
 src/main/resources/spring/tiles.xml           |  23 ++--
 .../webapp/WEB-INF/templates/maincontent.jsp  |  72 +++++------
 src/main/webapp/WEB-INF/web.xml               |   8 --
 src/main/webapp/less/all.less                 |   3 +
 .../webapp/thymeleaf/templates/defaults.html  |  60 +++++++++
 .../webapp/thymeleaf/templates/footer.html    |  12 --
 .../webapp/thymeleaf/templates/header.html    |  12 --
 .../webapp/thymeleaf/templates/html5page.html | 119 ++++++++++++++++++
 .../webapp/thymeleaf/templates/layout.html    |  35 ------
 src/main/webapp/thymeleaf/views/index.html    |  45 ++++++-
 .../views/projects/fix-swf/overview.html      |  52 ++++++++
 12 files changed, 326 insertions(+), 137 deletions(-)
 delete mode 100644 src/main/java/de/juplo/branding/web/ApplicationConfig.java
 create mode 100644 src/main/webapp/less/all.less
 create mode 100644 src/main/webapp/thymeleaf/templates/defaults.html
 delete mode 100644 src/main/webapp/thymeleaf/templates/footer.html
 delete mode 100644 src/main/webapp/thymeleaf/templates/header.html
 create mode 100644 src/main/webapp/thymeleaf/templates/html5page.html
 delete mode 100644 src/main/webapp/thymeleaf/templates/layout.html
 create mode 100644 src/main/webapp/thymeleaf/views/projects/fix-swf/overview.html

diff --git a/src/main/java/de/juplo/branding/web/ApplicationConfig.java b/src/main/java/de/juplo/branding/web/ApplicationConfig.java
deleted file mode 100644
index 598f1b08..00000000
--- a/src/main/java/de/juplo/branding/web/ApplicationConfig.java
+++ /dev/null
@@ -1,22 +0,0 @@
-package de.juplo.branding.web;
-
-import javax.annotation.PostConstruct;
-import javax.annotation.Resource;
-import javax.servlet.ServletContext;
-import org.springframework.stereotype.Component;
-
-
-@Component
-public class ApplicationConfig
-{
-  public static final String ATTRIBUTE_BASE = "base";
-
-  @Resource
-  private ServletContext context;
-
-  @PostConstruct
-  public void configureApplication()
-  {
-    context.setAttribute(ATTRIBUTE_BASE, context.getContextPath() + '/');
-  }
-}
\ No newline at end of file
diff --git a/src/main/resources/spring/tiles.xml b/src/main/resources/spring/tiles.xml
index 8439ff05..f77fb859 100644
--- a/src/main/resources/spring/tiles.xml
+++ b/src/main/resources/spring/tiles.xml
@@ -8,19 +8,20 @@
     Main definition that uses layout.html to put title and content attributes from
     Thymeleaf fragments; {1} will be evaluated to either 'list', 'form' or 'view'.
   -->
-  <definition name="*" template="templates/layout">
-    <put-attribute name="title" value="title/{1}"/>
-    <put-attribute name="content" value="content/{1}"/>
-    <put-attribute name="tiles" value="/WEB-INF/views/tiles.jsp" type="jsp"/>
+  <definition name="*" template="templates/html5page">
+    <put-attribute name="title" value="views/{1} :: title"/>
+    <put-attribute name="htmlhead" value="templates/defaults :: htmlhead"/>
+    <put-attribute name="header" value="templates/defaults :: header"/>
+    <put-attribute name="breadcrumb" value="views/{1} :: breadcrumb"/>
+    <put-attribute name="maincontent" value="templates/defaults :: maincontent"/>
+    <put-attribute name="contentclass" value="test" type="string"/>
+    <put-attribute name="marginalcontent" value="views/{1} :: marginalcontent"/>
+    <put-attribute name="navigation" value="views/{1} :: navigation"/>
+    <put-attribute name="footer" value="templates/defaults :: footer"/>
   </definition>
 
-  <!--
-    Fragments that are included by messages/* definition above;
-    'template' attribute is a template file stored in /WEB-INF/views/message folder;
-    {1} will be evaluated to either 'list', 'form' or 'view'.
-  -->
-  <definition name="title/*" template="views/{1} :: title"/>
-  <definition name="content/*" template="views/{1} :: content"/>
+  <!-- Make JSP-templates available through a view-name -->
+  <definition name="jsp/**" template="/WEB-INF/templates/{1}.jsp" templateType="jsp"/>
 
   <definition name="BASEPAGE" template="/WEB-INF/templates/html5page.jsp">
     <put-attribute name="title" value="TITLE IS MISSING" type="string" cascade="true"/>
diff --git a/src/main/webapp/WEB-INF/templates/maincontent.jsp b/src/main/webapp/WEB-INF/templates/maincontent.jsp
index c09b6b0a..f2a0fcf3 100644
--- a/src/main/webapp/WEB-INF/templates/maincontent.jsp
+++ b/src/main/webapp/WEB-INF/templates/maincontent.jsp
@@ -2,38 +2,40 @@
 <%@page pageEncoding="UTF-8"%>
 <%@page session="false" %>
 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
-<p>
-  <strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">sit amet</a>, consectetur adipisicing elit, sed do
-  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-  ad minim veniam, quis nostrud <a href="${base}projects/html-experimente.html">exercitation</a> ullamco laboris nisi ut
-  aliquip ex ea commodo consequat. Duis aute irure dolor in
-  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-  culpa qui officia deserunt mollit anim id est laborum.
-</p>
-<h2>Duis aute irure dolor</h2>
-<ul>
-  <li>Operators and other mathematical stuff: <c:out value="-+/*"/></li>
-  <li>Characters offten used in programming languages: <c:out value="{(<>)}@$?%*#;:&/\!^\"'`~"/></li>
-  <li>Special german characters: <c:out value="ÄäÖöÜü"/></li>
-  <li>Other special characters: <c:out value="@€¢§%°"/></li>
-</ul>
-<h2>Excepteur sint occaecat cupidatat</h2>
-<p>
-  Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do
-  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-  aliquip ex ea commodo consequat. Duis aute irure dolor in
-  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-  culpa qui officia deserunt mollit anim id est laborum.
-</p>
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-  eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim
-  ad minim veniam, quis nostrud <em>exercitation ullamco</em> laboris nisi ut
-  aliquip ex ea commodo consequat</strong>. Duis aute irure dolor in
-  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-  culpa qui officia deserunt mollit anim id est laborum.
-</p>
+<article id="content" class="main" tiles:fragment="maincontent">
+  <p>
+    <strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">sit amet</a>, consectetur adipisicing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    ad minim veniam, quis nostrud <a href="${base}projects/html-experimente.html">exercitation</a> ullamco laboris nisi ut
+    aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <h2>Duis aute irure dolor</h2>
+  <ul>
+    <li>Operators and other mathematical stuff: <c:out value="-+/*"/></li>
+    <li>Characters offten used in programming languages: <c:out value="{(<>)}@$?%*#;:&/\!^\"'`~"/></li>
+    <li>Special german characters: <c:out value="ÄäÖöÜü"/></li>
+    <li>Other special characters: <c:out value="@€¢§%°"/></li>
+  </ul>
+  <h2>Excepteur sint occaecat cupidatat</h2>
+  <p>
+    Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim
+    ad minim veniam, quis nostrud <em>exercitation ullamco</em> laboris nisi ut
+    aliquip ex ea commodo consequat</strong>. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</article>
diff --git a/src/main/webapp/WEB-INF/web.xml b/src/main/webapp/WEB-INF/web.xml
index af117549..289983bb 100644
--- a/src/main/webapp/WEB-INF/web.xml
+++ b/src/main/webapp/WEB-INF/web.xml
@@ -72,12 +72,4 @@
     <url-pattern>/</url-pattern>
   </servlet-mapping>
 
-  <error-page>
-    <error-code>404</error-code>
-    <location>/404.html</location>
-  </error-page>
-  <error-page>
-    <location>/error.html</location>
-  </error-page>
-
 </web-app>
diff --git a/src/main/webapp/less/all.less b/src/main/webapp/less/all.less
new file mode 100644
index 00000000..c1eb4e02
--- /dev/null
+++ b/src/main/webapp/less/all.less
@@ -0,0 +1,3 @@
+@import 'variables.less';
+@import 'base.less';
+@import 'screen.less';
diff --git a/src/main/webapp/thymeleaf/templates/defaults.html b/src/main/webapp/thymeleaf/templates/defaults.html
new file mode 100644
index 00000000..880af8b8
--- /dev/null
+++ b/src/main/webapp/thymeleaf/templates/defaults.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tiles="http://www.thymeleaf.org">
+  <head tiles:fragment="htmlhead">
+    <title th:text="'juplo - ' + ${title}">juplo - STANDARDELEMENTE</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/all.less" th:href="@{/css/base.css}"/>
+    <style type="text/css" th:inline="text">
+      @import '[[@{/css/screen.css}]]' screen;
+      @import '[[@{/css/print.css}]]' print;
+    </style>
+    <script src="../../js/base.js" th:src="@{/js/base.js}"></script>
+    <script src="../../js/less-1.5.1.js" th:remove="all"></script>
+  </head>
+  <body>
+    <h1 id="logo" tiles:fragment="header"><a href="${base}" title="Home" class="l">juplo</a></h1>
+    <article id="content" class="main" tiles:fragment="maincontent">
+      <p>
+        <strong>Lorem ipsum</strong> dolor <a href="#" th:href="@{/projects/typo.html}">sit amet</a>, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+        ad minim veniam, quis nostrud <a href="#" th:href="@{/projects/html-experimente.html}">exercitation</a> ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h2>Duis aute irure dolor</h2>
+      <ul>
+        <li>Operators and other mathematical stuff: -+/*</li>
+        <li>Characters offten used in programming languages: {(&lt;&gt;)}@$?%*#;:&amp;/\!^&#034;&#039;`~</li>
+        <li>Special german characters: ÄäÖöÜü</li>
+        <li>Other special characters: @?¢§%°</li>
+      </ul>
+      <h2>Excepteur sint occaecat cupidatat</h2>
+      <p>
+        Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. <strong>Ut enim
+        ad minim veniam, quis nostrud <em>exercitation ullamco</em> laboris nisi ut
+        aliquip ex ea commodo consequat</strong>. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+        culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </article>
+    <ul id="footerlinks" tiles:fragment="footer">
+      <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+      <li class="f"><a class="f" href="#" th:href="@{/impressum.html}">Impressum</a></li>
+      <li class="f about"><a class="f" href="#" th:href="@{/about.html}">About</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/src/main/webapp/thymeleaf/templates/footer.html b/src/main/webapp/thymeleaf/templates/footer.html
deleted file mode 100644
index 32d3ffc9..00000000
--- a/src/main/webapp/thymeleaf/templates/footer.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
-  <head>
-    <title>Footer-Template</title>
-  </head>
-  <body>
-    <footer th:fragment="fragment">
-      <hr />
-      &copy; 2014 juplo NG
-    </footer>
-  </body>
-</html>
\ No newline at end of file
diff --git a/src/main/webapp/thymeleaf/templates/header.html b/src/main/webapp/thymeleaf/templates/header.html
deleted file mode 100644
index a2370235..00000000
--- a/src/main/webapp/thymeleaf/templates/header.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
-  <head>
-    <title>Header-Template</title>
-  </head>
-  <body>
-    <header th:fragment="fragment">
-      juplo proudly presemts:
-      <hr />
-    </header>
-  </body>
-</html>
\ No newline at end of file
diff --git a/src/main/webapp/thymeleaf/templates/html5page.html b/src/main/webapp/thymeleaf/templates/html5page.html
new file mode 100644
index 00000000..c52d5ffa
--- /dev/null
+++ b/src/main/webapp/thymeleaf/templates/html5page.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:tiles="http://www.thymeleaf.org">
+  <head tiles:replace="htmlhead">
+    <title>juplo - BASISTEMPLATE</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet/less" type="text/css" href="../../less/all.less"/>
+    <script src="../../js/less-1.5.1.js"></script>
+  </head>
+  <body id="top" th:class="contentclass" onload="prettyPrint()">
+    <div id="page" class="cf">
+      <header id="header">
+        <h1 id="logo" tiles:include="header"><a href="#" title="Home" class="l">juplo</a></h1>
+        <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
+        <hr class="h" />
+      </header>
+      <div id="breadcrumb">
+        <strong class="b title">You are here:</strong>
+        <ol class="b" tiles:include="breadcrumb">
+          <li class="b"><a class="b" href="#">Home</a></li>
+          <li class="b"><a class="b" href="#">Projects</a></li>
+          <li class="b"><a class="b" href="#">Fix SWF</a></li>
+          <li class="b"><strong class="b">Overview</strong></li>
+        </ol>
+        <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
+        <hr class="b" />
+      </div>
+      <main class="content cf">
+        <article id="content" class="main" tiles:replace="maincontent">
+          <header><h1>Überschrift</h1></header>
+          <p>
+            <strong>Lorem ipsum</strong> dolor <a href="#">sit amet</a>, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud <a href="#">exercitation</a> ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </article>
+        <div class="marginal">
+          <nav id="nav">
+            <hr class="n"/>
+            <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+            <!--/*-->
+            <h1 class="nav">Navigation</h1>
+            <h2 class="nav menu">Section-Menu</h2>
+            <ul id="menu" class="cf">
+              <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+              <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+              <li class="m about"><a href="${base}about.html" class="m">About</a></li>
+            </ul>
+            <h2 class="nav submenu">
+              <span class="s">Submenu for section</span>
+              <a class="s selected" href="${base}projects.html">Projects</a>
+            </h2>
+            <ul id="submenu" class="s">
+              <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+              <li class="s sub">
+                <a href="${base}projects/fix-swf.html" class="s selected">fix-swf</a>
+                <ul class="s active">
+                  <li class="s"><strong class="s">Overview</strong></li>
+                  <li class="s"><a href="${base}projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+                  <li class="s"><a href="#" class="s">FAQ</a></li>
+                  <li class="s"><a href="#" class="s">Documentation</a></li>
+                </ul>
+              </li>
+              <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+              <li class="s off"><a href="${base}projects/html-experimente.html" class="s">HTML-Experimente</a></li>
+              <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+              <li class="s off"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+            </ul>
+            <!--*/-->
+            <div tiles:include="navigation" th:remove="tag"></div>
+            <hr class="n"/>
+          </nav>
+          <aside class="m" tiles:replace="marginalcontent">
+            <div class="widget widget_recent_entries">
+              <h2 class="widgettitle">Recent Posts</h2>
+              <ul>
+                <li>
+                  <a href="#" title="Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</a>
+                </li>
+                <li>
+                  <a href="#" title="hibernate4-maven-plugin 1.0.3 released!">hibernate4-maven-plugin 1.0.3 released!</a>
+                </li>
+                <li>
+                  <a href="#" title="Log out from wrong Account with maven-appengine-plugin">Log out from wrong Account with maven-appengine-plugin</a>
+                </li>
+                <li>
+                  <a href="#" title="Bidirectional Association with @ElementCollection">Bidirectional Association with @ElementCollection</a>
+                </li>
+                <li>
+                  <a href="#" title="hibernate4-maven-plugin 1.0.2 released!">hibernate4-maven-plugin 1.0.2 released!</a>
+                </li>
+                <li>
+                  <a href="#" title="hibernate4-maven-plugin 1.0.1 released!">hibernate4-maven-plugin 1.0.1 released!</a>
+                </li>
+                <li>
+                  <a href="#" title="hibernate4-maven-plugin 1.0 released!">hibernate4-maven-plugin 1.0 released!</a>
+                </li>
+                <li>
+                  <a href="#" title="hibernate4-maven-plugin">hibernate4-maven-plugin</a>
+                </li>
+              </ul>
+            </div>
+          </aside>
+        </div>
+      </main>
+      <footer id="footer">
+        <hr class="f" />
+        <ul id="footerlinks" tiles:include="footer">
+          <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+          <li class="f"><a class="f" href="#">Impressum</a></li>
+          <li class="f about"><a class="f" href="#">About</a></li>
+        </ul>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/src/main/webapp/thymeleaf/templates/layout.html b/src/main/webapp/thymeleaf/templates/layout.html
deleted file mode 100644
index 7d02e2b4..00000000
--- a/src/main/webapp/thymeleaf/templates/layout.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:tiles="http://www.thymeleaf.org">
-  <head>
-    <!--/* Tiles attribute will be put here at runtime */-->
-    <title tiles:include="title">Title</title>
-  </head>
-  <body>
-    <!--/* Standard layout can be mixed with Tiles */-->
-    <div th:replace="templates/header :: fragment">HEADER</div>
-    <div class="container">
-      <!--/* Tiles attribute will be put here at runtime */-->
-      <h1 tiles:include="title">Title</h1>
-      <!--/* Tiles attribute will be put here at runtime */-->
-      <div tiles:replace="content">
-        <!-- ============================================================================ -->
-        <!-- This content is only used for static prototyping purposes (natural templates)-->
-        <!-- and is therefore entirely optional, as this markup fragment will be included -->
-        <!-- from "fragments/header.html" at runtime.                                     -->
-        <!-- ============================================================================ -->
-        <h1>Content</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
-          Phasellus et placerat elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          Praesent scelerisque neque neque, ac elementum quam dignissim interdum.
-          Phasellus et placerat elit.
-        </p>
-      </div>
-    </div>
-    <!--/* Tiles attribute will be put here at runtime */-->
-    <div tiles:replace="tiles">TILES</div>
-    <!--/* Standard layout can be mixed with Tiles */-->
-    <div th:replace="templates/footer :: fragment">FOOTER</div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/src/main/webapp/thymeleaf/views/index.html b/src/main/webapp/thymeleaf/views/index.html
index 101bdb88..cd366101 100644
--- a/src/main/webapp/thymeleaf/views/index.html
+++ b/src/main/webapp/thymeleaf/views/index.html
@@ -4,8 +4,49 @@
     <title tiles:fragment="title">Index</title>
   </head>
   <body>
-    <div tiles:fragment="content">
-      <p>Inhalt der Index-Seite...</p>
+    <div tiles:fragment="header"><a href="#" title="Home" class="l">juplo</a></div>
+    <ul tiles:fragment="breadcrumb">
+      <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+      <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+      <li class="b"><a class="b" href="${base}projects/fix-swf.html">Fix SWF</a></li>
+      <li class="b"><strong class="b">Overview</strong></li>
+    </ul>
+    <div tiles:fragment="navigation">
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul id="menu" class="cf">
+        <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+        <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+        <li class="m about"><a href="${base}about.html" class="m">About</a></li>
+      </ul>
+      <h2 class="nav submenu">
+        <span class="s">Submenu for section</span>
+        <a class="s selected" href="${base}projects.html">Projects</a>
+      </h2>
+      <ul id="submenu" class="s">
+        <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+        <li class="s sub">
+          <a href="${base}projects/fix-swf.html" class="s selected">fix-swf</a>
+          <ul class="s active">
+            <li class="s"><strong class="s">Overview</strong></li>
+            <li class="s"><a href="${base}projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+            <li class="s"><a href="#" class="s">FAQ</a></li>
+            <li class="s"><a href="#" class="s">Documentation</a></li>
+          </ul>
+        </li>
+        <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+        <li class="s off"><a href="${base}projects/html-experimente.html" class="s">HTML-Experimente</a></li>
+        <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+        <li class="s off"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+      </ul>
     </div>
+    <main id="content" class="main" tiles:fragment="maincontent">
+      <p>Inhalt der Index-Seite...</p>
+    </main>
+    <ul tiles:fragment="footer">
+      <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+      <li class="f"><a class="f" href="${base}impressum.html">Impressum</a></li>
+      <li class="f about"><a class="f" href="${base}about.html">About</a></li>
+    </ul>
   </body>
 </html>
diff --git a/src/main/webapp/thymeleaf/views/projects/fix-swf/overview.html b/src/main/webapp/thymeleaf/views/projects/fix-swf/overview.html
new file mode 100644
index 00000000..cd366101
--- /dev/null
+++ b/src/main/webapp/thymeleaf/views/projects/fix-swf/overview.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tiles="http://www.thymeleaf.org">
+  <head>
+    <title tiles:fragment="title">Index</title>
+  </head>
+  <body>
+    <div tiles:fragment="header"><a href="#" title="Home" class="l">juplo</a></div>
+    <ul tiles:fragment="breadcrumb">
+      <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+      <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+      <li class="b"><a class="b" href="${base}projects/fix-swf.html">Fix SWF</a></li>
+      <li class="b"><strong class="b">Overview</strong></li>
+    </ul>
+    <div tiles:fragment="navigation">
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul id="menu" class="cf">
+        <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+        <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+        <li class="m about"><a href="${base}about.html" class="m">About</a></li>
+      </ul>
+      <h2 class="nav submenu">
+        <span class="s">Submenu for section</span>
+        <a class="s selected" href="${base}projects.html">Projects</a>
+      </h2>
+      <ul id="submenu" class="s">
+        <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+        <li class="s sub">
+          <a href="${base}projects/fix-swf.html" class="s selected">fix-swf</a>
+          <ul class="s active">
+            <li class="s"><strong class="s">Overview</strong></li>
+            <li class="s"><a href="${base}projects/fix-swf/getting-started.html" class="s">Getting Started</a></li>
+            <li class="s"><a href="#" class="s">FAQ</a></li>
+            <li class="s"><a href="#" class="s">Documentation</a></li>
+          </ul>
+        </li>
+        <li class="s off"><a href="#" class="s">jquery.openx</a></li>
+        <li class="s off"><a href="${base}projects/html-experimente.html" class="s">HTML-Experimente</a></li>
+        <li class="s sub off"><a href="#" class="s">accelerator</a></li>
+        <li class="s off"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+      </ul>
+    </div>
+    <main id="content" class="main" tiles:fragment="maincontent">
+      <p>Inhalt der Index-Seite...</p>
+    </main>
+    <ul tiles:fragment="footer">
+      <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+      <li class="f"><a class="f" href="${base}impressum.html">Impressum</a></li>
+      <li class="f about"><a class="f" href="${base}about.html">About</a></li>
+    </ul>
+  </body>
+</html>
-- 
2.20.1