1 JSF JSF JSF MVC 2 We

Transcription

1 II tomoharu/ 1

2 1 JSF JSF JSF MVC 2 Web UI Web guessnumber UI Ant Ant build.xml property task target Ant Ant URL MVC 2 JSF MVC MVC i

3 JSF MVC faces-config.xml JSP JSP JSP f:view h:form h:input id HTML JSP Tomcat faces-config.xml web.xml JSP URL JSP JSP h:commandbutton faces-config.xml JSF Value Binding JavaBeans Managed Bean faces-config.xml JSP Value Binding Value Binding ii

4 6.5.2 Value Binding h:outputtext Value Binding Method Binding Action Method Action Method Method Binding Managed Bean JSP Method Binding Method Binding Action Method Action Method outcome Action Method Method Binding (1) JSP Managed Bean Model JSP h:datatable h:column h:datatable datatable t:datatable t:datascroller Component Binding (2) h:commandlink Component Binding Action Method JSP iii

5 Tomahawk page1.jsp h:panelgrid page2.jsp h:message JSF UI UI guessnumber UI UI JSF JSF JSF (1) (2) (3) (4) (5) (6) iv

6 1 JSF 1.1 Web Web 1.2 JSF JSF (JavaServer Faces) Web Java EoD (Ease of Development) J2SE 5.0 EJB 3.0 JSF EoD JSF Web Java Web Struts JSF Struts Web JSF Web GUI UI Web (2004 ) JSF (JavaServer Faces) 3 (Version 1.0) J2EE 5.0 JSF Sun Microsystems JSF Web Sun Java Studio Creator 1

7 JSF 1.3 JSF JSF MVC 2 Web UI Web MVC 2 Web JSF Struts MVC 2 Web MVC (Model) (View) (Controller) ( 1.1) JSF Web Controller ( FacesServlet Servlet ) View Model UI Web JSF UI Web UI (User Interface Component) GUI Windows Visula Basic Java Swing UI JSF Web JSF UI UI 2

8 1.1: MVC JSF Tomcat JSF Tomcat Web JSF JSTL 1.1 Tomcat JSF JSTL (Java Standard Tag Library) guessnumber JSF guessnumber 3

9 1.2: guessnumber guessnumber Java Duke (0 10) 0 10 Web Tomcat %CATALINA HOME% Solaris Linux Unix 1. JSF samples/jsf-guessnumber %CATALINA HOME%\webapps 4

10 2. Tomcat UI Web 1.3 UI guessnumber wakhok 1.4 5

11 1.3: guessnumber UI 6

12 1.4: 7

13 2 Ant 2.1 Ant Ant Java Ant Jar Ant Java UNIX make Ant make OS make UNIX Write Once, Run Anywhere Java Ant Java make Makefile XML Makefile Makefile make Ant Tomcat Jakarta Project ( ant.apache.org/) 2.2 build.xml Ant XML build.xml jp.ac.wakhok.tomoharu.csv CSVLine.java CSVTokenizer.java Ant jar Javadoc API 8

14 zip src/jp/ac/wakhok/tomoharu/csv build.xml 1: build.xml <?xml version="1.0"?> <project name="csv" default="all" basedir="."> <property name="srcdir" value="src" /> <property name="classdir" value="classes" /> <property name="packagename" value="jp.ac.wakhok.tomoharu.csv" /> <property name="apidocsdir" value="docs/api" /> <target name="init"> <tstamp/> </target> <target name="compile" depends="init"> <mkdir dir="${classdir}" /> <javac srcdir="${srcdir}" destdir="${classdir}" /> </target> <target name="jar" depends="compile"> <jar jarfile="csv.jar" basedir="${classdir}" /> </target> <target name="javadoc" depends="init"> <mkdir dir="${apidocsdir}" /> <javadoc packagenames="jp.ac.wakhok.tomoharu.csv" sourcepath="${srcdir}" destdir="${apidocsdir}" /> </target> <target name="all" depends="jar, javadoc"> <zip zipfile="../csv.zip" basedir=".." includes="csv/**" excludes="**/classes/**" /> </target> </project> build.xml project project target target task 9

15 2.2.1 property project property property srcdir property ${srcdir} task task Ant task task javac jar javadoc mkdir zip tstamp Java tstamp DSTAMP, TSTAMP, TODAY CVS task javac task <javac srcdir="${srcdir}" destdir="${classdir}" /> javac srcdir destdir 10

16 2.2.3 target target task compile name target mkdir task javac task target target compile init init compile task Ant target target Ant Windows Unix *.java?.java.java a.java a.xml b.java * 0? 1 includes="csv/**" ** csv 2.3 Ant Ant JAVA HOME Java 2 SDK ANT HOME Ant ANT HOME bin Ant Windows c:\ant 11

17 set ANT_HOME=c:\ant set JAVA_HOME=c:\j2sdk1.4.2 set PATH=%PATH%;%ANT_HOME%\bin 2.4 Ant ant build.xml ( ) C:\> ant ant target target project default all target <project name="csv" default="all" basedir=".">... </project> target C:\> ant javadoc target 2.5 build.xml build.xml jar <?xml version="1.0"?> <project name="google Web API Sample" default="compile" basedir="."> <property environment="env"/> <property name="jaxrpc.home" value="${env.jwsdp_home}/jaxrpc"/> <property name="jaxp.home" value="${env.jwsdp_home}/jaxp"/> 12

