[Seaside] Load jQuery themes resources in the image

Gastón Dall' Oglio gaston.dalloglio at gmail.com
Sat Mar 17 11:39:13 UTC 2012


Hi all.

Three months ago I started an seaside application, with jquery themes
support, which should be easy to use on any PC, for example taking it on a
pendrive, without installation of other software such as apache, and
without need a internet conection. When attempting to load the jquery
themes in a file library and realized it did not work because the images of
themes are in the subfolder "images", and on the other hand was tedious to
load each one of the issues at hand. At the time unaware that the seaside
team was working on it, so I made my own attempt. Of course this solution
does not solve almost any major problems silver here [1] but still share
what I did in case someone finds it useful.

[1] http://code.google.com/p/seaside/issues/detail?id=267



NOTE: tested only in Seaside 3.0.6 in Pharo.

FOR THE IMPATIENT
¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬

Simply load the lastest release of Webtalk-Libraries-Core and
Webtalk-Libraries-Themes packages, that at write this is:

Gofer new
   url: 'http://ss3.gemstone.com/ss/tongadall';
   version: 'Webtalk-Libraries-Core-GastonDallOglio.3';
   version: 'Webtalk-Libraries-Themes-GastonDallOglio.1';
   load.

Now, you may use the file libraries JQBaseThemeDevelopment and their
subclasses to get jQuery themes resources, served directly from the pharo
image and without need a internet conection.

For example go to:

http://localhost:8080/files/JQBlackTieThemeDevelopment/jqueryuitheme.css
http://localhost:8080/files/JQBlackTieThemeImages/ui-icons_222222_256x240.png
http://localhost:8080/files/JQBlackTieThemeDevelopment/images/ui-icons_222222_256x240.png

Modify the following to use the examples jQuery ui of seaside with these
libraries:

JQUiAllFunctionalTests>>initialize
   super initialize.
   themes := (JQBaseThemeDevelopment withAllSubclasses
       collect: [ :each | each default ])
           asSortedCollection: [ :a :b | a themeName < b themeName ].
   theme := JQBaseThemeDevelopment default

For try, disconnect internet, open new session and go to:
http://localhost:8080/javascript/jquery-ui/accordionwidget/

FOR NORMAL PEOPLE :)
¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬

In jqueryuitheme.css, below "/* states and images */" is located this line:
.ui-icon { width: 16px; height: 16px; background-image:
url(images/ui-icons_222222_256x240.png); }

Becouse "images/ui-icons_222222_256x240.png" is a relative path, browser
traduce it in "
http://localhost:8080/files/JQBlackTieThemeDevelopment/images/ui-icons_222222_256x240.png
"

For that, "images/ui-icons_222222_256x240.png" is searched in
JQBlackTieThemeDevelopment file library, and with the WAFileLibrary's
implementation a notFound error is returned to the browser.

For manage this, I have inherited WAFileLibrary and override #handle, like
this:

WTLinkableFileLibrary>>handle: aRequestContext
"Depending on the size of a path requested, find a WAFileLibrary linked to
first element to ask handle remaining path, or directly handle this request
in super method. If a WAFileLibrary is not found return self, for that a
notFound error is response to the client."

   aRequestContext consumer peekToEnd size > 1
       ifTrue: [ | linkedLibrary |
           linkedLibrary := self links at: aRequestContext consumer next
                ifAbsent: [ ^ self ].

            linkedLibrary handle: aRequestContext ]
       ifFalse: [
           super handle: aRequestContext ].

Then, you can link a file library with another one, using the string
present in the path, for example:

JQBlackTieThemeDevelopment default links at: 'images' put:
JQBlackTieThemeImages default.

FOR DEVELOPERS
¬¬¬¬¬¬¬¬¬¬¬¬¬¬

Instead the load the package Webtalk-Libraries-Themes within a given
version of jQuery themes, you can load another using WTJQueryThemesManager.
I made a very rudimentary first version of WTJQueryThemesManager because I
needed it for a job first of all, but now I will continue develop this to
learn and fun :)

Well, put jQuery themes in the image folder, for example download one
package from http://blog.jqueryui.com/. I used "
http://jquery-ui.googlecode.com/files/jquery-ui-themes-1.8.16.zip" for made
Webtalk-Libraries-Themes-GastonDallOglio.1.

image-folder
   L  jquery-ui-themes-1.8.16
         L  themes
               L  base
               L  black-tie
               L  blitzer
...

Next, load only core package:

Gofer new
    url: 'http://ss3.gemstone.com/ss/tongadall';
    version: 'Webtalk-Libraries-Core-GastonDallOglio.3';
    load.

Then, create the file library classes for the themes and load the resources
in them, using WTJQueryThemesManager:

WTJQueryThemesManager
    addAllThemes: '1.8.16'
    resourcesDir: ''
    sufixClass: 'Development'.

WTJQueryThemesManager
    addAllThemes: '1.8.16'
    resourcesDir: 'minified'
    sufixClass: 'Deployment'.

WTJQueryThemesManager
    addAllThemes: '1.8.16'
    resourcesDir: 'images'
    sufixClass: 'Images'.

And now, link the libraries:

WTJQueryThemesManager
    linkAllThemes: JQBaseThemeDevelopment
    link: 'images'
    resources: JQBaseThemeImages.

This is sufficient to use the themes.

In parallel, you can load another version of jQuery themes:

JQBaseThemeDeployment duplicateClassWithNewName: #JQBaseThemeDeployment1818.

WTJQueryThemesManager
    addAllThemes: '1.8.18'
    resourcesDir: ''
    sufixClass: 'Development1818'.

JQBaseThemeImages duplicateClassWithNewName: #JQBaseThemeImages1818.

...


That's all folks :)

Any feedback is welcome, Regards.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20120317/42698943/attachment-0001.htm


More information about the seaside mailing list