The document discusses restructuring a website to improve its organization and performance. The goals are to: 1. Simplify the header by having one general header and site-specific headers in individual pages. 2. Separate code, content, and forms into different files to clear up the messy mixture currently in place. 3. Standardize on the Ext JS framework for JavaScript and remove unused frameworks and inline JavaScript. 4. Streamline CSS by removing unused frameworks, manual stylesheets, and inline CSS. 5. Define widgets consistently within their own files using Ext JS and establish event-based communication between widgets.

1. Website Structure

2. Website Structure
Status quo
● Header includes way too many files, is unstructured,
general & specific in one
● Body contains a mixture of JS code, content and form
(inline CSS commands)
● Chaos
Goal
● One general header
● Site specific header in the site's jsp file
● Clear separation of code, content and form in separate
files

3. Javascript
Status quo
● Prototype framework
● Scriptaculous framework
● Crowdsound – whatever it is
● Ext JS - framework
● Manual JS files
● Manual inline JS
Goal
● If possible, only Ext JS framework
● No inline JS (only separate JS files)

4. CSS
Status quo
● CSS of JS frameworks
● YAML CSS framework
● Dozens of manual CSS files
● Inline CSS commands in HTML body
Goal
● Get rid of most manual CSS,
● all inline CSS and
● YAML framework

5. New Version

6. Header
Header General imports common/headGeneral.jsp
widgets/widget1.jsp
Widgets widgets/widget2.jsp
...
scripts/user-scripts/
Site's Javascript sitename.js
Content
Site's CSS css/sitename.css

7. Content
[ Graphical Header ]
[ Navigation ]
<!-- ### Community Map ### -->
<div id="comm_mapColumn" class="comm_Column">
<div id="search_container" class="widgetContainer"></div>
<div id="map_container" class="widgetContainer"></div>
</div>
<!-- ### Community Details ### -->
<div id="comm_detailsColumn" class="comm_Column">
<div id="metrics_container" class="widgetContainer"></div>
<div id="members_container" class="widgetContainer"></div>
</div>
[ Footer ]

8. Ext JS
● Javascript framework
● Allows look & feel of a desktop application
● Elements: windows, panels, tabs, tables, forms, etc.
● Ajax: HTTP Request, JSON, XMLReader, etc.
● Only problem: It's complex
Official Examples:
http://extjs.com/deploy/dev/examples/samples.html
Table Tutorial:
http://extjs.com/learn/Tutorial:Grid_PHP_SQL_Part1
Various Examples:
http://examples.extjs.eu/

9. Widgets & Communication

10. Widgets
Status quo
● Widget panel is defined by inline JS
● The rendering functions for most widgets
are in scripts/parser.js
● No simply way to include a widget
● Widgets in widgets/ not being used
● Widgets use different JS frameworks
Goal
● All widget functions in one widget file
● All widget files in widgets/
● All widgets use Ext JS

11. Widget-Server Communication
Architecture: REST
Method: HTTP Request
Data Format: XML file
Manual
Like in widgets/metrics.jsp
Manual request for each different version of the Internet
Explorer plus a request for all other browsers.
With Prototype
Example home.jsp,
The HTTP request seems to be the only use of this library.
With Ext JS
Very similar to Prototype. I added a sample implementation:
widgets/metrics-new.jsp

12. Widget-Widget Communication
Client-side: only Javascript
Architecture
(see paper I sent you)
● Event based model
● Widgets add event listeners
● On event: widget sends messages to its
subscribers