18 <property name="jaxr.home" value="${env.jwsdp_home}/jaxr"/> <property name="saaj.home" value="${env.jwsdp_home}/saaj"/> <property name="jaxb.home" value="${env.jwsdp_home}/jaxb"/> <property name="shared.lib" value="${env.jwsdp_home}/jwsdp-shared/lib"/> <property name="common.lib" value="${env.jwsdp_home}/common/lib"/> <property name="common.endorsed" \ value="${env.jwsdp_home}/common/endorsed"/> <path id="wspack.classpath"> <!-- JAXRPC jars --> <pathelement location="${jaxrpc.home}/lib/jaxrpc-api.jar"/> <pathelement location="${jaxrpc.home}/lib/jaxrpc-impl.jar"/> <pathelement location="${jaxrpc.home}/lib/jaxrpc-spi.jar"/> <!-- JAXP jars --> <pathelement location="${jaxp.home}/lib/jaxp-api.jar"/> <pathelement location="${jaxp.home}/lib/endorsed/xercesimpl.jar"/> <pathelement location="${jaxp.home}/lib/endorsed/sax.jar"/> <pathelement location="${jaxp.home}/lib/endorsed/dom.jar"/> <pathelement location="${jaxp.home}/lib/endorsed/xalan.jar"/> <!-- JAXR jars --> <pathelement location="${jaxr.home}/lib/jaxr-api.jar"/> <pathelement location="${jaxr.home}/lib/jaxr-impl.jar"/> <!-- SAAJ jars --> <pathelement location="${saaj.home}/lib/saaj-api.jar"/> <pathelement location="${saaj.home}/lib/saaj-impl.jar"/> <!-- JAXB jars --> <pathelement location="${jaxb.home}/lib/jaxb-api.jar"/> <pathelement location="${jaxb.home}/lib/jaxb-impl.jar"/> <pathelement location="${jaxb.home}/lib/jaxb-xjc.jar"/> <pathelement location="${jaxb.home}/lib/jaxb-libs.jar"/> <!-- Common jars --> <pathelement location="${shared.lib}/activation.jar"/> <pathelement location="${shared.lib}/mail.jar"/> <pathelement location="${shared.lib}/commons-logging.jar"/> <pathelement location="${shared.lib}/jax-qname.jar"/> <pathelement location="${shared.lib}/xsdlib.jar"/> <pathelement location="${shared.lib}/relaxngdatatype.jar"/> <pathelement location="${shared.lib}/namespace.jar"/> <!-- Servlet jar --> <pathelement location="${jwsdp.home}/common/lib/servlet-api.jar"/> <!-- current directory --> <pathelement location="."/> </path> <target name="init"> <tstamp/> </target> <target name="compile" depends="init"> <javac srcdir="."> 13

19 <include name="*.java" /> <classpath> <path refid="wspack.classpath"/> </classpath> </javac> </target> <target name="run" depends="compile"> <java classname="googlesearch" > <arg value="wakhok"/> <classpath> <path refid="wspack.classpath"/> </classpath> </java> </target> </project> property env <property environment="env"/> property value ${env.jwsdp HOME} env JWSDP HOME JWSDP HOME /jaxrpc jaxrpc.home <property name="jaxrpc.home" value="${env.jwsdp_home}/jaxrpc"/> jar wspack.classpath id <path id="wspack.classpath"> <!-- JAXRPC jars --> <pathelement location="${jaxrpc.home}/lib/jaxrpc-api.jar"/> <pathelement location="${jaxrpc.home}/lib/jaxrpc-impl.jar"/>... </path> path wspack.classpath 14

20 <target name="compile" depends="init"> <javac srcdir="."> <include name="*.java" /> <classpath> <path refid="wspack.classpath"/> </classpath> </javac> </target> 2.6 URL Apache Ant Ant Apache Ant Ant 15

21 3 MVC 2 JSF 3.1 MVC MVC 2 Model-View-Controller (MVC) (Model) (View) (Controller) ( 3.1) J2EE JavaBeans JSP Servlet J2EE MVC JavaBeans ( ) J2EE JSP Servlet 16

22 3.1: MVC 2 17

23 3.1.5 MVC 2 Web Servlet HTTP JavaBeans Servlet JavaBeans ( Beans ) JSP JSP JavaBeans 3.2 JSF MVC 2 JSF MVC 2 MVC 2 JSF View Controller JSF FacesServlet Servlet Web FacesServlet JSP JSP UI HTML Value Binding Method Binding JavaBeans Value Binding JavaBeans HTML Managed Bean ( Backing Bean) JavaBeans Managed Bean 18

24 3.2.5 faces-config.xml JSF faces-config.xml Managed Bean 19

25 4 JSP 4.1 JSP JSP JSF JSP UI JSP JSP 2: test.jsp page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title>jsf: JSP </title> </head> <body> <h1>jsf: JSP </h1> <f:view> <h:form id="searchform"> <p>!</p> <h:inputtext id="word" /> </h:form> </f:view> </body> </html> JSP Web

26 4.1: JSP JSF HTML tag HTML h: UI taglib uri=" prefix="h" %> JSF Core tag Core tag HTML f: taglib uri=" prefix="f" %> f:view JSP f:view JSF f:view f:view JSF f: Core Tag 21

27 <f:view> <h:form> </h:form> </f:view> h:form f:view h:form HTML UI HTML form h: HTML Tag <f:view> <h:form> </h:form> </f:view> h:input h:input UI HTML <input type= text > <h:form> <h:inputtext id="word" /> </h:form> id UI id id f:view id JSF id <h:form id="searchform"> <p>!</p> <h:inputtext id="word" /> </h:form> 22

