[Seaside] Multiple style sheets

[Philippe Marschall]

Hi

See attached file for an example that works for me.

God damn WA(Rendered)HtmlRoot is such a piece of crap. Hack on top of
hack. Uglier than the night. Needs canvas now!

Philippe


2006/10/1, Burella Juan M. <juan.burella at gmail.com>:
> Philippe, thanks for your reply. I've downloaded the latest Seaside and
> tested your suggestion but the styles aren't swapped at all.
> If you look carefully, there's two values of the "rel" property:
>
> <link rel="stylesheet"  ...
> <link rel="alternate stylesheet" ...
>
> rel="stylesheet" it means to "default stylesheet"
> So I've added the following:
>
> addLinkToStyle: url titled: aString media: aMediaString
>
>         self addHeadElement:
>                 (self addStyleElementWithHref: (self absoluteUrlForResource:
> url asString)
>                       titled: aString
>                       media: aMediaString)
>
> addStyleElementWithHref: anUrlString titled: aTitleString media:
> aMediaString
>         ^(self styleElementWithHref: anUrlString)
>     attributeAt: 'rel' put: 'alternate stylesheet';
>                 attributeAt: 'title' put: aTitleString;
>                 attributeAt: 'media' put: aMediaString;
>                 yourself
>
> and finally in my WATestComponent
>
> updateRoot: aRoot
>     "Configure the receiver's meta-data'"
>
>    super updateRoot: aRoot.
>   aRoot addHeadElement:
>     ((WAHtmlElement named: 'meta')
>         attributeAt: 'author' put: '-';
>         attributeAt: 'description' put: '-';
>         attributeAt: 'content-type' put: 'text/html; charset=UTF-8'
>         yourself).
>    aRoot linkToStyle: 'template\styles\bare.css' titled: 'Bare' media:
> 'screen, projection'.
>    aRoot addLinkToStyle: 'template\styles\blue.css' titled: 'Blue' media:
> 'screen, projection'.
>     aRoot linkToScript: 'template\styles\styleswitch.js'
>
> It doesn't work. I've putted an alert() in the .js file and is showed when
> the page is rendered, but it seems the styles aren't read or parsed,
> although they both "<link rel=...>" specificationes appear in the head of
> the xhtml. Commenting out the super send doesn´t have any effect too.
> However, when I've defined the message #style
>
> style
>     | file |
>     file := (FileStream readOnlyFileNamed: 'template\styles\blue.css')
> ascii.
>     ^[file contents] ensure: [file close].
>
> the page is rendered with the blue.css style. But nothing happens when I
> clicked the link to swap the style. Hence it seems to be like the style
> stuff is hardcoded to the #style message in the client class (my
> WATestComponent). Any ideas? Is this a bug?
> I've tested with Squeak 3.8 and Firefox 1.5 and Opera 9. You can test with
> the attached .js
>
> Greetings
>
>
> On 9/20/06, Philippe Marschall < philippe.marschall at gmail.com> wrote:
> > 2006/9/20, Philippe Marschall < philippe.marschall at gmail.com>:
> > > 2006/9/20, Burella Juan M. <juan.burella at gmail.com>:
> > > > I want my page to be able to alternate between two stylesheets. You
> can read
> > > > the technique here:
> > > > http://www.alistapart.com/stories/alternate/
> > > >
> > > > and examples here: http://www.csszengarden.com/
> > > >
> > > > I've written this using XHTML/CSS and a Javascript styleswitcher (so
> it's
> > > > client side switching)  in the following way:
> > > >
> > > > <link rel="stylesheet" href="styles/bare.css" type="text/css"
> title="Bare"
> > > > media="screen, projection" />
> > > > <link rel="alternate stylesheet" href="styles/blue.css"
> type="text/css"
> > > > title="Blue" media="screen, projection" />
> > > > <script type="text/javascript"
> > > > src="styles/styleswitch.js"></script>
> > > >
> > > > does anybody knows how can (or at least the easiest way) achieve this
> in
> > > > Seaside?
> > > >
> > > > (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi
> Bryant
> > > > from may 2004 but haven't found anything in the SqueakMap and Cincom
> Public
> > > > Repository, any idea?).
> > >
> > > Try the following, add these methods to WAHtmlRoot
> > >
> > > styleElementWithHref: anUrlString titled: aTitleString media:
> aMediaString
> > >         ^(self styleElementWithHref: anUrlString)
> > >                 attributeAt: 'title' put: aTitleString;
> > >                 attributeAt: 'media' put: aMediaString;
> > >                 yourself
> > >
> > > linkToStyle: url titled: aString media: aMediaString
> > >         self addHeadElement:
> > >                 (self
> > >                         styleElementWithHref: (self
> absoluteUrlForResource: url asString)
> > >                         titled: aString
> > >                          media: aMediaString)
> > >
> > > then in your root component class:
> > >
> > > updateRoot: anHtmlRoot
> > >         super updateRoot: anHtmlRoot.
> > >         anHtmlRoot linkToStyle: 'styles/bare.css' titled: 'Bare' media:
> > > 'screen, projection'.
> > >         anHtmlRoot linkToStyle: 'styles/blue.css' titled: 'Blue' media:
> > > 'screen, projection'.
> > >         anHtmlRoot linkToStyle: 'styles/styleswitch.js'
> >
> > The last line should of course read:
> >
> >          anHtmlRoot linkToScript: 'styles/styleswitch.js'
> >
> > Philippe
> > _______________________________________________
> > Seaside mailing list
> > Seaside at lists.squeakfoundation.org
> >
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> >
>
>
>
> _______________________________________________
> Seaside mailing list
> Seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: StyleDemo-pmm.1.mcz
Type: application/octet-stream
Size: 1593 bytes
Desc: not available
Url : http://lists.squeakfoundation.org/pipermail/seaside/attachments/20061002/f4c51925/StyleDemo-pmm.1.obj