Re: [Help-smalltalk] Iliad: how to assign a css class to a div? A proposal

[Stefan Schmiedl]

On Wed, 29 Jul 2009 16:10:09 +0300
Bèrto ëd Sèra <address@hidden> wrote:

> Hi!
> 
> > Another is that I can always wrap the widget content with an extra div
> > of my own, separating the application from the framework a bit more.
>  I love this! ehrr... how do you do it? I don't seem to have found a
> code example for this

quoting myself from 
http://smalltalk.gnu.org/blog/swsch/onlinetester-arcane-adventure-part-4-more-widgets-ajax-requests

Iliad.Widget subclass: OTAufgabeWidget [ 
  contents [ 
    ^ [ :e | |d|
      d := e div class: 'aufgabe'.
      d div class: 'vorspann'; html: aufgabe text.
      fragen do: [ :f | d build: f ].
    ]
  ]

Speaking in HTML-ese, e is the _widget-div, to which I'm adding another div
with class="aufgabe", referenced by the local variable d. From that point on,
I'm strictly dealing with d, which means I'm adding stuff to _my_ "inner" div,
instead of the widget's "outer" div.

You'd do something similar when dealing with forms. A more complex example
from the same page:

Iliad.Widget subclass: OTFrageWidget [ 
  contents [ 
    ^ [ :e | |form group|
      group := self session nextId.
      e div class: 'frage'; html: frage text.
      form := e form class: 'antwort'.
      frage antworten doWithIndex: [ :a :i| |id b|
        id := self session nextId.
        b := form radioButton
          id: id; name: group;
          action: [ self postAnswer: i to: frage ].
        i = self selection ifTrue: [ b beSelected ].
        form label for: id; html: a.
        form space.
      ].
      form span class: 'wert'; html: frage wert printString , ' P.'.
      e div class: 'break'.
    ]
  ]

which gives something like:

  div class="_widget"
    div class="frage"
      some text
    form class="antwort"
      some radiobuttons
      span class="wert"
    div class="break"

HTH,
s.