1 2 Previous Next 16 Replies Latest reply on Feb 27, 2009 7:54 AM by nbelaevski

    How To: Richfaces with YUI for layout !

    allforjava
    allforjava Feb 21, 2009 7:19 AM

      Hi Dost [Hindi: friend],

      I want to design the basic template to lay rich/jsf/seam componets. In some post and at wiki found the frameworks for CSS http://en.wikipedia.org/wiki/List_of_CSS_frameworks.

      Based, I have following queries to begin with:

      1. How can I in-corporate YUI for richfaces 3.2.1 GA? Any tutorial/demo/links appereciated.

      2. Are there any frameworks for XCSS which can be used with Richfaces?

      3. Can I use built-in/ custom richfaces skins, using YUI (not sure, as willing to use YUI only for layout of form)?

      4. Is there any other way for layouts for richfaces (using seam or richfaces itself), instead of general table?

      Note: Related post http://www.jboss.org/index.html?module=bb&op=viewtopic&t=150893

      Thank you in advance.

      Warm regards,

      • 6425 Views
      • Tags:
        • 1. Re: How To: Richfaces with YUI for layout !
          nbelaevski
          nbelaevski Feb 23, 2009 7:29 AM (in response to allforjava)

          Hello,

          1. Add YUI styles/scripts to the page using either common HTML technique or a4j:load/a4j:loadScript components. Apply necessary CSS classes to components by setting styleClass attribute.

          2. No, as far as I know, there are no XCSS frameworks external to RichFaces. Support for XCSS files is built into RF library. What extra functionality do you need?

          3. Yes, you can. Create XCSS files wired to skin properties and defining CSS seelctors involving YUI style classes.

          4. Requirements for layout components are being discussed right now: http://www.jboss.org/index.html?module=bb&op=viewtopic&t=147746

            • Actions
          • 2. Re: How To: Richfaces with YUI for layout !
            allforjava
            allforjava Feb 24, 2009 12:53 AM (in response to allforjava)

            Thank you, nbelaevski !


            2. No, as far as I know, there are no XCSS frameworks external to RichFaces. Support for XCSS files is built into RF library. What extra functionality do you need?


            1. I was experimenting with custom.skin.properties, as we are using the skin resource bundle, similarly can we define the layout/selectors values? So that It can be used with XCSS instead of CSS, for dynamic layouts (similar as themes/skins). Can I define it myself? Any related guidance will be helpful for me, please.

            2. Presently, I'm working to generate the basic grid type layout, using rich:panel (border-less) so that I can lay header, footer, menu, status and body. However, there are difficulties using CSS, as:
            a. Positioning
            b. Percentage of the screen to be acquired (instead of fixed pixcel size)
            c. Invoking seperate CSS for layout panels and components placed in these panels

            Here is the workout:

            defaultTemplate.css 
            <!-- Basic layout -->

.head{
 border-width: 1px;
}

.info{
 border-width: 1px;
 float: top;
}

.menu{
 border-width: 0px;
 margin: 0px;
 float: left;
 width: 24.5%;
 height: 50%
}

.body{
 border-width: 0px;
 padding: 0px;
 margin: 0px;
 width: 75%;
 height: 50%
}

.footer{
 text-align: center;
 border-width: 1px;
}

body{
 padding: 0px;
 margin: 0px;
 border-width: 1px;
}

<!--Panel-->


            defaultTemplate.xhtml 
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:s="http://jboss.com/products/seam/taglib">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>UI</title>
 <link href="stylesheet/defaultTheme.css" rel="stylesheet" type="text/css" />
</head>
<body>

 <rich:panel styleClass="head">
 <f:facet name="header">Header</f:facet>
 <!-- <ui:insert name="body"/> -->
 </rich:panel>

 <rich:panel styleClass="info">
 <f:facet name="header">Information</f:facet>
 <!-- <ui:insert name="body"/> -->
 </rich:panel>

 <rich:panel styleClass="menu">
 <f:facet name="header">Menu</f:facet>
 <!-- <ui:insert name="body"/> -->
 </rich:panel>

 <rich:panel styleClass="body">
 <f:facet name="header">Body</f:facet>
 <!-- <ui:insert name="body"/> -->
 </rich:panel>

 <rich:panel styleClass="footer">
 <f:facet name="header">Footer</f:facet>
 Powered by <a href="www.adroitent.com">Seam</a>.
 </rich:panel>

