[Seaside] Woohoo, made a list of links! Now for the next bit...

[Avi Bryant]

On Sat, 11 May 2002, Tim Rowledge wrote:

> To present my little tests I want to start with a page that looks like:-
> +++++++++++++
> Some heading
>
>  Q. 1  |   The description of the chosen test
>  Q. 2  |   giving details of what subjects it
>  Q. 3  |   covers etc.
>  etc   |
> +++++++++++++
>
> Once a 'Q' link is hit, it should change to
> +++++++++++
> Some heading
>
>  Q. 1  |   The purpose of the little widget on top
>  Q. 2  |   of Obi-Wan's hat is to:-
>  Q. 3  |   a) wobble
>  etc   |   b) confuse clones
> +++++++++++++

Right.  So you'll probably want something like this for your main page:

<table>
<tr>
<td>
  <ul>
   ...Q1, Q2, Q3...
  </ul>
</td>
<td>
  <page sea:id="questionPane">
</td>
</tr>
</table>

Where <page> is the "nice embedding protocol" you should use.  Ignoring
your intro page for the moment, you'll then want something like the
following arrangement:

- have an inst var keeping track of the currentQuestion
- build some kind of a QuestionView component that can be given a question
(let's say it has a #question: method)
- set up your questionPane to be a QuestionView that's given the
currentQuestion, by adding this to your main page:

addBindingsTo: template
  (template elementNamed: 'questionPane')
    class: QuestionView;
    set: #question toPath: 'currentQuestion'

This will have a QuestionView be displayed where the <page
sea:id="questionPane"> is, and will call #question: with the current value
of currentQuestion each time before displaying it.  That all make sense?

Now, as for displaying the intro text when no question is selected,
you probably just want some kind of conditional in there, like:

<td>
  <span sea:id="currentQuestion.notNil=true">
     <page sea:id="questionPane">
  </span>
  <span sea:id="currentQuestion.notNil=false">
     [testIntroText]
  </span>
</td>

Now, I don't know what you want to happen in the QuestionView when an
answer is chosen.  Maybe you just want to send an appropriate message to
the question object, maybe you'll want to notify your main page for some
reason.  If you do, you can either address it directly by sending messages
from the QuestionView to 'parent', or you can have the QuestionView take a
block, and then bind that block to a method in the parent:

addBindingsTo: template
  (template elementNamed: 'questionPane')
    class: QuestionView;
    set: #question toPath: 'currentQuestion';
    set: #onAnswer toMethod: #answerQuestion:

The onAnswer block in the QuestionView will now invoke the parent's
#answerQuestion: method.  You probably don't actually need such loose
coupling, but it would be useful if you were reusing the QuestionView in a
lot of places.

There's a little bit more about subcomponents from a previous email at
http://swiki.squeakfoundation.org/sea/27 .

Cheers,
Avi