You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by akshay <ak...@gmail.com> on 2014/09/22 21:54:03 UTC

Loading javascript file in tapestry

Hello,

I am unable to load the images related to my *.js file in the normal way,
due to unknown reasons.

So, I am trying to find a way in which I can explicity load the image path
associated to my *.js file.

I intend to use my custom Library class which contributes JavaScript
libraries.

As of now I am trying to use Tapestry JavaScriptModuleConfiguration class
which I add to the static custom configuration  MAP.
I am trying to do something like this:-


 @Path(static constant referring to the image path "context:....") Resource
img;
@Path(static constant referring to the js path "context:....") Resource js

configuration.add("xyz", new JavaScriptModuleConfiguration(
        js).exports("variable").dependsOn(img.getFile()));

But it doesnt work. Any help would be highly appreciated.


Regards
Akshay

Re: Loading javascript file in tapestry

Posted by Chris Mylonas <ch...@opencsta.org>.
Hi

I'm using a jquery plugin called backstretch.  In my included js file
called "main.js" I have this snippet relevant to that 3rd party module:

$("body").backstretch([
   "assets/images/bg1.jpg",
   "assets/images/bg2.jpg",
   "assets/images/bg3.jpg"
], {duration: 5000, fade: 1000});

My main.js file lives in src/main/webapp/assets/js/main.js

My default component Layout.java file has this decoration/annotation:

@Import(stylesheet = {"context:assets/css/animate.css",
    "context:assets/css/font-awesome.css",
    "context:assets/css/owl.carousel.css",
    "context:assets/css/owl.theme.css",
    "context:assets/css/magnific-popup.css",
    "context:assets/css/style.css"},
        library = {"context:assets/js/jquery.easing.1.3.js",
            "context:assets/js/wow.js",
            "context:assets/js/jquery.backstretch.min.js",
            "context:assets/js/owl.carousel.js",
            "context:assets/js/jquery.magnific-popup.js",
            "context:assets/js/jquery.ui.totop.js",
            "context:assets/js/main.js"})
public class Layout {


It loads no problems with what I'm doing - might be a bit simplified
but it works :)

Chris


On Tue, Sep 23, 2014 at 8:31 AM, akshay <ak...@gmail.com> wrote:

> Hi,
>
> My js file is a colorpicker and it uses these images to display the color
> options. Being a  thirdparty component it, should just work fine without
> any changes. But that doesnt seems to be the case , and no image is
> displayed for the picker, since the image is not loaded/resource is not
> found .
>
>
> So, I try to find a solution where I can embed my images to be loaded along
> with the js file using this file from tapestry core module. Being very new
> to javascript , I might be wrong. :)
>
>
> Regards
> Akshay
>
> On Tue, Sep 23, 2014 at 12:16 AM, Thiago H de Paula Figueiredo <
> thiagohp@gmail.com> wrote:
>
> > On Mon, 22 Sep 2014 19:11:59 -0300, akshay <ak...@gmail.com>
> > wrote:
> >
> >  Hi,
> >>
> >
> > Hi!
> >
> >  Thanks for your concern!!
> >>
> >
> > ;)
> >
> >  Whereas when I remove "dependsOn(img.getFile()))" code snippet, it loads
> >> fine, but without the image( which is required by the js file to work
> >> functionally).
> >>
> >> I am just trying to find out a way in which I can load the images
> related
> >> to the js file using the above configuration, whether its feasible or
> not
> >>
> >
> > Are you trying to embed the image as part of a JavaScript stack? This
> > isn't possible because it doesn't make sense.
> >
> > How exactly your JavaScript code uses the image? Its URL being used in
> the
> > HTML the JS code manipulates? If yes, you don't include the image inside
> > the JavaScript stack. You just pass to the JS code the image URL.
> >
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
>
> --
> Cheers!!
> Akshay
>

Re: Loading javascript file in tapestry

Posted by akshay <ak...@gmail.com>.
Hi,

My js file is a colorpicker and it uses these images to display the color
options. Being a  thirdparty component it, should just work fine without
any changes. But that doesnt seems to be the case , and no image is
displayed for the picker, since the image is not loaded/resource is not
found .


