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="<link type="@type" rel="@rel" href="@linkUrl" />" /> </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="<link jsfid="mycssLink" type="text/css" rel="stylesheet" id="csslink" href="/mycss.css" />"/> </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