Advanced features

Here are quick notes about some more advanced feaures of Aida.

1. Method images

• are static images, which are stored in methods instead on a disk
• for small images, to avoid handling of separate files, to use advantages of SCM like Store, SqueakSource, SmalltalkHub
• most of such images should be in subclasses of WebStyle for website specific "skins"
• an image is imported to the method by a helper method, for example:

  • AIDASite default style importImage:#arrowBigRedGif from: './myimages/arrowBigRed.gif''

• such an image is added to the webpage simply by referring to its method, for example:

  • e addGif: #arrowBigRedGif 

• there are many predefined method images (in class DefaultWebStyle, see method categories imgs-* ):
  • single point pixels in different colors, usefull for things like graphs, lines etc. (dingle pixel trick: a pixel streched with size of it)
  • most commonly used symbols for pdf, word, printing, ...

• handled by a WebMethodImage class, in package Aida-Imaging
• WebElement convenient methods to add an image from current AIDASite style:
  
  • addGif: #methodName 
  • addGif: #methodName size: aPoint
  • addJpeg: #methodName
  • addJpeg: #methodName size: aPoint
  • addPng: #methodName 
  • addPng: #methodName size: aPoint
  • addMethodImage: aMethodImage
  • addMethodImage: aMethodImage size: aPoint

• All method images have an URL composed by the convention. For example the method image #arrowBigRedGif in DefaultWebStyle (category imgs-bullets): is accessible by the relative URL:

  •    /img/arrowBigRedGif.gif

2. Method Resources

• Static web resources (CSS, JS, images, any kind of binaries), which are stored in a method or prepared on the fly by calling that method
• handled by WebMethodResource class, in package AIDA-Internal
• Example of usage:
  • res := WebMethodResource fromMethod: #myCss on: myObject contentType: 'text/css' site: self site
  • a myObject myCss method must return some CSS
  • from some other page make an url link to this res: self addLinkTo: res text: 'my new html'
• WebMethodImage is special case of WebMethodResource.

3. Automatic Urls, prefered Urls

Aida generate Url links automatically if an Url for an object does not exist yet. This simplifies programming and web page linking dramatically. But you can hint your Url by overriding #preferedUrl method in a domain object.

• By default an automatic Url is made of a randomly generated number, for example: http://aida.eranova.si/object/o1264587.html
• to hint your own url, make an #preferedUrl method, which must return an url string (without host part), for example: '/img/image.gif'
• if this url already exist, a random generated url is used again
• all WebMethodImages hint urls that way.

4. Web Clipboard

• Goal: easier hyperlinking of web pages
• cut/copy/paste of url references to web pages
• Web Clipboard is not same as desktop clipboard! WebClipboard is stored in a web session
• WebApplication clipboard
  • WebApplication copyToClipboard copy title of current page and url to observee
  • WebApplication pasteFromClipboard returns a DocLink to clipboard contents if any

5. Presentation of domain objects

• Every object can be represented as a web page if a special presentation object exist for it.
  Presentation is done with help of so called App classes, which must be subclassses of WebApplication.
  Every user session has a separate instance of presentation class, so that presentation can have a state separated from user to user
• When an object is to be presented as a web page, a search for appropriate presentation class is done:
  • 'App' is appended to domain object class name if such class exist and it is subclass of WebApplication.

Usage:

• make an App class as subclass of WebApplication. Name it just by adding 'App' to name of your domain class.
  • example: OrderApp for Order

6. View methods, action methods

Every domain object can be be viewed from different "viewpoints" and every such view has its view method. Also, every view can produce an action (by pressing a button and posting a form contents), so there are action methods too. You can pair view with its view and action method:

• by composing a view and action method names
  • name a view method that way: 'view', view name , first letter of view name capitalized. Example: viewMain for a view named #main
  • name an action method that way: 'action', view name , first letter of view name capitalized. Example: actionMain for a view named #main

• if view is not specified, then default view is used. Default is first registered view. If there is no registered view, a #main view is default one,
• view names must start lowercase, they can have mixed case later. They are case sensitive! Use all lowercase, only one word if you can,
• you don't need to have an action method for every view with button. Pressing a button submit and update objects with form data and if action method exist, it is called to do some post processing.

7. Many action buttons

• for more than one buttons on the form.
• Action method is a composed name from 'action', aView, Symbol, (last 2 capitalized)
  • example: for view #main, action #addFolder is action method #actionMainAddFolder"
• WebElement addButtonText:action:
  • for above example: addButtonText: 'Add folder' action: #addFolder

8. Versioned objects

Version support for documents, wiki pages etc.

• to make your object versioned, subclass it from VersionedObject
• to make new version of an object: anObject asNewVersion
• by default, first version number is '1', every new version increment parent number.
• a current version have always the same identity. If you make other version current, it will swap identity with previus one. That way a reference to aVersionedObject will always point to its current version, in case that more versions exist.
• set current version: anObject setCurrentVersion

