You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by wesleywj2 <we...@yahoo.co.uk> on 2009/02/04 17:28:07 UTC

how to use @IncludeJavaScriptLibrary to include more than 1 library in page

hi,

i followed the wiki how to tutorial from Tapestry5AndJavaScriptExplained and
i wondered how do i include multiple js file in the file and load in
sequence. because i'm using the tree example using JsDragAndDrop, from the
sample code, the js include must be in order. how to achieve this using T5's
@IncludeJavaScriptLibrary?

please advise,
wesley
-- 
View this message in context: http://www.nabble.com/how-to-use-%40IncludeJavaScriptLibrary-to-include-more-than-1-library-in-page-tp21834042p21834042.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Thu, 05 Feb 2009 17:31:12 -0300, wesleywj2 <we...@yahoo.co.uk>  
escreveu:

> oh my... IE really sucks big time....

It does suck. Many sites simply block IE 6. It seems that IE 7 is a lot  
better, but still lacking in many aspects (specially CSS compliance).

> but the most unfortunate thing is there are still many ppl using IE.  
> guess that i need to drop the use of tree
> viewing.

Or use nested lists without Javascript . . .

> anyway, thanks for the reply thiago. :)

You're welcome!

-- 
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by wesleywj2 <we...@yahoo.co.uk>.
oh my... IE really sucks big time.... but the most unfortunate thing is there
are still many ppl using IE. guess that i need to drop the use of tree
viewing. anyway, thanks for the reply thiago. :)



Thiago H. de Paula Figueiredo wrote:
> 
> Em Thu, 05 Feb 2009 14:19:25 -0300, wesleywj2 <we...@yahoo.co.uk>  
> escreveu:
> 
>> hi thiago,
> 
> Hi!
> 
>> sorry to send you directly on the same topic for this question.
> 
> I guess you just sent it to the Tapestry mailing list. :)
> 
>> as i've
>> implemented the tree object on my web page FF3 works great. but i just  
>> don't understand why IE can't render the tree properly.
> 
> Well, Internet Explorer not rendering something correctly is web design  
> issue, not exactly a Tapestry one. And IE sucks:  
> http://tapestryjava.blogspot.com/2008/06/time-breakdown-of-modern-web-design.html.
> 
>> i actually saw the error script stated as 'treeObj undefined'
>> but from my code in page
> 
> This surely looks like a Javascript issue.
> 
>> 	@AfterRender
>>     public void afterRender() {
> 
> Make sure your treeObj is created before your Javascript snippet that uses  
> it. Maybe use RenderSupport.addInit(). I really don't know. :(
> 
> -- 
> Thiago H. de Paula Figueiredo
> Independent Java consultant, developer, and instructor
> http://www.arsmachina.com.br/thiago
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/how-to-use-%40IncludeJavaScriptLibrary-to-include-more-than-1-library-in-page-tp21834042p21860492.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Thu, 05 Feb 2009 14:19:25 -0300, wesleywj2 <we...@yahoo.co.uk>  
escreveu:

> hi thiago,

Hi!

> sorry to send you directly on the same topic for this question.

I guess you just sent it to the Tapestry mailing list. :)

> as i've
> implemented the tree object on my web page FF3 works great. but i just  
> don't understand why IE can't render the tree properly.

Well, Internet Explorer not rendering something correctly is web design  
issue, not exactly a Tapestry one. And IE sucks:  
http://tapestryjava.blogspot.com/2008/06/time-breakdown-of-modern-web-design.html.

> i actually saw the error script stated as 'treeObj undefined'
> but from my code in page

This surely looks like a Javascript issue.

