[Seaside] jQuery --> make Tabs
abalonpe at ulb.ac.be
Mon Dec 20 15:55:20 UTC 2010
Ok, no problem.
I'm going to describe the beginner's way to make tabs with jQuery.
1. Get ready: include in your environment all the things to make jQuery
- add the libraries jQUIDevelopmentLibrary and jQDevelopmentLibrary
there is 2 options (as far as I know):
- add them to the configuration of seaside localhost
- open a webbrowser --> localhost:8080/seaside --> config
- add them directly in your code (that's what I did):
- create an initialize method on the class side of the class starting
WAKomEncoded startOn: 8080.
(self registerAsApplication: 'NameOfYourApplication')
preferenceAt: #sessionClass put: WUserSession;
!!!! Don't forget to launch initialize manually in a Workspace
of Seaside/Pharo !!!!
--> YourClass initialize. (doit = ctrl+d)
- add the jQuery CSS
- Find the CSS: (there might be an easier way ^_^)
- I went on this webpage:
- View page source and look at the begin for the inclusion of
- click on the following link and copy the code in a .css file
OR download the jquery-ui.css:<link rel="stylesheet" type="
- Add the CSS file to your project
- par exemple avec une classe WAFileLibrary: WAFileLibrary
- Download the pictures of the CSS if you want to have nice tabs
2. The code for tabs:
script: (canvas jQuery new tabs
onSelect: (canvas jQuery ajax
callbackTabs: [ :event | selectedTab := event at: #index.]));
canvas unorderedList: [
self berries keysAndValuesDo: [ :name :description |
canvas listItem: [
url: (canvas jQuery ajax
html: [ :h | h render: description];
with: name ] ] ] ]
berries (or whatever you want to display in the tabs)
^ Dictionary new
at: 'Blackberry' put: 'The blackberry is an aggregate fruit from a bramble
bush, genus Rubus in the rose family Rosaceae.';
at: 'Raspberry' put: 'The raspberry is the edible fruit of a multitude of
plant species in the subgenus Idaeobatus of the genus Rubus.';
at: 'Blueberry' put: 'Blueberries are flowering plants in the genus
Vaccinium, sect. Cyanococcus.';
at: 'Cloudberry' put: 'The cloudberry is a slow-growing alpine or sub-Arctic
species of Rubus, producing amber-colored edible fruit.';
at: 'Cranberry' put: 'Cranberries are a group of evergreen dwarf shrubs or
trailing vines in the genus Vaccinium subgenus Oxycoccos, or in some
treatments, in the distinct genus Oxycoccos.';
By the way, you can put whatever you want in the Dictionary
Dictionary new at: 'ClassName' put: ClassName new.
-->display the renderContentOn: of the class ClassName
3. The references: to go further
- seaside book
- Demos and explanations of jQuery <http://jqueryui.com/demos/tabs/>
- Smalltalk Daily - Lots of videos concerning
It's a bit of a mess but I hope this help guys. :-) (should be nicer with
Word or OpenOffice)
Tell me if there are mistakes.
2010/12/20 Fritz Schenk <intrader at aol.com>
> alexandre, would you mind summarizing?
> Please include your source code, and what needs to be present in your
> environement. Seaside users might find this very helpful.
> seaside mailing list
> seaside at lists.squeakfoundation.org
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the seaside