![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 ]](https://image.slidesharecdn.com/2620643/85/WebsiteStructure-7-320.jpg)
WebsiteStructure
- 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/
- 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