6 Replies Latest reply on Mar 13, 2007 7:55 PM by Igor Shabalov

    Richfaces and Skinnability

    Nicolas Labrot Newbie

      Hello,

      I have just a simple question about advanced skinnability.
      After downloaded the source and checked some files of the renderkit package, I always see HTML code in the java classes like very old fashioned servlet.
      In my opinion, you cannot doing advanced skin with just using CSS. You can modify the apparence not the layout.

      Instead of generating html into java classes isn't it possible to use some simple template engine like Velocity to generate HTML?

      Nicolas

        • 1. Re: Richfaces and Skinnability
          alberto Gori Novice

          IMHO you shouldn't customize the html, because would be a different and untested component. CSS can modify the appearance quite a lot without change the content of the component.

          Anyway if you need you can always use Javascript to modify the DOM.

          • 2. Re: Richfaces and Skinnability
            Sergey Smirnov Master

            Guys, I did not understand both of you :-(

            Nicolas, what you see in the source code is a Components Factory based on Ajax4jsf CDK. It is about Component Development, but not about the Application Development.

            What do you mean speaking about "advanced skinnability".

            Is it about "How to create a skinnable components for others?" or "How to define your own skins" for components provided by RichFaces Component Library?"

            • 3. Re: Richfaces and Skinnability
              Nicolas Labrot Newbie

              Sorry if i'm not clear (In my english and my thought)

              Let's take a simple example about advanced skinnability.

              If I'm using the panel component and I want to have round corner I cannot do it by using CSS (stop me if i'm wrong). The only solution was to modify the component java renderkit, so to create a new java class.

              A more complex example was to use a different represensation for tabpanel depending on customer wishes : "I want tab like yahoo tabs" "I want tab like Amazon whith nice round corner".

              So different customer vision and wishes, so different skin and trouble.

              How can we do this by using premade component like Richfaces with just using CSS to customize their ?

              In my opinion we cannot... (stop me if I'm wrong :)

              So why not using a system of template to generate the HTML code in the renderkit ? And like CSS redefinition, with this system, we can specify when using component another templates.

              I hope I have been clear ;)

              • 4. Re: Richfaces and Skinnability
                Sergey Smirnov Master

                OK. You are speaking about the component development. Let's start from this assumption.

                Actually, your post references to several aspects. I will try to emphasize on each of them.

                =======

                Speaking about loon-n-feel component customization, we can sort all possible ways on two groups.

                First group is ability to change to change look-n-feel just manipulating with static or dynamic CSS parameters (including colorizing the images!). It is like a chameleon that able to change the skin. BTW, the code name for very first RichFaces was a "Chameleon".

                Second group requires to change the layout of the component. I.e. providing the different set of tags.

                To designate those two groups, let's say that for the first group we have several Skins, but for the second group we have several Themes

                ========

                The first Richfaces used to use corners for some components. However, we decided do not proceed with them because the heavy layout is a killer for Ajax communication when we speak about server-side rendering strategy (that is specific for JSF)

                ========

                JSF way how to provide different Themes is having different renderKits. If you look at RichFaces packages structure, you can see that ability to have different renderKits is reserved there.

                I agree with you, if the default layout of the panel has no placeholders for corner images, the additional renderer is required for this component. However, I must to stop you as you required if you assume that you cannot see different Skins for your new fancy theme. It is possible if CSS is dynamically generated and points to the images that are generated based on the skin parameters

                ========

                So why not using a system of template to generate the HTML code in the renderkit ? And like CSS redefinition, with this system, we can specify when using component another templates.


                Right. Why not if it is designed for this purpose :-)

                The scope of the forum post is not for detailed instruction. So, the process will be described in a separate document later.

                The first document about CDK is here:
                http://jboss.com/index.html?module=bb&op=viewtopic&t=103898



                • 5. Re: Richfaces and Skinnability
                  Nicolas Labrot Newbie

                  Thank you for your answer :-)

                  • 6. Re: Richfaces and Skinnability
                    Igor Shabalov Apprentice




                    I have just a simple question about advanced skinnability.
                    After downloaded the source and checked some files of the renderkit package, I always see HTML code in the java classes like very old fashioned servlet.
                    In my opinion, you cannot doing advanced skin with just using CSS. You can modify the apparence not the layout.


                    nicolasl - what sources are you talking about? Normally we use template language to define component markup, I wonder where you can see a lot of "hardcoded" html inside of java in svn?
                    Our "src" packages contain a lot of generated classes. That classes are generated from template language and may contain a lot of html inside, however this classes are not "handcrafted".

                    Speaking about "advanced" skinability - for us it is a combination of
                    1. CSS with "parameters. If you look into our css resources in sources you will notice that most of it actually receive "parameters" from skin.
                    2. Classes that generate images, which in a turn also accept parameters.
                    3. CSS classes that are "embedded" into components markup to be used by application developers
                    4. "style" and "styleClass" attributes that allows "fine tuning" of look.
                    5. id naming convention that allows "dynamic" manipulation with elements of components markup.