> 	@AfterRender
>     public void afterRender() {

Make sure your treeObj is created before your Javascript snippet that uses  
it. Maybe use RenderSupport.addInit(). I really don't know. :(

-- 
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by wesleywj2 <we...@yahoo.co.uk>.
hi thiago,

sorry to send you directly on the same topic for this question. as i've
implemented the tree object on my web page FF3 works great. but i just don't
understand why IE can't render the tree properly. right after i restarted my
server. when opening the page contained the tree object, it doesn't render. 

as you know tree object is actually <ul><li></li></ul> tag with css
fittings. the plus sign and folder, when clicked on the plus object it will
expand or collapse. but IE browser doesn't render it when i first hit view
the page. i need to keep refresh the page until it render the tree. as i
keep refresh it it will turn back to normal list <ul>. i did put
"@IncludeStylesheet" annotation after the "@IncludeJavaScriptLibrary" before
the my page class name.

i actually saw the error script stated as 'treeObj undefined'
but from my code in page

	@AfterRender
    public void afterRender() {
			String jsString = "";
			jsString += "Event.observe(window,'load',function(){";
			jsString += " treeObj = new JSDragDropTree(); ";
			jsString += " treeObj.setTreeId('bststruct'); ";
			jsString += " treeObj.setImageFolder('../images/'); ";
			jsString += " treeObj.setRenameAllowed(false); ";
			jsString += " treeObj.setDeleteAllowed(false); ";
			jsString += " treeObj.initTree(); })";
            renderSupport.addScript(String.format(jsString));
    }

i already set it as treeObj. i know this is troublesome, but perhaps you can
give your advise on this? what do you think? from the wiki page
"Tapestry5AndJavaScriptExplained" the author did mentioned on the tree
construction at last section like this:-

@AfterRender
        private boolean phase7() {
                heartbeat.end();
                //if there is another element in the tree, 
                //go to the @BeginRender method again.
                return (!iterator.hasNext());
        }

        @CleanupRender
        void phase8(MarkupWriter writer) {
                writer.end();
                String jsString = "";
                jsString += "Event.observe( window, 'load', function() {";
                jsString += " %s = new JSDragDropTree(); ";
                jsString += " %s.setTreeId('reporttree'); ";
                jsString += " %s.setImageFolder('../images/tree/'); ";
                jsString += " %s.setRenameAllowed(false); ";
                jsString += " %s.setDeleteAllowed(false); ";
                jsString += " %s.initTree(); ";
                jsString += " %s.expandAll(); ";
                jsString += " } );";
                renderSupport.addScript(String.format(jsString,
treeObjectName,
                                treeObjectName, treeObjectName,
treeObjectName, treeObjectName,
                                treeObjectName, treeObjectName));
        }


i'm really confused, as i don't know where to look to. 

please advise,
wesley
-- 
View this message in context: http://www.nabble.com/how-to-use-%40IncludeJavaScriptLibrary-to-include-more-than-1-library-in-page-tp21834042p21856593.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Wed, 04 Feb 2009 15:43:25 -0300, wesleywj2 <we...@yahoo.co.uk>  
escreveu:

> oh my gosh! it works like a charm! thanks very very very much on this
> thiago.you save my day, i've been cracking my head open the past few days
> trying to figure this out. thanks much =D

You're welcome! Helping each other is what makes a good mailing list. )

-- 
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by wesleywj2 <we...@yahoo.co.uk>.
oh my gosh! it works like a charm! thanks very very very much on this
thiago.you save my day, i've been cracking my head open the past few days
trying to figure this out. thanks much =D

sincered regards,
wesley


Thiago H. de Paula Figueiredo wrote:
> 
> Em Wed, 04 Feb 2009 15:23:41 -0300, wesleywj2 <we...@yahoo.co.uk>  
> escreveu:
> 
>> hi thiago,
> 
> Hi again!
> 
>> i've added the configuration inside my AppModule for the javascript:
>> i 've actually implemented the tree inside my class,
>>
>> @AfterRender
>>     public void afterRender() {
>> 			String jsString = "";
>> 			jsString += "Event.observe(window,'load',function(){";
>> 			jsString += " treeObj = new JSDragDropTree(); ";
>> 			jsString += " treeObj.setTreeId('bststruct'); ";
>> 			jsString += " treeObj.setImageFolder('../images/'); ";
>> 			jsString += " treeObj.setRenameAllowed(false); ";
>> 			jsString += " treeObj.setDeleteAllowed(false); ";
>> 			jsString += " treeObj.initTree(); ";
>>             renderSupport.addScript(String.format(jsString));
>>     }
> 
> Seems ok.
> 
>> next is what about in the tml page?
> 
> Nothing! You should see you Javascript code added to a <script> tag inside  
> the page.
> 
>> 			<t:Tree treeid='literal:bststruct' source="treeNodes"  
>> currentNode="node">
>>     			<t:actionlink t:id="tree" context="node.identifier">
>>     				${node.name}
>>     			</t:actionlink>
>>   			</t:Tree>
>>
>>         	<script type="text/javascript">
>>                 treeObj = new JSDragDropTree();
>>                 treeObj.setTreeId('bststruct');
>>                 treeObj.setImageFolder('../images/');
>>                 treeObj.setRenameAllowed(false);
>>                 treeObj.setDeleteAllowed(false);
>>                 treeObj.initTree();
>>         	</script>
> 
> You should never use a script tag to include Javascript in your .tml file.  
> That's what renderSupport.addScript() does, but it does in the right  
> place. ;)
> 
> -- 
> Thiago H. de Paula Figueiredo
> Independent Java consultant, developer, and instructor
> http://www.arsmachina.com.br/thiago
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/how-to-use-%40IncludeJavaScriptLibrary-to-include-more-than-1-library-in-page-tp21834042p21836760.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Wed, 04 Feb 2009 15:23:41 -0300, wesleywj2 <we...@yahoo.co.uk>  
escreveu:

