Load jQuery themes resources in the image

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Load jQuery themes resources in the image

Gastón Dall' Oglio
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.



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.

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside