Using Javascript

7 views
Skip to first unread message

Randall

unread,
Jan 18, 2006, 12:43:01 PM1/18/06
to TurboGears
I've been trying to figure out how best to use javascript with
TurboGears. tgadmin quickstart creates a "static/javascript"
directory. I'm guessing this is where custom javascripts should go. I
found in the wiki these lines need to be inserted into a kid template
to be able to have javascript links.

<link py:strip="1" py:for="css in tg_css">${css.insert()}</link>
<link py:strip="1" py:for="js in tg_js_head">${js.insert()}</link>

And there is MochiKit. I've looked at the intro video, but not much
more yet.

So I'm creating a widget label that will display a hyperlink that opens
a new window. I created a javascript file called openwin.js and put it
in static/javascript. I think I need to do something like this:

widget.javascript.append(JSLink(?, "openwin.js"))

I don't know what goes in place of ?. I'm not even sure this is a good
approach. Is MochiKit of any use here?

I haven't found much in the docs, wiki, or mailing list on this
subject. Once I learn this stuff, I'll be glad to write a wiki entry.

Randall

Kevin Dangoor

unread,
Jan 18, 2006, 1:55:38 PM1/18/06
to turbo...@googlegroups.com
Hi Randall,

Fear not, there will be docs for this stuff.

First thing: you don't want to append to widget.javascript. Maybe
those should be replaced by immutable versions for safety. If that
widget is a label, for example, appending to widget.javascript will
make *all* labels require that JavaScript henceforth.

I don't know all of your requirements, but my approach would likely be
to back up and do things the straightforward way.

<a href="mylocation" target="_blank">My link</a>

is certainly the most straightforward way to open a link in a new window.

If there's something special that requires JS, you can do this: in
your template's <head>, I'd add

<script src="${std.url('/static/js/openwin.js')}" type="text/javascript"/>

(the std.url call isn't absolutely necessary, but it makes your app
more portable)

Then, from within the page, call whatever function you need to from
the openwin file.

If this is something that you really need to use differently in
different contexts, then you make a widget. Likely your own subclass
of some widget that then defines the JavaScripts to include.

Kevin


--
Kevin Dangoor
Author of the Zesty News RSS newsreader

email: k...@blazingthings.com
company: http://www.BlazingThings.com
blog: http://www.BlueSkyOnMars.com

Randall

unread,
Jan 18, 2006, 4:49:26 PM1/18/06
to TurboGears
Thanks Kevin. You're doing a great job with TG. Don't let my
questions slow down your work. I ask alot of them.

>If this is something that you really need to use differently in
>different contexts, then you make a widget. Likely your own subclass
>of some widget that then defines the JavaScripts to include.

This is what I'm trying to do. I have a widget that subclasses
TextWidget. Call it MyWidget. MyWidget will be used in several views.
It includes a hyperlink (in the label) that opens a search dialog in a
new neatly sized window. The search dialog window returns a value to
the MyWidget text field. The part I'm stuck on is defining the
javascript for the widget. It looks like:

widget.javascript = [(widget.JSLink(?, "openwin.js")), ]

I don't know what to put in the place of ?. I see that MochiKit.js can
be accessed like this:

widget.javascript = [(widget.JSLink("turbogears",
"js/MochiKit.js")), ]

How do I in the same way access my javascript files in the
myapp/static/javascript/ directory?

I would guess this should be related to staticFilter.dir in the config.
Mine looks like:
staticFilter.dir = "static"

Kevin Dangoor

unread,
Jan 18, 2006, 5:22:05 PM1/18/06
to turbo...@googlegroups.com
On 1/18/06, Randall <ran...@tnr.cc> wrote:
>
> Thanks Kevin. You're doing a great job with TG. Don't let my
> questions slow down your work. I ask alot of them.

Thanks, and no problem with the questions. You'll probably note that I
don't answer half as many questions as I'd like to, but I have a hard
enough time with email as it is.

> This is what I'm trying to do. I have a widget that subclasses
> TextWidget. Call it MyWidget. MyWidget will be used in several views.
> It includes a hyperlink (in the label) that opens a search dialog in a
> new neatly sized window. The search dialog window returns a value to
> the MyWidget text field. The part I'm stuck on is defining the
> javascript for the widget. It looks like:
>
> widget.javascript = [(widget.JSLink(?, "openwin.js")), ]

Take a look at widgets.base:register_static_directory

There, you tell it where the static directory is for a given package.

JSLink("yourpackage", "openwin.js")

refers to "openwin.js" in the static directory registered for "yourpackage".

Kevin

Randall

unread,
Jan 18, 2006, 10:42:54 PM1/18/06
to TurboGears
Thanks. That works well. Here is what I did.

# In the root controller module:

from turbogears.widgets import register_static_directory
import pkg_resources
register_static_directory("mypackage",
pkg_resources.resource_filename(__name__,
"static"))

# In the external module.

widget.javascript = [JSLink("mypackage", "javascript/openwin.js"), ]

My kid template displays:

<script src="/tg_widgets/mypackage/javascript/openwin.js"
type="text/javascript">

</script>

Randall

unread,
Jan 19, 2006, 12:18:22 PM1/19/06
to TurboGears
I tried to add a JSSource object to the a form widget, but it didn't
show up. I added the same JSSource object to a widget in the form and
it worked.

form = widgets.TableForm(widgets=[widget0, widget1, widget2])
# widget2 has it's own JSLink
form.javascript = [JSSource(some_javascript), ] # Does not work.
#widget0.javascript = [JSSource(some_javascript), ] # Works.

The display line in my kid template looks like this:


<link py:strip="1" py:for="js in tg_js_head">${js.insert()}</link>

Why doesn't this work with the form widget?

Randall

Kevin Dangoor

unread,
Jan 19, 2006, 2:24:43 PM1/19/06
to turbo...@googlegroups.com
On 1/19/06, Randall <ran...@tnr.cc> wrote:
> form = widgets.TableForm(widgets=[widget0, widget1, widget2])
> # widget2 has it's own JSLink
> form.javascript = [JSSource(some_javascript), ] # Does not work.
> #widget0.javascript = [JSSource(some_javascript), ] # Works.
>
> The display line in my kid template looks like this:
> <link py:strip="1" py:for="js in tg_js_head">${js.insert()}</link>
>
> Why doesn't this work with the form widget?

It sounds like form widgets are only aggregating the JavaScript of the
widgets inside the form and ignoring their own JavaScript. Sounds like
a bug.

Kevin

Reply all
Reply to author
Forward
0 new messages