28 4.1.7 HTML JSP Web HTML <form id="searchform" method="post" action="/jsf-test01/jsp/test.jsp; jsessionid=0df696e1084d276d5841af0ee3da9d66" enctype="application/x-www-form-urlencoded"> <p>!</p> <input id="searchform:word" type="text" name="searchform:word" /> <input type="hidden" name="searchform" value="searchform" /> </form> 4.2 JSP Tomcat JSP Tomcat %CATALINA HOME%\webapps Web jsf-test01 jsf-test test.jsp - WEB-INF/ ---- web.xml -- faces-config.xml -- lib/ - commons-beanutils.jar - commons-collections.jar - commons-digester.jar - commons-logging.jar - jsf-api.jar - jsf-impl.jar - jstl.jar - standard.jar 23

29 4.2.2 JSF lib jar WEB-INF\lib commons-beanutils.jar commons-collections.jar commons-digester.jar commons-logging.jar jsf-api.jar jsf-impl.jar JSTL lib jar jstl.jar standard.jar faces-config.xml faces-config.xml faces-config.xml JSF Web <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" " <faces-config> </faces-config> faces-config 24

30 4.2.4 web.xml web.xml <?xml version= 1.0 encoding= UTF-8?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " <web-app> <display-name> JSF: jsp sample </display-name> <description> JSF: jsp sample </description> <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> <load-on-startup> 1 </load-on-startup> </servlet> <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>/jsp/*</url-pattern> </servlet-mapping> </web-app> servlet Controller Servlet javax.faces.webapp.facesservlet load-on-startup (JSF ) Web Servlet JSF Web FacesServlet JSP <url-pattern>/jsp/*</url-pattern> JSP /jsp 25

31 4.2.5 JSP URL Tomcat URL ( URL) jsf-test01 ( URL) JSP FacesServlet 26

32 5 5.1 Web ( 5.1) 5.2 JSP JSP JSP 3: page1.jsp <%@ page contenttype="text/html; charset=shift_jis" %> <%@ taglib uri=" prefix="h" %> <%@ taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title>jsf: </title> </head> <body> <h1>jsf: </h1> <f:view> <h:form id="searchform"> <p> </p> <h:commandbutton id="button1" action="success" value="go!" /> </h:form> </f:view> </body> </html> 27

33 5.1: 28

34 JSP JSP JSF f:view h:form HTML h:commandbutton JSP h:commandbutton HTML UI <h:commandbutton id="button1" action="success" value="go!" /> UI id value Go! 5.1 Go! action outcome Web outcome outcome faces-config.xml faces-config.xml faces-config.xml <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" " <faces-config> <navigation-rule> <from-view-id>/page1.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config> 29

35 faces-config.xml faces-config navigation-rule navigation-rule <navigation-rule> <from-view-id>/page1.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/page2.jsp</to-view-id> </navigation-case> </navigation-rule> from-view-id JSP <from-view-id>/page1.jsp</from-view-id> page1.jsp page1.jsp navigation-case <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/page2.jsp</to-view-id> </navigation-case> from-view-id page1.jsp page1.jsp from-outcome success outcome to-view-id /page2.jsp 5.3 JSF JSF MVC MVC 2 Servlet Servlet JSP JSF faces-config.xml Web 30

36 5.4 (page1.jsp) (h:commandbutton) h:commandbutton outcome success faces-config.xml navigation-rule from-view-id ( ) page1.jsp navigation-case outcome success page2.jsp outcome success page2.jsp JSP 31

37 6 Value Binding JavaBeans JavaBeans JavaBeans Java Bean JavaBeans ISBN Java JavaBeans title title settitle() gettitle() title gettitle title getter public String gettitle() { return this.t; } 32

38 6.1: 33

39 settitle title setter public void settitle(string title) { this.t = title; } setter getter getter get setter set set, get set get setter getter setter = "set" + ( ) getter = "get" + ( ) setter getter set get = ( setter "set" ) = ( getter "get" ) : setter, getter title getter setter gettitle settitle gettitle t settitle t title 34

40 6.3 Managed Bean HTML Managed Bean ( Backing Bean) JavaBeans Managed Bean Managed Bean 4: ParameterBean.java public class ParameterBean { private String word = ""; public void setword(string word) { this.word = word; } } public String getword() { return word; } setword getword Bean word word 6.4 faces-config.xml Managed Bean faces-config.xml faces-config.xml 5: faces-config.xml <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" " <faces-config> <managed-bean> <managed-bean-name>parameterbean</managed-bean-name> <managed-bean-class>parameterbean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> 35

41 <navigation-rule> <from-view-id>/page1.jsp</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config> faces-config.xml navigation-rule managedbean managed-bean <managed-bean> <managed-bean-name>parameterbean</managed-bean-name> <managed-bean-class>parameterbean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> managed-bean-class Managed Bean managed-bean-name Managed Bean ParameterBean managed-bean-scope Managed Bean application Web session request (HTTP ) none faces-config.xml session Managed Bean managed-bean-scope JSP usebean 36

42 6.5 JSP Value Binding Value Binding JSP 6: page1.jsp page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title>jsf: </title> </head> <body> <h1>jsf: </h1> <f:view> <h:form id="searchform"> <h:inputtext id="word" value="#{parameterbean.word}" /> <h:commandbutton id="button1" action="success" value="go!" /> </h:form> </f:view> </body> </html> h:inputtext UI value #{ParameterBean.word} h:inputtext #{ParameterBean.word} ParameterBean word Value Binding #{ } Value Binding Value Binding Value Binding #{ Bean. } 37

43 Bean managed-bean-name Managed Bean JSP #{ParameterBean.word} Value Binding ParameterBean JavaBeans word h:outputtext page2.jsp JSP 7: page2.jsp page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title>jsf: </title> </head> <body> <h1>jsf: </h1> <f:view> <h:form id="searchform"> <h:outputtext id="word" value="#{parameterbean.word}" /> </h:form> </f:view> </body> </html> h:outputtext <h:outputtext id="word" value="#{parameterbean.word}" /> h:outputtext value UI UI id h:inputtext value Value Binding ParameterBean word 38

