Quantcast

Location of assets

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Location of assets

Jaroslav Ciml
Hi,

I am trying to figure out what is the correct location of assets with Tapestry 5.4 and Maven directory structure.

I will explain how do I understand it. Correct what is wrong please.

From logical point of view, I can think of two types of assets - global and comopnent specific.

A global asset is e.g. a PNG image that is used as a background in various places in the application, i.e. it is referenced in many Tapestry components. Such global assets are called "context assets" in Tapestry.

A component specific asset is say a CSS file that defines style just for the HTML markup generated by one specific Tapestry component. Such component specific assets are called "class path assets" in Tapestry.

Suppose that I have some Tapestry component with CSS file and a global PNG image.

The tml and java files for the component are located in:
src/main/java/com/somecompany/myapp/view/components/MyComponent.java
src/main/resources/com/somecompany/myapp/view/components/MyComponent.tml

And this is the appropriate configuration in web.xml:
<context-param>
  <param-name>tapestry.app-package</param-name>
  <param-value>com.somecompany.myapp.view</param-value>
</context-param>

The global PNG file is located in:
src/main/webapp/images/myimage.png

The CSS file that is related just to MyComponent is located in:
src/main/resources/META-INF/assets/MyComponent.css

and the CSS is imported in MyComponent.java:
@Import(stylesheet = "MyComponent.css")

Do these locations make sense please?

If so, is it possible to reference the global PNG from the component specific CSS?
ul.my-component-menu {
  background-image: url('what_should_be_here/myimage.png');
}

Thanks.
Jarda
---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Location of assets

Marvin Monroe
Hi Jarda,

you just use the path relative to your servlet context.

> background-image: url('/images/myimage.png');


this could work. If your app is not deployed under the root context but under /foo-bar/ then I guess this should work:

background-image: url('/foo-bar/images/myimage.png‘);

If both, your images and your css files are stored in src/main/webapp you can also use relative paths:

background-image: url('../images/myimage.png‘);

That being said, I prefer to have all assets in META-INF/images and META-INF/css for example. Relative paths have the advantage that Tapestry will give you an error if any image isn’t where it should be if you reference it via relative paths. That check does not apply for absolute paths (starting with a slash).

Cheers,
Christian



> Am 24.02.2017 um 12:59 schrieb Jaroslav Ciml <[hidden email]>:
>
> Hi,
>
> I am trying to figure out what is the correct location of assets with Tapestry 5.4 and Maven directory structure.
>
> I will explain how do I understand it. Correct what is wrong please.
>
> From logical point of view, I can think of two types of assets - global and comopnent specific.
>
> A global asset is e.g. a PNG image that is used as a background in various places in the application, i.e. it is referenced in many Tapestry components. Such global assets are called "context assets" in Tapestry.
>
> A component specific asset is say a CSS file that defines style just for the HTML markup generated by one specific Tapestry component. Such component specific assets are called "class path assets" in Tapestry.
>
> Suppose that I have some Tapestry component with CSS file and a global PNG image.
>
> The tml and java files for the component are located in:
> src/main/java/com/somecompany/myapp/view/components/MyComponent.java
> src/main/resources/com/somecompany/myapp/view/components/MyComponent.tml
>
> And this is the appropriate configuration in web.xml:
> <context-param>
>  <param-name>tapestry.app-package</param-name>
>  <param-value>com.somecompany.myapp.view</param-value>
> </context-param>
>
> The global PNG file is located in:
> src/main/webapp/images/myimage.png
>
> The CSS file that is related just to MyComponent is located in:
> src/main/resources/META-INF/assets/MyComponent.css
>
> and the CSS is imported in MyComponent.java:
> @Import(stylesheet = "MyComponent.css")
>
> Do these locations make sense please?
>
> If so, is it possible to reference the global PNG from the component specific CSS?
> ul.my-component-menu {
>  background-image: url('what_should_be_here/myimage.png');
> }
>
> Thanks.
> Jarda
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Location of assets

Jaroslav Ciml
Hi Christian,

I am sorry for a very late response.

The absolute path does not work actually.
If I use e.g.
background-image: url('/images/myimage.png');
in a css file, the image is not displayed.

The image location in my directory structure is
src/main/webapp/images/myimage.png
and Tapestry provides it on URL like
/assets/ctx/7d7f78bd/images/myimage.png

Especially, the generated path element (which is new in Tapestry 5.4) makes
referencing in css imposible.

Anyway, I will move all images to location like
src/main/resources/META-INF/assets/images
so that it can be referenced relatively.
This seems to be the way to go.

Thanks for your help.

Cheers
Jarda


2017-02-24 23:03 GMT+01:00 Christian Riedel <[hidden email]>:

> Hi Jarda,
>
> you just use the path relative to your servlet context.
>
> > background-image: url('/images/myimage.png');
>
>
> this could work. If your app is not deployed under the root context but
> under /foo-bar/ then I guess this should work:
>
> background-image: url('/foo-bar/images/myimage.png‘);
>
> If both, your images and your css files are stored in src/main/webapp you
> can also use relative paths:
>
> background-image: url('../images/myimage.png‘);
>
> That being said, I prefer to have all assets in META-INF/images and
> META-INF/css for example. Relative paths have the advantage that Tapestry
> will give you an error if any image isn’t where it should be if you
> reference it via relative paths. That check does not apply for absolute
> paths (starting with a slash).
>
> Cheers,
> Christian
>
>
>
> > Am 24.02.2017 um 12:59 schrieb Jaroslav Ciml <[hidden email]>:
> >
> > Hi,
> >
> > I am trying to figure out what is the correct location of assets with
> Tapestry 5.4 and Maven directory structure.
> >
> > I will explain how do I understand it. Correct what is wrong please.
> >
> > From logical point of view, I can think of two types of assets - global
> and comopnent specific.
> >
> > A global asset is e.g. a PNG image that is used as a background in
> various places in the application, i.e. it is referenced in many Tapestry
> components. Such global assets are called "context assets" in Tapestry.
> >
> > A component specific asset is say a CSS file that defines style just for
> the HTML markup generated by one specific Tapestry component. Such
> component specific assets are called "class path assets" in Tapestry.
> >
> > Suppose that I have some Tapestry component with CSS file and a global
> PNG image.
> >
> > The tml and java files for the component are located in:
> > src/main/java/com/somecompany/myapp/view/components/MyComponent.java
> > src/main/resources/com/somecompany/myapp/view/components/MyComponent.tml
> >
> > And this is the appropriate configuration in web.xml:
> > <context-param>
> >  <param-name>tapestry.app-package</param-name>
> >  <param-value>com.somecompany.myapp.view</param-value>
> > </context-param>
> >
> > The global PNG file is located in:
> > src/main/webapp/images/myimage.png
> >
> > The CSS file that is related just to MyComponent is located in:
> > src/main/resources/META-INF/assets/MyComponent.css
> >
> > and the CSS is imported in MyComponent.java:
> > @Import(stylesheet = "MyComponent.css")
> >
> > Do these locations make sense please?
> >
> > If so, is it possible to reference the global PNG from the component
> specific CSS?
> > ul.my-component-menu {
> >  background-image: url('what_should_be_here/myimage.png');
> > }
> >
> > Thanks.
> > Jarda
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Loading...