[Seaside] jQuery --> make Tabs

[alexandre bp]

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
   work properly
      - 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
      your application:

 initialize
super initialize.
WAKomEncoded startOn: 8080.
 (self registerAsApplication: 'NameOfYourApplication')
preferenceAt: #sessionClass put: WUserSession;
 addLibrary: JQDeploymentLibrary;
 addLibrary: JQUiDeploymentLibrary;
 yourself.

!!!! 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:
            http://localhost:8080/javascript/jquery-ui (which is in your
            localhost:8080/seaside -->javascript-->jquery-ui)
            - View page source and look at the begin for the inclusion of
            the css:
            - click on the following link and copy the code in a .css file
            OR download the jquery-ui.css:<link rel="stylesheet" type="
            text/css" href="
            http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css
            "/>
         - Add the CSS file to your project
            - par exemple avec une classe WAFileLibrary: WAFileLibrary
            addFileAt:'C:/.../jquery-ui.css'
         - Download the pictures of the CSS if you want to have nice tabs

2. The code for tabs:


renderContentOn:canvas


canvas div
      script: (canvas jQuery new tabs
         selected: selectedTab;
         onSelect: (canvas jQuery ajax
             callbackTabs: [ :event | selectedTab := event at: #index.]));
      with: [
         canvas unorderedList: [
            self berries keysAndValuesDo: [ :name :description |
               canvas listItem: [
                  canvas anchor
                     url: (canvas jQuery ajax
                        html: [ :h | h render: description];
                        fullUrl);
                     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.';
 yourself.


By the way, you can put whatever you want in the Dictionary

example:
Dictionary new at: 'ClassName' put: ClassName new.

-->display the renderContentOn: of the class ClassName


3. The references: to go further


   - seaside book
online<http://book.seaside.st/book/table-of-contents?_s=wA3JDF10Y9AJ8DPO&_k=sH3D3gxh&_n&11>
   - Demos and explanations of jQuery <http://jqueryui.com/demos/tabs/>
   - Smalltalk Daily - Lots of videos concerning
smalltalk<http://www.cincomsmalltalk.com/blog/blogView?searchCategory=smalltalkDaily>
   - etc.

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.
cheers
alex


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.
> Thanks
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20101220/38ed2210/attachment-0001.htm