44 6.6 Value Binding h:inputtext Value Binding ParameterBean word ParameterBean faces-config.xml session ParameterBean faces-config.xml h:outputtext Value Binding ParameterBean word 6.2 ManagedBean JSP 39

45 W P P W l e b ブラウザ側 e b コンテナ側 page1.jsp P a r a m e t e r B e a n ( P a r a m e t e r B e a n. c l a s s ) w o r d プロパティ < s > w a k h o k < / s > < h : i n p u t T e x t i d = " w o r d " v a l u e = " # { P a r a m e t e r B e a n. w o r d } " / > # { P a r a m e t e r B e a n. w o r d } page2.jsp < f a c e s # c o n f i g > < m a n a g e d # b e a n > < m a n a g e d # b e a n # n a m e > a r a m e t e r B e a n < / m a n a g e d # b e a n # n a m e > < m a n a g e d # b e a n # c l a s s > a r a m e t e r B e a n < h : o u t p u t T e x t i d = " w o r d " v a l u e = " # { P a r a m e t e r B e a n. w o r d } " / > f a c e s C c o n fi g. x m < / m a n a g e d # b e a n # c l a s s > < m a n a g e d # b e a n # s c o p e > s e s s i o n < / m a n a g e d # b e a n # s c o p e > < / m a n a g e d # b e a n > < / f a c e s # c o n f i g > 6.2: ManagedBean JSP 40

46 7 Method Binding 7.1 Web Web Managed Bean faces-config.xml JSP Value Binding Managed Bean 7.2 Action Method 7.1 JSF Action Method Action Method Managed Bean 7.3 Action Method Method Binding Managed Bean Managed Bean 8: ParameterBean.java import java.util.date; import java.text.dateformat; public class ParameterBean { private String word = ""; public void setword(string word) { 41

47 7.1: 42

48 } this.word = word; public String getword() { return word; } public String currenttime() { Date d = new Date(); DateFormat df = DateFormat.getDateTimeInstance(); StringBuffer sb = new StringBuffer(); sb.append(" "); sb.append(word); sb.append(" \n"); sb.append(" "); sb.append(df.format(d)); sb.append(" "); word = new String(sb); } } return "success"; Managed Bean currenttime Action Method currenttime success JSP Method Binding JSP 9: page1.jsp <%@ page contenttype="text/html; charset=shift_jis" %> <%@ taglib uri=" prefix="h" %> <%@ taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title>jsf: </title> </head> <body> 43

49 <h1>jsf: </h1> <f:view> <h:form id="searchform"> <h:inputtext id="word" value="#{parameterbean.word}" /> <h:commandbutton id="button1" action="#{parameterbean.currenttime}" value="go!" /> </h:form> </f:view> </body> </html> h:commandbutton action <h:commandbutton id="button1" action="#{parameterbean.currenttime}" value="go!" /> action #{ParameterBean.currentTime} h:commandbutton action ( action ) <h:commandbutton id="button1" action="success" value="go!" /> ( action ) <h:commandbutton id="button1" action="#{parameterbean.currenttime}" value="go!" /> action success Value Binding #{ParameterBean.currentTime} ParameterBean currenttime Method Binding #{ } Method Binding Method Binding Method Binding #{ Bean. Action Method } Bean managed-bean-name Action Method Action Method 44

50 7.3.4 Action Method Action Method public String outcome currenttime Action Method outcome Action Method outcome outcome h:commandbutton action faces-config.xml h:commandbutton <h:commandbutton id="button1" action="#{parameterbean.currenttime}" value="go!" /> currenttime Action Method <h:commandbutton id="button1" action="success" value="go!" /> Action Method outcome Action Method Method Binding Action Method Method Binding commandbutton #{ Bean. Action Method } Method Binding Action Method Action Method String outcome outcome faces-config.xml outcome Action Method 45

51 7.2: 7.4 (1) HSQLDB Action Method Action Method JDBC JSP 10: search.jsp page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title> </title> </head> <body> <h1> </h1> 46

52 7.3: 47

