Using tw.tabber with TurboGears 2

[geraldthomas]

Hi
I have been looking high and low for a tutorial on using tabber with
TG2. Can some one pls point me in the right direction.

Thanks!
Newbie

[BluePoint]

Gerald
If you give a bit more detail about what you want to do with
tw.tabber, I may be able to help somewhat.
Regards,
Phil

[geraldthomas]

I have separated my controller code into sub-controllers along the
lines of the WhatWhat project. I would like to have tabs on the site
so that selecting the tab takes me to the index function of the sub-
controller within a TG2 application.

Thanks.

GT

[BluePoint]

Gerald,
There was a discussion on 'Using tw.tabber with TG2' back in
August, which you should read.
You need to import Tabber from tw.tabber and probably instantiate a
Tabber object to pull in the javascript.
However, you probably need to manually code the tabs into your
template, unless you want to develop some new widgets to do it for
you.
I take it that, when you click a tab, you want to go to a URL which is
different for each tab. The only way I can think of to do this is to
have a form in your page that gets submitted when you click the tab.
You will need an onclick javascript routine to call submit on the form
and I think you also have to have a hidden field in the form into
which you can stuff the id of the tab immediately before you call
submit. If you use the same action attribute of the form on each page
you can go to a routing function which looks at which tab was clicked
and redirect to the relevant index function.
If you do it like that, you don't want the tabs to automatically
redraw the page, so you should return false from the onclick routine.

I found it very useful to look at the example html from the BarelyFitz
website

Hope this is helpful.
Regards,
Phil

[BluePoint]

Gerald,
One point I forgot to mention. You need to pass the Tabber
object you've created to the template. So the whole thing is:

from tw,tabber import Tabber
......
tabberObj = Tabber()
........

# then, inside class RootController
@expose('sometemplate')
def my_page(self, *args, **kw):
.........
pylons.c.tabber = tabberObj
..........
return dict(whatever)

Then in the template, I think almost anywhere in the body:

${tmpl_context.tabber()}

That last thing is what pulls in the script tags for the javascript.

To get an onclick function, you have to specify it when your create
tabberObj, something like
tabberObj = Tabber(options = {'onclick':tabberOnClick})
where tabberOnClick is a javascript function imported from somewhere.
I can't tell you preceisely how to do that at the moment as my
program is currently running with the script stuff hard coded into the
template because I couldn't see how to go about getting it in any
other way. However, I'm beginning to understand how it works a lot
better so I intend to have a go soon at defining the onclick function
somewhere else and getting it imported. It's a case of 'watch this
space' for a week or two at least (I'm away next week).

Regards,
Phil

[BluePoint]

I have revisited the inner workings of tw.tabber.__init__.py in order
to figure out how to pull in a javascript 'onClick' function. It turns
out that some of the earlier discussion about modifications to this
routine was on the wrong track.
Starting from the standard version 0.8, the following mods seem to be
required to make it work properly and allow for an 'onClick' function:
1. Add js_symbol to the imports from tw.api

2. Replace the __init__ method in the Tabber class with:
def __init__(self, *args, **kw):
super(Tabber, self).__init__(*args, **kw)
if 'onClick' in self.options:
clickFunc = 'function(argsObj){ return ' +
str(self.options['onClick']) + '(argsObj)}'
self.options['onClick'] = js_symbol(clickFunc)

3. Add an update_params function to the class thus:
def update_params(self, d):
super(Tabber, self).update_params(d)
self.add_call(tabberAutomatic(self.options))

The last thing ensures that the call to tabberAutomatic comes at the
end of the html, not in the head.

In the controller, subclass Tabber something like this, replacing
'static/events.js' with the location of your 'onClick' function,
relative to the controller:
class MyTabber(Tabber):
javascript = Tabber.javascript
javascript.append(JSLink(modname=__name__, filename='static/
events.js'))

Then create an instance like so, replacing 'tabberOnClick' with the
name of your 'onClick' function:
myTabber = MyTabber(options = {'onClick':'tabberOnClick'})

Pass myTabber into the template as discussed earlier.

I would post a ticket about this, if someone would let me know the
appropriate place to do that, since tw.tabber is not in Trac.
Regards,
Phil