jsf学習日記

JSF(Jakarta Server Faces)　←　なにこれ？
JSPとか画面実装関連が楽にできるのか、なるほど。

この状態からスタートしてます。
お知らせ：脳が無事死亡しました
xhtml あかんわ

# DAY 1 (2023/04/04)
eclipseで動的プロジェクト作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/cd44c983-60e5-5f58-188d-af9d6fae05da.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/1031e932-3aff-a145-2f2a-79092a777f10.png)

とりあえずweb.xml デプロイメント記述しの生成しとくか

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/91e6d272-b6be-d0f8-9c26-11da05953794.png)

で、他のサイトを参考にしつつxhtmlを表示させると
変換されてないページが表示されます。あれぇ？
なんでや！と思って知っている人に教えてもらいました。

上の画像に書かれてる　URLマッピングパターン 確認すると
``` /faces/* ```
ふむ

# DAY 2 (2023/04/05)

やっぱ　URLマッピングパターン変更しちゃおう

```web.xml
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
```


```web.xml
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
```

これでURLが
http://localhost:<port>/faces/*.xhtmlから
http://localhost:<port>/*.xhtmlになる
ただ WEB-INF とか META-INF は認識しない

専門学校で習った知識（ガバ記憶）なのでDAY 1で WEB-INF に配置してる
これは草 リソース認識するわけないやん

ついでに Java7 にしとく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/287516c5-759f-c26a-41af-cc025605e2c1.png)


```index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core" 
xmlns:i="http://xmlns.jcp.org/jsf/component"
xmlns:jsf="http://xmlns.jcp.org/jsf" 
xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>トップページ</title>
    </h:head>

    <h:body>
    	#{currentTime}
    </h:body>

</html>
```

```TimeBean.java
package example;

import java.text.SimpleDateFormat;
import java.util.Calendar;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.NoneScoped;

@ManagedBean(name = "currentTime")
@NoneScoped
public class TimeBean {

	private static final long CURRENT_TIME_LONG = System.currentTimeMillis();
	private static final Calendar CURRENT_TIME_CALENDAR = Calendar.getInstance();

	private static final SimpleDateFormat FORMATTER = new SimpleDateFormat("yyyy年MM月dd日 hh時mm分ss秒");

	public long get() {
		return CURRENT_TIME_LONG;
	}

	@Override
	public String toString() {
		return FORMATTER.format(CURRENT_TIME_CALENDAR.getTime());
	}
}

```

http://localhost:8080/TestJSF/index.xhtml にアクセスして
今日の日付表示されればおｋだ

実行確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/bc89f9dc-1231-5ec5-21fe-1edd1f9a5d9f.png)

問題なしだ

```index.xhtml
<html 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core" 
xmlns:i="http://xmlns.jcp.org/jsf/component"
xmlns:jsf="http://xmlns.jcp.org/jsf" 
xmlns:ui="http://java.sun.com/jsf/facelets">
```

こいつ、わからんので明日調べる

# DAY 3(2023/04/10)
途中で判明したことが一つ
実はプログラムは正常に動作していません。
ブラウザの開発者ツールでソースコードを確認したところ
EL式だけ変換されていてjsfのタグ(h:とかi:とか)が無変換で表示されているということ。

原因としては３つあるらしい
* web.xmlの<url-pattern>指定ミス
* URLのアクセスミス
* xmlns:h=とかのURLミス

今回の場合だと、「xmlns:h=とかのURLミス」それとプラスで原因があった。
そりゃお前、マーケットプレイスからJBossToolsインストールしてないからだよ。無事にインストールしたらでけた

正常に動いてる場合だと xhtml から jsf に自動的に変換されるということURLをちゃんと確認しましょう。

おかしいんだよなー。環境 JSF 2.2選んだから一つ目のやつで問題ないだけどな
* http://xmlns.jcp.org/jsf/ 間違い x 
* http://java.sun.com/jsf/ 正しい o

## 参考サイト
* [JSF Facelet タグライブラリのXMLネームスペースについて](https://blog1.mammb.com/entry/2021/01/22/090000)

# DAY 4(2023/04/12)
デザイナーが書くのはhtmlタグなの（多分）。わざわざJSFタグに書き換える作業が必要になるし学習しなくちゃいけない。
とてもつらいらしい。

JacaEE 2.2以降から色々優しくなったんだってよ

```html
<h:inputText/>

<input jsfc="h:inputText"/>
```

jsfcつけないと認識されないらしい注意やね


## 参考サイト
* [ふつうのHTMLを書こう！ イマドキのJSFの書き方 - タグ編](https://qiita.com/koduki/items/5880b425f03d7127cf13)
* [8.9 HTML5-Friendly Markup](https://docs.oracle.com/javaee/7/tutorial/jsf-facelets009.htm)

# DAY 5(2023/04/14)
動的コンテンツ

削除ボタンおしたら行削除
追加ボタンおしたら行末尾追加
保存ボタンおしたらDBとか何かしらに保存

学生時代に考え付いたのがフロントエンドサイドのjsで色々やりとりしてjson形式でデータ送るっていう。
今回バックエンドサイドでやりたいってことで調べた。
なるほど同じページぐるぐる遷移するのか。
結構、回線に負荷がかかるのかな？どうなんだろ。

で作ってボタンぽちぽちして動作の確認をすると
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/819a4dbe-fa02-40f5-362d-ae8552e047d4.png)
![てｓｔ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513458/515f64e7-eeb1-6ffb-4188-5c7b1f6e820f.png)
あぁん♡見事に中身消えた
## で？理由は
immediate=trueのせい
なんか色々処理を吹っ飛ばす、らしいので削除したら動作した。
## 文字化けしたなんで？
１回目は文字化けして２回目以降はしない
オーマン　ひどすぎる
フィルター通せば治るらしい

```EncodingFilter.java
import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

/**
 * Servlet Filter implementation class EncodingFilter
 */
@WebFilter("/*")
public class EncodingFilter implements Filter {

	/* (非 Javadoc)
	 * @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
	 */
	public void init(FilterConfig fConfig) throws ServletException {}
	/* (非 Javadoc)
	 * @see javax.servlet.Filter#destroy()
	 */
	public void destroy() {}

	/* (非 Javadoc)
	 * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)
	 */
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
               request.setCharacterEncoding("UTF-8");
		chain.doFilter(request, response);
	}
}
```

## 参考サイト
* [JSFでループで生成した入力項目をバッキングBeanのプロパティとマッピングする方法](https://qiita.com/opengl-8080/items/781740dc4eb3a3a8e303)
* [「immediate=true イコール 入力チェック回避」ではない](https://qiita.com/nac731/items/fe0525c76c83c39b871c)
* [How to display my application's errors in JSF?](https://stackoverflow.com/questions/315804/how-to-display-my-applications-errors-in-jsf)
* [JSFでの inputText タグの文字化け対処](https://www.nakamuri.info/mw/index.php/JSF%E3%81%A7%E3%81%AE_inputText_%E3%82%BF%E3%82%B0%E3%81%AE%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91%E5%AF%BE%E5%87%A6)