53 <hr /> <f:view> <h:form id="searchform"> <h:inputtext id="searchword" value="#{booksearcher.word}" /> <h:commandbutton id="submit" action="#{booksearcher.searchbooks}" value="go!" /> </h:form> </f:view> </body> </html> h:input Value Binding h:commandbutton Method Binding Managed Bean Managed Bean 11: BookSearcher.java import java.util.list; import java.util.arraylist; import java.sql.*; import javax.sql.*; import javax.faces.context.facescontext; import javax.faces.el.valuebinding; public class BookSearcher { private String word = ""; private String id = ""; private List<BookData> list = null; private BookData book = null; public void setword(string word) { this.word = word; } public String getword() { return word; } public List<BookData> getbooklist() { return list; } 48

54 public BookData getbookdata() { return book; } public String searchbooks() { searchbooks(word); return "success"; } private void searchbooks(string word) { list = new ArrayList<BookData>(); try { Class.forName("org.hsqldb.jdbcDriver"); String url = "jdbc:hsqldb:hsql://localhost"; Connection con = DriverManager.getConnection(url, "sa", ""); String selectstatement = "select * " + "from books where ndc like? " + "or tyosya_hyouji like? " + "or id like? " + "or title like? " + "or author like? " + "or publisher like? "; PreparedStatement prepstmt = con.preparestatement(selectstatement); prepstmt.setstring(1, appendpercent(word)); prepstmt.setstring(2, appendpercent(word)); prepstmt.setstring(3, appendpercent(word)); prepstmt.setstring(4, appendpercent(word)); prepstmt.setstring(5, appendpercent(word)); prepstmt.setstring(6, appendpercent(word)); ResultSet rs = prepstmt.executequery(); while (rs.next()) { BookData book = new BookData(); book.setndc(rs.getstring("ndc")); book.settyosya_hyouji(rs.getstring("tyosya_hyouji")); book.setid(rs.getstring("id")); book.settitle(rs.getstring("title")); book.setauthor(rs.getstring("author")); book.setpublisher(rs.getstring("publisher")); list.add(book); } prepstmt.close(); } catch (ClassNotFoundException e) { e.printstacktrace(); } catch (SQLException e) { e.printstacktrace(); 49

55 } } private String appendpercent(string from) { StringBuffer to = new StringBuffer(); to.append("%"); to.append(from); to.append("%"); } return new String(to); } setword, getword word booklist, bookdata searchbooks Action Method Action Method searchbooks public String searchbooks() { searchbooks(word); return "success"; } private void searchbooks(string word) { // } Model Model BookData JavaBeans 12: BookData.java import java.io.serializable; public class BookData implements Serializable { private String ndc = ""; private String tyosya_hyouji = ""; private String id = ""; private String title = ""; private String author = ""; private String publisher = ""; 50

56 public String getndc() { return ndc; } public void setndc(string ndc) { this.ndc = ndc; } public String gettyosya_hyouji() { return tyosya_hyouji; } public void settyosya_hyouji(string tyosya_hyouji) { this.tyosya_hyouji = tyosya_hyouji; } public String getid() { return id; } public void setid(string id) { this.id = id; } public String gettitle() { return title; } public void settitle(string title) { this.title = title; } public String getauthor() { return author; } public void setauthor(string author) { this.author = author; } public String getpublisher() { return publisher; } public void setpublisher(string publisher) { this.publisher = publisher; } } 51

57 ndc, tyosya hyouji, title BookData java.util.list BookData List<BookData> list = new ArrayList<BookData>(); BookData book = new BookData(); book.setid(rs.getstring("id")); book.settitle(rs.getstring("title")); book.setauthor(rs.getstring("author")); list.add(book); JSP JSP 13: list.jsp <%@ page contenttype="text/html; charset=shift_jis" %> <%@ taglib uri=" prefix="h" %> <%@ taglib uri=" prefix="f" %> <html> <head> <title> </title> </head> <body> <h1> </h1> <f:view> <h:form id="listform"> <h:datatable id="table" border="1" value="#{booksearcher.booklist}" var="book"> <h:column> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:outputtext id="booktitle" value="#{book.title}"/> </h:column> 52

58 <h:column> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:outputtext id="bookauthor" value="#{book.author}"/> </h:column> </h:datatable> </h:form> </f:view> </body> </html> datatable h:datatable h:datatable (List, ) UI UI id border value Value Binding var value List booklist booklist BookData var book BookData Bean <h:datatable id="table" border="1" value="#{booksearcher.booklist}" var="book"> </h:datatable> h:column h:datatable h:column 7.4 h:datatable UI <h:datatable id="table" border="1" value="#{booksearcher.booklist}" var="book"> <h:column> <f:facet name="header"> <h:outputtext value=" "/> 53

59 7.4: h:column 54

60 </f:facet> <h:outputtext id="booktitle" value="#{book.title}"/> </h:column>... h:column f:facet h:outputtext f:facet UI name header footer <f:facet name="header"> <h:outputtext value=" "/> </f:facet> h:outputtext book (BookData Bean ) title <h:outputtext id="booktitle" value="#{book.title}"/> h:datatable h:datatable h:datatable h:datatable var var JavaBeans List BookData BookData Bean column column 7.5 datatable MyFaces 7.5 t:datatable t:datascroller list.jsp 14: list.jsp 55

61 56

62 page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> taglib uri=" prefix="t" %> <html> <head> <title> </title> </head> <body> <h1> </h1> <f:view> <h:form id="listform"> <h:inputtext id="searchword" value="#{booksearcher.word}" /> <h:commandbutton id="submit" action="#{booksearcher.searchbooks}" value=" " /> <hr /> <t:datatable id="booktable" border="1" rows="10" value="#{booksearcher.booklist}" var="book" > <h:column> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:outputtext id="booktitle" value="#{book.title}" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:outputtext id="bookauthor" value="#{book.author}" /> </h:column> </t:datatable> <t:datascroller id="scroll1" for="booktable" faststep="10" paginator="true" paginatormaxpages="9"> <f:facet name="first"> <h:graphicimage url="images/arrow-first.gif" /> </f:facet> <f:facet name="last"> <h:graphicimage url="images/arrow-last.gif" /> </f:facet> <f:facet name="previous"> <h:graphicimage url="images/arrow-previous.gif" /> </f:facet> <f:facet name="next"> 57

63 <h:graphicimage url="images/arrow-next.gif" /> </f:facet> <f:facet name="fastforward"> <h:graphicimage url="images/arrow-ff.gif" /> </f:facet> <f:facet name="fastrewind"> <h:graphicimage url="images/arrow-fr.gif" /> </f:facet> </t:datascroller> <t:datascroller id="scroll2" for="booktable" pagecountvar="pagecount" pageindexvar="pageindex"> <h:outputformat value="page{0}/{1}"> <f:param value="#{pageindex}" /> <f:param value="#{pagecount}" /> </h:outputformat> </t:datascroller> </h:form> </f:view> </body> </html> t:datatable JSP h:datatable t:datatable t:datatable h:datatable h:datatable datatable (t:datascroller) (t:commandsortheader) <t:datatable id="booktable" row="10" > </t:datatable> t:datatable rows datatable t:datascroller 7.5 t:datascroller Page 1/3 58