So, I try to find a solution where I can embed my images to be loaded along
with the js file using this file from tapestry core module. Being very new
to javascript , I might be wrong. :)


Regards
Akshay

On Tue, Sep 23, 2014 at 12:16 AM, Thiago H de Paula Figueiredo <
thiagohp@gmail.com> wrote:

> On Mon, 22 Sep 2014 19:11:59 -0300, akshay <ak...@gmail.com>
> wrote:
>
>  Hi,
>>
>
> Hi!
>
>  Thanks for your concern!!
>>
>
> ;)
>
>  Whereas when I remove "dependsOn(img.getFile()))" code snippet, it loads
>> fine, but without the image( which is required by the js file to work
>> functionally).
>>
>> I am just trying to find out a way in which I can load the images related
>> to the js file using the above configuration, whether its feasible or not
>>
>
> Are you trying to embed the image as part of a JavaScript stack? This
> isn't possible because it doesn't make sense.
>
> How exactly your JavaScript code uses the image? Its URL being used in the
> HTML the JS code manipulates? If yes, you don't include the image inside
> the JavaScript stack. You just pass to the JS code the image URL.
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Cheers!!
Akshay

Re: Loading javascript file in tapestry

Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 22 Sep 2014 19:11:59 -0300, akshay <ak...@gmail.com>  
wrote:

> Hi,

Hi!

> Thanks for your concern!!

;)

> Whereas when I remove "dependsOn(img.getFile()))" code snippet, it loads
> fine, but without the image( which is required by the js file to work
> functionally).
>
> I am just trying to find out a way in which I can load the images related
> to the js file using the above configuration, whether its feasible or not

Are you trying to embed the image as part of a JavaScript stack? This  
isn't possible because it doesn't make sense.

How exactly your JavaScript code uses the image? Its URL being used in the  
HTML the JS code manipulates? If yes, you don't include the image inside  
the JavaScript stack. You just pass to the JS code the image URL.

-- 
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

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


Re: Loading javascript file in tapestry

Posted by akshay <ak...@gmail.com>.
Hi,

Thanks for your concern!!

Doesnt work here implies that , the javascript fails to be identified and
hence its not loaded.

Whereas when I remove "dependsOn(img.getFile()))" code snippet, it loads
fine, but without the image( which is required by the js file to work
functionally).

I am just trying to find out a way in which I can load the images related
to the js file using the above configuration, whether its feasible or not

Regards
Akshay

On Mon, Sep 22, 2014 at 11:49 PM, Thiago H de Paula Figueiredo <
thiagohp@gmail.com> wrote:

> On Mon, 22 Sep 2014 16:54:03 -0300, akshay <ak...@gmail.com>
> wrote:
>
>  Hello,
>>
>
> Hi!
>
>  configuration.add("xyz", new JavaScriptModuleConfiguration(
>>         js).exports("variable").dependsOn(img.getFile()));
>>
>
> The dependsOn() method you called above doesn't not do what you think it
> does. It says a given RequireJS module depends on another. I'm not even
> sure what you're trying to do. Maybe the method you want is
> initializeWith(String expression). Are you trying to pass the image bytes
> to your JavaScript code? Or just its URL? If the latter, you need to inject
> Asset, not Resource, and use its toClientURL() method.
>
>  But it doesnt work. Any help would be highly appreciated.
>>
>
> Define "doesn't work". It's too vague. It says nothing about the result,
> so we have no information to help you.
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Cheers!!
Akshay

Re: Loading javascript file in tapestry

Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 22 Sep 2014 16:54:03 -0300, akshay <ak...@gmail.com>  
wrote:

> Hello,

Hi!

> configuration.add("xyz", new JavaScriptModuleConfiguration(
>         js).exports("variable").dependsOn(img.getFile()));

The dependsOn() method you called above doesn't not do what you think it  
does. It says a given RequireJS module depends on another. I'm not even  
sure what you're trying to do. Maybe the method you want is  
initializeWith(String expression). Are you trying to pass the image bytes  
to your JavaScript code? Or just its URL? If the latter, you need to  
inject Asset, not Resource, and use its toClientURL() method.

> But it doesnt work. Any help would be highly appreciated.

Define "doesn't work". It's too vague. It says nothing about the result,  
so we have no information to help you.

-- 
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

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