Author: steveh Date: Wed Aug 18 10:25:14 2004 New Revision: 36577 Added: incubator/beehive/trunk/netui/docs/guide/ incubator/beehive/trunk/netui/docs/guide/images/ incubator/beehive/trunk/netui/docs/guide/images/tutnavleft.gif (contents, props changed) incubator/beehive/trunk/netui/docs/guide/images/tutnavright.gif (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/ incubator/beehive/trunk/netui/docs/guide/tutorial/tutBeehivePageFlowTutorial.html (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep1.html (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep2.html (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep3.html (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep4.html (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep5.html (contents, props changed) incubator/beehive/trunk/netui/docs/guide/tutorial/tutSummaryJPF.html (contents, props changed) Log: First sketch of a Page Flow tutorial. Sets out the basic development cycle for Page Flow apps.
Added: incubator/beehive/trunk/netui/docs/guide/images/tutnavleft.gif ============================================================================== Binary file. No diff available. Added: incubator/beehive/trunk/netui/docs/guide/images/tutnavright.gif ============================================================================== Binary file. No diff available. Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutBeehivePageFlowTutorial.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutBeehivePageFlowTutorial.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,103 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html> +<head> +<title>Tutorial: Page Flows</title> +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<!--(Links)=========================================================--> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +</head> +<!--(Body)==========================================================--> +<body> <div id="topictitle"> +<h1 class="Title">Tutorial: Page Flows</h1> +<div id=topictext> + <div id=topictext> + <p>The following tutorial shows you how to develop a simple Page Flow application + and deploy it to Tomcat Server 5.</p> + <h2>Requirements for this Tutorial</h2> + <p>Jakarta Tomcat Server 5 - If you do not have Tomcat Server 5 installed + in your machine, download it from <a href="http://jakarta.apache.org/site/binindex.cgi";>http://jakarta.apache.org/site/binindex.cgi</a>.</p> + <p>JDK5 ( = JDK1.5)</p> + <p>Ant 1.6.2.</p> + <h2>Tutorial Goals</h2> + <p>In this tutorial, you will learn:</p> + </div> +</div> +<ul> + <li> + <div> + <div> How to create a web application's user interface with JSPs </div> + </div> + </li> + <li> + <div> + <div> How to coordinate navigation, user data input, and back-end data resources + with page flow files </div> + </div> + </li> + <li>How to use page flow technology to separate data processing and data presentation</li> +</ul> +<div> + <div> + <h3>Tutorial Overview</h3> + <p>[tbd]<br> + </p> + </div> +</div> +<div><div><h3>Steps in This Tutorial</h3> + </div> + <p class="navtitle"><a href="tutJPFStep1.html">Step 1: Begin the Page Flow Tutorial</a></p> + <p class="navdesc">In this step you will deploy the back-end resources that + assemble credit reports.</p> + <div id="topictitle"> + <p class="navtitle"><a href="tutJPFStep2.html">Step 2: Create a New Page Flow</a></p> + <p class="navdesc">In this step you will (1) create a page flow file (JPF + file), which controls user requests and retrieval of credit reports, and + (2) create a web service control, which lets you access the resources that + provides the credit reports.</p> + <p class="navtitle"><a href="tutJPFStep3.html">Step 3: Navigation</a></p> + <p class="navdesc">In this step you will create the JSP pages that let users + request and view credit reports.</p> + <p class="navtitle"><a href="tutJPFStep4.html">Step 4: Submitting Data</a></p> + <p class="navdesc">In this step you will set role restrictions on the Investigate + page flow.</p> + <p class="navtitle"><a href="tutJPFStep4.html">Step 4: Processing and Displaying + Submitted Data</a></p> + <p class="navdesc">In this step you will set role restrictions on the Investigate + page flow.</p> + <p class="navtitle"><a href="tutSummaryJPF.html">Summary: Page Flow Tutorial</a></p> + </div> + <div> + <div> + <p>Click the arrow to navigate to the next step in the tutorial.</p> + </div> + </div> + <div> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> <p><a href="tutJPFStep1.html"><img src="../images/tutnavright.gif" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> <p> </td> + </tr> + </table> + </div> + <p> </p> +</div> +</body> +</html> Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep1.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep1.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,82 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html> +<head> +<title>Step 1: Begin the Page Flow Tutorial</title> +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<!--(Links)=========================================================--> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +</head> +<!--(Body)==========================================================--><body> +<div id="topictitle"> + <h1>Step 1: Begin the Page Flow Tutorial</h1> +</div> +<div id="topictext"> + <p>In this step you will set up the resources necessary for developing Page + Flow web applications.</p> + <p>The tasks in this step are:</p> +</div> +<ul> + <li>To download and install Apache Tomcat</li> + <li>To Download and Install Page Flow Resources</li> + <li><a href="#test">To Configure Apache Tomcat for Page Flows</a></li> +</ul> +<div> + <div> + <div></div> + </div> +</div> +<div> + <div> + <div> + <div></div> + </div> + </div> + <div> + <h2>To Download and Install Apache Tomcat</h2> + <p>Install Apache Tomcat into a local directory, for example:</p> + <p><code>C:/jakarta-tomcat-5.0.25</code></p> + <p>This directory will called <code>TOMCAT_HOME</code> below.</p> + <h2>To Download and Install the Page Flow Resources</h2> + <p>Using your operating system, navigate to the Tomcat deployment directory: + <code>[TOMCAT_HOME]/webapps</code>.</p> + <p>In the <code>[TOMCAT_HOME]/webapps</code> directory, create a directory + named <code>pageflow_tutorial</code>.</p> + <p>Into the <code>[TOMCAT_HOME]/webapps</code> directory, copy in the directories + <code>WEB-INF</code> and <code>resources</code>.</p> + <h2>To Configure Apache Tomcat for Page Flows</h2> + <p>[tbd]</p> + </div> +</div> +<div> + <p>Click the arrow to navigate to the next step in the tutorial.</p> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> <p><a href="tutBeehivePageFlowTutorial.html"><img src="../images/tutnavleft.gif" x-maintain-ratio="TRUE" style="border-style: none; + border: none; + width: 24px; + height: 19px; + float: none;" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> <p><a href="tutJPFStep2.html"><img src="../images/tutnavright.gif" width="24" height="19" border="0"></a></td> + </tr> + </table> +</div> +</body> +</html> Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep2.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep2.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,136 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html> +<head> +<title>Step 1: Begin the Page Flow Tutorial</title> +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<!--(Links)=========================================================--> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +</head> +<!--(Body)==========================================================--><body> +<div id="topictitle"> + <h1>Step 2: Create a New Page Flow</h1> +</div> +<div id="topictext"> + <p>In this step you will create the Investigate page flow. A page flow is a + Java class (with the JPF file extension) that controls how your web application + functions and what it does. Page flows control all of the major features of + a web application: how users navigate from page to page, user requests, and + access to the web application's back-end resources.</p> + <p>Page flows control the features of a web application through the use of Action + methods. An Action method may do something simple, such as forward a user + from one JSP page to another; or it may do something complex, such as receive + user input from a JSP page, calculate and/or retrieve other data based on + the user input, and forward the user to a JSP page where the results are displayed.</p> + <p>The page flow you create in this step contains one simple Action method. + This simple navigational Action method forwards users to the index.jsp page. + In the next step, you will create a more complex Action method.</p> + <p>The tasks in this step are:</p> +</div> +<ul> + <li>To Create a Controller file</li> + <li>To Create a JSP Page </li> + <li>To Test the Page Flow</li> +</ul> +<div> + <div> + <div></div> + </div> +</div> +<div> + <div> + <div> + <div></div> + </div> + </div> + <div> + <h2>To Create a Controller File</h2> + <p>In this step you will create a Page Flow application in place in the Tomcat + deployment directory.</p> + <p>In the directory <code>[TOMCAT_HOME]/directory/pageflow_tutorial</code>, + create a file called <code>Controller.jpf</code>.</p> + <p> In a text editor (or your IDE of choice), open the file <code>Controller.jpf</code>.</p> + <p>Edit Controller.jpf so it appears as follows.</p> + <pre>import org.apache.beehive.netui.pageflow.Forward; +import org.apache.beehive.netui.pageflow.PageFlowController; +import org.apache.beehive.netui.pageflow.annotations.Jpf; + [EMAIL PROTECTED] +public class Controller extends PageFlowController +{ + @Jpf.Action( + forwards={ + @Jpf.Forward(name="success", path="index.jsp") + } + ) + protected Forward begin() + { + return new Forward("success"); + } +}</pre> + <h2>To Create a JSP File</h2> + <p>In the directory <code>[TOMCAT_HOME]/directory/pageflow_tutorial</code>, + create a file named <code>index.jsp</code>.</p> + <p>Edit <code>index.jsp</code> so it looks like the following.</p> + <pre><%@ page language="java" contentType="text/html;charset=UTF-8"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"; prefix="netui-data"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"; prefix="netui"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"; prefix="netui-template"%> +<netui:html> + <head> + <title>index.jsp</title> + <netui:base/> + </head> + <netui:body> + <p> + index.jsp + </p> + </netui:body> +</netui:html> +</pre> + <h2>To Start the Tomcat Server</h2> + <p>Open a command shell</p> + <p>set JAVA_HOME to your JDK installation (JDK5, [tbd: are earlier versions + ok?])</p> + <p>cd to <code>TOMCAT_HOME/bin</code>.</p> + <p>run <code>startup.cmd/sh</code>.</p> + <p>Leave this command shell open, so that you can stop and restart Tomcat + when necessary.</p> + <h2>Test the Page Flow</h2> + <p>Open a web browser and enter the following in the address bar:</p> + <p><code>http://localhost:8080/pageflow_tutorial</code></p> + <p>You will be directed to the index.jsp page.</p> + </div> +</div> +<div> + <p>Click the arrow to navigate to the next step in the tutorial.</p> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> <p><a href="tutJPFStep1.html"><img src="../images/tutnavleft.gif" x-maintain-ratio="TRUE" style="border-style: none; + border: none; + width: 24px; + height: 19px; + float: none;" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> <p><a href="tutJPFStep3.html"><img src="../images/tutnavright.gif" width="24" height="19" border="0"></a></td> + </tr> + </table> +</div> +</body> +</html> Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep3.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep3.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,158 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html> +<head> +<title>Step 1: Begin the Page Flow Tutorial</title> +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<!--(Links)=========================================================--> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +</head> +<!--(Body)==========================================================--><body> +<div id="topictitle"> + <h1>Step 3: Navigation</h1> +</div> +<div id="topictext"> +<p>The tasks in this step are:</p> +</div> +<ul> + <li>Create a destination JSP page</li> + <li>Create a link to the destination JSP page</li> + <li>Create an Action Method to handle the link</li> + <li>To Test the Page Flow</li> +</ul> +<div> + <div> + <div></div> + </div> +</div> +<div> + <div> + <div> + <div></div> + </div> + </div> + <div> + <h2>Create a Destination JSP Page</h2> + <p>In the directory <code>[TOMCAT_HOME]/directory/pageflow_tutorial</code>, + create a file named <code>page2.jsp</code>.</p> + <p>Edit <code>page2.jsp</code> so it looks like the following.</p> + <pre><%@ page language="java" contentType="text/html;charset=UTF-8"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"; prefix="netui-data"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"; prefix="netui"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"; prefix="netui-template"%> +<netui:html> + <head> + <title>page2.jsp</title> + <netui:base/> + </head> + <netui:body> + <p> + Welcome to page2.jsp! + </p> + </netui:body> +</netui:html> +</pre> + <h2>Create a Link to the Destination Page</h2> + <p><code>Open the file TOMCAT_HOME/webapps/pageflow_tutorial/index.jsp</code>.</p> + <p>Edit index.jsp so it appears as follows. Code to add appears in red.</p> + <pre><%@ page language="java" contentType="text/html;charset=UTF-8"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"; prefix="netui-data"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"; prefix="netui"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"; prefix="netui-template"%> +<netui:html> + <head> + <title>index.jsp</title> + <netui:base/> + </head> + <netui:body> + <p> + index.jsp + </p><font color="#FF0000"> + <p> + <netui:anchor action="toPage2">Link to page2.jsp</netui:anchor> + </p></font> + </netui:body> +</netui:html></pre> + <h2>Add an Action Method to Handle the Link</h2> + <p>Open the file <code>TOMCAT_HOME/webapps/pageflow_tutorial/Controller.jpf</code>.</p> + <p>Edit <code>Controller.jpf</code> so it appears as follows.</p> + <pre>import org.apache.beehive.netui.pageflow.Forward; +import org.apache.beehive.netui.pageflow.PageFlowController; +import org.apache.beehive.netui.pageflow.annotations.Jpf; + +<!-- +syntax example for simple action [EMAIL PROTECTED]( + simpleActions={ + @Jpf.SimpleAction(name="simpleToPage2", path="page2.jsp") + } +)--> +public class Controller + extends PageFlowController +{ + @Jpf.Action( + forwards={ + @Jpf.Forward(name="success", path="index.jsp") + } + ) + protected Forward begin() + { + return new Forward("success"); + } + +<font color="#FF0000"> @Jpf.Action( + forwards={ + @Jpf.Forward(name="success", path="page2.jsp") + } + ) + public Forward toPage2() + { + return new Forward("success"); + }</font> +}</pre> + <h2>Build the Page Flow</h2> + <p>Open a command shell.</p> + <p>cd to <code>BEEHIVE_HOME/test/ant</code>.</p> + <p>run <code>ant -f buildWebapp.xml build.webapp -Dwebapp.dir=[TOMCAT_HOME]\webapps\pageflow_tutorial</code>.</p> + <h2>Restart Tomcat </h2> + <p>[tbd]</p> + <h2>Test the Page Flow</h2> + <p>Open a web browser and enter the following in the address bar:</p> + <p><code>http://localhost:8080/pageflow_tutorial</code></p> + <p>You will be directed to the index.jsp page.</p> + <p>On the index.jsp page, click the link, <strong>Link to page2.jsp</strong>.</p> + <p>Your browser will display page2.jsp.</p> + </div> +</div> +<div> + <p>Click the arrow to navigate to the next step in the tutorial.</p> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> <p><a href="tutJPFStep2.html"><img src="../images/tutnavleft.gif" x-maintain-ratio="TRUE" style="border-style: none; + border: none; + width: 24px; + height: 19px; + float: none;" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> <p><a href="tutJPFStep4.html"><img src="../images/tutnavright.gif" width="24" height="19" border="0"></a></td> + </tr> + </table> +</div> +</body> +</html> Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep4.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep4.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,180 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html> +<head> +<title>Step 1: Begin the Page Flow Tutorial</title> +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<!--(Links)=========================================================--> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +</head> +<!--(Body)==========================================================--><body> +<div id="topictitle"> + <h1>Step 4: Submitting Data</h1> +</div> +<div id="topictext"> +<p>The tasks in this step are:</p> +</div> +<ul> + <li>To create a submission form</li> + <li>To edit the Controller file to handle the submitted data</li> + <li>To restart Tomcat</li> + <li>To test the Page Flow</li> +</ul> +<div> + <div> + <div></div> + </div> +</div> +<div> + <div> + <div> + <div></div> + </div> + </div> + <div> + <h2>To Create a Submission Form</h2> + <p>Edit the file <code>[TOMCAT_HOME]/directory/pageflow_tutorial</code>/<code>page2.jsp</code> + so it appears as follows. Code to add appears in red.</p> + <pre><%@ page language="java" contentType="text/html;charset=UTF-8"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"; prefix="netui-data"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"; prefix="netui"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"; prefix="netui-template"%> +<netui:html> + <head> + <title>page2.jsp</title> + <netui:base/> + </head> + <netui:body> + <p> + Welcome to page2.jsp! + </p><font color="#FF0000"> + <p> + <netui:form action="processData"> + <p>Name:<netui:textBox dataSource="actionForm.name"/> + <p>Age:<netui:textBox dataSource="actionForm.age"/> + <p><netui:button type="submit">Submit</netui:button> + </netui:form> + </p></font> + </netui:body> +</netui:html> +</pre> + <h2>To Edit the Controller File to Handle the Submitted Data</h2> + <p><code>Open the file TOMCAT_HOME/webapps/pageflow_tutorial/Controller.jpf</code>.</p> + <p>Edit <code>Controller.jpf</code> so it appears as follows. Code to add + appears in red.</p> + <pre>import org.apache.beehive.netui.pageflow.Forward; +import org.apache.beehive.netui.pageflow.PageFlowController; +import org.apache.beehive.netui.pageflow.annotations.Jpf; +import org.apache.beehive.netui.pageflow.FormData; + [EMAIL PROTECTED] +public class Controller extends PageFlowController +{ + @Jpf.Action( + forwards={ + @Jpf.Forward(name="success", path="index.jsp") + } + ) + public Forward begin() + { + return new Forward("success"); + } + + @Jpf.Action( + forwards={ + @Jpf.Forward(name="success", path="page2.jsp") + } + ) + public Forward toPage2() + { + return new Forward("success"); + } + +<font color="#FF0000"> @Jpf.Action( + forwards = { + @Jpf.Forward(name = "success", path = "showData.jsp") + } + ) + public Forward processData(ProcessDataForm form) + {<br> System.out.println("Name: " + form.name);<br> System.out.println("Age: " + form.age); + getRequest().setAttribute("data", form); + return new Forward("success"); + } + + public static class ProcessDataForm extends FormData + { + private int age; + private String name; + + public void setName(String name) + { + this.name = name; + } + + public String getName() + { + return this.name; + } + + public void setAge(int age) + { + this.age = age; + } + + public int getAge() + { + return this.age; + } + } +</font>} +</pre> + <h2>Compile the Page Flow</h2> + <p>Open a command shell.</p> + <p>cd to <code>BEEHIVE_HOME/test/ant</code>.</p> + <p>run <code>ant -f buildWebapp.xml build.webapp -Dwebapp.dir=[TOMCAT_HOME]\webapps\pageflow_tutorial</code>.</p> + <h2>Restart Tomcat </h2> + <p>[tbd]</p> + <h2>Test the Page Flow</h2> + <p>Open a web browser and enter the following in the address bar:</p> + <p><code>http://localhost:8080/pageflow_tutorial</code></p> + <p>You will be directed to the index.jsp page.</p> + <p>On the index.jsp page, click the link, <strong>Link to page2.jsp</strong>.</p> + <p>Your browser will display page2.jsp.</p> + <p>Enter data in the fields, click <strong>Submit</strong>.</p> + <p>Check the Tomcat console for the values.</p> + <p>Note that you get an error in the browser, because <code>showData.jsp</code> + is not yet implemented.</p> + </div> +</div> +<div> + <p>Click the arrow to navigate to the next step in the tutorial.</p> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> <p><a href="tutJPFStep3.html"><img src="../images/tutnavleft.gif" x-maintain-ratio="TRUE" style="border-style: none; + border: none; + width: 24px; + height: 19px; + float: none;" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> <p><a href="tutJPFStep5.html"><img src="../images/tutnavright.gif" width="24" height="19" border="0"></a></td> + </tr> + </table> +</div> +</body> +</html> Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep5.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutJPFStep5.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,100 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html> +<head> +<title>Step 1: Begin the Page Flow Tutorial</title> +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<!--(Links)=========================================================--> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +</head> +<!--(Body)==========================================================--><body> +<div id="topictitle"> + <h1>Step 5: Processing and Displaying Submitted Data</h1> +</div> +<div id="topictext"> +<p>The tasks in this step are:</p> +</div> +<ul> + <li>To create a JSP page to display submitted data</li> + <li>To build the Page Flow</li> + <li>To restart Tomcat</li> + <li>To test the Page Flow</li> +</ul> +<div> + <div> + <div></div> + </div> +</div> +<div> + <div> + <div> + <div></div> + </div> + </div> + <div> + <h2>To Create a JSP Page to Display Submitted Data</h2> + <p>Create a file named <code>displayData.jsp</code> in the directory <code>[TOMCAT_HOME]/directory/pageflow_tutorial</code>. + Edit <code>showData.jsp</code> so it appears as follows.</p> + <pre><%@ page language="java" contentType="text/html;charset=UTF-8"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"; prefix="netui-data"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-html-1.0"; prefix="netui"%> +<%@ taglib uri="http://beehive.apache.org/netui/tags-template-1.0"; prefix="netui-template"%> +<netui:html> + <head> + <title>showData.jsp</title> + <netui:base/> + </head> + <netui:body> + <p>Name:<netui:span value="${requestScope.data.name}"/> + <p>Age:<netui:span value="${requestScope.data.age}"/> + </netui:body> +</netui:html></pre> + <h2>Compile the Page Flow</h2> + <p>Open a command shell.</p> + <p>cd to <code>BEEHIVE_HOME/test/ant</code>.</p> + <p>run <code>ant -f buildWebapp.xml build.webapp -Dwebapp.dir=[TOMCAT_HOME]\webapps\pageflow_tutorial</code>.</p> + <h2>Restart Tomcat </h2> + <p>[tbd]</p> + <h2>Test the Page Flow</h2> + <p>Open a web browser and enter the following in the address bar:</p> + <p><code>http://localhost:8080/pageflow_tutorial</code></p> + <p>You will be directed to the index.jsp page.</p> + <p>On the index.jsp page, click the link, <strong>Link to page2.jsp</strong>.</p> + <p>Your browser will display page2.jsp.</p> + <p>Enter data in the fields, click <strong>Submit</strong>.</p> + <p>You are forwarded to the <code>showData.jsp</code> page, where the submitted + values are displayed.</p> + </div> +</div> +<div> + <p>Click the arrow to navigate to the next step in the tutorial.</p> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> <p><a href="tutJPFStep4.html"><img src="../images/tutnavleft.gif" x-maintain-ratio="TRUE" style="border-style: none; + border: none; + width: 24px; + height: 19px; + float: none;" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> <p><a href="tutSummaryJPF.html"><img src="../images/tutnavright.gif" width="24" height="19" border="0"></a></td> + </tr> + </table> +</div> +</body> +</html> Added: incubator/beehive/trunk/netui/docs/guide/tutorial/tutSummaryJPF.html ============================================================================== --- (empty file) +++ incubator/beehive/trunk/netui/docs/guide/tutorial/tutSummaryJPF.html Wed Aug 18 10:25:14 2004 @@ -0,0 +1,108 @@ +<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN"> + +<html><!-- InstanceBegin template="/Templates/Tutorial Step.dwt" codeOutsideHTMLIsLocked="false" --> +<head> +<!-- InstanceBeginEditable name="doctitle" --> +<title>Summary: Page Flow Tutorial</title> +<!-- InstanceEndEditable --> + +<!--(Meta)==========================================================--> +<meta http-equiv=Content-Type content="text/html; charset=$CHARSET;"> +<meta name=workshop content=WWKSHOP> +<meta name="revision" content="$Revision: #3 $"> +<meta name="date" content="$Date: 2004/06/25 $"> +<!-- InstanceBeginEditable name="metatags" --> +<!-- In the component metatag, please indicate whether this topic is for Integration, Workshop, or Portal. --> +<meta name="component" content> +<!-- In the description metatag, please provide a BRIEF description of the topic contents. --> +<meta name="description" content> +<!-- In the component metatag, please list keywords that will help a user search for this topic. --> +<meta name="keywords" content> + +<!-- InstanceEndEditable --> + +<!--(Links)=========================================================--> +<!-- InstanceBeginEditable name="head" --> +<link href="../beehive.css" rel="stylesheet" type="text/css"> +<!-- InstanceEndEditable --> +<link href="../../../../workshop.css" rel="stylesheet" type="text/css"> +<a href="../../../../core/index.html" id="index"></a> +<script language="JavaScript" src="../../../../core/topicInfo.js"></script> +<script language="JavaScript" src="../../../../core/CookieClass.js"></script> +<script language="JavaScript" src="../../../../core/displayContent.js"></script> +</head> + +<!--(Body)==========================================================--> +<body> +<script language="JavaScript"> +displayInFrames(); +</script> +<!-- InstanceBeginEditable name="body" --> +<div id="topictitle"> + <h1 class="Title">Summary: Page Flow Tutorial</h1> +</div> +<div id="topictext"> + <p>This tutorial introduced you to the basics of building web applications + with WebLogic Workshop page flows.</p> + <div> + <h2>Concepts and Tasks Introduced in This Tutorial</h2> + </div> + <ul> + <li>JSP files make up the presentation layer of a web application</li> + <li>JPF files contain the code, individual Action methods, that determines + the major features of a Workshop web application: how users navigate from + page to page, and how data moves around the application. + <div> + </div> + </li> + <li> + <div> + User input data is data bound to Form Beans before the data is submitted + to an Action method. + </div> + </li> + <li>Built-in Workshop Java controls (web service controls, database + controls, etc.) and custom Java controls (JCS files) provide access to the + back-end data resources of a web application.</li> + <li>You can use the <netui...> tag library to data bind to Java + objects and render them as HTML.</li> + </ul> +</div> +<div></div> +<div> +<p>Click the arrow to navigate through the tutorial:</p> + <table x-use-null-cells style="x-cell-content-align: top; + width: 100%; + border-spacing: 0px; + border-spacing: 0px;" cellspacing="0" width="100%"> + <col style="width: 9.711%;"> + <col style="width: 90.289%;"> + <tr style="x-cell-content-align: top;" valign="top"> + <td style="width: 9.711%; + padding-right: 10px; + padding-left: 10px; + border-right-style: none; + border-left-style: none; + border-top-style: none; + border-bottom-style: none;" width="9.711%"> + <p><a href="tutJPFStep5.html"><img src="../images/tutnavleft.gif" x-maintain-ratio="TRUE" style="border-style: none; + border: none; + width: 24px; + height: 19px; + float: none;" width="24" height="19" border="0"></a></td> + <td style="width: 90.289%; + padding-right: 10px; + padding-left: 10px; + border-top-style: none; + border-bottom-style: none; + border-right-style: none;" width="90.289%"> + <p> </td> + </tr> + </table> +</div> +<!-- InstanceEndEditable --> +<script language="JavaScript"> +writeTopicInfo(); +</script> +</body> +<!-- InstanceEnd --></html>
