pupustory@

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

에고 얼마만의 포스트인지 모르겠다. 사실 JSF의 <h:dataTable> 와 <h:panelgroup>을 먼저 다루고 해야 하지만 .. 귀찮은 관계로 --; 두가지는 그냥 이 예제를 통해 보도록 하자 --; 간단하게 설명하자면 ..

dataTable
우리가 생각하는 table이다. 단. 좀 더 정형화(?)되어 있다고 보면 될 것이다. 단. table에서 사용하던 rowspan이나 colspan은 사용할 수 없다. 이럴때 JSTL과 혼합하여 <table>를 사용하면 될 것이다.

panelgroup
awt나 swing, swt에서 사용하는 방식의 패널이다. 컴포넌트들의 묶음이라고 생각하면 된다. 경우에 따라 html에 보여지는 메뉴가 바뀌어야 한다면 panelgroup의 보여주는 여부(rendered)의 옵션을 이용하면 그룹으로 통합된 관리가 가능 하다.

faces-config.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <managed-bean> <managed-bean-name>Board</managed-bean-name> <managed-bean-class>pupustory.Board</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <managed-bean> <managed-bean-name>DataList</managed-bean-name> <managed-bean-class>pupustory.DataList</managed-bean-class> <managed-bean-scope>application</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/jsf/board/board.jsp</from-view-id> <navigation-case> <from-outcome>write</from-outcome> <to-view-id>/jsf/board/write.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>view</from-outcome> <to-view-id>/jsf/board/read.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>remove</from-outcome> <to-view-id>/jsf/board/board.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/jsf/board/write.jsp</from-view-id> <navigation-case> <from-outcome>list</from-outcome> <to-view-id>/jsf/board/board.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/jsf/board/read.jsp</from-view-id> <navigation-case> <from-outcome>list</from-outcome> <to-view-id>/jsf/board/board.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
Board.java
package pupustory; import java.util.ArrayList; import java.util.List; import javax.faces.component.UIComponent; import javax.faces.component.html.HtmlInputText; import javax.faces.component.html.HtmlInputTextarea; import javax.faces.context.ExternalContext; import javax.faces.context.FacesContext; import javax.faces.event.ActionEvent; import javax.servlet.http.HttpServletRequest; public class Board { private java.util.List list = new java.util.ArrayList(); private java.util.Map indexMap = new java.util.HashMap(); private BoardBean readRow = null; private HtmlInputText boardTitle = new HtmlInputText(); private HtmlInputTextarea boardBody = new HtmlInputTextarea(); public Board() { this.list = DataList.getList();} public HtmlInputText getBoardTitle() { return boardTitle; } public void setBoardTitle(HtmlInputText boardTitle) { this.boardTitle = boardTitle;} public HtmlInputTextarea getBoardBody() { return boardBody;} public void setBoardBody(HtmlInputTextarea boardBody) { this.boardBody = boardBody;} public int getListSize() { return list.size();} public List getList() { return list;} public BoardBean getReadRow() { return readRow;} public void setReadRow(BoardBean readRow) { this.readRow = readRow;} public void writeAction(ActionEvent event) { String title = (String) boardTitle.getValue(); String body = (String) boardBody.getValue(); BoardBean inputBean = new BoardBean(); inputBean.setTitle(title); inputBean.setBody(body); inputBean.setIndex(getListSize()); DataList.add(inputBean); } public void viewAction(ActionEvent event) { ExternalContext extcon = FacesContext.getCurrentInstance() .getExternalContext(); HttpServletRequest request = (HttpServletRequest) extcon.getRequest(); String idx = request.getParameter("index"); readRow = DataList.get(Integer.parseInt(idx)); readRow.setCount(readRow.getCount() + 1); } }
BoardBean.java
package pupustory; public class BoardBean { private String title; private String body; private int index; private int count; public int getIndex() { return index; } public void setIndex(int index) { this.index = index; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getBody() { return body; } public void setBody(String body) { this.body = body; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } }
DataList.java
package pupustory; public class DataList { private static java.util.List list = new java.util.ArrayList(); private static java.util.Map indexMap = new java.util.HashMap(); public static java.util.List getList() { return list; } public static void setList(java.util.List list) { DataList.list = list; } public static BoardBean get(int index) { int itemIndex = Integer.parseInt(indexMap.get(index + "") + ""); return (BoardBean) DataList.list.get(itemIndex); } public static void add(BoardBean bean) { DataList.list.add(bean); DataList.indexMap.put(bean.getIndex() + "", DataList.list.size() - 1 + ""); } }
board.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> </head> <body> <f:view> <h:form> <h:dataTable value="#{Board.list}" var="data" border="1" rendered="#{Board.listSize > 0}"> <h:column> <f:facet name="header"> <h:outputText value="제목" /> </f:facet> <h:outputText value="#{data.title}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="조회수" /> </f:facet> <h:outputText value="#{data.count}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="보기" /> </f:facet> <h:commandLink value="보기" action="view" actionListener="#{Board.viewAction}"> <f:param name="index" value="#{data.index}" /> </h:commandLink> </h:column> </h:dataTable> <h:outputText value="작성된 글이 없습니다." rendered="#{Board.listSize < 1}" /> <br /> <h:commandButton value="글쓰기" action="write" /> </h:form> </f:view> </body> </html>
read.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> </head> <body> <f:view> <h:form> <h:panelGroup> <h:outputLabel for="title" value="제목" /> <h:outputText id="title" value="#{Board.readRow.title}" /> <br /> <h:outputLabel for="body" value="본문" /> <h:outputText id="body" value="#{Board.readRow.body}" /> </h:panelGroup> <br /> <h:commandButton action="list" value="목록" /> </h:form> </f:view> </body> </html>
write.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> </head> <body> <f:view> <h:form> <h:panelGroup> <h:outputLabel for="title" value="제목" /> <h:inputText id="title" binding="#{Board.boardTitle}" value="" /> <br /> <h:outputLabel for="body" value="본문" /> <h:inputTextarea id="body" binding="#{Board.boardBody}" value="" /> </h:panelGroup> <br /> <h:commandButton value="작성완료" action="list" actionListener="#{Board.writeAction}" /> </h:form> </f:view> </body> </html>

faces-config.xml에선 각 페이지에서의 네비게이션을 설정 하였다. 좀 지저분해 보이는데 .. 아마도 좀 더 쉬운 방법이 찾아보면 있을지도 모르겠다.

사실 db를 사용했으면 편리 했겠지만 간단한 예제를 위해 db사용까지 하는건 오버하는거같아 List를 이용했다.

삭제 기능은 .. 인덱스를 일일이 찾아야 하므로 .. 중간에 삭제되었을때 앞 번호로 밀리는 문제 때문에 구현하지 않았다.

jsf는 asp.net를 대항하기 위해 탄생한걸로 알고 있는데 .. 그래서 이리저리 asp.net를 찾아보니 .. 정말 흡사해 보인다. 꼭 asp.net를 막기 위해 만들어 졌다곤 하지만 .. 그래도 jsf의 철학은 .. 은근히 맘에 들기도 하다.

우리나라에선 잘 사용하지 않지만 awt,swing등의 기존에 application을 개발하던 개발자들이 웹으로 쉽게 넘어올 수도 있을것 같고 잘쓰면(오히려 못쓰면 심각한 독이 될지도 ..) 유지보수나 컴포넌트 재사용 등에 유리할 것이다.

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번엔 다소 복잡해 보이는 컴포넌트를 다뤄보자. 지금까지 다뤘던 컴포넌트들은 html코드로도 단순했다.(뭐 select가 어려운건 아니지만..)

타이틀대로 select관련 컴포넌트들은 정말 쉽게 설계되어 있다. 기본적인 html에 사용되는 option, checkbox, select 등은 각각의 사용법이 틀리지만 JSF에서는 모두 같은 방식으로 사용한다.( 뭐 내부적으로 같은 인터페이스를 구현했겠지..?)

실제 소스코드를 보면 다음과 같다.

select_comp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@page import="javax.faces.component.UICommand"%><html> <head> </head> <body> <f:view> <h:outputText value="단건 체크박스" /> <h:selectBooleanCheckbox id="single" /> <br /> <h:outputText value="다중 체크박스" /> <h:selectManyCheckbox> <f:selectItem itemValue="1" itemLabel="첫번째" /> <f:selectItem itemValue="2" itemLabel="두번째" itemDisabled="true" /> <f:selectItem itemValue="3" itemLabel="세번째" /> <f:selectItem itemValue="4" itemLabel="네번째" /> <f:selectItem itemValue="5" itemLabel="다섯번째" /> </h:selectManyCheckbox> <br /> <h:outputText value="다중 리스트" /> <h:selectManyListbox label="라벨입니다" title="xkdlxmf"> <f:selectItem itemValue="1" itemLabel="첫번째" /> <f:selectItem itemValue="2" itemLabel="두번째" /> <f:selectItem itemValue="3" itemLabel="세번째" itemDisabled="true"/> <f:selectItem itemValue="4" itemLabel="네번째" /> <f:selectItem itemValue="5" itemLabel="다섯번째" /> </h:selectManyListbox> <br /> <h:outputText value="다중 메뉴" /> <h:selectManyMenu> <f:selectItem itemValue="1" itemLabel="첫번째" /> <f:selectItem itemValue="2" itemLabel="두번째" /> <f:selectItem itemValue="3" itemLabel="세번째" itemDisabled="true"/> <f:selectItem itemValue="4" itemLabel="네번째" /> <f:selectItem itemValue="5" itemLabel="다섯번째" /> </h:selectManyMenu> <br /> <h:outputText value="단건 리스트" /> <h:selectOneListbox> <f:selectItem itemValue="1" itemLabel="첫번째" /> <f:selectItem itemValue="2" itemLabel="두번째" /> <f:selectItem itemValue="3" itemLabel="세번째" /> <f:selectItem itemValue="4" itemLabel="네번째" /> <f:selectItem itemValue="5" itemLabel="다섯번째" itemDisabled="true"/> </h:selectOneListbox> <br /> <h:outputText value="단건 메뉴" /> <h:selectOneMenu> <f:selectItem itemValue="1" itemLabel="첫번째" /> <f:selectItem itemValue="2" itemLabel="두번째" /> <f:selectItem itemValue="3" itemLabel="세번째" /> <f:selectItem itemValue="4" itemLabel="네번째" itemDisabled="true"/> <f:selectItem itemValue="5" itemLabel="다섯번째" /> </h:selectOneMenu> <br /> <h:outputText value="라디오버튼" /> <h:selectOneRadio> <f:selectItem itemValue="1" itemLabel="첫번째" itemDisabled="true"/> <f:selectItem itemValue="2" itemLabel="두번째" /> <f:selectItem itemValue="3" itemLabel="세번째" /> <f:selectItem itemValue="4" itemLabel="네번째" /> <f:selectItem itemValue="5" itemLabel="다섯번째" /> </h:selectOneRadio> </f:view> </body> </html>
컴포넌트 이름 자체가 직관적이라 별도의 설명은 피하도록 하겠다. 즉. 속에 들어가는 내용들은 모두 <f:selectItem>으로 통합되어 사용 된다. 해당 아이템을 감싸고 있는 테그가 무엇이냐에 따라 컴포넌트가 달라지게 되는 것이다.

좀 논외의 얘기일지 모르지만.. 필자는 브라우저를 왠만해서 구글 크롬을 이용한다. 그래서 이번 페이지도 .. 구글 크롬을 이용해 테스트 했다. 헌데 위 소스의 '다중 메뉴'부분이 좀 이상했다. '다중 리스트'와 전혀 틀린게 없기 때문이다. size를 정한것도 아닌데 .. 혹시나 해서 파이어폭스로보니 .. 브라우저의 표현에 차이가 있었다.

크롬,파폭

이 이상의 설명은 거의 html설명이 될테니 넘어가겠다. 그럼 이번엔 <f:selectItems />를 이용하는 방법을 살펴보겠다. 우리가 일반적으로 개발을 할때 각각의 아이템들을 표현할때 어떻게 했는가? JSTL을 사용했다면 객체를 foreach를 이용해 돌렸을 것이고, 가장 전통적인 방법으로 스크립틀릿을 이용했다면 <%for (int i=0; i<list.size();i++) {out.print("....);}%>를 이용했을 것이다.

그렇다면 이제 JSF에서 어떻게 사용하는지 살펴보자.
faces-config.xml
<managed-bean> <managed-bean-name>selectBean</managed-bean-name> <managed-bean-class>org.pupustory.bean.SelectBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

select_comp_bind.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@page import="javax.faces.component.UICommand"%><html> <head> </head> <body> <f:view> <h:outputText value="단건 체크박스" /> <h:selectBooleanCheckbox id="single" /> <br /> <h:outputText value="다중 체크박스" /> <h:selectManyCheckbox> <f:selectItems value="#{selectBean.array}" /> </h:selectManyCheckbox> <br /> <h:outputText value="다중 리스트" /> <h:selectManyListbox label="라벨입니다" title="xkdlxmf"> <f:selectItems value="#{selectBean.array}" /> </h:selectManyListbox> <br /> <h:outputText value="다중 메뉴" /> <h:selectManyMenu> <f:selectItems value="#{selectBean.array}" /> </h:selectManyMenu> <br /> <h:outputText value="단건 리스트" /> <h:selectOneListbox> <f:selectItems value="#{selectBean.array}" /> </h:selectOneListbox> <br /> <h:outputText value="단건 메뉴" /> <h:selectOneMenu> <f:selectItems value="#{selectBean.array}" /> </h:selectOneMenu> <br /> <h:outputText value="라디오버튼" /> <h:selectOneRadio> <f:selectItems value="#{selectBean.array}" /> </h:selectOneRadio> </f:view> </body> </html>

SelectBean.java
package org.pupustory.bean; import java.util.List; import javax.faces.model.SelectItem; import javax.faces.model.SelectItemGroup; public class SelectBean { int ITEM_MAX = 5; List<SelectItemGroup> array = new java.util.ArrayList<SelectItemGroup>(); SelectItem[] items; public SelectBean() { items = new SelectItem[ITEM_MAX]; java.util.Random ran = new java.util.Random(); for (int i=0;i<ITEM_MAX;i++) { if (ran.nextBoolean()) { items[i] = new SelectItem(i,i+"번",null,true); } items[i] = new SelectItem(i,i+"번"); } SelectItemGroup group = new SelectItemGroup("타이틀!","",false,items); array.add(group); } public List<SelectItemGroup> getArray() { return array; } public void setArray(List<SelectItemGroup> array) { this.array = array; } }

group로 묶은것을 arrayList에 다시 넣었다. 그렇게 되면 화면엔 각각의 값이 들어가게 된다. 위에 group부분을 여러개 만들어서 List에 넣어도 상관 없다. 그렇게 되면 주루룩 들어가게 되는데 .. '타이틀!'을 통해 하나의 컴포넌트에 주루룩 달리게 할수도 있다. 같은 배열을 2개 그룹으로 별도로 만들고 목록을 추가하면 다음과 같다.


이번엔 직접 컴포넌트를 만들고, 바인딩해 보도록 하겠다. 물론 아이템도 추가해 보겠다.
--
    <h:selectManyListbox binding="#{createSelect.selectMany}" />
    <h:selectOneListbox binding="#{createSelect.selectOne}" />
--
package org.pupustory.select; import javax.faces.component.UISelectItem; import javax.faces.component.UISelectMany; import javax.faces.component.UISelectOne; public class CreateSelect { UISelectMany selectMany = new UISelectMany(); UISelectOne selectOne = new UISelectOne(); public UISelectOne getSelectOne() { selectOne = new UISelectOne(); UISelectItem items = null; for (int i=0;i<10;i++) { items = new UISelectItem(); items.setItemLabel(i+"번이에요"); items.setItemValue(i); selectOne.getChildren().add(items); } return selectOne; } public UISelectMany getSelectMany() { selectMany = new UISelectMany(); UISelectItem items = null; for (int i=0;i<10;i++) { items = new UISelectItem(); items.setItemLabel(i+"번이에요"); items.setItemValue(i); selectMany.getChildren().add(items); } return selectMany; } }

Many와 One는 서로 다른 클레스를 상속받았다. 그리고 UISelectMany, UISelectOne의 경우 Listbox나 checkbox등등의 컴포넌트가 공통적으로 상속받았으므로 다양하게 사용할 수 있다.

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@page import="javax.faces.component.UICommand"%><html> <head> </head> <body> <f:view> <f:loadBundle var="msg" basename="org.pupustory.Messages"/> <h:form> <h:outputText value="outputText" id="outputText"/> <br /> <h:outputLabel value="outputLavel" id="outputLabel"/> <br /> <h:inputHidden value="hidden" id="hidden"/> <br /> <h:graphicImage alt="이미지" url="http://img0.gmodules.com/ig/images/korea/logo.gif" /> <br /> <h:inputText id="text" readonly="false" required="true" value="normal"/> <br /> <h:inputSecret id="password" readonly="false" required="true" value="password"/> <br /> <h:inputTextarea cols="10" rows="10" readonly="true"/> <br /> <h:message for="text"/> <h:message for="password"/> <h:outputFormat value="파라미터 {0}, 파라미터 {1}"> <f:param value="param1" /> <f:param value="param2" /> </h:outputFormat> <br /> <h:outputFormat value="#{msg.message}"> <f:param value="param1" /> <f:param value="param2" /> </h:outputFormat> </h:form> </f:view> </body> </html>
시작부터 코드가 주루룩 나왔다. 이번에 다뤄볼 컴포넌트는 어렵지 않은 부분들이라 .. 그냥 위 코드로 대신 한다.
혹시나 <h:outputText />와 <h:outputLabel />의 차이를 모르는 분을 위해 간단히 설명 하자면 전자는 단순하게 html에 출력하는 부분이고, 후자는 '컴포넌트의 이름'을 의미한다.

예를들어 ID를 입력하는 <h:inputText id="id"/>가 있다고 하자. 일반적으로 <h:outputText />를 쓰게 되면 엄밀히 따져서 ID입력 필드를 설명하는것인지 .. 그냥 출력되는 것인지 알 수 없다. 그래서 사용되는 테그인데 <label>과 같은 역할이다.

label로 되어있고, for=""는 반드시 들어가야 하는 속성인데, label을 클릭하면 for=""로 되어있는 필드로 포커스가 이동되기도 한다.

이번에 처음 다뤄본 내용인데 ..메시지 번들이다. 프로퍼티를 이용해 국제화를 적용할때 자주 사용되는 부분인데 .. 이번엔 파라미터를 이용했다.

프로퍼티를 읽고, 메시지에 파라미터로 문자열을 보내 출력하는 내용인데 .. 반드시 프로퍼티를 사용하지 않아도 무관하다. (직접 작성해도 되니까 ..)

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Html과 Faces에서 사용하는 컴포넌트는 합쳐서 .. 수십가지가 되는데 .. 일일이 레퍼런스를 작성하는건 노가다가 좀 심하기도 하고 .. 어차피 eclipse같은 IDE에선 코드 어시스트를 훌륭하게(!) 제공해 주기 때문에 ..

아주 아주 간단한 예제만 작성하기로 했다 -0-b

먼저 지금까지 사용한 <h:commandButton />은 <input type="button" />과 대응된다는 사실은 시작할때부터 다뤄왔던 부분이다. 이렇듯. 액션이 있는(submit 등) JSF의 컴포넌트는 UICommand를 상속받아 구현되어 있다.

이렇게 구현된 컴포넌트는 2가지가 있는데, 그중 하나가 바로 commandButton과 commandLink이다. commandLink는 <a href="">하이퍼링크</a>와 대응되는 컴포넌트이다.

자세한 속성은 생략하고, 기본골격만 다룬 예제를 살펴보자.
action_comp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@page import="javax.faces.component.UICommand"%><html> <head> <style type="text/css"> .buttonStyle { border: 0; background-color: blue; color: white; } </style> </head> <body> <% UICommand a = new UICommand(); String param = request.getParameter("param"); if (param != null ) { System.out.println("request.getParameter : "+param); } %> <f:view> <h:form> <h:commandButton action="success" value="액션 버튼" type="submit" disabled="false" styleClass="buttonStyle" /> <br /> <h:outputText value="많이 사용해온 버튼입니다." /> <br /> <h:commandLink type="submit" id="link"> <h:outputText value="하이퍼 링크" /> <%-- 파라미터 --%> <f:param name="param" value="value" /> </h:commandLink> <br /> </h:form> </f:view> </body> </html>

구현 코드는 간단하다. commandButton과 commandLink를 이용한 것인데, 뭐 주요 사용하는 속성은 action, type 등이 있을 수 있겠다. html페이지에서 중요한부분중 하나인 CSS부분의 경우엔 HTML그대로 style로 직접 구현해 주거나 styleClass로 구현된 CSS를 불러와 사용해도 무관하다.

commandLink중 흥미로운 부분은 파라미터 부분이다. 해당 링크에 파라미터를 추가해 submit하게 되면, 스크립틀릿 부분에서 파라미터 값이 null이 아닐 경우 콘솔로 출력한다.

이것은 submit할때 JSF가 자바스크립트 코드를 생성해 함께 파라미터로 넘겨주는 코드를 작성한다.
생성된 코드
<input type="hidden" name="j_id_jsp_539682402_1" value="j_id_jsp_539682402_1" /> if(typeof jsfcljs == 'function'){ jsfcljs(document.getElementById('j_id_jsp_539682402_1') ,{'j_id_jsp_539682402_1:link':'j_id_jsp_539682402_1:link','param':'value'} ,'');}return false
(hidden필드를 생성하고 submit할때 값을 설정해서 파라미터를 넘겨준다.)

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이전 포스트에서 다뤄본 validate는 값을 검증하기 위해 사용해 보았다. 이번에 살펴볼 converter는 말 그대로 컨버팅이 되는지 안되는지를 검증 하거나 중간에 임의변환(예를들어 문자열 추가, 삭제, 변경 등)을 수행 한다.

validator에선 시스템에서 요구하는 값이 제대로 들어 왔는지를 검증 한다. 하지만 converter에선 사용자의 입력 값을 보다 편리하게 사용하기 위해 중간에 값을 전환시켜주는 작업을 한다.

따라서 전환이 될때 발생할 수 있는 여러 문제에 대해 예외를 던질 수 있다.

그럼 converter엔 어떤 종류가 있는지 알아보자.

BigDecimalConverter
BigIntegerConverter
ConverterDateTimeConverter
BooleanConverter
ByteConverterCharacter
DoubleConverter
FloatConverter
IntegerConverter
LongConverter
NumberConverter
ShortConverter
converter

기본적으로 제공하는 converter는 오토박싱에 대해 알고 있다면 큰 어려움이 없을듯 하다. 흔히 사용하는 bean에 int타입이라면 IntegerConverter에 의해 변환이 되는데 만약 변환에 문제가 생길 경우(문자열, 혹은 소수점이 있는 경우) ConverterException을 발생 시킨다.

맨 위에 3가지 이텔릭체로 된것은 자동으로 케스팅 하지 않기 때문에 어떠한 형식을 적용 시켜줘야 한다. 예제를 통해 어떤방식으로 사용하는지 알아보자.

ConvertBean.java
package org.pupustory.bean; public class ConvertBean { private int num; private String msg; private java.util.Date dt; private java.util.Date time; // private Integer integ; // // public Integer getInteg() { // return integ; // } // public void setInteg(Integer integ) { // this.integ = integ; // } public java.util.Date getTime() { return time; } public void setTime(java.util.Date time) { this.time = time; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public java.util.Date getDt() { return dt; } public void setDt(java.util.Date dt) { this.dt = dt; } }
faces-config.xml
... <managed-bean> <managed-bean-name>ConvertBean</managed-bean-name> <managed-bean-class>org.pupustory.bean.ConvertBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> ... <navigation-rule> <from-view-id>/jsf/chp06/JSF_Convert.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/jsf/chp06/JSF_Convert_success.jsp</to-view-id> </navigation-case> </navigation-rule> JSF_Convert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:form id="convert"> <br /> <h:outputLabel for="name" value="이름"/> <h:inputText id="name" required="true" requiredMessage="필수 입력 입니다." value="#{ConvertBean.msg}"> </h:inputText> <br /> <h:outputLabel for="age" value="나이" /> <h:inputText id="age" converterMessage="정수만 입력" value="#{ConvertBean.num}"> </h:inputText> <br /> <h:outputLabel for="birth" value="생년월일" /> <h:inputText id="birth" value="#{ConvertBean.dt}" converterMessage="형식이 맞지 않음(yyyy/MM/dd)"> <f:convertDateTime pattern="yyyy/MM/dd" /> </h:inputText> <br /> <h:outputLabel for="time" value="현재시각" /> <h:inputText id="time" value="#{ConvertBean.time}" converterMessage="형식이 맞지 않음(hh:mm:ss)"> <f:convertDateTime pattern="hh:mm:ss" /> </h:inputText> <br /> <h:commandButton value="OK" action="success"/> <br /> <h:messages /> </h:form> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html>
JSF_Convert_success.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <br /> <h:outputText value="나이:"/> <h:outputText value="#{ConvertBean.integ}" /> <br /> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html>

사용법은 validator랑 크게 다를바 없다. 먼저 나이 입력부분에 컨버터를 Integer을 이용했다.(패키지 경로를 보면 알겠지만 결코 java.lang.Integer에 있는 타입이 아니다!) 그리고 뒤에 message는 문제가 발생했을 경우(정확히 컨버팅이 안될때) 발생하는 메시지 이다. validator에서도 같은 방식으로 사용할 수 있다. (프로퍼티를 이용하는 방법은 나중에 자세히 설명 하겠다.)

위에서 설명한대로 날짜형식의 경우엔 자동으로 컨버팅 하지 않는다. 즉. 형식을 우리가 지정해 주어야 한다. 입력할때 입력 타입패턴을 <f:convertDateTime pattern="yyyy/MM/dd"  /> 와같이 지정했으므로 이렇게 입력해야만 한다.

그럼 OK버튼을 눌렀을때 어떤 결과가 나오는지 살펴보자.

ok버튼을 누르게 되면..

만약 형식에 맞지 않다면 우리가 지정한 메시지를 볼 수 있다.

그럼 이제 다른방법으로 converter를 사용하는 방법을 살펴보자. 마찬가지로 인터페이스를 구현해 사용하면 된다. converter는 처음 소개한대로 값을 임의로 변경 가능하다고 했다.

그렇다면 이번엔 사용자의 입력값을 개발자가 원하는데로 맞게 고쳐 사용해 보도록 하겠다.

faces-config.xml
... <converter> <converter-id>myconv</converter-id> <converter-class>org.pupustory.convertor.Convert</converter-class> </converter> ... <navigation-rule> <display-name>jsf/chp06/JSF_MyConvert</display-name> <from-view-id>/jsf/chp06/JSF_MyConvert.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/jsf/chp06/JSF_MyConvert_success.jsp</to-view-id> </navigation-case> </navigation-rule>
JSF_MyConvert.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> </head> <body> <f:view> <h:form id="convert"> <h:outputLabel for="age" value="나이" /> <h:inputText id="age" value="#{ConvertBean.integ}"> <f:converter converterId="myconv"/> </h:inputText> <br /> <h:commandButton value="OK" action="success"/> <br /> <h:messages /> </h:form> </f:view> </body> </html>
JSF_MyConvert_success.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> </head> <body> <f:view> <br /> <h:outputText value="나이:"/> <h:outputText value="#{ConvertBean.integ}" /> <br /> </f:view> </body> </html>
Convert.java
package org.pupustory.convertor; import javax.faces.application.FacesMessage; import javax.faces.component.UIComponent; import javax.faces.convert.Converter; import javax.faces.convert.ConverterException; import javax.faces.context.FacesContext; public class Convert implements Converter{ public Object getAsObject(FacesContext context, UIComponent ui, String obj) { int num = -1; try { num = Integer.parseInt(obj); } catch (NumberFormatException e) { e.printStackTrace(); throw new ConverterException( new FacesMessage("int convertor에서 문제 발생!")); } return Integer.valueOf(num); } public String getAsString(FacesContext context, UIComponent ui, Object obj) { // 값을 문자열로 리턴 .. 사용하지 않습니다. return obj.toString(); } }
ConvertBean.java
private Integer integ; public Integer getInteg() { return integ; } public void setInteg(Integer integ) { this.integ = integ; }

bean에는 Integer타입을 하나 추가했다. 아쉽게도 프리미티브 타입은 지원하지 않는듯 하다. 그도 그럴것이 메소드 구현 자체가 Object를 반환하기 때문에 랩핑을 필요로 하는게 아닌가 싶다.

빈 규약에 어긋날지 모르지만 .. setter에서 래핑타입으로 받아서 값을 설정해주는 방식으로 구현하는것도 좋은 방법이 되지 않을까 싶다.

결과는 다음과 같다.



문자열을 입력할 경우 컨버터에서 문제가 발생한다. (convertor 오타는 너그럽게 넘갑시다 --)

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

JSF_Validation.jsp Validator.java package org.pupustory.validation; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.validator.Validator; import javax.faces.validator.ValidatorException; import javax.faces.application.FacesMessage; public class Valid implements Validator { public void validate(FacesContext con, UIComponent ui, Object obj) throws ValidatorException { if (obj instanceof String) { String value = (String) obj; if ("OK".equals(value)) { // 성공 System.out.println("성공!!!"); } else { // 실패 FacesMessage message = new FacesMessage("validate error","only 'OK' use"); throw new ValidatorException(message); } } } }
faces-config.xml<validator> <validator-id>isOK</validator-id> <validator-class>org.pupustory.validation.Valid</validator-class> <attribute> <attribute-name>message</attribute-name> <attribute-class>java.lang.String</attribute-class> </attribute> </validator>

클레스를 작성하고 faces-config.xml에 등록까지 완료 했다.  위와 같은 형식으로 코드를 작성해 주면 된다. 값의 검증이 정상적으로 이루어 지지 않았을 경우 throw 하면 된다. 문제가 없다면 아무것도 하지 않으면 된다.

위 validate를 TLD로 구현하는 방법은 추후 살펴보도록 하겠다.

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'JSF 라이프사이클' 이라고 구글링을 통해 검색하면 엄청나게 많으 자료를 찾아볼 수 있다. 특히 그림으로 나타낸 흐름을 주루룩 따라가다 보면 손쉽게 이해할 수 있다. <navigation-rule> <display-name>jsf/chp05/JSF_Lifecycle</display-name> <from-view-id>/jsf/chp05/JSF_Lifecycle.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/jsf/chp05/JSF_Lifecycle_success.jsp</to-view-id> </navigation-case> </navigation-rule> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:form id="lifecycle"> <h:outputLabel for="position" value="직급" /> <h:selectOneRadio value="#{LifeCycle.position}" id="position" onchange="submit()" valueChangeListener="#{LifeCycle.processValueChange}" immediate="true"> <f:selectItem itemValue="Sawon" itemLabel="사원" /> <f:selectItem itemValue="Dairi" itemLabel="대리" /> <f:selectItem itemValue="Kwajang" itemLabel="과장" /> <f:selectItem itemValue="Chajang" itemLabel="차장" /> <f:selectItem itemValue="Bujang" itemLabel="부장" /> </h:selectOneRadio> <br /> <h:outputLabel for="name" value="이름" /> <h:inputText id="name" required="true" value="#{LifeCycle.name}" /> <h:message for="name" />  <br /> <h:commandButton value="OK" action="success" immediate="true"/> <br /> </h:form> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:form id="lifecycle"> <h:outputLabel value="직급 "/> <h:outputText id="position" value="#{LifeCycle.position}"/><br /> <h:outputLabel value="이름 "/> <h:outputText id="name" value="#{LifeCycle.name}"/> </h:form> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html>

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Struts와 같은 프레임워크는 MVC패턴을 사용하는데 이번에 알아볼 네비게이터는 액션의 이름에 따라 페이지를 이동하는 방법을 뜻한다.  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:form> <h:outputText value="success ? fail ?" /> <h:inputText id="inputvalue" /> <br /> <h:commandButton value="move success" action="success" /> <h:commandButton value="move fail" action="fail" /> </h:form> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:outputText value="fail!"></h:outputText> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:outputText value="success !" /> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html> <navigation-rule> <display-name>jsf/chp04_navigationJSF</display-name> <from-view-id>/jsf/chp04_navigationJSF.jsp</from-view-id> <navigation-case> <from-outcome>fail</from-outcome> <to-view-id>/jsf/chp04_navigationJSF_fail.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <display-name>jsf/chp04_navigationJSF</display-name> <from-view-id>/jsf/chp04_navigationJSF.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/jsf/chp04_navigationJSF_success.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/jsf/chp04_navigationJSF_success.jsp</to-view-id> <redirect/> </navigation-case>

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

일반적으로 bean에 기본값이 있다면, 그것은 bean에 직접 작성하는 경우가 대부분일듯 하다. JSF에선 친절하게 bean을 내버려 두고 faces-config.xml에서 bean의 초기값을 설정할 수 있는 기능을 제공 한다.

우리가 그냥 사용해 왔던 faces-config.xml의 <managed-bean>을 기억해 보자. 단순히 bean mapping를 적용 하고 컴포넌트에 바인딩 하여 사용해 왔다. 이번엔 bean에 초기값을 설정하는 방법을 구현해 보자. 예제에 사용될 bean은 다음과 같다.

InitBean.java
package org.pupustory.bean; import java.util.List; import java.util.Map; import org.pupustory.bean.HelloJSF; public class InitBean { private String msg = ""; private int value = 0; private List listType = new java.util.ArrayList(); private Map mapType = new java.util.HashMap(); public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public int getValue() { return value; } public void setValue(int value) { this.value = value; } public List getListType() { return listType; } public void setListType(List listType) { this.listType = listType; } public Map getMapType() { return mapType; } public void setMapType(Map mapType) { this.mapType = mapType; } }
faces-config.xml
<managed-bean> <managed-bean-name>actionBean</managed-bean-name> <managed-bean-class>org.pupustory.bean.ActionBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <!-- value setting --> <managed-bean> <managed-bean-name>initBean</managed-bean-name> <managed-bean-class>org.pupustory.bean.InitBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>listType</property-name> <property-class>java.util.ArrayList</property-class> <list-entries> <value-class></value-class> <value>list1</value> <value>list2</value> <value>list3</value> </list-entries> </managed-property> <managed-property> <property-name>mapType</property-name> <property-class>java.util.HashMap</property-class> <map-entries> <key-class></key-class> <value-class></value-class> <map-entry> <key>key</key> <value>key_value!</value> </map-entry> <map-entry> <key>key1</key> <value>key1_value!</value> </map-entry> </map-entries> </managed-property> <managed-property> <property-name>msg</property-name> <property-class>java.lang.String</property-class> <value>pupustory@pupustory.com </value> </managed-property> <managed-property> <property-name>value</property-name> <property-class>int</property-class> <value>27</value> </managed-property> </managed-bean>
chp03_initneanJSF.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> msg : <h:outputText value="#{initBean.msg}" /> <br /> value : <h:outputText value="#{initBean.value}" /> <br /> list : <br /> [ <c:forEach items="${initBean.listType}" var="value"> <p><c:out value="${value}" /></p> </c:forEach> ]<br /> map : <h:outputText value="#{initBean.mapType[\'key1\']}" /> <br /> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html>

faces-config.xml에 bean을 설정할때 기본 값을 설정하도록 한다. 따라서 페이지에서 bean을 생성 후 사용하기 전에 지정한 값으로 설정 한다. 다행히(?) java.util.Map와 java.util.List타입을 별도로 관리 가능 하기 때문에 구현에 큰 어려움이 없다.

덤으로 JSTL를 사용했다. 우리가 지정한 InitBean은 request scope로 지정했으므로 JSTL에서 접근할떄 ${requestScope..} 방식으로 접근하는 것으로 착각할 수 있지만 다행스럽게도 그냥 JSF사용하듯 사용하면 된다. 여기서 JSTL구문은 이전에 포스트한 내용이 있으므로  넘어가도록 하겠다.

Pupustory Dev/JSF

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이전 시간에 살펴본 JSF에 따르면 기본적으로 '컴포넌트 화 하여 서버에서 클라이언트를 제어할 수 있도록'했다고 했다. 그렇다면 이제 기본적으로 컴포넌트를 바인딩 하는 방법과 이벤트 리스너를 반영하는 방법을 살펴 보도록 하자.

이전에 faces-config.xml을 수정해 bean과 html에서 사용하는 테그와 '바인딩'시킨바 있다. 이번엔 직접 html의 text 컴포넌트를 빈에 작성하고 페이지에 바인딩 하는 방법을 살펴 보겠다.
BindingBean.java
package org.pupustory.bean; import javax.faces.component.html.*; public class BindingBean { // String같은 primitive가 아닌 component 생성 private HtmlInputText inputText; // bean 생성시 component를 만들고, 값을 bind로 설정 public BindingBean() { inputText = new HtmlInputText(); inputText.setValue("bind"); } public HtmlInputText getInputText() { return inputText; } public void setInputText(HtmlInputText inputText) { this.inputText = inputText; } }
chp02_bindingJSF.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <html> <head> <link rel="stylesheet" type="text/css" href="http://s1.daumcdn.net/cfs.tistory/v/111130102906/blog/style/menubar.css"/></head> <body> <f:view> <h:form id="myForm"> <h:outputText id="message" value="inputText is component !" /> <br /> <!- component를 바인딩 한다. --> <h:inputText id="bind" binding="#{bindingBean.inputText}" /> <br /> <h:outputText id="isbind" value="#{bindingBean.inputText}" /> </h:form> </f:view> <script charset="utf-8" type="text/javascript" src="http://d1.daumcdn.net/tiara/tracker/tiara.min.js"></script> <script type="text/javascript"> //<!--<![CDATA var __pageTracker = {}; if (typeof __Tiara != "undefined" && typeof __Tiara.__getTracker != "undefined") { __pageTracker = __Tiara.__getTracker(); } else { __pageTracker.__trackPageview = function() {}; __pageTracker.__addParam = function() {}; __pageTracker.__setTitle = function() {}; } __pageTracker.__setTitle("pupustory@ :: JSF 게시판 만들기"); __pageTracker.__addParam("svcdomain","user.tistory.com"); __pageTracker.__addParam("category",""); __pageTracker.__addParam("articleno","237"); __pageTracker.__addParam("date","2009-07-21 11:26:51"); __pageTracker.__addParam("author","pupustory"); __pageTracker.__addParam("length ","11312"); __pageTracker.__addParam("isauthor","N"); __pageTracker.__addParam("ishidden","1"); __pageTracker.__addParam("comments","1"); __pageTracker.__addParam("param1","0"); __pageTracker.__addParam("param2","e"); __pageTracker.__addParam("param3",""); window.setTimeout("try { __pageTracker.__trackPageview(\"http://blog.pupustory.com/category/Dev/JSF\"); } catch(e) {}", 1); //]]>--> </script></body> </html>

faces-config.xml은 이전의 내용과 동일하므로 생략 한다. <h:outputText /> 의 경우 binding를 사용하지 않고 그냥 value를 지정했으므로 hashCode값이 출력된다. 최초 bean을 생성할때 컴포넌트 객체를 생성함과 동시에 값을 'bind'로 설정했으므로 당연히 화면에 보여지는 값은 'bind'로 출력 될 것이다.

이렇듯. 컴포넌트를 이용해 html에 바인딩 함으로 얻어지는 이점음 여럿 있겠지만, 일단 서버에서 작성한 코드로 클라이언트를 제어하는 기능을 한다는 대에 의미가 있지 않나 싶다.

그럼 이번엔 html테그의 이벤트를 작성해 보자. 일반적으로 사용하는 이벤트는 ValueChangedEvent,ActionEvent가 있는데 ActionEvent는 버튼이나 링크를 눌렀을때 이용되고, ValueChangedEvent는 select, option, checkbox 등의 컴포넌트의 값이 변경 되었을때 발생 한다.

이벤트 리스너를 구현하는 방법은 두가지 방법이 있다.

첫째. JSF로 작성한 페이지에 컴포넌트에 직접 이벤트 리스너를 바인딩.
첫번째 방법은 JSF에 작성하는 테그에 직접actionListener에 이벤트 메소드를 바인딩 하는 방법이다. 이때 작성하는 메소드명은 사용자가 임의로 정의할 수 있다.
ActionBean.java

Pupustory Dev/JSF