4programmers · azalut · Feb 13, 2015 · Feb 14, 2015 · Feb 16, 2015 · Feb 16, 2015
diff --git a/pom.xml b/pom.xml
@@ -79,6 +79,13 @@
             <artifactId>spring-context-support</artifactId>
             <version>4.1.4.RELEASE</version>
         </dependency>
+
+        <dependency>
+            <groupId>kr.pe.kwonnam.freemarker</groupId>
+            <artifactId>freemarker-template-inheritance</artifactId>
+            <version>0.4.RELEASE</version>
+            <scope>compile</scope>
+        </dependency>
     </dependencies>
 
     <build>

diff --git a/src/main/java/net/_4programmers/_4note/controller/IndexController.java b/src/main/java/net/_4programmers/_4note/controller/IndexController.java
@@ -1,6 +1,7 @@
 package net._4programmers._4note.controller;
 
 import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 @Controller

diff --git a/src/main/webapp/WEB-INF/application-context.xml b/src/main/webapp/WEB-INF/application-context.xml
@@ -17,11 +17,18 @@
     <context:component-scan base-package="net._4programmers._4note" />
 
     <mvc:annotation-driven />
+    <mvc:resources mapping="/resources/**" location="/resources/"/>
 
     <tx:annotation-driven />
 
+    <import resource="classpath:/kr/pe/kwonnam/freemarker/inheritance/freemarker-layout-directives.xml" />
     <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
         <property name="templateLoaderPath" value="/WEB-INF/views" />
+        <property name="freemarkerVariables">
+            <map>
+                <entry key="layout" value-ref="freemarkerLayoutDirectives" />
+            </map>
+        </property>
     </bean>
 
     <bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">

diff --git a/src/main/webapp/WEB-INF/views/index.ftl b/src/main/webapp/WEB-INF/views/index.ftl
@@ -1,5 +1,5 @@
-<html>
-<body>
-    <h2>Hello World!</h2>
-</body>
-</html>
+<@layout.extends name="template.ftl">
+    <@layout.put block="content" type="replace">
+        <h1>Welcome to 4Notes</h1>
+    </@layout.put>
+</@layout.extends>
diff --git a/src/main/webapp/WEB-INF/views/inserted-user.ftl b/src/main/webapp/WEB-INF/views/inserted-user.ftl
@@ -1,18 +1,17 @@
-<html>
-<head>
-    <title>4note</title>
-</head>
-<body>
-<h2>Informacje o wstawionym uzytkowniku:</h2>
-<table>
-    <tr>
-        <td>Nazwa:</td>
-        <td>${user.getUsername()}</td>
-    </tr>
-    <tr>
-        <td>Email:</td>
-        <td>${user.getEmail()}</td>
-    </tr>
-</table>
-</body>
-</html>
+<@layout.extends name="template.ftl">
+
+    <@layout.put block="content" type="replace">
+        <h2>Informacje o wstawionym uzytkowniku:</h2>
+        <table>
+            <tr>
+                <td>Nazwa:</td>
+                <td>${user.getUsername()}</td>
+            </tr>
+            <tr>
+                <td>Email:</td>
+                <td>${user.getEmail()}</td>
+            </tr>
+        </table>
+    </@layout.put>
+
+</@layout.extends>
diff --git a/src/main/webapp/WEB-INF/views/template.ftl b/src/main/webapp/WEB-INF/views/template.ftl
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>4Note</title>
+
+    <link href="/resources/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/resources/css/custom-styles.css" rel="stylesheet">
+</head>
+
+<body>
+
+<@layout.block name="header">
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">4Notes</a>
+            </div>
+            <div id="navbar" class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                    <li class="active"><a href="#">Home</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</@layout.block>
+
+<div class="container">
+    <div class="jumbotron content">
+        <@layout.block name="content">
+        </@layout.block>
+    </div>
+</div>
+
+
+<@layout.block name="footer">
+    <footer class="footer">
+        <p>4Notes footer</p>
+    </footer>
+</@layout.block>
+
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+<script src="/resources/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
+</body>
+</html>
diff --git a/src/main/webapp/WEB-INF/views/user.ftl b/src/main/webapp/WEB-INF/views/user.ftl
@@ -1,18 +1,8 @@
-<html>
-<head>
-    <title>4note</title>
-</head>
-<body>
-    <h2>Informacje o uzytkowniku:</h2>
-    <table>
-        <tr>
-            <td>Nazwa:</td>
-            <td>${user.getUsername()}</td>
-        </tr>
-        <tr>
-            <td>Email:</td>
-            <td>${user.getEmail()}</td>
-        </tr>
-    </table>
-</body>
-</html>
+<@layout.extends name="template.ftl">
+
+    <@layout.put block="content" type="replace">
+    <h1>Hello, ${user.getUsername()}!</h1>
+    <p>Here is your email: ${user.getEmail()}</p>
+    </@layout.put>
+
+</@layout.extends>