64 datascroller 15: datascroller <t:datascroller id="scroll1" for="booktable" faststep="10" paginator="true" paginatormaxpages="9"> <f:facet name="first"> <h:graphicimage url="images/arrow-first.gif" /> </f:facet> <f:facet name="last"> <h:graphicimage url="images/arrow-last.gif" /> </f:facet> <f:facet name="previous"> <h:graphicimage url="images/arrow-previous.gif" /> </f:facet> <f:facet name="next"> <h:graphicimage url="images/arrow-next.gif" /> </f:facet> <f:facet name="fastforward"> <h:graphicimage url="images/arrow-ff.gif" /> </f:facet> <f:facet name="fastrewind"> <h:graphicimage url="images/arrow-fr.gif" /> </f:facet> </t:datascroller> datascroller t:datascroller for datatable id t:datascroller f:facet f:facet f:facet datascroller <t:datascroller id="scroll2" for="booktable" pagecountvar="pagecount" pageindexvar="pageindex"> <h:outputformat value="page{0}/{1}"> <f:param value="#{pageindex}" /> <f:param value="#{pagecount}" /> </h:outputformat> </t:datascroller> datascroller Page 1/3 t:datascroller pagecountvar pageindexvar 59

65 t:datascroller h:outputformat value value="page{0}/{1}" {0} f:param value {1} f:param value pageindex / pagecount 60

66 8 Component Binding 8.1 (2) 8.1 JSF JSP h:datatable JavaBeans 8.3 h:commandlink JSP No.13 JSP 16: list.jsp page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <html> <head> <title> </title> </head> <body> <h1> </h1> 61

67 8.1: 62

68 8.2: 63

69 <f:view> <h:form id="listform"> <h:datatable id="table" border="1" value="#{booksearcher.booklist}" var="book" binding="#{booksearcher.bookdatatable}"> <h:column> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:commandlink id="detail" action="#{booksearcher.searchbookdetail}"> <h:outputtext id="booktitle" value="#{book.title}"/> </h:commandlink> </h:column> <h:column> <f:facet name="header"> <h:outputtext value=" "/> </f:facet> <h:outputtext id="bookauthor" value="#{book.author}"/> </h:column> </h:datatable> </h:form> </f:view> </body> </html> h:outputtext h:commandlink h:commandbutton h:commandlink h:commandlink UI id h:commandbutton action Action Method h:outputtext Action Method outcome faces-config.xml <h:commandlink id="detail" action="#{booksearcher.searchbookdetail}"> <h:outputtext id="booktitle" value="#{book.title}"/> </h:commandlink> 64

70 8.4 Action Method Action Method Action Method h:datatable <h:datatable id="table" border="1" value="#{booksearcher.booklist}" var="book"... </h:datatable> h:datatable java.util.list java.util.iterator, JavaBeans UI JavaBeans h:datatable value h:datatable var book booklist java.util.list BookData h:datatable JavaBeans h:datatable var book BookData JavaBeans 8.5 Component Binding Component Binding Component Binding UI Managed Bean h:datatable Managed Bean BookSearcher.java UIData JSF datatable UIData public UIData getbookdatatable{ }; public void setbookdatatable(uidata d) {}; 65

71 h:datatable binding bookdatatable h:datatable datatable <h:datatable id="table" border="1" value="#{booksearcher.booklist}" var="book" binding="#{booksearcher.bookdatatable}"> 8.6 Action Method 17: BookSearcher.java import java.util.list; import java.util.arraylist; import java.util.map; import java.sql.*; import javax.sql.*; import javax.faces.component.uidata; public class BookSearcher { private UIData bookdatatable; private String word = ""; private String id = ""; private List list = null; private BookData book = null; public void setword(string word) { this.word = word; } public String getword() { return word; } public List getbooklist() { return list; } public BookData getbookdata() { return book; } public void setbookdatatable(uidata data) { 66

72 } bookdatatable = data; public UIData getbookdatatable() { return bookdatatable; } public String searchbooks() { searchbooks(word); return "success"; } public String searchbookdetail() { book = (BookData)bookDataTable.getRowData(); return "detail"; } private void searchbooks(string word) { list = new ArrayList(); try { Class.forName("org.hsqldb.jdbcDriver"); String url = "jdbc:hsqldb:hsql://localhost"; Connection con = DriverManager.getConnection(url, "sa", ""); String selectstatement = "select * " + "from books where ndc like? " + "or tyosya_hyouji like? " + "or id like? " + "or title like? " + "or author like? " + "or publisher like? "; PreparedStatement prepstmt = con.preparestatement(selectstatement); prepstmt.setstring(1, appendpercent(word)); prepstmt.setstring(2, appendpercent(word)); prepstmt.setstring(3, appendpercent(word)); prepstmt.setstring(4, appendpercent(word)); prepstmt.setstring(5, appendpercent(word)); prepstmt.setstring(6, appendpercent(word)); ResultSet rs = prepstmt.executequery(); while (rs.next()) { BookData book = new BookData(); book.setndc(rs.getstring("ndc")); book.settyosya_hyouji(rs.getstring("tyosya_hyouji")); book.setid(rs.getstring("id")); book.settitle(rs.getstring("title")); book.setauthor(rs.getstring("author")); book.setpublisher(rs.getstring("publisher")); 67

73 } list.add(book); } prepstmt.close(); } catch (ClassNotFoundException e) { e.printstacktrace(); } catch (SQLException e) { e.printstacktrace(); } private String appendpercent(string from) { StringBuffer to = new StringBuffer(); to.append("%"); to.append(from); to.append("%"); } } return new String(to); searchbookdetail Action Method Component Binding UIData bookdatatable book public String searchbookdetail() { book = (BookData)bookDataTable.getRowData(); return "detail"; } BookSearcher book book getbookdata bookdata 8.7 JSP JSP 18: detail.jsp <%@ page contenttype="text/html; charset=shift_jis" %> <%@ taglib uri=" prefix="h" %> <%@ taglib uri=" prefix="f" %> 68

