protodev - Software Engineering Confidence Thru Prototyped Development

This page contains:

ProtoSmart Downloads
ProtoSmart Installation
Configuring Pages for Using ProtoSmart
ProtoSmart Skills Required
ProtoSmart Includes
ProtoSmart PD (XML) Tables

ProtoSmart Downloads

Please email us if you download ProtoSmart so we are of assistance as the framework matures.

Thank you!

Stable version 0.8 released on 01/01/2003.

Build 015 released on 01/01/2003 as pdrootforXYZ-015.zip.	Replacement pd directory pd.zip if upgrading.
Build 014 released on 12/16/2002. Build 013 released on 12/15/2002. Build 012 released on 12/05/2002. Build 011 released on 11/18/2002. Build 010 released on 11/15/2002. Build 009 released on 11/14/2002. Build 008 released on 11/12/2002. Build 007 released on 11/08/2002. Build 006 released on 11/02/2002. Build 005 released on 11/01/2002. Build 004 released on 10/31/2002. Build 003 released on 10/29/2002. Build 002 released on 10/27/2002. Build 001 released on 10/24/2002.

Build 015 released on 01/01/2003 as
pdrootforXYZ-015.zip.

Replacement pd directory pd.zip if upgrading.

Build 014 released on 12/16/2002.
Build 013 released on 12/15/2002.
Build 012 released on 12/05/2002.
Build 011 released on 11/18/2002.
Build 010 released on 11/15/2002.
Build 009 released on 11/14/2002.
Build 008 released on 11/12/2002.
Build 007 released on 11/08/2002.
Build 006 released on 11/02/2002.
Build 005 released on 11/01/2002.
Build 004 released on 10/31/2002.
Build 003 released on 10/29/2002.
Build 002 released on 10/27/2002.
Build 001 released on 10/24/2002.

ProtoSmart Installation

The pdrootforXYZ-000.zip file contains all folders and files required, including a small sample application that can be used as a template. Simply extract the files to a directory of your choosing and begin prototyping! The following directory structure is established upon extraction:

pdrootforXYZ [Required web application root folder.]
- css [Optional for application cascading style sheets {CSS}.]
- doc [Optional for application documentation.]
- html [Required for application XHTML web pages.]
- html_include [Required for HTML code inserted into a page (ex. "header.html").]
- image [Optional for application images.]
- js [Optional for JavaScript "ActionFunctions" written by prototyper.]
- pd [Required for the framework.]
- xml [Required]
  - configuration [Required if using specific capabilities.]
    - PS_EXCEPTION.xml
    - PS_INCLUDE.xml
    - PS_VALIDATION.xml
  - model [Required for application XML pdTable models.]
  - table [Required for application XML pdTables containing protodev data.]
- xsl [Required for application XML Style Sheets {XSL}.]

The pd.zip file contains only the ProtoSmart framework functions residing in the "pd" directory. This file enables upgrading an existing prototype to a newer ProtoSmart release.

Configuring Pages for Using ProtoSmart

Prototyped pages reside in the "html" folder of the web application root. Each page is required to have two entries to use the ProtoSmart framework:

<script type="text/javascript" language="javascript" src="../pd/ProtoSmart.js"></script>
<body onload="psOnload()">

With these two elements in place, any ProtoSmart API function can be invoked from an "ActionFunction" file in the ".js" folder.

ProtoSmart Skills Required

The effective prototyper has the following required software engineering skills:

JavaScript (also known as ECMAScript)
XHTML (or HTML)
XML (documents)

The effective prototyper has the following optional software engineering skills:

XSL/CSS (depending on "look" and "feel" requirements)

The effective prototyper has the following "soft" skills:

Ability to communicate effectively with a business expert
Ability to translate vague requirements into a precise model
Ability to work iteratively (and maintain good humor!)

Prototyping is art, science and psychology rolled into one! A clear analytical mind combined with discerning relational skills yields collaborative synergy with a business expert. The effective prototyper facilitates the identification, clarification and maturation of business process assumptions as vague requirements are translated into a precise model.

ProtoSmart Includes

ProtoSmart supports "includes", or code snippets dynamically inserted into pages. Header and footer elements typically use this technique. There are three steps in setting up the include infrastructure:

