# How-to create own site/application in AIDAweb/Scribo image.
This is, may be, a brief how-to create own web application 
in AIDA/Scribo. There is not too much info on this, 
so - let's start.

I've used parts of administrator's guide (2009/04) and, hopefully, 
filled the blanks there. However, it's still work in progress and 

I'm going to update it as I will advance through AIDAweb (or I won't).

I hereby would like to say thank you for all info provided 
in #aidaweb@freenode.net. Without it, it'd be all only a dream!


## Last update
2009/29/04

## The latest news
AIDA6.0beta2 is out!!!

## Goal
Goal is to create stand-alone web application apart from default 
AIDAweb/Scribo look.


## About
Zdenek Styblik
2009/04
I guarantee nothing of provided in this text :) All things you do,
you do on your own will, you take all risks, and so on.


## 1. Installation

### 1.1 Getting one-click image
Get pre-configured image from http://www.aidaweb.is/, or install 
Sport, AIDAweb, Scribo via Monticelo. Order of packages is mandatory 
afaik.

### 1.2 Installing packages into image
Or you can install packages into your image as mentioned in blog [1]:

  Transcript open.
  Installer installUrl: 
    'http://www.squeaksource.com/SPort/Sport-2.031.mcz'.
  Installer installUrl: 
    'http://www.squeaksource.com/Swazoo/Swazoo-2.2.mcz'.
  Installer installUrl: 
    'http://www.squeaksource.com/Aida/Aida6.0-beta.2.mcz'.

Don't forget to replace links with current versions!

## 2. Start/stop website
Even though SwazooServer should be started after openning image, 
it's good to know how to handle web server.

* To start/stop server issue:
  SwazooServer stop.
  SwazooServer start.

* To start/stop specific website:
  (AIDASite named: 'mysite') start.
  (AIDASite named: 'mysite') stop.


## 3. Adding new site

### 3.1 Removing Scribo site
It might be a good idea to remove or, at least, change hostname of 
site named 'Scribo'. The reason is that you can't create two sites 
with the same host. How to do it?

* Changing the host:
1] Inspect 'SwazooServer singleton sites'
2] In Inspect window Explore an array with 'an AIDASite' in it
3] And the 'host' is hidden under Scribo->uriPattern->a Swazoo...
4] change it to whatever you want :)

* Deleting the site:
1] Inspect 'SwazooServer singleton sites'
2] In Inspect window type 'self removeLast', or 'self removeFirst' 
as this command is reusable for another time ;)

### 3.2 Adding access to the site

#### 3.2.1 Adding a site accessible from public internet
First you need to register your hostname and IP address on some DNS 
server. Then use a following script to add a new virtual web site to 
your server and start it:

  name := 'mysite'.
  hostname: 'mysite.company.com'. "add in your DNS first!"
  ip := 'myserver.company.com'.
  styleClass := 'WebStyle'. "change if you provide your own subclass"

  AIDASite newNamed: name.
  (AIDASite named: name) host: hostname ip: ip port: 80.
  (AIDASite named: name) styleClass: styleClass.
  SwazooServer startSite: name.

If you run the new site on Linux and on ports below 1024, be sure to 
run a whole Smalltlak image as root.

#### 3.2.2 Adding a site on locahost
Sometimes is handy for development and testing to run a new site 
locally, before it is put on public internet. If you want to add 
a site which is accessed only locally, from your computer (as demo 
site is) you need to register you hostname in local hosts file:

  * on Linux: /etc/hosts
  * on Windows: c:\\WINDOWS\\system32\\drivers\\etc\\hosts

Put in hosts file something like:

  127.0.0.1    www.mysite.com

Now you can add new site with modified script above or a bit 
simplified one:

  AIDASite newNamed: 'mysite'.  
  (AIDASite named: 'mysite') host: 'www.mysite.com' ip: '127.0.0.1' port: 8888.
  (AIDASite named: 'mysite') start.

A new site is now accessed from local machine only 
at http://www.mysite.com .

#### 3.2.3 Site options
There are some options you might want to inspect. I was specially 
interested in changing contact e-mail.

  (AIDASite named: 'mysite') urgentNotificationEMail: 'webmaster@mysite.tld'.


## 4. Create web application's classes
Let's create simple web application, that does "nothing". I've used 
parts of the code from tutorial here and there, well :)

  Object subclass: #MyWeb
	  instanceVariableNames: 'parent'
	  classVariableNames: ''
	  poolDictionaries: ''
	  category: 'MyDomain'

Class #MyWeb has no methods (now). May be, it's a good idea to add 
accessors for 'parent'.

  WebApplication subclass: #MyWebApp
	  instanceVariableNames: ''
	  classVariableNames: ''
	  poolDictionaries: ''
	  category: 'MyDomain'

