読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Spring MVC JSPで外部のJavaScriptファイルやCSSファイルを読み込む

Spring
<スポンサーリンク>

1.基礎

jQueryTwitter Bootstrapなど、外部のファイルを取り込んでjspで使いたい場合がある。
そういうときにどんな設定をすればいいか、サンプルを見ていきたい。

2.サンプル

最初に、WEB-INF/view/mvc-config.xmlに外部ファイルの場所をマッピングさせる設定を行う。
eclipseで見るフォルダ構成はこんな感じ。
f:id:sho322:20140204224610p:plain
このmvc-config.xmlに以下を追記する(beansタグの中)

<!-- 外部ファイルを使うため -->
<mvc:resources mapping="/resources/**" location="/resources/" />

次に、webappというフォルダの下にresourcesというフォルダを作成する。
これは上の画像にもあると思うけれど、新しく作成して、このフォルダの中にJavaScriptファイルやcssを突っ込んでいく。
で、resourceの下に入れた外部ファイル達を読み込むには、jspファイルのヘッダ部分に以下のような記述を追加する。

<link href="<c:url value="/resources/bootstrap/css/bootstrap.min.css" />" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js" />"></script>

<script src="<c:url value="/resources/bootstrap/js/bootstrap-datepicker.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap-datepicker.ja.js" />"></script>

この例ではTwitter BootstrapやjQueryを読み込んでいるが、各自の環境に合わせて名前を変える。
これは、webapp/resources/以下に置いたフォルダ構成に対応している。

では、取り込んだファイルを利用してサンプルを使ってみる。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/bootstrap/css/bootstrap.min.css" />" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js" />"></script>

<!-- bootstrap datepicker→http://tarruda.github.io/bootstrap-datetimepicker/ -->
<script src="<c:url value="/resources/bootstrap/js/bootstrap-datepicker.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap-datepicker.ja.js" />"></script>
<script>
$(function() {
	//date picker
	$("#dp").datepicker({
		format: 'yyyy/mm/dd',
		langage: 'ja'
	});

})
</script>
</head>
<body>
<h2>Bootstrap datepickerを使ってカレンダー表示してみる</h2>
<label>日付:<input id="dp" maxlength="10" type="text"></input></label><br/>

</body>
</html>

3.デモ

f:id:sho322:20140204224418j:plain
このデモのように、外部ファイルを取り込んだサンプルを表示することができる。

4.書籍紹介

この例ではコントローラー部分などは省略したが、それはこの書籍を参考にしたらわかりやすく勉強できると思う。
自分もこれを読んだらだいたい基礎はつかめた気がする。