11 Replies Latest reply on Mar 16, 2009 7:48 AM by Ilya Shaikovsky

    How to skin the new layout components

    Jay Balunas Master

      At the moment this are the options:

      1) Never Skinned - the layout components are never skinned and all formatting and spacing are left the contents.

      2) Always Skinned - the layout components always use values from the current skin to color and format themselves.

      3)Skinned based on attribute - the layout components by default will not use skins the same as option 1 above. If the user sets an "enableSkinning" attribute to true the layout components will use skins the same as option 2 above. The skins can be modified normally to adjust styles.

      4)Set styles manually in CSS - the layout components will not use skins directory, but will instead require specific css settings to set styles. i.e .rich-page-footer {background-color:#CCC}

      If I have mistated any of the options please correct.

      I'll follow on with my thoughts on it - coughcough3coughcough, but we would really like to get some thoughts.

      -Jay


        • 1. Re: How to skin the new layout components
          Jay Balunas Master

          I'm in favor of option #3 here.

          The layout component lives in a murky area between visible components that should be skinned and framework components that are not. This is why I think special handling is required where both no styles and full skinning are just an attribute away.

          This has the effect of providing both a clean canvas for the developer, and to make it easy to get quick visual effects that blend with the other skinned components. All the while remaining consistent for the use to adjust.

          -Jay

          • 2. Re: How to skin the new layout components
            Sergey Smirnov Master

            During the set of the internal discussions between me and Alex we have found the solution that should satisfy all the possible positions.
            As a result, we are going to introduce a new feature of RichFaces - RichFaces Page Theme. This feature allows to define the page look-n-feel similar to what WorldPress Theme does: http://topwpthemes.com/

            RichFaces Page Theme is based on the top of the skinning feature. However, Theme is not the Skin exactly. They have a many-to-many relationship. I.e. Each theme might works with any skin as well as a skin might be applied to any theme.

            RichFaces already has everything that allows to enable this feature. Alex have promised to have it done today. So, tomorrow we can test it.

            • 3. Re: How to skin the new layout components
              Sergey Smirnov Master

              We know that some of the RichFaces cool features are unknown for the public. Even, they are in the documentation and on the wiki (forum, blogs).
              The skinning is not an exception here. Some base features that was implemented from the very beginning are not yet used by application developers.

              Skinning allows not only define the color scheme (this usually people understand by RichFaces skinning), but redefine the renderers for components. Having rich:page in the RichFaces component set, we will be able to provide page templates (aka Themes) like WorldPress does.

              Why we did no do it in the past? Because, we had no control on the top page layout. Now, with introducing rich:page we will have.

              Why theme is not equal to skin?

              Let's imagine the very simple template with header, footer and left-size 300px sidebar (Let's name this template - "Simple").
              Can it be in blue? I.e. can it use blueSky color palette.
              Can it be in green? In red? Why not?

              So, should we have to have a 8 variations of "Simple" template or it is right to say we have just one "Simple" template that are able to be used with any of the 8 standard skins and unlimited number of custom skins?


              Another question: should the blueSky skin has a predefined layout of the page? The same for emeraldTown skin? If yes, should developer avoid using blueSky if layout is not much her needs?

              Why not have an ability to point to vary of available templates with one word and use the same blueSky color palette instead of redefine and adjust styles if the "default" layout is not suitable.

              What is what I mean speaking about many-to-many possible relation.

              Template vs. Theme.

              Template is already commonly use in JSF. Especially, in JSF 2.0 where Facelets and Facelets templates are embedded feature. So, the term "Theme" is more suitable.

              How to define on the page:

              <rich:page theme="Simple" ....>
              
              </rich>


              • 4. Re: How to skin the new layout components
                Jay Balunas Master

                 

                "SergeySmirnov" wrote:
                During the set of the internal discussions between me and Alex we have found the solution that should satisfy all the possible positions.
                As a result, we are going to introduce a new feature of RichFaces - RichFaces Page Theme. This feature allows to define the page look-n-feel similar to what WorldPress Theme does: http://topwpthemes.com/

                RichFaces Page Theme is based on the top of the skinning feature. However, Theme is not the Skin exactly. They have a many-to-many relationship. I.e. Each theme might works with any skin as well as a skin might be applied to any theme.

                RichFaces already has everything that allows to enable this feature. Alex have promised to have it done today. So, tomorrow we can test it.


                I like this idea and can't wait to see it in more detail - but I don't see where this solves the question of default styling and skinning the layout. It just adds another level of control - afaics.



                • 5. Re: How to skin the new layout components
                  Jay Balunas Master

                   

                  "SergeySmirnov" wrote:

                  Skinning allows not only define the color scheme (this usually people understand by RichFaces skinning), but redefine the renderers for components.


                  Is this used for the themes idea, or just an example of one of the unknowns?


                  So, should we have to have a 8 variations of "Simple" template or it is right to say we have just one "Simple" template that are able to be used with any of the 8 standard skins and unlimited number of custom skins?

                  agreed too many possible combinations.

                  Why not have an ability to point to vary of available templates with one word and use the same blueSky color palette instead of redefine and adjust styles if the "default" layout is not suitable.

                  So if I understand - themes define a set of default layout component settings and spacing. While skins (as before) provide the color palate and style for the page.

                  How to define on the page:

                  <rich:page theme="Simple" ....>
                  
                  </rich>

                  Would users be able to set a default theme in web.xml just like they set a default skin? Users could then override on specific pages using the rich:page example above.

                  Overall I like the idea, but as I said in the other post I don't see how it solves the skinning questions of the original post. In other words out of the box what will the default layout component look like, will it use the default skin or need it "enabled" for the layout? In fact this just adds another question - what is the default "theme"?

                  -Jay

                  • 6. Re: How to skin the new layout components
                    Sergey Smirnov Master

                    rich:page as any other JSF component has a default renderer. If skin does not redefine the renderer, the default renderer of the component is a "default" renderer of the skin. I do not understand why the question still exists. If no other renderer is defined (on the theme or skin level) and the default renderer is disable somehow, it should be just an exception, I guess. Do we need an attribute that generate exception?

                    • 7. Re: How to skin the new layout components
                      Sergey Smirnov Master

                       

                      "jbalunas@redhat.com" wrote:
                      "SergeySmirnov" wrote:

                      Skinning allows not only define the color scheme (this usually people understand by RichFaces skinning), but redefine the renderers for components.


                      Is this used for the themes idea, or just an example of one of the unknowns?


                      The example of feature that is not used yet.


                      The problem is in the effort. To make a significant changes on the page when new skin is applied we (or end developers) have to redefine the renderers for wide number of components. Writing a new renderer is a time consuming task. That is why we never add such thing in the plan. Even the plug-n-skin Skins redefines css rules for components, but not the renderers.

                      Now, with introducing rich:page, we (or end developers) can have a significant changes of the page look-n-feel just rewriting the renderer for rich:page

                      I.e. the old feature starts to make sense.

                      • 8. Re: How to skin the new layout components
                        Jay Balunas Master

                        One of my concerns with the new theme feature is that it is adding another layer to a feature set (skinning) that - in your own words - is not fully understood or utilized by many users.

                        Since this does not seem to address the original concern of this post, and seems to effectively be another "new" feature for a point release I think we should hold off for now. Especially since we would like to wrap up development is just 3 weeks and there is a lot to do.

                        I'm open for discussion on this and want to better understand it, but I'm concerned over the problem it is solving. Especially since it applies to a component that users have not even had a chance to use in its original form.

                        • 9. Re: How to skin the new layout components
                          Ilya Shaikovsky Master

                          Sorry for previous post. Just has no right to delete or edit.

                          So taking into consideration that we will use themes we could declare next general styling for page and layout components:

                          1) when default theme is used all the classes are empty as it was declared earlier.
                          2) when simple or other built-in or custom theme used - theme should provide styling for both the components page and layout.

                          As for layout itself lets provide next set of classes:

                          rich-layout
                          rich-layout-panel

                          and the classes for every type of layout panel:

                          rich-layout-panel-top
                          rich-layout-panel-bottom
                          rich-layout-panel-center
                          rich-layout-panel-right
                          rich-layout-panel-left

                          The first set could be used to define common style properties like paddings borders and so on. And the second set could be used to concrete styling of layout area (e.g. bg-color for header and footer and so on)

                          So if simple theme is used default layout classes could be used to style the layout areas as rich:panels and made them skin dependent.

                          • 10. Re: How to skin the new layout components
                            Jay Balunas Master

                            How do these styles relate to the rich:page component? Would rich:page have its own set of styles?

                            Related to that I thought the rich:layout/layoutpanel was not going to have top/bottom only left/center/right.

                            -Jay



                            • 11. Re: How to skin the new layout components
                              Ilya Shaikovsky Master

                               

                              "jbalunas@redhat.com" wrote:
                              How do these styles relate to the rich:page component? Would rich:page have its own set of styles?

                              Yes as it mentioned in wiki
                              * rich-page
                              * rich-page-header
                              * rich-page-footer
                              * rich-page-body
                              classes should be availablefor the page. And filled with properties only if this properties defined within the theme (simple or another). empty under default theme.

                              "jbalunas@redhat.com" wrote:

                              Related to that I thought the rich:layout/layoutpanel was not going to have top/bottom only left/center/right.


                              I've just checked the sandbox sample while doing wiki update and found that Alex already implemented the top and bottom. So I've described them.