
Project Scope: To build a prototype
for a companywide Internal billing and tracking application that
would demonstrate the following:
- That all graphic and GUI information could be stored in Cascading
Style Sheets (CSS) and be dynamically applied "on the fly."
- That we could recreate their numerous paper forms electroncially
- Simulate workflow so the client could see how it would all fit
together
Responsibilities:
Primary Designer, created prototypes to help sales, helped improve
data flow.
Tools/Technologies: Photoshop, FrontPage
Deployment: ASP on NT Servers
Date: 2001
Open
Prototype >>
Demo Notes: This is a limited prototype
that was designed to whet their appetites and assure them that we
understood the Business Rules and application flow they had described.
In the demo, most of the functionality can be found on the EDI menu.
When there are large tables of data, you can often roll over the
first row and, if it highlights, you can click it to go to a detail
page. The application will launch in a large window. There will
also be a small window which will let you change stylesheets by
remote control.
Programming Notes: This prototype
had to stand alone. We would need to distribute it on disk, so we
couldn't use ASP, PHP, JSP, or any dynamic content that relied on
a sever. So, I used Javascript to simulate everything.
This prototype uses Javascript to implement an Object-Oriented
approach to dynamically control the appearance of the application.
To accomplish this, in the HTML source code all graphics are defined
as single-pixel images that are given a CLASS attribute. That CLASS
attribute, stored in the stylesheet, contains all size and source
information. Thus, by changing the name of the stylesheet, we can
change the appearance of the application.
The name and path to the stylesheets is stored by using the equivalent
of a Session Variable. Of course, true Session Variables (or Global
Variables) are not really possible in Javascript, so I defined the
variables in the FRAMESET document. By keeping them in the parent.frame,
I was able to keep them persistent them even as all the other pages
reloaded.
|