| Title: Tutorial Webapp |
| |
| |
| |
| <P>Now we'll convert the tutorial that we created to a web application. The web part of it is done in JSP and is intentionally primitive from the UI perspective, to concentrate on Cayenne integration aspect. There may be some specifics depending on the web framework used (JSP, Struts, JSF, Click, WebWork, Tapestry, etc.), still the procedure outlined here is quite universal as it relies on the J2EE servlet specification.</P> |
| |
| <P>A typical Cayenne web application works like this:</P> |
| |
| <UL> |
| <LI>Cayenne files are loaded when an application context is started, using a special servlet filter.</LI> |
| <LI>User requests are intercepted by the filter, and the DataContext is bound to the request thread, so the application can access it easily from anywhere.</LI> |
| <LI>The same DataContext instance is reused within a single user session; different sessions use different DataContexts (and therefore different sets of objects).</LI> |
| </UL> |
| |
| |
| <P>For detailed discussion of web application deployment, check <A href="web-applications.html" title="Web Applications">this page</A>.</P> |
| |
| <P>To run the web application from Eclipse, we will use <A href="http://jettylauncher.sourceforge.net/" class="external-link" rel="nofollow">JettyLauncher plugin</A>. If you are using something else (e.g. a Tomcat plugin) it should probably work as well.</P> |
| |
| <UL> |
| <LI><A href="http://jetty.mortbay.org/" class="external-link" rel="nofollow">Download</A> and unpack Jetty web container (tested version is 5.1.3).</LI> |
| <LI><A href="http://sourceforge.net/project/showfiles.php?group_id=118870" class="external-link" rel="nofollow">Download</A> and unpack JettyLauncher to a local directory. Install it in Eclipse (<TT>"Help > Find and Install"</TT>).</LI> |
| </UL> |
| |
| |
| <UL> |
| <LI>In Eclipse under "cayenne-tutorial" project folder create a new folder called "webapp" and a subfolder called "WEB-INF".</LI> |
| <LI>Under "WEB-INF" create a new file "web.xml". This is a standard web deployment descriptor:</LI> |
| </UL> |
| |
| |
| <P><SPAN class="image-wrap" style=""><IMG src="tutorial-webapp.data/webapp1.jpg" style="border: 0px solid black"></SPAN></P> |
| |
| <P>The following is the contents of <TT>web.xml</TT>. All the DataContext magic described above is achieved by WebApplicationContextFilter.</P> |
| |
| <DIV class="code panel" style="border-width: 1px;"><DIV class="codeHeader panelHeader" style="border-bottom-width: 1px;"><B>web.xml</B></DIV><DIV class="codeContent panelContent"> |
| <PRE class="code-java"><?xml version=<SPAN class="code-quote">"1.0"</SPAN> encoding=<SPAN class="code-quote">"utf-8"</SPAN>?> |
| <!DOCTYPE web-app |
| PUBLIC <SPAN class="code-quote">"-<SPAN class="code-comment">//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"</SPAN> |
| </SPAN> <SPAN class="code-quote">"http:<SPAN class="code-comment">//java.sun.com/dtd/web-app_2_3.dtd"</SPAN>> |
| </SPAN><web-app> |
| <display-name>Cayenne Tutorial</display-name> |
| <filter> |
| <filter-name>CayenneFilter</filter-name> |
| <filter-class>org.objectstyle.cayenne.conf.WebApplicationContextFilter</filter-class> |
| </filter> |
| <filter-mapping> |
| <filter-name>CayenneFilter</filter-name> |
| <url-pattern>/*</url-pattern> |
| </filter-mapping> |
| <welcome-file-list> |
| <welcome-file>index.jsp</welcome-file> |
| </welcome-file-list> |
| </web-app></PRE> |
| </DIV></DIV> |
| |
| <UL> |
| <LI>Create the artist browser page - <TT>webapp/index.jsp</TT> file with the following contents:</LI> |
| </UL> |
| |
| |
| <DIV class="code panel" style="border-width: 1px;"><DIV class="codeHeader panelHeader" style="border-bottom-width: 1px;"><B>webapp/index.jsp</B></DIV><DIV class="codeContent panelContent"> |
| <PRE class="code-java"><%@ page language=<SPAN class="code-quote">"java"</SPAN> contentType=<SPAN class="code-quote">"text/html"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"cayenne.tutorial.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"org.objectstyle.cayenne.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"org.objectstyle.cayenne.query.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"org.objectstyle.cayenne.exp.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"org.objectstyle.cayenne.access.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"java.util.*"</SPAN> %> |
| |
| <% |
| SelectQuery query = <SPAN class="code-keyword">new</SPAN> SelectQuery(Artist.class); |
| query.addOrdering(Artist.NAME_PROPERTY, <SPAN class="code-keyword">true</SPAN>); |
| |
| DataContext context = DataContext.getThreadDataContext(); |
| List artists = context.performQuery(query); |
| %> |
| <html> |
| <head> |
| <title>Main</title> |
| </head> |
| <body> |
| <h2>Artists:</h2> |
| |
| <% <SPAN class="code-keyword">if</SPAN>(artists.isEmpty()) {%> |
| <p>No artists found</p> |
| <% } <SPAN class="code-keyword">else</SPAN> { |
| Iterator it = artists.iterator(); |
| <SPAN class="code-keyword">while</SPAN>(it.hasNext()) { |
| Artist a = (Artist) it.next(); |
| %> |
| <p><a href=<SPAN class="code-quote">"detail.jsp?id=<%=DataObjectUtils.intPKForObject(a)%>"</SPAN>> <%=a.getName()%> </a></p> |
| <% |
| } |
| } %> |
| <hr> |
| <p><a href=<SPAN class="code-quote">"detail.jsp"</SPAN>>Create <SPAN class="code-keyword">new</SPAN> artist...</a></p> |
| </body> |
| </html></PRE> |
| </DIV></DIV> |
| |
| <UL> |
| <LI>Create the artist editor page <TT>webapp/detail.jsp</TT> with the following content:</LI> |
| </UL> |
| |
| |
| <DIV class="code panel" style="border-width: 1px;"><DIV class="codeHeader panelHeader" style="border-bottom-width: 1px;"><B>webapp/detail.jsp</B></DIV><DIV class="codeContent panelContent"> |
| <PRE class="code-java"><%@ page language=<SPAN class="code-quote">"java"</SPAN> contentType=<SPAN class="code-quote">"text/html"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"cayenne.tutorial.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"org.objectstyle.cayenne.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"org.objectstyle.cayenne.access.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"java.util.*"</SPAN> %> |
| <%@ page <SPAN class="code-keyword">import</SPAN>=<SPAN class="code-quote">"java.text.*"</SPAN> %> |
| |
| <% |
| DataContext context = DataContext.getThreadDataContext(); |
| <SPAN class="code-object">String</SPAN> id = request.getParameter(<SPAN class="code-quote">"id"</SPAN>); |
| |
| <SPAN class="code-comment">// find artist <SPAN class="code-keyword">for</SPAN> id |
| </SPAN> Artist artist = <SPAN class="code-keyword">null</SPAN>; |
| <SPAN class="code-keyword">if</SPAN>(id != <SPAN class="code-keyword">null</SPAN> && id.trim().length() > 0) { |
| artist = (Artist) DataObjectUtils.objectForPK(context, Artist.class, <SPAN class="code-object">Integer</SPAN>.parseInt(id)); |
| } |
| |
| <SPAN class="code-keyword">if</SPAN>(<SPAN class="code-quote">"POST"</SPAN>.equals(request.getMethod())) { |
| <SPAN class="code-comment">// <SPAN class="code-keyword">if</SPAN> no id is saved in the hidden field, we are dealing with |
| </SPAN> <SPAN class="code-comment">// create <SPAN class="code-keyword">new</SPAN> artist request |
| </SPAN> <SPAN class="code-keyword">if</SPAN>(artist == <SPAN class="code-keyword">null</SPAN>) { |
| artist = (Artist) context.newObject(Artist.class); |
| } |
| |
| <SPAN class="code-comment">// note that in a real application we would so dome validation ... |
| </SPAN> <SPAN class="code-comment">// here we just hope the input is correct |
| </SPAN> artist.setName(request.getParameter(<SPAN class="code-quote">"name"</SPAN>)); |
| artist.setDateOfBirthString(request.getParameter(<SPAN class="code-quote">"dateOfBirth"</SPAN>)); |
| |
| context.commitChanges(); |
| |
| response.sendRedirect(<SPAN class="code-quote">"index.jsp"</SPAN>); |
| } |
| |
| <SPAN class="code-keyword">if</SPAN>(artist == <SPAN class="code-keyword">null</SPAN>) { |
| <SPAN class="code-comment">// create <SPAN class="code-keyword">transient</SPAN> artist <SPAN class="code-keyword">for</SPAN> the form response rendering |
| </SPAN> artist = <SPAN class="code-keyword">new</SPAN> Artist(); |
| } |
| |
| <SPAN class="code-object">String</SPAN> name = artist.getName() == <SPAN class="code-keyword">null</SPAN> ? "" : artist.getName(); |
| <SPAN class="code-object">String</SPAN> dob = artist.getDateOfBirth() == <SPAN class="code-keyword">null</SPAN> |
| ? <SPAN class="code-quote">"" : <SPAN class="code-keyword">new</SPAN> SimpleDateFormat("</SPAN>yyyyMMdd").format(artist.getDateOfBirth()); |
| %> |
| <html> |
| <head> |
| <title>Artist Details</title> |
| </head> |
| <body> |
| <h2>Artists Details</h2> |
| <form name=<SPAN class="code-quote">"EditArtist"</SPAN> action=<SPAN class="code-quote">"detail.jsp"</SPAN> method=<SPAN class="code-quote">"POST"</SPAN>> |
| <input type=<SPAN class="code-quote">"hidden"</SPAN> name=<SPAN class="code-quote">"id"</SPAN> value=<SPAN class="code-quote">"<%= id != <SPAN class="code-keyword">null</SPAN> ? id : "</SPAN><SPAN class="code-quote">" %>"</SPAN> /> |
| <table border=<SPAN class="code-quote">"0"</SPAN>> |
| <tr> |
| <td>Name:</td> |
| <td><input type=<SPAN class="code-quote">"text"</SPAN> name=<SPAN class="code-quote">"name"</SPAN> value=<SPAN class="code-quote">"<%= name %>"</SPAN>/></td> |
| </tr> |
| <tr> |
| <td>Date of Birth (yyyyMMdd):</td> |
| <td><input type=<SPAN class="code-quote">"text"</SPAN> name=<SPAN class="code-quote">"dateOfBirth"</SPAN> value=<SPAN class="code-quote">"<%= dob %>"</SPAN>/></td> |
| </tr> |
| <tr> |
| <td></td> |
| <td align=<SPAN class="code-quote">"right"</SPAN>><input type=<SPAN class="code-quote">"submit"</SPAN> value=<SPAN class="code-quote">"Save"</SPAN> /></td> |
| </tr> |
| </table> |
| </form> |
| </body> |
| </html></PRE> |
| </DIV></DIV> |
| |
| <UL> |
| <LI>Run the application. Go to "Run > Run..." menu, select "Jetty Web", right click and select "New"</LI> |
| <LI>Make sure project is "cayenne-tutorial", webapp root is "webapp" and Jetty home points to a directory where you unpacked Jetty:</LI> |
| </UL> |
| |
| |
| <P><SPAN class="image-wrap" style=""><IMG src="tutorial-webapp.data/jetty-run.jpg" style="border: 0px solid black"></SPAN></P> |
| |
| <UL> |
| <LI>Click "Apply" and "Run".</LI> |
| <LI>You will see some Cayenne logs, indicating that the filter was loaded and Cayenne is successfully runing in web app.</LI> |
| <LI>Now go to <A href="http://localhost:8080/" class="external-link" rel="nofollow">http://localhost:8080/</A> URL. You should see "No artists found message" in the web browser and the following output in the Eclipse console:</LI> |
| </UL> |
| |
| |
| <DIV class="preformatted panel" style="border-width: 1px;"><DIV class="preformattedContent panelContent"> |
| <PRE>INFO QueryLogger: --- will run 1 query. |
| INFO QueryLogger: Opening connection: jdbc:derby:/Users/andrus/Desktop/testdb;create=true |
| Login: null |
| Password: ******* |
| INFO QueryLogger: +++ Connecting: SUCCESS. |
| INFO QueryLogger: --- transaction started. |
| INFO QueryLogger: Detected and installed adapter: org.objectstyle.cayenne.dba.derby.DerbyAdapter |
| INFO QueryLogger: SELECT t0.DATE_OF_BIRTH, t0.NAME, t0.ID FROM ARTIST t0 ORDER BY t0.NAME - prepared in 32 ms. |
| INFO QueryLogger: === returned 0 rows. - took 461 ms. |
| INFO QueryLogger: +++ transaction committed.</PRE> |
| </DIV></DIV> |
| |
| <UL> |
| <LI>You can click on "Create new artist" link to create artists. Existing artists can be edited by clicking on their name:</LI> |
| </UL> |
| |
| |
| <P><SPAN class="image-wrap" style=""><IMG src="tutorial-webapp.data/artists.jpg" style="border: 0px solid black"></SPAN></P> |
| |
| <P>You are done with the tutorial!</P> |
