RE: Relative paths & Clay

[Richard Eggert]

Thanks.  Those ideas worked great.  Here's what I ended up doing to make them 
reusable:


<component jsfid="sym:graphicImage" extends="h:graphicImage">
   <attributes>
      <set name="url" value="@imageUrl" />
   </attributes>
   <symbols>
      <set name="imageUrl" value="@src" />
      <set name="src" />
   </symbols>
</component>

<component jsfid="sym:headerLink" extends="clayOut">
   <attributes>
      <set name="escapeXml" value="false" />
      <set 
         name="value" 
         value="&lt;link type=&quot;@type&quot; rel=&quot;@rel&quot; 
href=&quot;@linkUrl&quot; /&gt;"
      />
   </attributes>
   <symbols>
      <set name="type" />
      <set name="rel" />
      <set name="linkUrl" value="@href" />
      <set name="href" />
   </symbols>
</component>


<link jsfid="sym:headerLink" rel="stylesheet" type="text/css" 
linkUrl="./path/to/style.css" href="style.css" />


<img jsfid="sym:graphicImage" src="../../images/bar.jpg" 
imageUrl="images/bar.jpg" />




Rich Eggert
Member of Technical Staff
Proteus Technologies, LLC
http://www.proteus-technologies.com



-----Original Message-----
From: Gary VanMatre [mailto:[EMAIL PROTECTED]
Sent: Thu 2/22/2007 5:48 PM
To: user@shale.apache.org
Subject: Re: Relative paths & Clay
 
>From: "Richard Eggert" <[EMAIL PROTECTED]> 
>
> I've run into a very basic problem using Clay that I'm not sure how to solve. 
> 
> Here's the setup: 
> 
> I have a JSP file (we'll call it page.jsp) that contains a single tag 
> that points to an HTML template in a subdirectory (we'll call it 
> /templates/blah/foo.html). The HTML template references an image file in a 
> completely different directory (/images/bar.jpg). 
> 
> How do I get the image to display properly both when rendered by Clay and 
> when 
> just loaded as a mockup? 
> 
> When loaded through the JSP using Clay, the image file's relative path is 
> images/bar.jpg. However, when the HTML is loaded directly with a browser 
> either 
> online or offline, the image file's relative path is instead 
> ../../images/bar.jpg. 
> 
> Using the absolute path (/appName/images/bar.jpg) works for both forms of 
> online 
> viewing (via JSP and as mockup), but it doesn't work for offline viewing 
> (since 
> the absolute path then becomes 
> /full/filesystem/path/to/appName/images/bar.jpg), 
> and I'd also rather not hard-code my application's context root into my HTML. 
> 
> I thought of using a tag with jsfid="void", but that doesn't work, since 
> only accepts full URL's and not relative paths. 
> 
> Does anyone know of a way around this? 
>

You might try something like this:

<component jsfid="imageBar" extends="h:graphicImage">
   <attributes>
        <set name="url" value="/images/bar.jpg"/>
   </attributes>
</component>

<img jsfid="imageBar" src="/appName/images/bar.jpg"/> 

 
> Incidentally, the same issue arises with links to stylesheets. 
>


You would be better off looking for a component, but something like this might 
work too:

<component jsfid="mycssLink" extends="clay:clayOut">
   <attributes>
        <set name="excapeXml" value="false"/>
        <set name="value" value="&lt;link jsfid=&quot;mycssLink&quot; 
type=&quot;text/css&quot; rel=&quot;stylesheet&quot; id=&quot;csslink&quot; 
href=&quot;/mycss.css&quot;  /&gt;"/>
   </attributes>
</component>


<link jsfid="mycssLink" type="text/css" rel="stylesheet" id="csslink" 
href="/appName/images/mycss.css"  />


Another option would be to use the comment blocks to remove the CSS used for 
developement.

<!-- ### clay:remove ### -->
<link type="text/css" rel="stylesheet" id="csslink" 
href="/appName/images/mycss.css"  />
<!-- ### /clay:remove ### -->
<link type="text/css" rel="stylesheet" id="csslink" href="/mycss.css"  />
 
> 
> Rich Eggert 
> Member of Technical Staff 
> Proteus Technologies, LLC 
> http://www.proteus-technologies.com 
> 
> 

Gary