> hi thiago,

Hi again!

> i've added the configuration inside my AppModule for the javascript:
> i 've actually implemented the tree inside my class,
>
> @AfterRender
>     public void afterRender() {
> 			String jsString = "";
> 			jsString += "Event.observe(window,'load',function(){";
> 			jsString += " treeObj = new JSDragDropTree(); ";
> 			jsString += " treeObj.setTreeId('bststruct'); ";
> 			jsString += " treeObj.setImageFolder('../images/'); ";
> 			jsString += " treeObj.setRenameAllowed(false); ";
> 			jsString += " treeObj.setDeleteAllowed(false); ";
> 			jsString += " treeObj.initTree(); ";
>             renderSupport.addScript(String.format(jsString));
>     }

Seems ok.

> next is what about in the tml page?

Nothing! You should see you Javascript code added to a <script> tag inside  
the page.

> 			<t:Tree treeid='literal:bststruct' source="treeNodes"  
> currentNode="node">
>     			<t:actionlink t:id="tree" context="node.identifier">
>     				${node.name}
>     			</t:actionlink>
>   			</t:Tree>
>
>         	<script type="text/javascript">
>                 treeObj = new JSDragDropTree();
>                 treeObj.setTreeId('bststruct');
>                 treeObj.setImageFolder('../images/');
>                 treeObj.setRenameAllowed(false);
>                 treeObj.setDeleteAllowed(false);
>                 treeObj.initTree();
>         	</script>

You should never use a script tag to include Javascript in your .tml file.  
That's what renderSupport.addScript() does, but it does in the right  
place. ;)

-- 
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by wesleywj2 <we...@yahoo.co.uk>.
hi thiago,

i've added the configuration inside my AppModule for the javascript:
i 've actually implemented the tree inside my class,

@AfterRender
    public void afterRender() {
			String jsString = "";
			jsString += "Event.observe(window,'load',function(){";
			jsString += " treeObj = new JSDragDropTree(); ";
			jsString += " treeObj.setTreeId('bststruct'); ";
			jsString += " treeObj.setImageFolder('../images/'); ";
			jsString += " treeObj.setRenameAllowed(false); ";
			jsString += " treeObj.setDeleteAllowed(false); ";
			jsString += " treeObj.initTree(); ";
            renderSupport.addScript(String.format(jsString));
    }

