How to build a Scribo website
How an Aida/Web site was built?
Basically in three steps:
- web designer first built a mockup of the page in a Photoshop (see mockup)
- HTML/CSS meister then cut the mockup in appropriate HTML, CSS and image files (see them on our ftp)
- Aida developer then build a style class and components in Smalltalk
How the last step is done:
- create a separate package: Aida-Site
- create subclasses for site content and pages:
- AidaWebContent as subclass of SiteContent
- AidaWebContentApp as subclass of SiteContentApp
- AidaWebPage as subclass of SitePage
- AidaWebPageApp as subclass of SitePageApp
- create a style class AidaWebStyle as subclass of ScriboStyle
- register site content and page classes in your AidaWebStyle class by overriding two methods:
- #siteContentClass ^AidaWebSiteContent
- #sitePageClass ^AidaWebPage
- import images from files into a style class, one by one, using a naming convention:
- hover-nav.gif in method named hoverNavGif
- image is imported by pasting into this method the inspect of:
- '/home/me/images/hover-nav.gif' asFilename contentAsMethod
- see DefaultWebStyle imgs* for examples
- put CSS into method cssAll, in method category styles-screen
- implement also method addSuperStyles to return false, to prevent CSS from superstyles to be added to our one
- change image links to point to imported images, using a naming convention:
- for ../images/hover-nav.gif change to /img/hoverNavGif.gif
- prepare a layout of the page by cutting the page into nested subelements
- implement methods like headerElement, footerElement, columnsElements etc.
- override #pageFrameWith:wide:title: so taht Aida admin tools will work on this webpage too
- register your style class for your site:
- (AIDASite named: 'mysite) styleClass: 'AidaWebStyle'
- register first page of your site on relative URL '/':
- (AIDASite named: 'mysite') urlResolver defaultURL: '/' forObject: (AIDASite named: 'mysite') siteContent firstPage
- Open your site to public by setup access rights to allow Guest users view access to both App classes:
- go to security settings of your website by manually entering URL: http://www.aidaweb.si/security.html
- go to Users, click Guest and Access rights
- find and click AidaWebContentApp and click all views YES
- find and click AidaWebPageApp and click all views YES