Here's how to create a Seaside wrapper using, in this case, the Rainbow Text jQuery plugin as the example.

0 - Download the source into, say, '/home/pierce/src/jq/Rainbow-Text'.

1 - Create a file library.

WAFileLibrary subclass: #JQRainbowTextDevelopmentLibrary
    instanceVariableNames: ''
    classVariableNames: ''
    category: 'PN-JQuery-UI'

2 - Load the Javascript (and CSS, if any) into the file library:

JQRainbowTextDevelopmentLibrary addFileAt: '/home/pierce/src/jq/Rainbow-Text/rainbow.js'.

3 - Subclass JQWidget.

JQWidget subclass: #JQRainbowText
    instanceVariableNames: ''
    classVariableNames: ''
    category: 'PN-JQuery-UI'

4 - Add instance methods.

method
    ^ 'rainbow'
    
initialize
    super initialize.
    self animate: true;
        animateInterval: 100;
        colors: ('#ff0000' '#f26522' '#fff200' '#00a651' '#28abe2' '#2e3192' '#6868ff')
    
animate: aBooleanOrStringOrNumber
    self optionAt: 'animate' put: aBooleanOrStringOrNumber
    
animateInterval: aNumber
    self optionAt: 'animateInterval' put: aNumber
    
colors: anArray
    self optionAt: 'colors' put: anArray

5 - Create the example component.

WAComponent subclass: #JQRainbowTextExample
    instanceVariableNames: ''
    classVariableNames: ''
    category: 'PN-JQuery-UI'

6 - Add class-side methods.

canBeRoot
    ^ true
    
description
    ^ 'jQuery Rainbow Text'
    
initialize
    | app |
    app := WAAdmin register: self asApplicationAt: '/jqrainbowtext'.
    app addLibrary: JQDevelopmentLibrary;
       addLibrary: JQRainbowTextDevelopmentLibrary.

7 - Add instance methods.

updateRoot: aRoot
    super updateRoot: aRoot.
    aRoot script url: (JQRainbowTextDevelopmentLibrary urlOf: #rainbowJs).
    
renderContentOn: html
    | id |
    id := html nextId.
    html div id: id; with: 'Because Rainbow Text Rules!'.
    html script: (html jQuery id: id) rainbowText

8 - In a workspace, initialize JQRainbowTextExample.

JQRainbowTextExample initialize

9 - Create a method in JQueryInstance.

rainbowText
    ^ self create: JQRainbowText

10 - In the browser, visit 127.0.0.1:8080/jqrainbowtext.

The above is the standalone way. Alternatively, preferably, integrate the plugin into JQueryWidgetBox.

Tags: JQuery, Seaside