WebsiteStructure

431 views
405 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
431
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WebsiteStructure

  1. 1. Website Structure
  2. 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. 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. 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. 5. New Version
  6. 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. 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. 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. 9. Widgets & Communication
  10. 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. 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. 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

×