10
2015/08/29 Java 女子部 Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 1 『女子部も実践!Java EE ハンズオン』メモ帳アプリケーション ソースコード 梶浦美咲[@Kaji_ichigo](日本オラクル) [Contents] --事前準備-GlassFish ディスクリプタ(memo-app/web/WEB-INF/glassfish-web.xml--ビジネスロジック層/モデル-- DTOMemo クラス)(memo-app/src/java/memo/dto/Memo.java②マネージド Beanmemo-app/src/java/memo/bean/MemoBean.java--プレゼンテーション層/ビュー-- ③トップページ(memo-app/web/index.xhtml④メモ編集ページ(memo-app/web/edit.xhtml--デザイン(CSS-- [参考]memo-app/web/resources/css/style.css 事前準備:GlassFish ディスクリプタ(memo-app/web/WEB-INF/glassfish-web.xml)の編集 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd"> <glassfish-web-app error-url=""> <class-loader delegate="true"/> <jsp-config> <property name="keepgenerated" value="true"> <description>Keep a copy of the generated servlet class' java code.</description> </property> </jsp-config> <parameter-encoding default-charset="UTF-8" /> </glassfish-web-app>

20150829 Java女子部勉強会配付資料

Embed Size (px)

Citation preview

Page 1: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 1

『女子部も実践!Java EEハンズオン』メモ帳アプリケーション ソースコード

梶浦美咲[@Kaji_ichigo](日本オラクル)

[Contents]

--事前準備-—

GlassFishディスクリプタ(memo-app/web/WEB-INF/glassfish-web.xml)

--ビジネスロジック層/モデル--

①DTO(Memoクラス)(memo-app/src/java/memo/dto/Memo.java)

②マネージド Bean(memo-app/src/java/memo/bean/MemoBean.java)

--プレゼンテーション層/ビュー--

③トップページ(memo-app/web/index.xhtml)

④メモ編集ページ(memo-app/web/edit.xhtml)

--デザイン(CSS)--

[参考]memo-app/web/resources/css/style.css

事前準備:GlassFishディスクリプタ(memo-app/web/WEB-INF/glassfish-web.xml)の編集

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN"

"http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd">

<glassfish-web-app error-url="">

<class-loader delegate="true"/>

<jsp-config>

<property name="keepgenerated" value="true">

<description>Keep a copy of the generated servlet class' java code.</description>

</property>

</jsp-config>

<parameter-encoding default-charset="UTF-8" />

</glassfish-web-app>

Page 2: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 2

①DTO(Memoクラス)(memo-app/src/java/memo/dto/Memo.java)

package memo.dto;

import java.io.Serializable;

import java.util.Date;

import java.util.Objects;

import javax.validation.constraints.Size;

public class Memo implements Serializable {

// 入力値の検証

@Size(min = 1, max = 100, message = "タイトルを 1~100文字で入力してください。")

private String title;

private String content;

private Date createTime;

/*

* ***********************************************************

*** 以下自動生成したゲッター・セッター ***************

* ***********************************************************

*/

/**

* @return the title

*/

public String getTitle() {

return title;

}

/**

* @param title the title to set

*/

public void setTitle(String title) {

this.title = title;

}

/**

* @return the content

*/

public String getContent() {

Page 3: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 3

return content;

}

/**

* @param content the content to set

*/

public void setContent(String content) {

this.content = content;

}

/**

* @return the createTime

*/

public Date getCreateTime() {

return createTime;

}

/**

* @param createTime the createTime to set

*/

public void setCreateTime(Date createTime) {

this.createTime = createTime;

}

/*

* *****************************************************************

*** Alt+Insertキー->equals()および hashCode()で自動生成したコード ***

* *****************************************************************

*/

@Override

public int hashCode() {

int hash = 5;

hash = 37 * hash + Objects.hashCode(this.title);

hash = 37 * hash + Objects.hashCode(this.content);

hash = 37 * hash + Objects.hashCode(this.createTime);

return hash;

}

@Override

public boolean equals(Object obj) {

Page 4: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 4

if (obj == null) {

return false;

}

if (getClass() != obj.getClass()) {

return false;

}

final Memo other = (Memo) obj;

if (!Objects.equals(this.title, other.title)) {

return false;

}

if (!Objects.equals(this.content, other.content)) {

return false;

}

if (!Objects.equals(this.createTime, other.createTime)) {

return false;

}

return true;

}

}

Page 5: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 5

②マネージド Bean(memo-app/src/java/memo/bean/MemoBean.java)

package memo.bean;

import memo.dto.Memo;

import java.util.List;

import java.util.Date;

import java.io.Serializable;

import java.util.ArrayList;

import javax.enterprise.context.SessionScoped;

import javax.inject.Named;

@Named(value = "memoBean") // ページからアクセスできるようクラスに名前を付ける

@SessionScoped // このクラスはセッションが有効な間存続する

public class MemoBean implements Serializable {

private List<Memo> memoList; // 全メモ情報リスト

private Memo memo; // 操作中のメモ

public MemoBean() {

}

@PostConstruct // バッキング Beanの初期化処理はこのアノテーションをつけたメソッド内で行う

public void init(){

this.memoList = new ArrayList<>(); // 全メモ情報リストを初期化

}

/**

* メモ新規作成モードでメモ編集ページへ遷移する

* @return 遷移ページ名

*/

public String create() {

memo = new Memo(); // メモを初期化

return "edit?faces-redirect=true"; // edit.xhtmlページに遷移

}

/**

* メモ更新モードでメモ編集ページへ遷移する

* @param memo ページから選択されたメモ

Page 6: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 6

* @return 遷移ページ名

*/

public String edit(Memo memo) {

this.memo = memo; // 操作中のメモにページから選択された編集対象メモを代入

return "edit?faces-redirect=true"; // edit.xhtmlページに遷移

}

/**

* メモを新規登録

* @return 遷移ページ名

*/

public String register() {

memo.setCreateTime(new Date()); // 編集対象メモに作成日時をセット

memoList.add(memo); // 全メモ情報リストに新規メモを登録

return "index?faces-redirect=true"; // index.xhtmlページに遷移

}

/**

* メモを更新

* @return 遷移ページ名

*/

public String update() {

return "index?faces-redirect=true"; // index.xhtmlページに遷移

}

/**

* メモを削除

* @return 遷移ページ名

*/

public String delete() {

memoList.remove(memo); // 操作中のメモを全メモ情報リストから削除

return "index?faces-redirect=true"; // index.xhtmlへ遷移

}

/*

* ***********************************************************

Page 7: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 7

*** 以下自動生成したゲッター・セッター ***************

* ***********************************************************

*/

/**

* @return the memo

*/

public Memo getMemo() {

return memo;

}

/**

* @param memo the memo to set

*/

public void setMemo(Memo memo) {

this.memo = memo;

}

/**

* @return the memoList

*/

public List<Memo> getMemoList() {

return memoList;

}

}

Page 8: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 8

③トップページ(memo-app/web/index.xhtml)

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

<title>メモ一覧</title>

<!--CSSの適用-->

<h:outputStylesheet name="style.css" library="css"/>

</h:head>

<h:body>

<h:form>

<h:commandButton value="新規作成" action="#{memoBean.create()}" styleClass="button"/>

<h2>メモ一覧</h2>

<!--▼ArrayList内のメモ要素をベースにメモ一覧の表を作成(ここから)▼-->

<h:dataTable value="#{memoBean.memoList}" var="memo" cellspacing="0" border="1" rules="all"

headerClass="h1" columnClasses="c1, c2" rowClasses="r1">

<h:column>

<f:facet name="header">

<h:outputText value="タイトル"/>

</f:facet>

<h:commandLink value="#{memo.title}" action="#{memoBean.edit(memo)}"/>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="作成日"/>

</f:facet>

<h:outputText value="#{memo.createTime}">

<!--Date型を String型に変換するコンバータ-->

<f:convertDateTime pattern="yyyy/MM/dd HH:mm:ss" timeZone="Japan"/>

</h:outputText>

</h:column>

</h:dataTable>

<!--▲ArrayList内のメモ要素をベースにメモ一覧の表を作成(ここまで)▲-->

</h:form>

</h:body>

</html>

Page 9: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 9

④メモ編集ページ(memo-app/web/edit.xhtml)

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>

<title>メモ編集</title>

<h:outputStylesheet name="style.css" library="css"/>

</h:head>

<h:body>

<!--rendered属性内、フラグによって新規メモ登録ページ orメモ編集ページを切り替え-->

<h2>

<h:outputText value="新規メモ登録" rendered="#{memoBean.memo.createTime == null}"/>

<h:outputText value="メモ編集" rendered="#{memoBean.memo.createTime != null}"/>

</h2>

<h:form>

<!--▼2×2の表を作成(ここから)▼-->

<h:panelGrid columns="2">

<h:outputLabel value="タイトル" for="title"/><h:inputText value="#{memoBean.memo.title}" id="title"

size="80"/>

<h:outputLabel value=" 内 容 " for="content"/><h:inputTextarea value="#{memoBean.memo.content}"

id="content" cols="90" rows="20"/>

</h:panelGrid>

<!--▲2×2の表を作成(ここまで)▲-->

<h:commandButton value="登録 " action="#{memoBean.register()}" rendered="#{memoBean.memo.createTime ==

null}" styleClass="button"/>

<h:commandButton value=" 更 新 " action="#{memoBean.update()}" rendered="#{memoBean.memo.createTime !=

null}" styleClass="button"/>

<!--onclick属性に確認ダイアログを表示する JavaScriptを記述-->

<h:commandButton value=" 削 除 " action="#{memoBean.delete()}" rendered="#{memoBean.memo.createTime !=

null}" styleClass="button" onclick="return confirm('削除してよろしいですか?')"/>

<h:button value="戻る" outcome="index" styleClass="button"/>

<!--タイトルに対するエラーメッセージ表示位置を指定-->

<h:message for="title"/>

</h:form>

</h:body>

</html>

Page 10: 20150829 Java女子部勉強会配付資料

2015/08/29 Java女子部

Copyright (C) 2015 Misaki Kajiura All Rights Reserved. 10

[参考]memo-app/web/resources/css/style.css

body{

font-family: メイリオ, Osaka;

margin: 20px 20px 20px 20px;

background-color: #FDF0D5;

}

a {

text-decoration: none;

}

.button{

font-family: メイリオ, Osaka;

background-color: #F0544F;

color: #FDF0D5;

border-radius: 4px;

}

.h1{

text-align: center;

background-color: #D81E5B;

color: #FDF0D5;

}

.c1{

width: 300px;

text-align: left;

padding-left: 10px;

}

.c2{

width: 350px;

text-align: left;

padding-left: 10px;

}

.r1{

background-color: #FFFFFF;

margin: 10px 10px 10px 10px;

}