jQuery --> make Tabs

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

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 ^_^)
      • 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
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 <[hidden email]>
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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery --&gt; make Tabs

mozillanerd
Very kind of you including these instructions. I will follow as soon as I recover
from installing 3.0.3. My IDE is hosed; see below the thread about updating to
3.0.3
According to the documentation the two libraries are included but do not show up
in the browser; how do I load them? Monticello?




_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery --&gt; make Tabs

Alexandre BP
Actually I didn't have to do anything. I just add the two lines in the method initialize and it worked fine.
I started with pharo and added the seaside package with the following code:

Gofer new
squeaksource: 'MetacelloRepository';
package: 'ConfigurationOfSeaside30';
load.
(Smalltalk at: #ConfigurationOfSeaside30) load.
cheers 
alex

2010/12/20 Fritz Schenk <[hidden email]>
Very kind of you including these instructions. I will follow as soon as I recover
from installing 3.0.3. My IDE is hosed; see below the thread about updating to
3.0.3
According to the documentation the two libraries are included but do not show up
in the browser; how do I load them? Monticello?




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


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery --&gt; make Tabs

Alexandre BP
Sorry I didn't see the post about seaside 3.0.3 but I guess it will be the same :-)

2010/12/20 alexandre bp <[hidden email]>
Actually I didn't have to do anything. I just add the two lines in the method initialize and it worked fine.
I started with pharo and added the seaside package with the following code:
Gofer new
squeaksource: 'MetacelloRepository';
package: 'ConfigurationOfSeaside30';
load.
(Smalltalk at: #ConfigurationOfSeaside30) load.
cheers 
alex

2010/12/20 Fritz Schenk <[hidden email]>

Very kind of you including these instructions. I will follow as soon as I recover
from installing 3.0.3. My IDE is hosed; see below the thread about updating to
3.0.3
According to the documentation the two libraries are included but do not show up
in the browser; how do I load them? Monticello?




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



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery --&amp;gt; make Tabs

mozillanerd
Is 'WUserSession' 'WASession'?
Or should I define my one WAUserSession inheriting from WASession?

Thanks

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery --&amp;gt; make Tabs

Alexandre BP
WUserSession inherits from WASession. 
It's a way to get the current user of the session.

2010/12/21 Fritz Schenk <[hidden email]>
Is 'WUserSession' 'WASession'?
Or should I define my one WAUserSession inheriting from WASession?

Thanks

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


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: jQuery --&amp;amp;gt; make Tabs

mozillanerd
Thanks Alexandre,
I will be defining a WUserSession as in my image as it does not exist. It will
inherit from WASession with its own initialize (instance) and one instance
variable 'currentUser'

<code>
"The following is from Cincom's tutorial code - so it follows their namespace
syntax"
MyJQueryTestsCategory defineClass: #WUserSession
        superclass: #WASession
        indexedType: #none
        private: false
        instanceVariableNames: 'currentUser '
        classInstanceVariableNames: ''
        imports: ''
        category: '

WUserSession>>initialize
        "Initialize a newly created instance. This method must answer the
receiver."
"Taken from Cincom tutorial's code"

        super initialize.
        " *** Edit the following to properly initialize instance variables ***"
        currentUser := nil.
        " *** And replace this comment with additional initialization code *** "
        ^self
</code
I appreciate your following and comments.



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