You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@turbine.apache.org by stef <st...@yahoo.fr> on 2002/01/08 08:35:27 UTC

[Turbine] Skinning - SVG

Hello all,

For the need of SVG "apps" and other target
environnements, I am using SVG files for skinning.
The SVG file contains several elements such as 
<g id="table" style=... />, or <g id="myButton" 
onclickmouse=... />, etc, mixing standard HTML
elements & properties with actual images.
The idea is to have one file defining the whole skin 
colors, layouts, and graphics)of the page.

I am trying to implement this with HTML & Turbine.

I would like to have a skin created by the designer, 
and accessed by him. The programmer should have very 
little or no influence on it.
Ideally, the skin could be choosed by the end user 
(allowing virtually hundreds of skins for a web site, 
as creating a SVG skin with tools like Adobe 
Illustrator or others is a matter of minutes)

To implement it with Turbine, I see several ways (too 
many in fact !) :

1) putting the DOM in the context
This allows parsing of the file, such as 
$svgskin.getElementById("myButton").getAttribute
("onclickmouse"), to have an access to the whole doc, 
but is a bit hard for the designer to grasp and use , 
IMHO. Moreover he would not have access to the images
(SVG is almost impossible to embed inline in a web 
page as for now )

2) creating a SVGSkin class that would have access to 
the elements, and that could be put in the context, 
such as $svgskin.getSkinFor("table").getBgColor().
This would be much easier to understand for the 
designer, but much harder for me to implement ( I
would need to have a method for each element that
could be encountered - HTML or images ). The images 
are still hard to get (maybe 
$svgskin.getImage("myButton") with preloaded & cached 
rendered images ?).
It would also mean that the programmer would be 
responsible for the skin, which is not really a "best 
practice" !

3) creating a SVGSkinScreen that would output the 
desired elements, being HTML, properties, layouts, 
graphics, as desired.
One would call SVGSkinScreen.vm to get the desired 
output, simply putting :
<embed src="$link.setPage( "skin,SVGSkinScreen.vm?
element=myButton" )" /> to get an image. This allows a

very easy way to get images from the SVG, and can be 
easily tweaked to spit out simple properties, such 
that "SVGSkinScreen.vm?element=table&property=bgColor"

would give "#FFFF00" .
(don't do it, a yellow background is usually an eye-
killer !) 
This could seem the best solution , but it would force

the designer to use 
$link.setPage("skin,SVGSkinScreen?...") for each
property in the page !!
Moreover I don't see any way to choose / edit the
source SVG skin file at runtime , or dynamically ...

So, here I am now, not knowing how to implement this
for HTML & Turbine ...
You folks who know more than me on Turbine's
abilities / core / best practices, please lead me to 
the right way !
(any valid 4th or 5th or 6th way of doing it is 
acceptable and welcome !! )

Thanks,
Stephane

___________________________________________________________
Do You Yahoo!? -- Une adresse @yahoo.fr gratuite et en français !
Yahoo! Courrier : http://courrier.yahoo.fr

--
To unsubscribe, e-mail:   <ma...@jakarta.apache.org>
For additional commands, e-mail: <ma...@jakarta.apache.org>