If all of this is within your start page, then it's quite easy. T5 is
built around the Prototype JS lib, which you can get a feel for here:
http://www.prototypejs.org/ (api here: http://www.prototypejs.org/api).
It is a staggeringly simply library to use.
Now you'll have to test this, but I'm pretty sure you can use
org.apache.tapestry.PageRenderSupport in page classes to add scripts,
and I assume you'd do this in onPrepare(). So, _assuming_ these things
you could do:
public class Start {
@Environmental
private PageRenderSupport renderSupport;
void onPrepare() {
renderSupport.addScript("$('1').setStyle({backgroundColor:
'green'});");
}
}
Quick notes on what happened here:
1. We used PageRenderSupport#addScript to insert a script into our page.
In terms of mark up, T5 will create a <script> block at the end of the
page document that contains all scripts pieces added this way. If you
examine the code you'll notice that they are wrapped in another
Prototype method that defers them until the page is loaded (think <body
onload"...").
2. The script we added looks a little weird if you've not used
Prototype. You'll want to look through it's api, but here we use 2
facilities: the $() utility method, which is a wonderfully short way of
calling document.getElementById(), and the method setStyle(). $()
returns an instance of Element (http://www.prototypejs.org/api/element),
which setStyle is a member of. Obviously it allows you to quickly modify
the background color of an element. Ultimately this results in a call to
the native DOM api like so:
document.getElementById('1').style.backgroundColor).
If you have a lot of JS logic, you should isolate it externally in
appropriate files and include them. T5 is also great here and provides
the @IncludeJavaScriptLibrary annotation, which you slap on to classes
and them the script magically appears.
A final disclaimer: although I'm pretty sure this will work I have NOT
tested it. The real question is whether you can use PageRenderSupport
like this in a page class (and if onPrepare is the right place to add
scripts for pages).
hope this helps
chris
Baofeng Yu wrote:
Say I have a layout.tml that contains header, footer, navi menu, and
an empty <t:body/> section.
Now in start.tml, I do the following:
<t:layout xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd";>
...
<div id="1">
...
</div>
</t:layout>
When user selects a radio button on the start page, I want to change
the style of div "1". I know this can be done by using a <t:if>
component.
But if I do this in javascript with a function to set the style and
add that script to the <head>...</head> section (in this case, it's in
layout.tml), what's the correct way to get div "1" here? (Normally, I
can use document.getElementById("1") and add script to the the
header.jsp file.)
Thanks.
Baofeng
Chris Lewis wrote:
What exactly do you want to do? What you're explaining doesn't really
make sense - that is, hard-coding a DOM id in a component that
doesn't contain such an id. What is your ultimate goal?
chris
Baofeng Yu wrote:
Hi all,
I have a layout component that wraps around a page, say Start.tml.
Suppose there is a <div id="1"> element on Start.tml. In the
Layout.tml header section, I want to have some JavaScript code to
change that element. What is the correct way to get that element? It
seems document.getElementById('1') doesn't work in this case.
Thanks in advance,
Baofeng
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
