13 Replies Latest reply on Mar 13, 2008 8:00 PM by Nick Belaevski

    Skinability : set of images

    Kerdudou Ronan Apprentice

      Hello,

      I'm curently implementing skinability in my application and I need to configure different background images for different skins.

      How can i do that ?

      i imagined using a directory for each skin but how to make css point on the right image...

      something like that would help (in xcss file) :

      <u:selector name=".magicBackground">
       <u:style name="background-image">
       <?:?URL? src="ressource:///com/vg/skin/#{skinBean.skin}/magicBackground.jpg"/>
       </u:style>
      </u:selector>


      for the icons of the application i've made a <vg:icon name="icone.jpg" /> that uses the selected skin to build the path.
      (it also enables me to separate set of icons from skin)

      also how can i make eclipse auto complete for http:/jsf.exadel.com/template and http:/jsf.exadel.com/template/util ?
      it would be helpfull.


        • 1. Re: Skinability : set of images
          Kerdudou Ronan Apprentice

          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
            Sergey Smirnov Master

            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
              Kerdudou Ronan Apprentice

               

              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
                Florian Marwede Expert

                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
                  Kerdudou Ronan Apprentice

                  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
                    Kerdudou Ronan Apprentice

                    (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
                      Sergey Smirnov Master

                      Why do not you use the dynamically generated image like RichFaces does itself?

                      • 8. Re: Skinability : set of images
                        Kerdudou Ronan Apprentice

                        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
                          Sergey Smirnov Master

                          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
                            Kerdudou Ronan Apprentice

                            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
                              Kerdudou Ronan Apprentice

                              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
                                Nick Belaevski Master

                                 

                                "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
                                  Nick Belaevski Master

                                   

                                  "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