As you can see, class #MyWebApp is a subclass to #WebApplication. 
Linking together with #MyWeb is done automatically. Naming in this 
way is mandatory.
Methods from #MyWebApp are:

* instance:

  myweb
    ^self observee.

  viewMain
    | e |
    e := WebElement new.
	  e addTextH1: 'My web site!'. 
	  e title: 'Foo bar :)'.
	  self add: e.

First, I have to say that method 'myweb' is my guess. I'm not sure 
(right now), if it's really needed.
Second, method (it's name) 'viewMain' is default view method for 
#MyWebApp and for every application class you're going to create. 
ToDo - more on MyWebApp


## 5. Registering a root domain
To access your domain model from the web, you need to set a url 
at least to a root object of fomain model. Urls to other domain 
objects will be created automatically. Besides that it is also 
recommended to register domain root to AIDASite user services.

To do so, we have to register #MyWeb as an user service and name 
it '#myweb'. Then we set an '/index.html' url for it:

  webapp := MyWeb new.
  (AIDASite named: 'mysite') addUserService: webapp named: #myweb.
  (AIDASite named: 'mysite') urlResolver defaultURL: '/index.html' forObject: webapp.

As the next step, I've changed method in AIDASite>>defaultUserService 
to:

  defaultUserService
    ^self myweb

This way you make your web application to be default web site. I'd 
say the equivalent of this is Apache's 'DocumentRoot' in global scope.

And I've created method 'myweb' in #AIDASite:

  myweb
    ^self userServices at: #myweb ifAbsent: [
            self addUserService: MyWeb new named: #myweb].


## 6. Security
As I've been told by lyn_x, you have to allow users to view your 
application. I don't know (yet) how to do this from workspace, but 
from the web:

1] go to the http://localhost:8888/admin.html
2] login using admin/password, unless you've changed this
3] if your admin iface doesn't show up (like it doesn't for me, 
because navbar to the left is history), 
try url http://localhost:8888/security.html
4] now: Groups >> All users >> Access rights
5] find your app (MyWebApp)
6] update access rights

Easy! :)


## 7. The look
It's probable that you want to change the look - your own layout, 
colors, etc. At least, I wanted to do this.

