This appendix includes details of the user interface specification and implementation of the real-world script repository application demonstrated in Chapter 14. It is instructive insofar as it shows how you might specify your application for the UI designer. It also shows how a good UI designer can improve the specification based on appropriate considerations and then implement it accordingly. Notes from the designer are shown in italics.
Screens
The application is a Script Repository that allows users to paste scripts into a text field and stores them in a central repository database. Users can download scripts, and registered users can add scripts to the database.
The UI should be one screen, with subscreens that pop up depending on the activity of the user. For example, if a user clicks Login, he is presented with a dialog box with a Submit button that asks for his username and password. If a user clicks Register, he is presented with a registration box.
The Flash movie size should be about 800 x 600 so that it fills the entire browser window.
Main
The main screen should always be in view and show all options available.
The main screen is composed of two sections: the main area, where all the screens appear and which occupies 90% of the screen, and the navigation bar, at the bottom of the screen. The navigation bar is composed of an administrative section (on the left) and a main navigation section (which automatically disappears when not in use). When the application loads, the main navigation section appears for one second to catch user's attention.
All the buttons (both in the content section and navigation) are displayed on a black background so they can be distinguished with ease.
The whole application is made with vector graphics so that it can be easily scaled to any dimensions.
Login
(y pos: 1635 px) (y pos indicates position of movie clip symbol off stage; see designer notes at end of this appendix.)
Allows a user to log in.
The Login screen should have the following components and fields, or equivalents: username_txt, password_txt, login_btn
A fake login routine has been implemented. To activate the grayed-out buttons on the main navigation, you first have to log in on the login section.
Register
(y pos: 2180 px)
Allows a new user to register, with personal information and username/password combination.
The registration screen should have the following components and fields, or equivalents: firstname_txt, lastname_txt, email_txt, username_txt, password_txt, passwordconfirm_txt, hintquestion_txt, hintanswer_txt, register_btn.
Failed login
A simple message box that alerts a user if the login failed.
Implemented as custom message box.
Failed registration
A simple message box that alerts a user if the registration failed (username exists, etc.).
Implemented as custom message box.
About box
(y pos: 3270 px)
A simple screen that displays information about the company. The About screen should have the following components and fields, or equivalents:
Company Name: aboutname_txt (single line)
Company Description: aboutdesc_txt (multiline)
View Scripts
(y pos: 0 px)
A simple listing of scripts in a Tree component to allow all users to view the scripts available and drill down to a View Script page for a particular script. The View Scripts screen should have the following components and fields, or equivalents: search_txt, search_btn, scripttree_tree (Tree component).
View Script
(merged with previous item, "View Scripts")
A page with details of an individual script. This also contains a link to allow a script to be downloaded and a send-to-a-friend link to send this detail page link to an email address. The View Script screen should have the following components and fields, or equivalents:
Name of the script: scriptname_txt (single line)
Description: scriptdesc_txt (multiline) + scriptdesc_sb (added ScrollBar component)
Code: scriptcode_txt (multiline) + scriptcode_sb (added ScrollBar component)
Language: scriptlanguage_cb (ComboBox component)
Category: scriptcategory_cb (ComboBox component)
Date uploaded: scriptdateuploaded_txt (single line)
Date modified: scriptdatemodified_txt (single line)
Version number: scriptversion_txt (single line)
Author of script: scriptuser_cb (ComboBox component)
Download button: scriptdownload_btn
Send to a friend
(merged with previous item, "View Script")
Simple form to allow a user to send a View Script page to a friend. The Send to a friend screen should have the following components and fields, or equivalents:
Script URL: sendurl_txt (Not implemented visually; should be hidden)
Script Name: sendname_txt (Not implemented visually; should be hidden)
Send to: sendto_txt
Send button: send_btn
Upload Script
(y pos: 545 px)
A blank form to allow a registered user to upload a script to the database. Interface can be identical to the View Script interface, however all fields should allow user input.
Upload button: scriptupload_btn
Note: User must be logged-in to see this page; therefore, the "Author of script" field from the View Script screen should be hidden on the Upload screen and has not been enclosed as dynamic field.
Modify Script
(y pos: 1090 px)
A form that mimics the Upload Script form that is pre-filled in with information about a script that needs to be updated.
Drop-down list of scripts: scriptname_cb (ComboBox component)
Modify button: scriptmodify_btn
Note: User must be logged to see this page; therefore, the "Author of script" field should be hidden and has not been enclosed as dynamic field.
Contact Form
(y pos: 2725 px)
Allow a user to contact the site administrator. The Contact form screen should have the following components and fields, or equivalents:
Message to send: message_txt
Submit button: contact_btn