next is what about in the tml page? inside the tml should have some code to
linked the renderSupport? i'm totally confused about this as what to write
within the tml page of mine. on the example, it wrote the script right
inside the body content as :-

			<t:Tree treeid='literal:bststruct' source="treeNodes" currentNode="node">
    			<t:actionlink t:id="tree" context="node.identifier">
    				${node.name}
    			</t:actionlink>
  			</t:Tree>

        	<script type="text/javascript">
                treeObj = new JSDragDropTree();
                treeObj.setTreeId('bststruct');
                treeObj.setImageFolder('../images/');
                treeObj.setRenameAllowed(false);
                treeObj.setDeleteAllowed(false);
                treeObj.initTree();
        	</script>

please advise,
wesley



Thiago H. de Paula Figueiredo wrote:
> 
> Em Wed, 04 Feb 2009 14:20:58 -0300, wesleywj2 <we...@yahoo.co.uk>  
> escreveu:
> 
>> hi thiago,
> 
> Hi!
> 
>> thanks for the quick reply, btw; after putting that annotation on the  
>> page class;
> 
> Put it on your component class, so everytime you use your component  
> Tapestry will include the needed Javascript files.
> 
> By Tapestry default, the Javascript includes are made at the bottom of the  
> page. You can change this in you AppModule.contributeApplicationDefaults()  
> method setting the tapestry.script-at-top configuration to true (more  
> information at http://tapestry.apache.org/tapestry5/guide/conf.html).
> 
> By the way, that tree example does not follow the recomended way of using  
> Javascript in Tapestry. This page explains it very nicely:  
> http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained. Advice:  
> use RenderSupport to add Javascript snippets to your page, not <script>  
> blocks. ;)
> 
> -- 
> Thiago H. de Paula Figueiredo
> Independent Java consultant, developer, and instructor
> http://www.arsmachina.com.br/thiago
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/how-to-use-%40IncludeJavaScriptLibrary-to-include-more-than-1-library-in-page-tp21834042p21836386.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Wed, 04 Feb 2009 14:20:58 -0300, wesleywj2 <we...@yahoo.co.uk>  
escreveu:

> hi thiago,

Hi!

> thanks for the quick reply, btw; after putting that annotation on the  
> page class;

Put it on your component class, so everytime you use your component  
Tapestry will include the needed Javascript files.

By Tapestry default, the Javascript includes are made at the bottom of the  
page. You can change this in you AppModule.contributeApplicationDefaults()  
method setting the tapestry.script-at-top configuration to true (more  
information at http://tapestry.apache.org/tapestry5/guide/conf.html).

By the way, that tree example does not follow the recomended way of using  
Javascript in Tapestry. This page explains it very nicely:  
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained. Advice:  
use RenderSupport to add Javascript snippets to your page, not <script>  
blocks. ;)

-- 
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by wesleywj2 <we...@yahoo.co.uk>.
hi thiago,

thanks for the quick reply, btw; after putting that annotation on the page
class; the page should load the js script after the render body, but it
didn't show though. i'm actually implementing the JsTree Component referred
from the wiki how to's. My page has the border.tml and actual content. I've
tried to include it as normal text/javascript script on the border header.
everything works well on Firefox3 but IE throws Operation Aborted Error. I
suspect it must be the script error that causes this. I've actually read
through the previous posting from other users regarding the same problem but
i don't really understand how to implement it inside pages. the link of the
topic is this

http://www.nabble.com/T5-Tree-Component-javascript-and-DOM-td12372202.html#a12372202

please help, your guidance is very much appreciated.

wesley
-- 
View this message in context: http://www.nabble.com/how-to-use-%40IncludeJavaScriptLibrary-to-include-more-than-1-library-in-page-tp21834042p21835155.html
Sent from the Tapestry - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: how to use @IncludeJavaScriptLibrary to include more than 1 library in page

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
@IncludeJavaScriptLibrary({"1.js", "2.js"})
public AwesomeComponentOrPageOrMixin {
....
}

-- 
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org