サポート > Wagby Developer Network > カスタマイズ事例 > 「お知らせ」モデルの内容を Wadget に表示する。
Wadget のソースコード解説
「お知らせ」機能に対応した Wadget のソースコードは次のとおりです。
<!-- お知らせ (*) -->
<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<!-- 表示最大数を設定します。-->
<c:set var="max_display_num" value="10"/> (*1)
<c:set var="now" value="<%= new java.util.Date() %>"/>
<sql:setDataSource dataSource="jdbc/jfc"/>
<sql:query var="news">
select "newsid","limitdate","title","report" from "news"
where "limitdate" >= ?
<sql:dateParam value="${now}" type="date"/>
order by "limitdate";
</sql:query>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
String css_url = jp.jasminesoft.jfc.JFCUtils.createCssPath(request);
%>
<html>
<head>
<link rel="stylesheet" type="text/css" href ="<%= css_url %>"/>
<style type="text/css">
<!--
.news {
color: #660000;
line-height: 18px;
padding: 2px;
border-color: #CC0033;
border-width: 1px 1px 1px 1px;
border-style: dotted;
background-color: #FFEEEE;
}
--> (*2)
</style>
<title></title>
</head>
<body id="wadget">
<c:set var="length" value="${news.rowCount}"/>
<c:if test="${length > max_display_num}">
<c:set var="length" value="${max_display_num}"/>
</c:if>
<table width="100%" border="0">
<c:forEach var="c" begin="0" end="${(length > 0) ? length - 1 : 0}">
<c:if test="${news.rowsByIndex[c][1] != null}">
<tr>
<td class="news">
<table border="0" style="margin:0px; padding:0px;">
<tr>
<td style="color:#600; font-size:8pt;"> (*3)
<c:out value="${news.rowsByIndex[c][1]}"/>
</td>
</tr>
<tr>
<td style="color:#600; font-size:8pt;"> (*3)
<a href ="/wagby/showNews.do?newsid= (*4)
<c:out value="${news.rowsByIndex[c][0]}"/>"
target="_parent"><c:out value="${news.rowsByIndex[c][2]}"/></a>
</td>
</tr>
<c:if test="${fn:length(news.rowsByIndex[c][3]) > 0}">
<tr>
<td style="color:#600; font-size:7pt;"> (*3)
<c:out value="${fn:substring(news.rowsByIndex[c][3], 0, 10)}"/>
<c:if test="${fn:length(news.rowsByIndex[c][3]) > 10}">
...
</c:if>
</td>
</tr>
</c:if>
</table>
</td>
</tr>
</c:if>
</c:forEach>
</table>
</body>
</html>
- 変数 max_display_num に最大表示数を設定しています。この値を変更することで、表示数を調整することができます。
- <sql:query> 要素で SQL 文を用意しています。取得された値は "news" という変数に格納されます。
- <sql:dateParam> 要素を用いて可変パラメータを設定することができます。日付型なので dateParam を用います。プレースホルダ「?」が必要です。
- 検索結果数は news.rowCount で取得できます。
- 検索結果は news.rowsByIndex で取得できます。
カスタマイズ
この Wadget をカスタマイズすることができます。 カスタマイズしたファイルを $(DEVHOME)/env/webpage/system/wadget フォルダに保存することで、ビルド処理を繰り返しても常にカスタマイズされたコードが有効になります。
同時に表示する件数を変更する
上記ソースコード中の (*1) にある「value="10"」の数値部分を変更してください。
見栄え（文字の大きさ、色など）を変更する
上記ソースコード中の (*2) に記載されている CSS 定義を変更することで、枠線の色や形、ならびに背景色を変更することができます。 また、(*3) に記載されている style 属性の CSS 定義を変更することで、フォントの色や大きさを変更することができます。
「jp.jasminesoft.wagby」以外のパッケージ名に対応させる
上記ソースコード中の (*4) にある「wagby」という表記を、お使いの「プロジェクト名（英語）」に変更してください。
Wadget の詳細については、Wadget の開発をお読みください。