9. Wiki format

You can use Wiki formating rules to simple formating of text. See Wiki Syntax for more.

Usage:

• aString asWikiHtml returns a Html from aString, which is made in Wiki syntax
• aWebElement addText: yourString asWikiHtml

Most usefull Wiki syntax rules:

• To create a heading, start a line with a ! character. More ! gives deeper headings.
• To create a bullet list item, start a line with a star character. More gives deeper lists.
• To create a numbered list item, start a line with a # character. More gives deeper lists.
• To create a horizontal line, start a line with '----'.
• To create a table, start the line with a | (vertical bar) character followed by
  • for right alignment

For each cell in the row, separate again by two such characters. Successive lines that start with the | and one of the above characters are added to the same table.

• Use any HTML you want. The Wiki formatting rules will not be applied between a PRE tag.

10. Content types, MIME, file extensions

• Every domain object which wants to be represented, can redefine method #contentType which should return appropriate MIME type, eg. 'image/gif'
• default content type is 'text/html', which is appropriate for most cases
• MIMEMap is an object which maps content types to file extensions and back:
  • self site mimeMap extensionForType: 'image/jpeg'
  • self site mimeMap typeForExtension: 'jpg'
• MIMEMap is by default filled with map from Apache file /etc/httpd/mime.types

11. Response headers

Every domain object can direct a creation of headers in http response by overriding some methods in a class Object, protocol AIDA web:

• contentType : return a content type of that object, eg 'image/gif'. Default is 'text/html'. This header is always included in http response
• modifiedTimestamp : when an object content was last modified. Default is nil, which means that this header ('Last-Modified:') is not included in response
• expiresTimestamp : when an object content will probably change. Default is modifiedTimestamp, which means that this header ('Expires:') is included in response if modifiedTimestamp is set and will cause a page reload regardless of age of object.

For more see HTTP/1.1 specs www.ietf.org/rfc/rfc2616.txt

12. Page header elements, meta tags etc

• In a header of a web page you can put many additional information, which is not shown in browser but are usefull for search engines. Those tags are:
  • meta - for additional info not provided in other header tags
  • link - for outside documents like external stylesheet etc
  • script - links to external javascript
  • style - for inline CSS definitions
  • object - like java applets ..
• WebPage has following methods for managing header elements:
  • addLinkToScreenStyleSheet: anObjectOrUrl
  • addLinkToPrintStyleSheet: anObjectOrUrl
  • addLinkToAlternateScreenStyleSheet: anObjectOrUrl
  • addMetaContentType: aString (example: 'text/html; charset=iso8859-2')
  • addMetaDescription: aString
  • addMetaKeywords: aString (keywords separated with , )
• WebStyle htmlHeaderElements is a method to set your header tags like keywords and description. It is called from pageFrameWith:title:

13. Anchors

Anchors are handy for precise positioning on a page. You add anchor to your url, so you can position a view point to an exact place on the target page. You need to:

1. place an anchor name to target page
2. add an anchor name to url pointing to target page

You do that in Aida that way:

1. place an anchor to a page: anElement addAnchorName: 'anchor123'
2. make a link with refering to an anchor: addLinkTo: (Array with: self observee with: 'anchor123')

You can do 2. in every method which includes linkTo: . Just simply replace anObject to make url for, with array of two elements: anObject and anchor name

14. Comments

A pseudo web element WebComment is used to add comments to be seen in HTML code only:

• anElement addComment: 'my comment'

15. Help

• Every App and every view can have its own help page.
• All you need is to add help link on your page or any web element:
  • self addHelpLink
• until help page is not filled with content, help link will be shown only to admins. By clicking on it admin will get an empty form and after filling it and submit, a newly created help page will be shown to other users too.
• link is CSS class #helpLink in WebStyle css22Links. Overview this method if you want different style for help link on your page.
• Every help page have unique url in format like http://www.server.com/help/AdminApp/main.html for view #main in AdminApp
• WebHelp
• WebHelpPage

16. Live images

• For dynamic generation of images on a web page
• component WebLiveImage and its subclasses
• image is first painted as VisualWorks pixmap, then converted to GIF
• see example in WebDemoApp viewLiveImage
• example subclass: WebGraph

Usage

1. create an instance of WebLiveDemo or subclass and store it in app instvar:
   • self liveImage: WebLiveImage new
2. add it to your web page similar to ordinary image:
   • self addImage: self liveImage

17. Document types (DOCTYPE)

Default webpage doctype is HTML, that is HTML5, but you can set on your App doctypes with following methods:

• setHTML401Strict
• setHTML401Transitional
• setXHTML10Strict
• setXHTML10Transitional

You can even mix doctypes in your app, every view can have its own doctype.

In case of XHTML doctype the HTML code will be generated properly, with self closing tags ( /> ) where appropriate (like in page breaks: <
)

There is also a method WebElement>>isXHTML to check, when you are composing the XHTML page and when a HTML one.