74 <html> <head> <title> </title> </head> <body> <h1> </h1> <f:view> <table border="1"> <tr> <td>ndc</td> <td><h:outputtext value="#{booksearcher.bookdata.ndc}" /></td> </tr> <tr> <td> </td> <td><h:outputtext value="#{booksearcher.bookdata.tyosya_hyouji}" /></td> </tr> <tr> <td>id</td> <td><h:outputtext value="#{booksearcher.bookdata.id}" /></td> </tr> <tr> <td> </td> <td><h:outputtext value="#{booksearcher.bookdata.title}" /></td> </tr> <tr> <td> </td> <td><h:outputtext value="#{booksearcher.bookdata.author}" /></td> </tr> <tr> <td> </td> <td><h:outputtext value="#{booksearcher.bookdata.publisher}" /></td> </tr> </table> </f:view> </body> </html> BookSearcher Bean bookdata id 69

75 <li><h:outputtext value="#{booksearcher.bookdata.id}" /> 8.8 h:datatable Action Method Managed Bean h:datatable UIData Component Binding h:datatable h:datatable Component Binding UIData BookData Component Binding Action Method UI UI 70

76 JSF (Reference Implementation) h:inputtext Tomahawk Tomahawk (JSF MyFaces ) 71

77 9.1: ( 9.1) 9.2 ( 9.3) page1.jsp page1.jsp 72

78 図 9.2: バリデータに適合しなかった例 73

79 9.3: ( ) 74

80 19: page1.jsp page contenttype="text/html; charset=shift_jis" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> taglib uri=" prefix="t" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title> </title> </head> <body> <h1> </h1> <f:view> <h:form id="form"> <h:panelgrid columns="3"> <f:facet name="header"> <h:outputtext value=" " /> </f:facet> <h:outputtext value=" ( )" /> <h:inputtext id="name" required="true" value="#{parameterbean.name}" /> <h:message for="name" styleclass="error" /> <h:outputtext value=" (5 )" /> <h:inputsecret id="password" value="#{parameterbean.password}"> <f:validatelength minimum="5" /> </h:inputsecret> <h:message for="password" styleclass="error" /> <h:outputtext value=" (1 10)" /> <h:inputtext id="quantity" value="#{parameterbean.quantity}"> <f:validatelongrange minimum="1" maximum="10"/> </h:inputtext> <h:message for="quantity" styleclass="error" /> <h:outputtext value=" ( )" /> <h:inputtext id=" " required="true" value="#{parameterbean. }"> <t:validate /> </h:inputtext> <h:message for=" " styleclass="error" /> <h:outputtext value=" " /> <h:inputtext id=" 2" required="true" value="#{parameterbean.another }"> <t:validateequal for=" " /> 75

81 </h:inputtext> <h:message for=" 2" styleclass="error" /> <h:outputtext value=" " /> <h:inputtext id="creditcardnumber" value="#{parameterbean.creditcardnumber}"> <t:validatecreditcard /> </h:inputtext> <h:message for="creditcardnumber" styleclass="error" /> <h:outputtext value=" ( : )" /> <h:inputtext id="zipnumber" value="#{parameterbean.zipnumber}"> <t:validateregexpr pattern= \d{3}-\d{4} /> </h:inputtext> <h:message for="zipnumber" styleclass="error" /> </h:panelgrid> <p> <h:commandbutton id="button" action="success" value="go!" /> </p> </h:form> </f:view> </body> </html> h:panelgrid JSP UI h:panelgrid <h:panelgrid columns="3"> <f:facet name="header"> <h:outputtext value=" " /> </f:facet> <h:outputtext... /> <h:inputtext... >... </h:inputtext> <h:message... />... </h:panelgrid> 76

82 f:facet h:datatable h:panelgrid columns UI columns 3 h:panelgrid h:outputtext, h:inputtext, h:message UI UI UI page2.jsp page2.jsp h:panelgrid h:panelgrid border : page2.jsp <%@ page contenttype="text/html; charset=shift_jis" %> <%@ taglib uri=" prefix="h" %> <%@ taglib uri=" prefix="f" %> <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <title> </title> </head> <body> <h1> </h1> <f:view> <h:panelgrid border="1" columns="2"> <h:outputtext value=" " /> <h:outputtext id="name" value="#{parameterbean.name}" /> <h:outputtext value=" " /> <h:outputtext id="password" value="#{parameterbean.password}" /> <h:outputtext value=" " /> <h:outputtext id="quantity" value="#{parameterbean.quantity}" /> <h:outputtext value=" " /> 77

83 <h:outputtext id=" " value="#{parameterbean. }" /> <h:outputtext value=" " /> <h:outputtext id="card" value="#{parameterbean.creditcardnumber}" /> <h:outputtext value=" " /> <h:outputtext id="zip" value="#{parameterbean.zipnumber}" /> </h:panelgrid> <h:form> <h:commandbutton id="button" action="back" value=" " /> </h:form> </f:view> </body> </html> <h:outputtext value=" ( )" /> <h:inputtext id="name" required="true" value="#{parameterbean.name}" /> <h:message for="name" styleclass="error" /> h:inputtext required="true" required true h:inputtext h:inputtext h:message <h:message for="name" styleclass="error" /> 78