### 7.1 HTML layout
There is not much to tell. If you want your own HTML layout, you will 
have to implement method pageFrameWith. All is assembled from 
WebElements and you put heading, nav, footer, etc. together - here.
Content - that's an application part.
See #WebStyle>>pageFrameWith for more inspiration.
An Example:

  pageFrameWith: aWebElement wide: aWideElement title: aTitleString 
    "This method is actually a modified copy of an Scribo-Wiki method."
  	| element elementSideMenu |
	  self app clear; title: aTitleString.
  	self htmlHeaderElements.
  	elementSideMenu := WebElement new.
	  elementSideMenu addText: self layoutSideMenu.
  	element := (WebElement newId: #main) 
	  			add: ((WebElement newId: #topmenu) 
  	 				add: self layoutHeading;
	  				 yourself);
  				add: ((WebElement newId: #cframe) 
	  				add: ((WebElement newId: #menuside)
		  				add: elementSideMenu;
			  			yourself);
  					add: ((WebElement newId: #content)
	  					add: aWebElement;
		  				yourself);
			  		yourself);
   		yourself.
  	^ self app add: element;
	  	 yourself

#### 7.1.1 XHTML output
For XHTML 1.0 output, you'll have to add these lines into 
pageFrameWith method:

  self app clear; title: aTitleString.

	self app setXHTML10Transitional.
	self app htmlTagAttributes: 'xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"'.

	self htmlHeaderElements.

Lines required (setting) XHTML 1.0 output are separated by empty 
line from other lines of code.

#### 7.1.2 Lists
Lists are usefull for menus, for example. To create unordered list:
  
  uList := WebList new.
	uList kind: #unordered.
	uList add: ((WebListItem new) 
            addText: 'Item #1';
              yourself);
            add: ((WebListItem new)
              addText: 'Item #2';
              yourself).

Notice method #uList>>kind. This method sets whatever the out-bound 
(?) tag is going to be. You can choose from <dl>, <ol> and <ul>.

#### 7.1.3 Links
To create a link <a href="/index.html">foo</a>:

  (WebLink new) text: 'foo'; urlReference: '/index.html').

Class WebLink is a subclass to a WebElement, so it's possible to use 
methods from WebElement. I'm pretty sure there is more, but - check 
out by yourself.


### 7.2 CSS
Styling seems to be quite simple, at least for now. First, you 
have to create subclass of WebStyle:

  WebStyle subclass: #MyWebStyle
    instanceVariableNames: ''
    classVariableNames: ''
    poolDictionaries: ''
    category: 'MyDomain'

It's good idea to create filters to get better orientation 
in methods, but it's up to you.
Another thing is that you can subclass #defaultWebStyle. Advantage is 
you won't have to reimplement method-by-method into your style, and 
so on. However, I'm a little bit afraid about methods from default 
style will get in the way - and one will have to spend a lot of time 
by debuging, looking for what-to-reimplement (More comments on this 
one?)
Next, you can create style methods. All style methods have to start 
with 'css' prefix. And what's inside such method?

  css10layout
    ^'body {margin-left: 10px;}'.

I'm almost sure you've noticed number in the name of the method. 
Number tells the order of how css styles will appear in screen/print 
css file.

As the final step, associate your style class with website:

  (AIDASite named: 'mysite') styleClass: 'MyWebStyle'

And that's all. You can, of course, subclass any of existing style 
classes and re-use styles resp. methods. I believe, it's also 
possible to subclass your own styles eg.:

  MyWebStyle subclass #MyWebStyle2.

to create different combinations. May be, this could be used for 
different colour styles of your web application.


## 8. Localization
Note: AIDA6.0b2 has localization implemented, yet i didn't have time 
to test it.

It's not implemented yet, so if you can't do only with ASCII chars 
only, then you are out of luck (for the moment).
There is a way - load strings from files, but - reality check!


## 9. Images

### 9.1 Changing favicon
Changing favicon is fairly easy. After executing command bellow, 
the icon should be accessible under '/img/favicon.ico'.

  MyWebStyle new importImage: 'favicon' from: '/home/user/favicon.ico'.

It sounds like a good idea to me, to have own 'favicon.ico' 
accessible through '/favicon.ico' rather than path mentioned above. 
To do so, you'll have to change settings of your site under 
#systemServices>>URLResolver>>allURLLinks resp. remove link to AIDA's 
favicon and modify path to yours.

If you feel doing it manually:

  links := (AIDASite named: 'mysite') urlResolver allURLLinks.
  mystyle := MyWebStyle new.
  methodImage := WebMethodImage new.
  methodImage method: #favicon.
  methodImage object: mystyle.
  methodImage contentType: 'image/x-icon'.
  links at: '/favicon.ico' put: methodImage.

I don't know what to add. It replaces current '/favicon.ico' pointer 
to #MyWebStyle>>favicon.

### 9.2 Loading up images
It's the same as with favicon. Just modify command above. Image will 
be accessible through '/img/methodname'.

  MyWebStyle new importImage: 'myImagePNG' from: '/home/user/myImage.png'.

Imported image, from command above, will be accessible 
via '/img/myImagePng.png'.

### 9.3 Images inside
If you want to add an image to your site, then

  e := WebElement.
  e addGif: #myGif.

where #myGif is method containing GIF image.


## XX. Hacks
Aka finish at home.
Valid for AIDA 5.6 and AIDA 6.0b1

### XX.1 Adding DOCTYPE - AIDA 5.6
Go to #WebPage>>printHTMLPageOn and add desired DOCTYPE. I must say 
I've succeeded only with Transitional/Strict as XHTML would require 
different parser.

### XX.2 Fixing <script> for JavaScript - AIDA 5.6/6.0b1
Go to #WebPage>>addJavascript and remove 'language="JavaScript"' 
as this is not valid parameter to the <script>.
Don't forget to modify #WebPage>>addLinkToJavaScript and 
#WebPage>>printDummyJavascriptSnippetOn also!

### XX.3 Fix form of the forms - AIDA 5.6/6.0b1 and HTML 4.01 (?)
I haven't found out yet, but you have to add <input> into <div> 
at least. We are talking about autocreated form with object id.
This is, surprisingly, not needed for XHTML 1.0 Transitional.

### XX.4 Fix form's method
Edit #WebForm>>printHTMLPageOn and add ' " ' to method=post there.

### XX.5 Teachin' AIDAweb XHTML - 6.0b1
Note: with introduction of AIDA6.0b2, this has been dropped. 
AIDAb2 has XHTML 1.0 out implemented.

Well, why the hell not?! :) Apply #1 and #2 and #4. Now, you want to edit 
all methods under cathegory 'header elements' in class #WebPage - 
the names eg. addMetaKeyWords. Add slashes to the end of the tags.

Edit #WebInputField>>printHTMLPageOn and add slash to the end of <input>

-...still work in progress.-


## Sources:
[1] German Arduino's blog; 
http://germanarduino.blogspot.com/2008/11/how-to-install-latest-development.html