Create XHTML code snippets to be inserted into a page.
Save the XHTML snippet in the "html_include" folder.
Assign a destination in the prototype page, typically a <div> or <span> tag.
Link the snippet by editing the PS_INCLUDE.xml file in the /xml/configuration folder.

NOTE: <script> tags cannot be inserted into a page using the include feature of the framework. However, the following event can be processed . . .

<img src="../image/logo.gif" onmouseover="funSwapImage()" />

provided the funSwapImage() code is loaded into the page.

ProtoSmart PD (XML) Tables

protodev and ProtoSmart use the term "PDtable" (see below for an example) to indicate an explicitly structured XML document for storing protodev data. PDtables are often thrown together rapidly during a prototype iteration and later used as input to more formal object and relational modeling.

A "PDmodel" is a version of a PDtable having a single complete record used by the ProtoSmart framework as a cloneable model for adding new records. The model is referenced by the name of the PDtable followed by "_MODEL" (in uppercase).

A "PDrow" is represented three (3) times in the sample PDtable (below) and once (1) in the PDmodel as "<X_ROW>".

A "PDname" is represented within PDrows as "<X_USER_ID> ", "<X_EMAIL_ID>", "<X_EMAIL_PWD>", "<X_QUESTION>", "<X_ANSWER> ". The PDmodel has the complete set of five (5) PDnames represented.

"PDvalue" is the data (represented in both upper and lower case) stored within PDname tags in a PDrow in the PDtable. Although a PDmodel may contain default PDvalues, in most cases the default is no text.

In order to be referenced by the ProtoSmart framework, the example PDtable (as shown below) must have:

exactly three (3) element node levels
text nodes (only) at the lowest element node level (PDname)
five (5) root element attributes (revision date/time)
all PDrows with identical structure (the same PDname[s])
unique PDname[s] (different than PDtable or PDrow)

The following are recommendations for standardizing PDtables:

Use uppercase when saving PDtables (e.g. DIRECTORY.xml)
Use the same reference for the root element node (e.g. X_DIRECTORY)
Use uppercase for distinguishing tags from PDvalues (e.g. X_ROW / X_USER_ID)
Begin tags with "X_" for easy identification within "ActionFunctions"

The example PDtable (as shown below) may have:

duplicate PDname/PDvalue pairs

Example PDtable = DIRECTORY.xml

<?xml version="1.0"?>

<X_DIRECTORY FullYear = "2002" Month="6" Day="14" Hours="14" Minutes = "9">
   <X_ROW>
        <X_USER_ID>xyz123456789</X_USER_ID>
        <X_EMAIL_ID>test1@gtcGroup.com</X_EMAIL_ID>
        <X_EMAIL_PWD>testing</X_EMAIL_PWD>
        <X_QUESTION>Pet's Name?</X_QUESTION>
        <X_ANSWER>Spot</X_ANSWER>
   </X_ROW>
   <X_ROW>
        <X_USER_ID>duplicate</X_USER_ID>
        <X_EMAIL_ID>test2@gtcGroup.com</X_EMAIL_ID>
        <X_EMAIL_PWD>resting</X_EMAIL_PWD>
        <X_QUESTION>Mother's Maiden Name?</X_QUESTION>
        <X_ANSWER>Johnson</X_ANSWER>
   </X_ROW>
   <X_ROW>
        <X_USER_ID>duplicate</X_USER_ID>
        <X_EMAIL_ID>test3@gtcGroup.com</X_EMAIL_ID>
        <X_EMAIL_PWD>nesting</X_EMAIL_PWD>
        <X_QUESTION>High School's Name?</X_QUESTION>
        <X_ANSWER>John Muir</X_ANSWER>
   </X_ROW>
</X_DIRECTORY>

Example PDmodel = DIRECTORY_MODEL.xml

<?xml version="1.0"?>

<X_DIRECTORY FullYear = "2002" Month="6" Day="14" Hours="14" Minutes = "9">
   <X_ROW>
        <X_USER_ID></X_USER_ID>
        <X_EMAIL_ID></X_EMAIL_ID>
        <X_EMAIL_PWD></X_EMAIL_PWD>
        <X_QUESTION></X_QUESTION>
        <X_ANSWER></X_ANSWER>
   </X_ROW>
</X_DIRECTORY>

Copyright (c) 1999 - 2002 by GTC Group, Inc. at gtcGroup.com.
Use is authorized, provided the source is acknowledged by inclusion of this copyright notice.