84 h:message UI for UI name id h:inputtext styleclass JSP JSP style.css <link href="style.css" type="text/css" rel="stylesheet" /> style.css.error { font-style: italic; color: red; } h:message styleclass error.error styleclass HTML UI <h:outputtext value=" (5 )" /> <h:inputsecret id="password" value="#{parameterbean.password}"> <f:validatelength minimum="5" /> </h:inputsecret> <h:message for="password" styleclass="error" /> h:inputsecret 79

85 f:validatelength 5 f:validatelength password id h:inputtext f:validatelength password id h:inputsecret f:validatelength maximum <f:validatelength maximum="10" /> <h:outputtext value=" (1 10)" /> <h:inputtext id="quantity" value="#{parameterbean.quantity}"> <f:validatelongrange minimum="1" maximum="10"/> </h:inputtext> <h:message for="quantity" styleclass="error" /> f:validatelongrange 1 10 <f:validatelongrange minimum="1" maximum="10"/> h:inputtext Managed Bean quantity Value Binding Managed Bean quantity getter setter public Integer getquantity() { return quantity; } public void setquantity(integer q) { quantity = q; } 80

86 String quantity Integer h:inputtext f:validatelongrange h:inputtext Integer h:inputtext h:outputtext Value Binding Managed Bean Java Integer Date Integer Date h:outputtext t:validate h:inputtext required true h:inputtext <h:outputtext value=" ( )" /> <h:inputtext id=" " required="true" value="#{parameterbean. }"> <t:validate /> </h:inputtext> <h:message for=" " styleclass="error" /> t:validateequal Web t:validateequal id h:inputtext 2 id h:inputtext 81

87 <h:outputtext value=" ( )" /> <h:inputtext id=" " required="true" value="#{parameterbean. }">... </h:inputtext>... <h:outputtext value=" " /> <h:inputtext id=" 2" required="true" value="#{parameterbean.another }"> <t:validateequal for=" " /> </h:inputtext> <h:message for=" 2" styleclass="error" /> t:validateequal 2 id h:inputtext <h:inputtext id=" 2" required="true" value="#{parameterbean.another }"> <t:validateequal for=" " /> </h:inputtext> t:validateequal for h:inputtext id t:validatecreditcard JCB JCB MyFaces Apache Software Foundation Jakarta Project Jakarta Commons t:validatecreditcard Jakarta Commons commons validator commons validator JCB 82

88 <h:outputtext value=" " /> <h:inputtext id="creditcardnumber" value="#{parameterbean.creditcardnumber}"> <t:validatecreditcard /> </h:inputtext> t:validateregexpr pattern \d{3}-\d{4} (0 9 ) - ( ) (0 9 ) <h:outputtext value=" ( : )" /> <h:inputtext id="zipnumber" value="#{parameterbean.zipnumber}"> <t:validateregexpr pattern= \d{3}-\d{4} /> </h:inputtext> JSF 83

89 10 JSF 10.1 UI UI JSF UI JSF JSF JSP JSF Java Java JSF guessnumber UI ( ) JSF Reference Implementation (RI) guessnumber guessnumber UI guessnumber 10.1 JSP JSP JSF <f:view> <h:form id="helloform"> <h:outputtext... /> <h:outputtext... /> <h:graphicimage... /> <h:inputtext... /> <h:commandbutton... /> <h:message... /> </h:form> </f:view> f:view h:form h:outputtext, h:graphicimage, h:inputtext, h:commandbutton, h:message 84

90 10.1: guessnumber JSP 85

91 UIViewRoot UIForm UIOuputText UIOuputText UIInputText UICommandButton UIMessage 10.2: guessnumber UI UI 10.2 JSP UI UI JSP 10.1 UI JSP UI JSP UI UI JSF 86

92 10.1: UI JSP Java JSP UIViewRoot UIForm UIOutputText UIInputText UICommandButton UIMessage f:view h:form h:outputtext h:inputtext h:commandbutton h:message HttpSession HTML hidden web.xml <context-param> <param-name> javax.faces.state_saving_method </param-name> <param-value>client</param-value> </context-param> 10.2 JSF JSF

93 JSF JSF Action Value Change UI 10.3 JSF JSF JSF Web (1) UI (2) UI (3) (4) UI Managed Bean (5) Action Method (6) UI 10.4 guessnumber guessnumber ( ) Duke ( 10.3 ) Web 0 10 Submit Web JSF 88

94 10.3: guessnumber 89

95 (1) Web JSF JSF JSF JSF Web JSF 1. UI 2. (6) JSF JSF 1. UI guessnumber UI (2) UI guessnumber 10.1 h:inputtext 9 UIInput h:commandbutton h:commandlink JSP h:commandbutton immediate true 90

96 (Managed Bean ) <h:commandbutton immediate="true" action="cancel" value=" " /> immediate false (5) immediate false Value Change <h:inputtext immediate="true" value="#{bean.quantity}" /> h:inputtext immediate true Managed Bean 4. Value Change immediate false Value Change (5) immediate false (3) Value Change (6) guessnumber Validator UserNumberBean.validate 91

97 (4) UI Managed Bean (6) Value Binding Managed Bean UI guessnumber h:inputtext Value Binding usernumber Integer Integer usernumber (5) Value Change Action Method guessnumber action faces-config.xml <h:commandbutton id="submit" action="success" value="submit" /> (6) UI (5) (3) (4) 1. 92

98 2. UI 3. Managed Bean UI 4. HTML 5. UI guessnumber 1. h:inputtext action faces-config.xml response.jsp 2. response.jsp Managed Bean response UI 3. UI HTML 93