FrontPage > SAStrutsの覚書 > サンプルアプリ

初期画面

1. スタイルシート作成

  • 「src/main/webapp」へ「css」フォルダを作成する。
  • 作成したフォルダに下記内容で「stylesheet.css」ファイルを作成する。

    stylesheet.css
    @CHARSET "UTF-8";
    BODY {
    	font: normal 10pt "sans-serif";
    	padding: 0px;
    	margin: 0px;
    }
    #table_layout {
    	width: 100%;
    	height: 100%;
    	margin: 0px;
    	border-collapse: collapse;
    }
    #layout_header {
    	padding: 3px;
    	color: #e0e0ff;
    	background-color: LightSlateGray;
    	height: 100px;
    }
    #layout_menu {
    	padding: 0px;
    	vertical-align: top;
    	text-align: left;
    	background-color: white;
    	width: 150px;
    }
    #layout_footer {
    	padding: 3px;
    	background-color: LightSlateGray;
    	height: 20px;
    }
    #layout_content_menu {
    	padding: 3px;
    	vertical-align: top;
    	background-color: #8080ff;
    	height:30px;
    }
    #layout_content {
    	padding: 0px;
    	vertical-align: top;
    	background-color: LightGray;
    }
    TABLE.menu {
    	width: 100%;
    	margin: 0px;
    }
    TD.menu {
    	border: 1px solid black;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	padding-left: 10px;
    	background-color: #f0f0f0;
    }

2. レイアウト

「src/main/webapp/WEB-INF/view/common/layout.jsp」の内容を
以下のように編集する。

layout.jsp

<table id="table_layout">
 <tr>
 	<td id="layout_header" colspan="2">
 		<tiles:insert page="/WEB-INF/view/common/header.jsp" />
 	</td>
 </tr>
 <tr>
   <td id="layout_menu" rowspan="2">
   	<div style="width: 150px;">
   	<tiles:insert page="/WEB-INF/view/common/menu.jsp" />
   	</div>
   </td>
   <td id="layout_content_menu">
   	<tiles:insert attribute="content_menu" />
   </td>
 </tr>
 <tr>
   <td id="layout_content">
   	<tiles:insert attribute="content" />
   </td>
 </tr>
 <tr>
 	<td id="layout_footer" colspan="2" >
 		<tiles:insert page="/WEB-INF/view/common/footer.jsp" />
 	</td>
 </tr>
</table>

3. 画面ヘッダ

「src/main/webapp/WEB-INF/view/common/header.jsp」の内容を適当に編集する。

4. index.jsp

「src/main/webapp/WEB-INF/view/index.jsp」の内容を
以下のように編集する。

index.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<tiles:insert template="/WEB-INF/view/common/layout.jsp" flush="true">
<tiles:put name="content_menu" type="string">
</tiles:put>
<tiles:put name="content" type="string">
	<h1>Hello World!</h1>
</tiles:put>
</tiles:insert>
</body>
</html>

5. 実行

http://localhost:8080/sassample/へアクセス

sassample01.jpg





添付ファイル: filesassample01.jpg 445件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-01-03 (火) 01:00:45 (2752d)