</body>
</html>


              • Actions
            • 3. Re: How To: Richfaces with YUI for layout !
              allforjava
              allforjava Feb 24, 2009 9:27 AM (in response to allforjava)

              Hi,

              The experimented layout is atmost working (using rich:panel) except one thing i.e the Body section/panel when scrolled (browser's scroller) it overlaps the fixed panels (menu, footer, header). Even tried to use the simpleTogglePanel however same problem occured.

              What is creating this problem? Kindly suggest a way?

              Here is the code:

              defaultTemplate.css

              
<!-- Basic layout -->

.head{
 border-width: 0px;

 top: 0%;

 height: 10%;
 width: 100%;

 position: fixed;
}

.info{
 border-width: 1px;

 top: 10%;

 height: 10%;
 width: 100%;

 position: fixed;
}

.menu{
 border-width: 1px;
 margin: 0px;
 width: 20%;
 padding: 0px;

 left:0%;
 top: 20%;
 position: fixed;
}

.body{
 border-width: 1px;
 padding: 0px;
 margin: 0px;

 left:20%;
 top: 20%;
 position: absolute;
 display: block;
}

.footer{
 text-align: center;
 border-width: 1px;
 width: 100%;

 bottom: 0px;
 position: fixed;
}

body{
 padding: 0px;
 margin: 0px;
 border-width: 0px;
}

<!--Panel-->
.dr-pnl{
 border-width: 1px;

 padding: 0px;
 margin: 0px;

 left:20%;
 top: 20%;
}


              defaultTemplate.xhtml 

              <body>

 <rich:panel styleClass="head">
 <f:facet name="header">Header</f:facet>
 <!-- <ui:insert name="body"/> -->
 </rich:panel>

 <rich:panel styleClass="info">
 <f:facet name="header">Information</f:facet>
 <!-- <ui:insert name="body"/> -->
 </rich:panel>

 <div class="menu dr_pnl rich-panel">
 <rich:panel>
 <f:facet name="header">Menu</f:facet>
 <ui:include src="menu2.xhtml"/>
 </rich:panel>
 </div>

 <rich:panel styleClass="body dr-pnl rich-panel">
 <f:facet name="header">Body</f:facet>
 <ui:insert name="body"/>
 </rich:panel>
 <rich:panel styleClass="footer">
 <f:facet name="header">Footer</f:facet>
 Powered by
 </rich:panel>

</body>


              Regards

                • Actions
              • 4. Re: How To: Richfaces with YUI for layout !
                nbelaevski
                nbelaevski Feb 24, 2009 6:02 PM (in response to allforjava)

                Can you please clarify this question: "1. I was experimenting with custom.skin.properties, as we are using the skin resource bundle, similarly can we define the layout/selectors values? So that It can be used with XCSS instead of CSS, for dynamic layouts (similar as themes/skins). Can I define it myself? Any related guidance will be helpful for me, please. "?

                  • Actions
                • 5. Re: How To: Richfaces with YUI for layout !
                  allforjava
                  allforjava Feb 25, 2009 12:57 AM (in response to allforjava)

                  Hi nbelaevski,

                  Regret for the inconvenience caused.


                  Can you please clarify this question: "1. I was experimenting ...... "?


                  Clarification: Can we define the resource bundle for layout formatting values ? Say as myLayout.layout.properties just a rough thought. (Similar as blueSky.skin.properties used to define skin/theme values). So that instead of defining the values in CSS file we can have the default layouts just by having multiple layout.properties files.

                  2. Is it a good idea to deal with rich:panels as basic containers for defining layouts? Using above clarified through. I'm not sure/aware of its consequences.

                  3. Can you guide me towards the issues, as per my last reply? If feasible you may try the given code.

                  Regards,

                    • Actions
                  • 6. Re: How To: Richfaces with YUI for layout !
                    nbelaevski
                    nbelaevski Feb 25, 2009 5:28 AM (in response to allforjava)

                    1. Facelets page forum-css.xhtml:

                    <f:view contentType="text/css"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">

 <f:loadBundle var="bundle" basename="messages" />

 /*<![CDATA[*/

 body {
 color: #{bundle.datepattern}
 }

 /*]]>*/
</f:view>


                    Usage: 
                    <head><link href="forum-css.jsf" rel="stylesheet" /></head>


                    2. Better use 
                    <a4j:outputPanel layout="block">
                    . rich:panel have a number of predefined styles that can affect the result in the undesired way.

                    3. IE7 doesn't support 'fixed' position in back compatible mode. IE6 doesn't support it at all.

                      • Actions
                    • 7. Re: How To: Richfaces with YUI for layout !
                      allforjava
                      allforjava Feb 25, 2009 6:17 AM (in response to allforjava)

                      Thank you very much, nbelaevski!


                      1. Facelets page forum-css.xhtml: Code: ...


                      1. Can I get related tutorials? I'm very new to this stuff. The example code shows about color parameter assigned with bundle value. Does position values can be assigned, similarly (e.g width:#{bundle:menuWidth})?

                      2. How can I define positioning and layout of a4j:outputPanel on viewport/browser window? (as I hv designed using rich:panel and customStyle). Do I need to try with above defined way?

                      3. As suggested (on Mon Feb 23, 2009 07:29 AM) I tried using YUI and Jquery splitter. However my demoExample is not working/showing any of the desired results:

                      Reference:

                      http://developer.yahoo.com/yui/examples/grids/grids-gf.html
                      http://groups.google.com/group/jquery-en/browse_thread/thread/8e3b64f7ea8eeabd
                      http://methvin.com/splitter/

                      I have included these files at:

                      - splitter.js (JQuery): /webContent/scripts
                      - images for splitter (JQuery): /webContent/img and /webContent/scripts/img
                      - grid.css (YUI): /webContent/stylesheet

                      template.xhtml 

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>UI</title>
 <!-- <link href="stylesheet/theme.xcss" rel="stylesheet" type="text/xcss" /> -->
 <link href="stylesheet/grid.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="script/splitter.js"/>

</head>

<body>

 <f:view>
 <script type="text/javascript" language="javascript">
 var disableRowClick = false;
 jQuery.noConflict();
 </script>
 <div id="doc3" class="yui-t1">

 <a4j:region id="region">

 <div id="bd">

 <div id="MySplitter" class="yui-gf">
 <div class="yui-u first"> <ui:include src="menu2.xhtml"/> </div>
 <div class="yui-u"> <ui:insert name="body"/> </div>
 </div>

 <rich:jQuery selector="#MySplitter" name="mysplit"
 query="splitter({type: 'h'})"
 timing="onload"/>
 </div>

 <div id="ft">
 Powered by <a href="http://jboss.com/products/seam">Seam</a>.
 Generated by seam-gen.
 </div>

 </a4j:region>

 </div>
 </f:view>
</body>
</html>


                      
Personal: nbelaevski, may I know from which part of the world u r replying?

Regards


                        • Actions
                      • 8. Re: How To: Richfaces with YUI for layout !
                        nbelaevski
                        nbelaevski Feb 25, 2009 7:11 AM (in response to allforjava)

                         

                        "allforjava" wrote:
                        Thank you very much, nbelaevski!


                        1. Facelets page forum-css.xhtml: Code: ...


                        1. Can I get related tutorials? I'm very new to this stuff. The example code shows about color parameter assigned with bundle value. Does position values can be assigned, similarly (e.g width:#{bundle:menuWidth})?



                        Yes, you can use any value from properties file.

                        "allforjava" wrote:
                        2. How can I define positioning and layout of a4j:outputPanel on viewport/browser window? (as I hv designed using rich:panel and customStyle). Do I need to try with above defined way?


                        Use style/styleClass attributes.

                        "allforjava" wrote:
                        3. As suggested (on Mon Feb 23, 2009 07:29 AM) I tried using YUI and Jquery splitter. However my demoExample is not working/showing any of the desired results:

                        Reference:

                        http://developer.yahoo.com/yui/examples/grids/grids-gf.html
                        http://groups.google.com/group/jquery-en/browse_thread/thread/8e3b64f7ea8eeabd
                        http://methvin.com/splitter/

                        I have included these files at:

                        - splitter.js (JQuery): /webContent/scripts
                        - images for splitter (JQuery): /webContent/img and /webContent/scripts/img
                        - grid.css (YUI): /webContent/stylesheet


                        Please save complete HTML page (preferably using Firefox), zip it and post to sendspace.com/drop.io, post a link, I'll check.

                        I'm located in Eastern Europe.

                          • Actions
                        • 9. Re: How To: Richfaces with YUI for layout !
                          allforjava
                          allforjava Feb 25, 2009 8:54 AM (in response to allforjava)

                          Hi,

                          Thank you for the speedy response.

                          I'hv tried to implement the bundle/stylesheet (as suggested), however its not effecting and I'm unable to posting the a4j:outputPanel using the styleClass with defaultTemplate.css.

                          Clarity: I want to use forum-css.xhtml (as suggsted) for positioning a4j:outputPanel.

                          As adviced I hv uploaded the UI.zip (with layout.properties, forum-css.xhtml, etc) at http://www.sendspace.com/file/pqs5i8. In my company the Firefox browser is restricted. Only thing that I have is IE7.

                          Note: The zip contacts all three examples of using YUI, Jquery Splitter and your codes.

                          Personal: By the way my name is Prathamesh [Male]. India.

                            • Actions
                          • 10. Re: How To: Richfaces with YUI for layout !
                            nbelaevski
                            nbelaevski Feb 25, 2009 12:21 PM (in response to allforjava)

                            layout.properties should be put into application classpath in order to use f:loadBundle.

                              • Actions
                            • 11. Re: How To: Richfaces with YUI for layout !
                              nbelaevski
                              nbelaevski Feb 25, 2009 12:22 PM (in response to allforjava)

                              I cannot run the project, can you please post saved HTML page so that I can look at splitter.

                                • Actions
                              • 12. Re: How To: Richfaces with YUI for layout !
                                allforjava
                                allforjava Feb 26, 2009 7:04 AM (in response to allforjava)

                                Sorry, for the delay. Since morning I was just checking only the first page of the post expecting your reply, rather than the 2nd page of this post.

                                I had uploaded only xhtml, css and properties files and not the other. To check the two demo examples [layout.properties and splitter].

                                Better I will reply with the workout using layout.properties where I have defined margin values for body and rich:panel. You may use the testTemplate.xtml in any of your .xhtml files as template.

                                I have placed all these files in my project at /Web Resources/WebContent/layout

                                forum-css.xhtml

                                <f:view contentType="text/css"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">

 <f:loadBundle var="bundle" basename="layout" />

 /*<![CDATA[*/

 .body {
 padding: #{bundle.borderWidth}
 margin: #{bundle.borderWidth}
 }

 .dr-pnl{
 border-width: #{bundle.borderWidth}
 }

 /*]]>*/
</f:view>


                                layout.properties 
                                borderWidth=0px
fontSize=20px


                                testTemplate.xhtml 

                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j">

<head>
 <link href="/forum-css.jsf" rel="stylesheet"/>
</head>

<body>
 <rich:panel layout="block" >
 <ui:insert name="body"/>
 </rich:panel>
</body>

</html>



                                2. Another workout, I'm unable to view the splitter nor any effects using JQuery Splitter and YUI grids. I guess I need some more workaround. Do you have any working example using richfaces (or a4j:outputPanel) and Jquery splitter?

                                3. Your suggestion is working fine using a4j:outputPanel and .css. I'm getting the desired layout. However I need to define seperate .css for each new template/layout. Therefore I wanted to use layout.properties to define size and layout.

                                Note: Also working on, to code templateSelectors for dynamic layouts same as Seam's ThemeSelector Query posted at http://www.coderanch.com/t/433152/JBoss/Path-JBoss-Server-deployment-folder

                                Any confusion, please e-mail: pgaddam@adroitent.com.

                                  • Actions
                                • 13. Re: How To: Richfaces with YUI for layout !
                                  allforjava
                                  allforjava Feb 26, 2009 7:10 AM (in response to allforjava)

                                  I was confused what to use and how? And posted multiple issues (thre ways of workouts) of my workout in this single post.

                                  Sory for the inconveneince caused.

                                    • Actions
                                  • 14. Re: How To: Richfaces with YUI for layout !
                                    nbelaevski
                                    nbelaevski Feb 26, 2009 12:36 PM (in response to allforjava)

                                    2. No, we didn't try jQuery splitter. The most frequent issue is caused by ':' char that is used in JSF as naming containers (forms, data tables, etc.) separator. Are you trying to wire splitter with something that's located inside form or data table?

                                    3. layout.properties should be put to application classpath, f:loadBundle doesn't know how to load web application files. Put it to WEB-INF/classes and try.

                                      • Actions
                                    1 2 Previous Next