Iliad: how to assign a css class to a div? A proposal

HI again!

One of the things that make designers *really* independent is the
possibility to assign css rules to a given part of the screen. Since
we have clearly identifiable widgets, this should be even handier in
Iliad.

Now, class="_widget" is set here:

    buildContents [
        "Do *not* override this method. Use #contents instead"
        <category: 'building'>
       
        ^self newRootElement div
            id: self id;
            class: '_widget';
            build: decorator contents;
            yourself
    ]

I would rather not modify this much, and simply add a cssClass method like:

    cssClass [
        "Override this method to assign a particular css class to your widgets"
        <category: 'building'>
       
        ^'_widget'.
    ]

    buildContents [
        "Do *not* override this method. Use #contents instead"
        <category: 'building'>
       
        ^self newRootElement div
            id: self id;
            class: self cssClass;
            build: decorator contents;
            yourself
    ]

Would this suit everybody?

Berto

--
==============================
Constitution du 24 juin 1793 - Article 35. - Quand le gouvernement
viole les droits du peuple, l'insurrection est, pour le peuple et pour
chaque portion du peuple, le plus sacré des droits et le plus
indispensable des devoirs.


_______________________________________________
help-smalltalk mailing list
[hidden email]
http://lists.gnu.org/mailman/listinfo/help-smalltalk

On 07/29/2009 01:44 PM, Bèrto ëd Sèra wrote:
> I would rather not modify this much, and simply add a cssClass method like:

Yeah, definitely.

Paolo


_______________________________________________
help-smalltalk mailing list
[hidden email]
http://lists.gnu.org/mailman/listinfo/help-smalltalk

On Wed, 29 Jul 2009 14:44:25 +0300
Bèrto ëd Sèra <[hidden email]> wrote:

> I would rather not modify this much, and simply add a cssClass method like:

I have not yet felt the need to interfere with that part, and I usually
try to make a mess where I can :-)

One reason is that, if you want to change css properties for all widgets,
you can set them for the css class _widget.

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.

Finally, you can replace the default css class _widget by simply using

  contents [
    ^ [ :e | e class: 'whatever'. ... ]
  ]

I would not recommend doing this, however, since whatever "css magic"
the framework might provide in the supplied css file, will stop working,
as the static file will not be updated automatically.

s.


_______________________________________________
help-smalltalk mailing list
[hidden email]
http://lists.gnu.org/mailman/listinfo/help-smalltalk

On Wed, 29 Jul 2009 16:10:09 +0300
Bèrto ëd Sèra <[hidden email]> 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.


_______________________________________________
help-smalltalk mailing list
[hidden email]
http://lists.gnu.org/mailman/listinfo/help-smalltalk

On 07/29/2009 03:52 PM, nicolas petton wrote:
>
> The _widget css class is needed by the framework to update widgets. I
> woudn't modify this.

What about

        self class: (self cssClass
                     ifNil: ['_widget']
                     ifNotNil: [:class | '_widget ', class])

?

Paolo


_______________________________________________
help-smalltalk mailing list
[hidden email]
http://lists.gnu.org/mailman/listinfo/help-smalltalk