ページの表示権限の設定
今回作成しているArticePageは、BBSの記事の管理を行うためのページです。そのため、管理者権限または開発者権限を持つユーザのみアクセスできるように修正します。
「ArticlePage.java」を以下の通り修正してください。
/**
* ページクラス。
*/
public class ArticlePage extends AdminPage {
/**
* コンストラクタ。
*/
public ArticlePage() {
this.addForm(new ArticleQueryForm());
this.addForm(new ArticleQueryResultForm());
this.addForm(new ArticleEditForm());
}
・・・ 中略 ・・・
}
この修正ではArticlePageの派生元をAdminPageに変更しただけです。AdminPageから派生したページは、管理者と開発者の権限を持ったユーザのみアクセスできるようになっています。メニューから［基本機能/ユーザ管理］を選択し、ユーザレベルが「管理者」のユーザと「ユーザ」のユーザを登録し、それぞれのユーザでログインしてみてください。ArticlePageは、「管理者」または「開発者」の権限を持つユーザでないとメニューに表示されなくなります。また、URLを直接アクセスした場合はエラーになります。このようなユーザ権限のチェックは、ページのアクセス時だけでなく、ページ内に含まれるフォームやフィールドのメソッド呼び出し時にも行われます。
複雑な認証について
AdminPageの認証処理は以下の通りになっています。
/**
* {@inheritDoc}
* 開発者、監理者権限を持つユーザのみ表示可能です。
*/
@Override
public boolean isAuthenticated(final Map<String, Object> params) throws Exception {
return this.checkUserAttribute("userLevel", "admin") || this.checkUserAttribute("userLevel", "developer");
}
このメソッドで、ログインしているユーザのレベルが、「管理者」または「開発者」であれば 認証されていると判定しています。
新たにページクラスを作成し、このメソッドをオーバーライドすれば、複雑な認証を行うことができます。［基本機能／列挙型管理］を確認すると、「役職」と「部署」という属性が登録されています。この属性をユーザに追加することができますが、認証チェックでは使用していません。企業内のシステムで、部署や役職によって使用できるページを制限したい場合、isAuthenticatedメソッドをオーバーライドして、これらの属性をチェックする処理を実装してください。
フレームデザインの変更
ページのフレームデザインは、dataforms.jarの中にあるCSSやHTMLで規定しています。変更するには、これらのファイルをプロジェクト内にエクスポートする必要があります。
［開発ツール/Webリソースエクスポート］を使用すると、dataforms.jarの中に入っているHTMLやCSS、JavaScript等をプロジェクトのWebContent内にエクスポートすることができます。Webアプリケーションでアクセスした場合、dataforms.jar中のファイルから、エクスポートされたファイル優先でブラウザに転送されます。つまり、エクスポートした各種ファイルを修正すると、dataforms.jar中のHTMLやCSS、JavaScriptを修正した場合と同じ効果を得ることができます。
今回は、フレームのデザインに関わるファイルをエクスポートします。ファイル名に“frame/default”という文字列を指定して検索すると、dataforms.jar中に含まれるフレームのデザインを記録したファイルの一覧が表示されます。今回は“/frame/default”以下のファイルを全てチェックし、エクスポートします。
フレームデザインをエクスポートすると、以下のように「WebContent」に“/frame/default”以下のファイルが展開されます。
“/frame/deault”以下には、「Frame.html」「Frame_ja.html」というHTMLファイルが存在します。このファイルでページのフレームデザインを決定しています。日本語版のフレームデザインのソースを以下に示します。
<!DOCTYPE html>
<!--
日本語フレーム
-->
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" href="Frame.css" rel="stylesheet" />
<link type="text/css" href="FrameSP.css" rel="stylesheet" media="screen and (max-width: 767px)"/>
<link type="text/css" href="FramePC.css" rel="stylesheet" media="screen and (min-width: 1025px)"/>
<link type="text/css" href="FrameTB.css" rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)"/>
<title>layout</title>
</head>
<body>
<!-- ヘッダ -->
<div id="headerDiv">
<table>
<tbody>
<tr>
<td class="systemName">
<div id="showMenuButton"></div>
<div id="systemName">システム名称</div>
</td>
<td id="pageName">ページ名称</td>
<td id="loginInfo">
<form id="loginInfoForm"></form>
</td>
</tr>
</tbody>
</table>
</div>
<table id="bodyTable">
<tbody>
<tr>
<td id="leftbarTd">
<!-- 右サイドバー -->
<div id="menuDiv">
<div style="width:100%;text-align:center;">メニュー</div>
<form id="sideMenuForm"></form>
</div>
</td>
<td id="mainTd">
<!-- メイン領域 -->
<div id="mainDiv">
メイン領域
</div>
</td>
</tr>
</tbody>
</table>
<div id="footerDiv">
<div id="dataformsInfo">
dataforms.jar ver. <span id="dataformsVersion"></span>
</div>
</div>
<div id="lockLayer" style="display:none;">
</div>
</body>
</html>
ArticlePage.dfがアクセスされると、「ArticlePage.html」の先頭に、CSSや初期化スクリプトを追加したページをブラウザに送信します。この初期化スクリプトが「Frame_ja.html」の内容を取得し、「ArticlePage.html」中の<div id="mainDiv">...</div>の周りに、「Frame_ja.html」の<div id="mainDiv">...</div>の周りにある要素を展開します。
「フッターに各種リンクを配置したい」「メニューは右端に配置したい」といった要望がある場合、このHTMLを修正することになります。
PCでブラウザのウインドウサイズを変えてみるとわかると思いますが、dataforms.jarの提供しているフレームは、画面のサイズに応じて適したレイアウトになるように設定されています。ArticlePage.dfが出力する、HTMLのCSSの設定は以下の通りです。
<link type="text/css" href="/dataforms/frame/default/Frame.css?t=20170115222417" rel="stylesheet" /> <link type="text/css" href="/dataforms/frame/default/FrameSP.css?t=20160901173042" rel="stylesheet" media="screen and (max-width: 767px)"/> <link type="text/css" href="/dataforms/frame/default/FramePC.css?t=20170420181602" rel="stylesheet" media="screen and (min-width: 1025px)"/> <link type="text/css" href="/dataforms/frame/default/FrameTB.css?t=20160901173042" rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)"/>
全デバイスに共通するスタイルは「Frame.css」に設定されています。スマートフォン、タブレット、PC用のスタイルは、それぞれ「FrameSP.css」「FrameTB.css」「FramePC.css」に記述してあります。
ページのデザインを変更する場合、これらのCSSファイルを適切に修正していきます。例えばボタンのスタイルを変更したい場合、「Frame.css」に以下のスタイルを追加します。
button,
input[type='button'],
input[type='submit'] {
border: 1px solid #15aeec;
background-color: #49c0f0;
border-radius: 4px;
color: #fff;
transition: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
button:hover,
input[type='button']:hover,
input[type='submit']:hover {
border:1px solid #1090c3;
background-color: #1ab0ec;
}
button:active,
input[type='button']:active,
input[type='submit']:active {
background: #1a92c2;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
color: #aaa;
text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
上記の修正の結果、ボタンのスタイルは以下のようになります。
ボタンのスタイルを変更しただけなので、違和感のあるデザインになっています。しかし、この記事で解説したいことではないため、この程度にとどめておきます。デザインに凝りたい方は、ぜひスタイルを変更してみてください。
実際のプロジェクトでも、“/frame”以下のファイルの編集はデザイナーさんにやってもらっています。各ページのHTMLについても修正してもらうケースがありますが、デザイナーさんの作業の中心は “/frame”以下のファイルにしています。dataforms.jarでは、ページのデザインは純粋なHTMLとCSSで行うため、デザイナーさんがシステムのソースファイルを直接編集することが可能になります。このような作業体制が取れれば、システムのロジックの構築が終わった後に、バグを作りかねないデザインの取り込み作業が発生することはなくなります。
複数フレームデザインを切り替える方法について
現在のところフレームのデザインは"/frame/default"の一種類のみですが、「web.xml」にフレームデザインのパスが設定できるようになっています。
<!-- フレームレイアウトのパスを指定します。--> <context-param> <param-name>frame-path</param-name> <param-value>/frame/default</param-value> </context-param>
“/frame/default”に展開されたファイルを別のフォルダにコピーして修正すれば、複数のフレームデザインをアプリケーション内に持たせることができます。複数のフレームデザインを作成すれば、「web.xml」のframe-pathパラメータの設定でフレームデザインを切り替えることができます。この機能を利用すれば、同じアプリケーションでも、運用するサイトによってデザインを変えることができるようになります。
また、PageクラスにはgetPageFramePath()というメソッドがあり、このメソッドをオーバーライドすれば、ページごとにフレームデザインを変更することができます。この機能を利用すれば、ページの種類やユーザの属性によってフレームのデザインを変更することも可能になります。
