[Seaside] How to Implement a Menu Component

[Richard Eng]

As promised, I have my test server at home up and running. The URL is:

http://www.goodsexnetwork.com/

Some of the links do nothing. The most interesting page is
"REGISTRATION/LOGIN". You can register and you can login. The Service Centre
page does nothing exciting, except Logout.


My Apache2 configuration is dead-simple. The reason is because I couldn't
adapt any of the blog posts I found about "reverse proxy" and "URL
rewriting" and get them to work. Apache is extremely arcane and I have a
hard time understanding it.

Anyway, here's my Apache2 httpd.conf:

ProxyRequests off
DocumentRoot /var/www
ProxyPass  /goodsexnetwork  http://localhost:9090/seaside/goodsexnetwork
ProxyPassReverse  /goodsexnetwork
http://localhost:9090/seaside/goodsexnetwork

I guess I'll have problems later with scaling and load-balancing. But I'll
cross that bridge when I come to it.


I'll leave the server on till Friday morning. Have to conserve electricity,
you know...  :-)

Regards,
Richard


===========================================================
Richard Eng wrote:

These are the classes representing my various webpages:

#GSAboutUs
#GSContactUs
#GSHomePage
#GSRegistrationLogin
#GSServices

They all subclass #GSTemplate which has the following methods:

#renderAdditionalLinksOn:
#renderFooterOn:
#renderLatestNewsOn:
#renderLinksOn:
#renderLogoOn:
#renderOtherInformationOn:
#updateRoot:

So, for example, #renderContentOn: for #GSServices looks like this:

renderContentOn: html
 html div
  id: 'main';
  with:
   [self renderLinksOn: html.
   self renderLogoOn: html.
   html div
    id: 'content';
    with:
     [self renderMenuOn: html.
     html div
      id: 'column1';
      with:
       [self renderAdditionalLinksOn: html.
       self renderOtherInformationOn: html].
     html div
      id: 'column2';
      with: [html heading level: 1; with: 'services']].
   self renderFooterOn: html]

And #renderMenuOn: looks like this:

renderMenuOn: html
 html div
  id: 'menu';
  with:
   [html unorderedList:
    [html listItem:
     [html anchor
      callback: [self call: GSHomePage new];
      with: 'home'].
    html listItem:
     [html anchor
      callback: [self call: GSAboutUs new];
      with: 'about us'].
    html listItem:
     [html anchor
      id: 'selected';
      with: 'services'].
    html listItem:
     [html anchor
      callback: [self call: GSRegistrationLogin new];
      with: 'registration/login'].
    html listItem:
     [html anchor
      callback: [self call: GSContactUs new];
      with: 'contact']]]

Note that all of the above is a direct mapping of static HTML to Seaside
code, using the web design template that I got from www.openwebdesign.org.
This is particularly nice because the web design template has clear
separation between clean standard-compliant HTML and CSS--it makes my job so
much easier.

#GSServiceCentre is a special-case webpage. It's the main service page for
my website. It does not require the navigational menu, so I don't include
it:

renderContentOn: html
 html div
  id: 'main';
  with:
   [self renderLinksOn: html.
   self renderLogoOn: html.
   html div
    id: 'content';
    with:
     [html div
      id: 'column1';
      with:
       [self renderLogoutOn: html.
       self renderSideMenuOn: html].
     html div
      id: 'column2';
      with: [html render: selectedComponent]].
   self renderFooterOn: html]

The sidebar menu for "service items" is implemented using announcements:

renderSideMenuOn: html
 html div
  class: 'sidebaritem';
  with:
   [html div
    class: 'sbihead';
    with: [html heading level: 1; with: 'service items'].
   html div
    class: 'sbilinks';
    with: [html render: menu]]

Part of the announcement setup involves building the menu (I won't include
all the announcement code):

buildMenu
 menu := GSMenu new.
 #('Ask a question' 'Consultation' 'View my videos' 'View my documents')
 with: {WACounter. GSConsultation. WACounter. WACounter}
  do: [:each1 :each2 |
   | menuItem |
   menuItem := menu menuItemNamed: each1
    withContent: each2 new.
   menuItem announcer
    when: GSMenuItemClicked
    do: [:ann | selectedComponent := ann menuItem component]].

Note that this is a temporary mockup. WACounter is just a placeholder.

On Thursday, I'll show you guys the work-in-progress website, which is
currently forwarded to my test server at home. (This server is rarely up but
just for you folks, I'll leave it up and running for a couple of days.)

Ta-ta till then...

Regards,
Richard