|
가. include 지시문
<%@ include file="/taglibs.jsp"%>
먼저 include 지시문(directive)이 나옵니다. 공통적으로 사용하는 파일을 매번 타이핑 하지 않기 위한 것이죠. 이름으로 보아선 taglib 지시어를 지정하는 코드를 모아둔 것 같네요.
<c:set var="datePattern"><fmt:message key="date.format"/></c:set>
위의 내용이 taglibs.jsp의 내용입니다. 먼저 page 지시문을 통해서 errorPage를 지정했네요. 오류가 발생하면 error.jsp로 보내라는 것이죠. 예외처리문 출력하는 것입니다. 코드를 설명하는건 생략하죠.
다음에는 예상대로 taglib 지시어가 늘어서 있네요. JSTL 중에서 Core와 Format 을 사용하는 것 같네요. 그리고, 목록보기를 위해선 오픈소스인 DisplayTag를 쓰려고 이를 선언했네요. 뒤어어서 Spring에서 제공하는 두 가지 태그와 함께 화면을 분할하기 위해서 Sitemesh의 태그를 쓰네요.
뒤이어서 JSTL Core의 태그를 썼네요. set 태그는 변수에 값을 할당하는 것입니다. var 속성이 변수 이름을 나타내고 태그안의 텍스트가 값이 됩니다. dataPattern 이라는 변수에 data.format 이라는 키값으로 메시지를 꺼내와서 할당하네요.
message 태그는 국제화 지원을 위한 태그 중 하나입니다. 다국어 지원이라는 표현이 더 자연스러울 듯 하네요. 다국어 지원을 위해서 localization context 라는 메커니즘을 사용하게 되는데요. 음... 특정 지역과 언어에 맞는 문자나 통화 기호등을 표현하기 위해서 문맥(context)를 지역에 따라 달리하는 방법이죠.
이를 위해서는 web.xml 에서 javax.servlet.jsp.jstl.fmt.localizationContext 라는 이름의 context parameter를 설정해야 하는데 그 값은 String 타입의 문자열이거나javax.servlet.jsp.jstl.fmt.LocalizationContext 객체 타입이 됩니다.
<!-- Define the basename for a resource bundle for I18N -->
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>messages</param-value>
</context-param>
web.xml 파일에 위와 같은 설정이 있는데, message 라는 값은 ResourceBundle의 기반(base)이 되는 이름이 되며, 결국 WEB-INFclasses 디렉토리의 message_xx_XX.properties 파일에서 메시지를 읽어오게 되는 것이죠.
date.format=MM/dd/yyyy
messages.properties 파일에 위와 같은 내용이 있네요.
나. 제목 및 본문부
<title><fmt:message key="index.title"/></title>
이 내용은 위와 같이 다국어 메시지를 지원하려는 의도라고 볼 수 있죠.
index.title=Equinox ~ Welcome
이렇게 되어 있네요.
그리고 본문은 주로 html 로 되어 있는 설명문들이라서 설명하지 않을 부분은 생략하고, 전문을 저 아래 첨부하기로 하죠.
<acronym title="Create, Retrieve, Update and Delete">CRUD</acronym>
음.. 이런 태그도 있었네요. ^^;
<a href="?" omclick="readMore(); return false">Click here</a>
Click here 라는 문자에는 onclick 이벤트가 걸려있구요. id가 readmore인 div 태그 안의 버튼에도 onclick 이벤트가 걸려있네요.
<div id="readmore" style="display:none">
<h3>Introduction to Equinox</h3>
...
<button class="button" omclick="readMore();">« Back</button>
</p>
</div>
onclick 이벤트가 발생하면 호출되는 자바 스크립트 함수의 정의는 맨 아래 있네요.
<script type="text/javascript">
function readMore() {
var main = document.getElementById("main");
var more = document.getElementById("readmore");
if (main.style.display == "") {
main.style.display = "none";
more.style.display = "";
} else {
more.style.display = "none";
main.style.display = "";
}
}
</script>
엘리먼트(태그죠)의 id 값이 main인 엘리먼트 객체를 얻고, readmore인 엘리먼트 객체를 각각 얻구요. 그 중에서 main인 엘리먼트(id는 div 태그에만 있어서 결국 div 태그를 말하죠)의 style 속성의 display 값이 아무것도 없으면 none으로 설정하고, readmore 라는 id를 같는 div 태그의 style 속성의 display 값을 아무것도 없는 것으로 설정합니다. 그렇지 않은 경우는 반대로 하구요.
이것은 결국 두 개의 div 태그가 번갈아 보여지는 효과가 나죠. 자바 스크립트 강좌는 아니기 때문에 이건 여기까지 하죠. 저도 자바 스크립트는 약해서.. ^^;
<content tag="underground">
이런 태그도 있었네요.. 별다른 효과는 없는 것으로 보이는데..ㅡㅡ;
아무튼 여기까진 전부 HTML/JS 관련된 것이고, 실제로 자바 웹프로그래밍이나 Spring에 관련된 부분은 바로 이거죠.
<button class="button" omclick="location.href='users.html'">View Demonstration</button>
users.html 이라는 GET 요청을 발생하게 되는 부분이죠.
---------------------------------------------------------------------------------------
<%@ include file="/taglibs.jsp"%>
<title><fmt:message key="index.title"/></title>
<div id="main">
<h3>Welcome to Equinox!</h3>
<p>
<b>Equinox</b> is a lightweight version of <a href="http://raibledesigns.com/appfuse">AppFuse</a>.
I was inspired to create it while writing <a href="http://springlive.com">spring/ Live</a> and
looking at the <em>struts-blank</em> and <em>webapp-minimal</em>
applications that ship with Struts and Spring, respectively.
These "starter" apps were not robust enough for me, and I wanted
something like AppFuse, only simpler. Much of the documentation for developing
with Equinox can be found in the <a href="http://www.sourcebeat.com/docs/Spring%20Live/Rev_4/Spring%20Live_SampleChapter.pdf">
Spring QuickStart Chapter</a> in Spring Live. If you have issues downloading this
PDF, you might try saving it to your hard drive before opening it.
</p>
<p>
The basic Equinox application shows how to do simple
<acronym title="Create, Retrieve, Update and Delete">CRUD</acronym> on a database table.
To see this feature, click on the button below. <a href="?" omclick="readMore(); return false">Click here</a>
to learn more about Equinox.
</p>
<p>
<button class="button" omclick="location.href='users.html'">View Demonstration</button>
</p>
</div>
<div id="readmore" style="display:none">
<h3>Introduction to Equinox</h3>
<p>
Equinox is designed to show webapp developers how to start
a bare-bones webapp using a <a href="http://www.springframework.org/">
Spring</a>-managed middle-tier backend and <a href=" http://www.hibernate.org/">
Hibernate</a> for persistence. By default, Equinox uses Spring for
its MVC framework, but you can change it to
<a href=" http://struts.apache.org">Struts</a>,
<a href=" http://opensymphony.com/webwork">WebWork</a>,
<a href=" http://jakarta.apache.org/tapestry">Tapestry</a>
or <a href=" http://www.myfaces.org">JSF</a>. Installers are in the "extras" directory.
</p>
<p>
An in-memory <a href=" http://hsqldb.sf.net">HSQL</a> database is used by default.
The database and its tables are created on-the-fly when tests (or the application)
is run. The one issue of using this method is that records disappear every
time the app is started. The nice side effect is that you never write tests
that depend on existing data. If you have issues with records not showing up or
want to use a different database, see <a href=" http://jroller.com/page/raible/20040809#alternate_database_configurations_with_myusers">
these instructions</a>. Since there is no container
configuration required, the application should work with any Servlet 2.4
servlet engine.
</p>
<p>
<button class="button" omclick="readMore();">« Back</button>
</p>
</div>
<content tag="underground">
<h3>Assumptions</h3>
<ul>
<li>It's 2004, no one uses Netscape 4 anymore, or at least
no one does by choice. All HTML will be XHTML compliant,
without a space: i.e. <br/> not <br />.</li>
<li>JSP 2.0 is out, so it will be used to simplify syntax.</li>
<li>Simplicity is more important than configurability.</li>
</ul> <script type="text/javascript">
function readMore() {
var main = document.getElementById("main");
var more = document.getElementById("readmore");
if (main.style.display == "") {
main.style.display = "none";
more.style.display = "";
} else {
more.style.display = "none";
main.style.display = "";
}
}
</script> | 
