-
1. Re: Skinability : set of images
ronanker Mar 12, 2008 11:13 AM (in response to ronanker)It's so difficult to find information about skinability...
where can I find doc for namespaces http:/jsf.exadel.com/template and http:/jsf.exadel.com/template/util ?
i've put my general xcss file in web-inf/classes what do you think of that. I would have prefered in my css directory but if i don't include it as a ressource by <a4j:loadStyle src="resource:///..." /> it's not parsed.
can we have a filter for *.xcss that would do it ? -
2. Re: Skinability : set of images
sergeysmirnov Mar 12, 2008 1:43 PM (in response to ronanker)This is because your understanding of the skinability is different from the one that exists. That is why you cannot find in the doc anything that you expect to find.
-
3. Re: Skinability : set of images
ronanker Mar 12, 2008 4:04 PM (in response to ronanker)This is because your understanding of the skinability is different from the one that exists. That is why you cannot find in the doc anything that you expect to find.
Thank you for this very useful remark.
But I think, i understand your way of skinability or explain me where i'm wrong. I just have a simple problem to solve, and probably i don't see the right solution.
I need to have this : http://www77.free.fr/virage/ (bleu exemple)
and to make the color change with Richfaces skin colors.
for the gradient i would use your gradient generator (gradientA works fine, don't know why gradientB don't let's search a little more)
So the problem is that some part of the skin can't be generated by 'gradient' or perhaps other possibilities but can't find info on that...
so i thought to make images and switch them regarding the skin... but how to do that ?
thank you for taking time to answer me, i could make a tuto in return when i'll reach my goal... -
4. Re: Skinability : set of images
fmarwede Mar 12, 2008 4:44 PM (in response to ronanker)Use one CSS file for each skin and load them dynamically. Define in that files classes with the same names but with different image references (dependent from the concerning skin).
-
5. Re: Skinability : set of images
ronanker Mar 12, 2008 6:01 PM (in response to ronanker)that's an idea...
so in my header i'll have :
<a4j:loadStyle src="resource:///styles.xcss" />
<a4j:loadStyle src="/styles/#{skinBean.skin}/stylesIMG.css" />
the first one defining colors and fonts, the second one just for the special background images...
i'll try it... thanks. -
6. Re: Skinability : set of images
ronanker Mar 12, 2008 7:25 PM (in response to ronanker)(quite boring to generate manually all images that match each skin)
in this case my "stylesIMG.css" are all nearly identical the only thing that changes is the path of the image directory "/styles/#{skinBean.skin}/"...
it would be better make a dynamic css file...
it would really be cleaner to include this in the a4j/rich skin system.
My site is itself a component <vg:bodyTemplate ...> and it should have it's styles in it's own .xcss file incorporated by BodyTemplateRenderer (i need to learn how to do that).
the issue is that we can't have all it's images generated. and i understand that having a static number of sets of images for each skin is not possible because it can't adapt to new skins.
to enable all king of generated images, we need a generator that takes a generic image (probably a sort of mask) and that is able to generate a coloured one with the skin colors.
this improvement would be really great !
I would define a 256 colour mask with 1 transparent and 255 gradient between colours if 2 colours 255 between them, if 3 colours 127 between 1st and 2nd one and 127 between 2nd and 3rd one... etc...
then we can define it in xcss file like this :
<u:style name="background-image" >
<f:imageResource file="package/component/img.mask">
<f:colour skin="headerBackgroundColor" />
<f:colour skin="headerGradientColor" />
<f:colour skin="generalBackgroundColor" />
</f:imageResource/>
</u:style>
I think you'll probably have a better idea for the syntax...
also for my need a simple <f:imageResource file="package/component/img.mask" startcolor="headerBackgroundColor" endcolor="headerGradientColor" /> would be sufficient. -
7. Re: Skinability : set of images
sergeysmirnov Mar 12, 2008 7:34 PM (in response to ronanker)Why do not you use the dynamically generated image like RichFaces does itself?
-
8. Re: Skinability : set of images
ronanker Mar 12, 2008 7:51 PM (in response to ronanker)I would like to do it, but :
- I can't find any info on how to use it... i'm just quite able to use GradientA tht makes already a good look for the application.
- It seem too limited to be able to make what i need... see my previous post.
i need more complex gradients... Is is possible to do it ?
exemples of images i would like to folow the skin color :
http://www77.free.fr/virage/images/company_logo_left.gif
http://www77.free.fr/virage/images/company_logo_right.gif
http://www77.free.fr/virage/images/table_content-bg.jpg
http://www77.free.fr/virage/images/cockpit.gif
full template : http://www77.free.fr/virage/ -
9. Re: Skinability : set of images
sergeysmirnov Mar 12, 2008 8:07 PM (in response to ronanker)The standard paint2D is used for generated images like GradientA. I did no see the reason why you cannot generate something like you show above. Just google for the tutorials how to use paint2D
As best I remember, you can use predefined images and colorize them inside the Piant2D method. -
10. Re: Skinability : set of images
ronanker Mar 13, 2008 5:43 AM (in response to ronanker)ok, i've just looked in the sources to understand how you make your gradients...
you mean that i should make my own class extending Java2Dresource and that i must make a class for each image...
i wanted something like if we could give parameters to BaseGradient it would make obsolete classes that extends it... and be more flexible...
Why did you decided that each image should have its own class ? is it possible to use more generic classes by giving them parameters ?
there should be in dev guide (chapter 5.9 or 6?) a list of those useful classes i've seen in sources... or a link to the UI javadoc, now that i know where they are, i've find them... if it doesn't exist hidden somewhere i'll try to sum up for tutorial all what i've learned on how to use skinability... and making your own components whith skinability enabled...
I've never used java2D, i'll probably won't be alowed to take time to develop a BaseMaskGradient class and subclasses for each mask... so i'll probably stay on fmarwede's solution and continue with duplicated image files and dynamic change of static css...
if someone that knows java2D and basis of richfaces.Java2Dresource and wants to create BaseMaskGradient(int width, int height, Ressource mask, String baseColor, String gradientColor)... you're welcome :-)
if i begin doing it, i'll say it in this topic. -
11. Re: Skinability : set of images
ronanker Mar 13, 2008 12:57 PM (in response to ronanker)I see that in *.skin.properties files there's "Calendar colors"
this is properties for a specific component but in general config file... i don't see how you could have done this differently.
I would like to have more properties in this file because it lacks of :
footerBackgroundColor
footerGradientColor
footerTextColor
footerWeightFont
footerSizeFont
footerFamilyFont
in my own skins i've added them...
i've tried... to call that properties in .xcss file.
if the property isn't defined (standard skins), then i'ts not added in the css (so here, white backgound).
and then,
i added in my \META-INF\skins directory files with same name as Richfaces skins with theses properties inside... it works well... it adds the properties to the skins definitions.
very welll !
just to be sure : is it the clean way of doing it ? -
12. Re: Skinability : set of images
nbelaevski Mar 13, 2008 7:53 PM (in response to ronanker)"RonanKER" wrote:
It's so difficult to find information about skinability...
where can I find doc for namespaces http:/jsf.exadel.com/template and http:/jsf.exadel.com/template/util ?
A very short kind of reference can be found here: http://labs.jboss.com/file-access/default/members/jbossajax4jsf/freezone/docs/apidoc/org/ajax4jsf/framework/renderer/compiler/HtmlCompiler.html#setCustomRules(org.apache.commons.digester.Digester)"RonanKER" wrote:
i've put my general xcss file in web-inf/classes what do you think of that. I would have prefered in my css directory but if i don't include it as a ressource by <a4j:loadStyle src="resource:///..." /> it's not parsed.
can we have a filter for *.xcss that would do it ?
Please post a request here: http://labs.jboss.com/wiki/RichFacesFuture if you want this feature."RonanKER" wrote:
i wanted something like if we could give parameters to BaseGradient it would make obsolete classes that extends it... and be more flexible...
Why did you decided that each image should have its own class ? is it possible to use more generic classes by giving them parameters ?
It is not currently possible to pass parameters to images using XCSS files. But you can create resource classes that have parameters based on EL expressions if you wish. Just return arbitrary data that can be serialized from org.ajax4jsf.resource.InternetResourceBase#getDataToStore(FacesContext, Object) method and you can get it back by means of org.ajax4jsf.resource.ResourceContext#getResourceData() when your resource will be requested. -
13. Re: Skinability : set of images
nbelaevski Mar 13, 2008 8:00 PM (in response to ronanker)"RonanKER" wrote:
I see that in *.skin.properties files there's "Calendar colors"
this is properties for a specific component but in general config file... i don't see how you could have done this differently.
I would like to have more properties in this file because it lacks of :
footerBackgroundColor
footerGradientColor
footerTextColor
footerWeightFont
footerSizeFont
footerFamilyFont
in my own skins i've added them...
i've tried... to call that properties in .xcss file.
if the property isn't defined (standard skins), then i'ts not added in the css (so here, white backgound).
and then,
i added in my \META-INF\skins directory files with same name as Richfaces skins with theses properties inside... it works well... it adds the properties to the skins definitions.
very welll !
just to be sure : is it the clean way of doing it ?
That's valid, but note, please, that we can add some more parameters in the future so that they will collide