"We want a page with a form where we can enter the name of an existing user in a textfield and a legal structure from a pulldown. We will retrieve the legal structure pulldown entries from the database (we can't just put them into html). It should look something like this."
"Also, if the username is invalid and the user submits, it should come back to this page and highlight Username in red, along with a message that says what the problem was."
"When the username is really valid, hitting submit should take them to a success page which shows the userID and the email address of that user."
The first thing to do is to name all the pages. Try to pick
something which is descriptive of the user task, or the state that the
user is in when they are looking at the page. For example, you might
pick:
The balloons indicate states, and the arrows indicate transitions between states. Note that the EnteringUserNameError state has a state transition that leads back to the same state--if the username isn't valid, it's still an error. Please make sure that everyone (you, the Java developer, the spec writer) agree on the state model!
<HTML>And Success.jsp might look like:
<HEAD>
<TITLE> Test MVC Page </TITLE>
</HEAD>
<BODY><H1> Test MVC Model </H1>
<FORM ACTION="#" METHOD="POST">
<B>Username:</B>
<INPUT TYPE="TEXT"
NAME="#"
VALUE="#"
SIZE="20"
MAXLENGTH="40"><P>
<B>Legal Structure</B>
<SELECT NAME="#">
<OPTION VALUE="#">#
</SELECT><INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Test MVC Page Success</TITLE>
</HEAD>
<BODY><H1> Success! </H1>
<B>UserID:</B> # <BR>
<B>Email Address:</B> # <BR></BODY>
</HTML>
Notice the hash marks. These are placeholders for variables
that the Java developer will have to fill in later. Also notice that
there isn't an EnteringUserNameError.jsp page. Since the
only difference from EnteringUserName.jsp is that errors are highlighted,
you may as well just let the Java developer do the error page since there
isn't anything in there that would not involve you simply putting in lots
of # characters.
Also, for text fields be aware that you may not have control over the maximum length of the text fields due to database concerns. Don't worry to much about getting the field max lengths exactly right--the Java developer will have the opportunity to change them later.
EnteringUserName.jsp:
Success.jsp:
Editor's note: please ignore the absurdity of any site producer ok-ing the pathetic screens shown above. This is just a toy example!
You are now ready to begin the process of collaborating with a Java developer to put some logic behind the forms.
The Java developer will replace your # characters with meaningful names and make the changes available to you through CVS (you will have to do a cvs update in order to get the changes to your local directory). Be aware that it might take some time for the Java developer to add the necessary jsp code. Continuing with our example, the Java developer might make the following changes and commit them to CVS (red items are values that the Java developer has substituted for your # marks, while the blue text is additional jsp scripting code that has been added)Put the jsp files in the appropriate directory in your own staging development environment.
Most likely it will be someplace under startups/su_htdocs/staging/ under your home directory. You may need to create one or more subdirectories to place the files in, depending on your site file organization plan. Continuing with the example, let's say the files are supposed to live under a directory called "testmvc" so that they appear under http://ted.startups.com/testmvc:rabbit:/export/home/ted% cd startups/su_htdocs/staging rabbit:/export/home/ted/startups/su_htdocs/staging% mkdir testmvc
[use absoluteftp or some other application to get the files from your desktop to the newly created directory "testmvc"]Add the files to CVS using "cvs add <filename>".
rabbit:/export/home/ted/startups/su_htdocs/staging/testmvc% ls total 11 2 EnteringUserName.jsp 3 EnteringUserNameError.jsp 1 Success.jsp rabbit:/export/home/ted/startups/su_htdocs/staging/testmvc% cvs add EnteringUserName.jsp(etc.)Commit the the add using "cvs commit <filename>".
rabbit:/export/home/ted/startups/su_htdocs/staging/testmvc% cvs commit EnteringUserName.jsp(etc.)Tell the Java developer that the files are ready and in CVS.
EnteringUserName.jsp:
<%--Success.jsp:
* Copyright 2000 Startups.com. All Rights Reserved.
*
* This software is the proprietary information of Startups.com.
* Use is subject to license terms.
*
--%>
<%@ page import="com.startups.testmvc.EnteringUserNameModel" %>
<jsp:useBean id="enteringUserNameModel" class="com.startups.testmvc.EnteringUserNameModel" scope="session" create="yes"/><HTML>
<HEAD>
<TITLE> Test MVC Page </TITLE>
</HEAD>
<BODY><H1> Test MVC Model </H1>
<FORM ACTION="/servlet/com.startups.testmvc.EnteringUserNameServlet" METHOD="POST"><B>Username:</B>
<INPUT TYPE="TEXT"
NAME="UserID"
VALUE="<%= enteringUserNameModel.getUserID() %>"
SIZE="20"
MAXLENGTH="40"><P>
<B>Legal Structure</B>
<SELECT NAME="LegalTypes">
<%
String[] theLegalTypes = enteringUserNameModel.getLegalStructures();
for (int i = 0; i < theLegalTypes.length; i++) {
%>
<OPTION VALUE="<%= theLegalTypes[i] %>"><%= theLegalTypes[i] %>
<%
}
%>
</SELECT>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
<%--And for fun, here's EnteringUserNameError.jsp. The Java developer should have been able to create this by starting with EnteringUserName.jsp. Don't worry if you don't understand the scripting code, you don't need to.
* Copyright 2000 Startups.com. All Rights Reserved.
*
* This software is the proprietary information of Startups.com.
* Use is subject to license terms.
*
--%>
<jsp:useBean id="successModel" class="com.startups.testmvc.SuccessModel" scope="session" /><HTML>
<HEAD>
<TITLE> Test MVC Page Success</TITLE>
</HEAD>
<BODY><H1> Success! </H1>
<B>UserID:</B> <%= successModel.getUserID() %> <BR>
<B>Email Address:</B> <%= successModel.getEmailAddress() %> <BR></BODY>
</HTML>
<%--At some point, the Java developer will have enough back-end Java code available so that the form will actually do something when you point your web browser at your development web server (e.g. http://ted.startups.com/testmvc/EnteringUserName.jsp). In order for this to work, you will have to perform a cvs update and recompile the Java code for your development environment.
* Copyright 2000 Startups.com. All Rights Reserved.
*
* This software is the proprietary information of Startups.com.
* Use is subject to license terms.
*
--%>
<%@ page import="com.startups.validation.ValidatableObject" %>
<%@ page import="com.startups.validation.ValidationFailedException" %>
<%@ page import="com.startups.testmvc.EnteringUserNameModel" %>
<%!
//
// Returns <FONT COLOR="red"> if the given fieldName in the given
// model is invalid, otherwise returns <FONT COLOR="black">
//
public String fontColorTagFor(String fieldName, EnteringUserNameModel model) {
if (model.isFieldValid(fieldName)) {
return "<FONT COLOR=\"black\">";
} else {
return "<FONT COLOR=\"red\">";
}
}
%>
<jsp:useBean id="enteringUserNameModel" class="com.startups.testmvc.EnteringUserNameModel" scope=
"session" create="yes"/><HTML>
<HEAD>
<TITLE> Test MVC Page </TITLE>
</HEAD>
<BODY><H1> Test MVC Model </H1>
<%
if (! enteringUserNameModel.isValid()) {
//
// print out the fields that need to be changed
//
%>
<FONT COLOR="red">
Please review the indicated fields:<BR>
<%
ValidationFailedException[] theExceptions =
enteringUserNameModel.getValidationErrorList();
for (int i = 0; i < theExceptions.length; i++) {
%>
<%= theExceptions[i].getMessage() %> <br>
<%
}
%>
</FONT>
<%
}
%>
<FORM ACTION="/servlet/com.startups.testmvc.EnteringUserNameServlet" METHOD="POST">
<%= fontColorTagFor("UserID", enteringUserNameModel) %>
<B>Username:</B>
</FONT>
<INPUT TYPE="TEXT"
NAME="UserID"
VALUE="<%= enteringUserNameModel.getUserID() %>"
SIZE="20"
MAXLENGTH="40"><P>
<B>Legal Structure</B>
<SELECT NAME="LegalTypes">
<%
String[] theLegalTypes = enteringUserNameModel.getLegalStructures();
for (int i = 0; i < theLegalTypes.length; i++) {
%>
<OPTION VALUE="<%= theLegalTypes[i] %>"><%= theLegalTypes[i] %>
<%
}
%>
</SELECT><INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
<%--Continue to make whatever changes are necessary. There is no need to tell the Java developer what you are doing, as long as you are not adding new fields. When you commit the changes to CVS the Java developer will get them the next time he or she does a cvs update. Likewise, when the Java developer makes changes to the scripts in the jsp files, you'll get these changes when you do cvs updates.
* Copyright 2000 Startups.com. All Rights Reserved.
*
* This software is the proprietary information of Startups.com.
* Use is subject to license terms.
*
--%>
<jsp:useBean id="successModel" class="com.startups.testmvc.SuccessModel" scope="session" /><HTML>
<HEAD>
<TITLE> Test MVC Page Success</TITLE>
</HEAD>
<BODY><H1> Success! </H1>
<TABLE>
<TR>
<TD><B>UserID:</B> <%= successModel.getUserID() %> </TD>
<TD><B>Email Address:</B> <%= successModel.getEmailAddress() %> </TD>
</TR>
</TABLE></BODY>
</HTML>
Congratulations, you're done! Hopefully these steps have allowed you to concentrate on and own the part that you do best--the appearance of the page--while allowing the Java developer to do what he or she does best without a lot of back and forth.
