Author: ochikvina Date: 2008-05-20 05:07:36 -0400 (Tue, 20 May 2008) New Revision: 8203 Modified: trunk/seam/docs/reference/en/modules/crud_database_application.xml Log: http://jira.jboss.com/jira/browse/JBDS-332 - link to database is added and proper info is updated Modified: trunk/seam/docs/reference/en/modules/crud_database_application.xml =================================================================== --- trunk/seam/docs/reference/en/modules/crud_database_application.xml 2008-05-19 23:45:48 UTC (rev 8202) +++ trunk/seam/docs/reference/en/modules/crud_database_application.xml 2008-05-20 09:07:36 UTC (rev 8203) @@ -1,307 +1,483 @@ <?xml version="1.0" encoding="UTF-8"?> -<chapter id="crud_database_application" - xreflabel="crud_database_application"> - <?dbhtml filename="crud_database_application.html"?> - <chapterinfo> - <keywordset> - <keyword>JBoss Developer Studio</keyword> - <keyword>Eclipse</keyword> - <keyword>Java</keyword> - <keyword>CRUD</keyword> - <keyword>Database Application</keyword> - </keywordset> - </chapterinfo> - <title>Generate a CRUD Database Application</title> - <section> - <title>What is CRUD?</title> - <para> - <property>CRUD</property> is an acronym for the four basic types of SQL commands: <emphasis><property>Create</property></emphasis>, <emphasis><property>Read</property></emphasis>, <emphasis><property>Update</property></emphasis>, <emphasis><property>Delete</property></emphasis>. Most applications have some kind of <property>CRUD</property> functionality, and we can assume that every programmer had to deal with <property>CRUD</property> at some point. A <property>CRUD</property> application is one that uses forms to get data into and out of a database. - </para> - <para> - In the next section we will create <link linkend="intro">Seam</link> Web application, connect it to the <ulink url="http://www.postgresql.org/">PostgreSQL</ulink> database and add <property>CRUD</property> support. - </para> - </section> +<chapter id="crud_database_application" xreflabel="crud_database_application"> + <?dbhtml filename="crud_database_application.html"?> + <chapterinfo> + <keywordset> + <keyword>JBoss Developer Studio</keyword> + <keyword>Eclipse</keyword> + <keyword>Java</keyword> + <keyword>CRUD</keyword> + <keyword>Database Application</keyword> + </keywordset> + </chapterinfo> + <title>Generate a CRUD Database Application</title> + <section> + <title>What is CRUD?</title> + <para> + <property>CRUD</property> is an acronym for the four basic types of SQL commands: <emphasis> + <property>Create</property> + </emphasis>, <emphasis> + <property>Read</property> + </emphasis>, <emphasis> + <property>Update</property> + </emphasis>, <emphasis> + <property>Delete</property> + </emphasis>. Most applications have some kind of <property>CRUD</property> + functionality, and we can assume that every programmer had to deal with + <property>CRUD</property> at some point. A <property>CRUD</property> application is one + that uses forms to get data into and out of a database. </para> + <para> In the next section we will create <link linkend="intro">Seam</link> Web application, + connect it to the <ulink url="http://www.hsqldb.org/">HSQL</ulink> database + and add <property>CRUD</property> support. </para> + </section> <section> <title>How to create the CRUD Database Application with Seam</title> - + <itemizedlist> - <listitem><para>Create a new Seam Web Project using New Project wizard or main menu <emphasis><property>File > New > Seam Web Project</property>.</emphasis></para></listitem> + <listitem><para>First, you should <ulink url="http://docs.jboss.org/tools/resources/" + >download</ulink> a database and start it by running <emphasis> + <property>./runDBServer.sh</property></emphasis> or <emphasis> + <property>runDBServer.bat</property></emphasis> + from the database directory.</para></listitem> + <listitem> + <para>Create a new Seam Web Project using New Project wizard or main menu + <emphasis><property>File > New > Seam Web + Project</property>.</emphasis></para> + </listitem> </itemizedlist> <figure> <title>Seam Web Project Creation</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_01.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_01.png" + /> </imageobject> </mediaobject> </figure> - - <itemizedlist> - <listitem> - <para>Name your project as <emphasis><property>crudapp</property></emphasis> and follow the next wizard steps keeping default settings.</para> - <para>Please have a look <link linkend="create_seam">here</link> how to create <emphasis><property>Target Runtime</property></emphasis> and <emphasis><property>Seam Runtime</property></emphasis> in order to get started creating, running, and debugging J2EE applications.</para> - </listitem> - </itemizedlist> + + <itemizedlist> + <listitem> + <para>Name your project as <emphasis> + <property>crudapp</property> + </emphasis> and follow the next wizard steps keeping default settings.</para> + <para>Please have a look <link linkend="create_seam">here</link> how to create <emphasis> + <property>Target Runtime</property> + </emphasis> and <emphasis> + <property>Seam Runtime</property> + </emphasis> in order to get started creating, running, and debugging J2EE + applications.</para> + </listitem> + </itemizedlist> <figure> <title>New Seam Project Wizard</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_02.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_02.png" + /> </imageobject> </mediaobject> </figure> - + <itemizedlist> - <listitem><para>On <emphasis><property>Seam Facet</property></emphasis> page click <emphasis><property>New...</property></emphasis> to create a new <property>Connection profile</property>.</para></listitem> + <listitem> + <para>On <emphasis> + <property>Seam Facet</property> + </emphasis> page click <emphasis> + <property>New...</property> + </emphasis> to create a new <property>Connection profile</property>.</para> + </listitem> </itemizedlist> <figure> <title>Seam Facet page</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_03.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_03.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>On <property>New Connection Profile</property> dialog select the <emphasis><property>PostgreSQL JDBC Connection</property></emphasis> type and click <emphasis><property>Next</property></emphasis>.</para></listitem> + <listitem> + <para>On <property>New Connection Profile</property> dialog select the <emphasis> + <property>HSQLDB Connection Profile</property> + </emphasis> type and click <emphasis> + <property>Next</property> + </emphasis>.</para> + </listitem> </itemizedlist> <figure> <title>New JDBC Connection Profile</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_04.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_04.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Name your profile as <emphasis><property>cruddb</property></emphasis> and press <emphasis><property>Next</property></emphasis>.</para></listitem> + <listitem> + <para>Name your profile as <emphasis> + <property>cruddb</property> + </emphasis> and press <emphasis> + <property>Next</property> + </emphasis>.</para> + </listitem> </itemizedlist> <figure> <title>New JDBC Connection Profile Name</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_05.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_05.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>On the next page click <emphasis><property>...</property></emphasis> to select a database driver.</para></listitem> + <listitem> + <para>On the next page click <emphasis> + <property>...</property> + </emphasis> to select a database driver.</para> + </listitem> </itemizedlist> <figure> <title>New JDBC Connection Profile Database Driver</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_06.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_06.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>On <property>Driver Definitions</property> dialog select the <emphasis><property>PostgreSQL->8.x</property></emphasis> and click <emphasis><property>Add...</property></emphasis>.</para></listitem> + <listitem> + <para>On <property>Driver Definitions</property> dialog select the <emphasis> + <property>Hypersonic DB</property> + </emphasis> and click <emphasis> + <property>Add...</property> + </emphasis>.</para> + </listitem> </itemizedlist> <figure> <title>Driver Definitions List</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_07.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_07.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Set the location of <property>JDBC driver</property> and fill all other necessary fields (<emphasis><property>URL</property></emphasis>, <emphasis><property>Database Name</property></emphasis>, <emphasis><property>Password</property></emphasis>, <emphasis><property>User Id</property></emphasis>) and click <emphasis><property>OK</property></emphasis>.</para></listitem> + <listitem> + <para>Set the location of <property>JDBC driver</property> and fill all other + necessary fields (<emphasis> + <property>URL</property> + </emphasis>, <emphasis> + <property>Database Name</property> + </emphasis>, <emphasis> + <property>Password</property> + </emphasis>, <emphasis> + <property>User Id</property> + </emphasis>) and click <emphasis> + <property>OK</property> + </emphasis>.</para> + </listitem> </itemizedlist> <figure> <title>Edit Driver Definition</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_09.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_09.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Click <emphasis><property>OK</property></emphasis> on the next dialog with newly created driver.</para></listitem> + <listitem> + <para>After clicking <emphasis> + <property>OK</property> + </emphasis> to submit the newly created driver you can observe and if you need edit all specified connection details.</para> + </listitem> </itemizedlist> <figure> <title>Driver Definitions List</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_10.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_10.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Click <emphasis><property>Test Connection</property></emphasis> on the next dialog and observe that connection can be established.</para></listitem> + <listitem> + <para>Now click <emphasis> + <property>Test Connection</property> + </emphasis> to be sure that connection can be + established.</para> + </listitem> </itemizedlist> + <figure> - <title>Test JDBC Connection</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_11.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> <title>JDBC Connection is OK</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_12.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_12.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Validate <emphasis><property>JDBC Connection profile</property></emphasis> settings and press <emphasis><property>Finish</property></emphasis> or <emphasis><property>Back</property></emphasis> if something is wrong.</para></listitem> + <listitem> + <para>Validate <emphasis> + <property>JDBC Connection profile</property> + </emphasis> settings and press <emphasis> + <property>Finish</property> + </emphasis> or <emphasis> + <property>Back</property> + </emphasis> if something is wrong.</para> + </listitem> </itemizedlist> <figure> <title>Validate JDBC Connection settings</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_13.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_13.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> <listitem> - <para>Observe that newly created profile has been selected on <emphasis><property>Seam Facet</property></emphasis> page and click <emphasis><property>Finish</property></emphasis>.</para> - <para>This will create 2 projects - <emphasis><property>crudapp</property></emphasis> and <emphasis><property>crudapp-test</property></emphasis>.</para> + <para>Observe that newly created profile has been selected on <emphasis> + <property>Seam Facet</property> + </emphasis> page and click <emphasis> + <property>Finish</property> + </emphasis>.</para> + <para>This will create 2 projects - <emphasis> + <property>crudapp</property> + </emphasis> and <emphasis> + <property>crudapp-test</property> + </emphasis>.</para> </listitem> </itemizedlist> <figure> <title>Last Step of New Seam Project Wizard</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_14.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_14.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Have a look at the created projects. You can expand <property>WEB_CONTENT</property> folder and open <property>home.xhtml</property> or <property>login.xhtml</property> with <property>JBoss Visual Editor</property>.</para></listitem> + <listitem> + <para>Have a look at the created projects. You can expand + <property>WEB_CONTENT</property> folder and open <property>home.xhtml</property> + or <property>login.xhtml</property> with <property>JBoss Visual + Editor</property>.</para> + </listitem> </itemizedlist> <figure> <title>CRUDAPP Seam Project</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_15.png" /> + <imagedata + fileref="images/crud_database_application/crud_database_application_15.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Switch to <property>Database Development</property> perspective with <emphasis><property>Window->Open Perspective->Other...</property></emphasis> and connect to the <emphasis><property>cruddb</property></emphasis> database.</para></listitem> + <listitem> + <para>Switch to <property>Database Development</property> perspective with <emphasis> + <property>Window->Open Perspective->Other...</property> + </emphasis> and connect to the <emphasis> + <property>cruddb</property> + </emphasis> database.</para> + </listitem> </itemizedlist> <figure> <title>Connecting to the CRUDDB database</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_16.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_16.png" + scale="75"/> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Expand <emphasis><property>cruddb</property></emphasis> nodes to view its <emphasis><property>Schemas</property></emphasis>, <emphasis><property>Tables</property></emphasis>, <emphasis><property>Columns</property></emphasis> etc.</para></listitem> + <listitem> + <para>Expand <emphasis> + <property>cruddb</property> + </emphasis> nodes to view its <emphasis> + <property>Schemas</property> + </emphasis>, <emphasis> + <property>Tables</property> + </emphasis>, <emphasis> + <property>Columns</property> + </emphasis> etc.</para> + </listitem> </itemizedlist> <figure> <title>CRUDDB Database</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_17.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_17.png" + scale="75"/> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Switch back to the <property>Seam</property> perspective. From the toolbar select <emphasis><property>New->Seam Generate Entities</property></emphasis> to create a set of <property>CRUD</property> Seam components and web pages based on existing tables in the database. - In the <emphasis><property>Generate Seam Entities</property></emphasis> dialog keep everything by default and press <emphasis><property>Finish</property></emphasis>. - </para></listitem> + <listitem> + <para>Switch back to the <property>Seam</property> perspective. From the toolbar + select <emphasis> + <property>New->Seam Generate Entities</property> + </emphasis> to create a set of <property>CRUD</property> Seam components and web + pages based on existing tables in the database. In the <emphasis> + <property>Generate Seam Entities</property> + </emphasis> dialog keep everything by default and press <emphasis> + <property>Finish</property> + </emphasis>. </para> + </listitem> </itemizedlist> <figure> <title>Generate Seam Entities</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_18.png"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_18.png" + /> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>Under <emphasis><property>WebContent</property></emphasis> folder you can find a lot of generated <property>xhtml</property> files:</para></listitem> + <listitem> + <para>Under <emphasis> + <property>WebContent</property> + </emphasis> folder you can find a lot of generated <property>xhtml</property> + files:</para> + </listitem> </itemizedlist> <figure> <title>Entities Web Pages</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_19.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_19.png" + scale="75"/> </imageobject> </mediaobject> </figure> <itemizedlist> - <listitem><para>And under <emphasis><property>src</property></emphasis> folder java classes are created.</para></listitem> + <listitem> + <para>And under <emphasis> + <property>src</property> + </emphasis> folder java classes are created.</para> + </listitem> </itemizedlist> <figure> <title>Entities Java Classes</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_20.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_20.png" + scale="75"/> </imageobject> </mediaobject> </figure> <itemizedlist> <listitem> - <para>Switch to <property>Hibernate</property> perspective with <emphasis><property>Window->Open Perspective->Other...</property></emphasis>. On <property>Hibernate Configurations</property> view expand the <emphasis><property>crudapp</property></emphasis> configuration. Right click on <property>Customers</property> and select <emphasis><property>Open Mapping Diagram</property></emphasis> from the popup menu.</para> + <para>Switch to <property>Hibernate</property> perspective with <emphasis> + <property>Window->Open Perspective->Other...</property> + </emphasis>. On <property>Hibernate Configurations</property> view expand the <emphasis> + <property>crudapp</property> + </emphasis> configuration. Right click on <property>Customers</property> and + select <emphasis> + <property>Open Mapping Diagram</property> + </emphasis> from the popup menu.</para> </listitem> </itemizedlist> <figure> <title>Hibernate Configurations View</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_21.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_21.png" + scale="75"/> </imageobject> </mediaobject> </figure> <itemizedlist> <listitem> - <para>Observe that <property>Mapping Diagram</property> is opened in the editor. Here you can see the relations between models and database tables. Select <property>Customers</property> entity model, right click and select <emphasis><property>Open Source File</property></emphasis>.</para> + <para>Observe that <property>Mapping Diagram</property> is opened in the editor. + Here you can see the relations between models and database tables. Select + <property>Customers</property> entity model, right click and select <emphasis> + <property>Open Source File</property> + </emphasis>.</para> </listitem> </itemizedlist> <figure> <title>Mapping Diagram</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_22.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_22.png" + scale="75"/> </imageobject> </mediaobject> </figure> <itemizedlist> <listitem> - <para>This will open the <property>Customers.java</property> file in the java editor.</para> + <para>This will open the <property>Customers.java</property> file in the java + editor.</para> </listitem> </itemizedlist> <figure> <title>Entity class from Mapping Diagram</title> - <mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/crud_database_application/crud_database_application_23.png" scale="75"/> + <imagedata + fileref="images/crud_database_application/crud_database_application_23.png" + scale="75"/> </imageobject> </mediaobject> </figure> - - <para>After that you are ready to deploy your application to J2EE application server. This is described in the next chapter.</para> - </section> + <para>After that you are ready to deploy your application to J2EE application server. This + is described in the next chapter.</para> + </section> + </chapter> -