8 Replies Latest reply: Apr 13, 2012 6:04 PM by Adrien Adrien RSS

    RF 4: sandbox page layout component(s) feedback

    Karsten Wutzke Expert

      Hello all,

       

      Bernard Labno and I have been discussing the RF 4 sandbox page layout component/s for some time now (Bernard has started the implementation). A few points were coming up which we'd like to discuss here.

       

      The RF 4 page layout is mostly a copy-and-paste of the RF 3 implementation, with a few additions so far. Here's what it renders right now (SANDBOX):

      <body id="j_idt4">
        <div class="rf-pg " id="j_idt4">
          <div class="rf-pg-hdr " id="j_idt4:hd">
            <div class="rf-pg-hdr-cnt" id="j_idt4:hdc"><span class="project-title">What Ever</span>
            </div>
          </div>
          <div class="rf-pg-cnt " id="j_idt4:cnt">
            <div class="rf-pg-m">
              <div class="rf-pg-bd ">
                <div style="">
                  <div>
                    ...

       

      Some issues with the old and now new codebase have piled up:

       

      1. The rich:page component generates two redundant, inline CSS styles (style tag) under the html element (not shown):

      .rf-pg{margin:auto 10px;width:auto;}
      .rf-pg-bd{float:none;width:auto;}

       

      The default for CSS width already is auto, see http://www.w3schools.com/cssref/pr_dim_width.asp, so this would be equivalent to

      .rf-pg{margin:auto 10px;}
      .rf-pg-bd{float:none;}

       

      I'm not sure what the above CSS is supposed to do.

       

      If the first was supposed to center the content, the order should have been margin: 10px auto; as the above automatically creates an (ugly) 10px margin to the left and right between the body tag and the rf-pg div. Yuck. Not good when you put some "incompatible" CSS onto the body tag, e.g. a border or drop shadow. The second selector is for the nested, innermost content div, not sure why there's a float: left here. Opinions?

       

      My one: I think we should remove this inline CSS entirely. I cannot

       

      2. Why are there three nested divs rf-pg-cnt, rf-pg-m, and rf-pg-bd? I think they are unnecessary. See below for a new proposal.

       

      3. There's a top border on rf-pg-m. Purpose? It should be deleted IMO, if not the div entirely.

       

      4. The rich:page component generates the HTML body tag as well as a nested div tag with the CSS class rf-pg. Bernard has implemented styleClass and style attributes for the new rich:page component. We generally have to define whether the styleClass and style attributes are meant for the body tag or the rf-pg div. I think they should generally go to the topmost div rf-pg. There should however be the possibility to add custom classes to the body tag as well, e.g. "shadow". This can only be accomplished via a second pair of attributes called bodyStyleClass and bodyStyle. Please discuss.

       

      Here's my take on a final proposal of the page layout component(s):

      <body class="rf-pg-bdy">
        <div class="rf-pg">
          <div class="rf-pg-hdr"> <!-- f:facet name="header" -->
            <div class="rf-pg-hdr-cnt">Project Title</div>
          </div>
          <div class="rf-pg-mnb" style="?"> <!-- f:facet name="menubar" -->
          </div>
          <div class="rf-pg-lyt"> <!-- rich:layout example 3-column layout -->
            <div class="rf-pg-t" style="?"> <!-- layout:layoutPanel position="top" -->
            </div>
            <div class="rf-pg-l" style="generated float: left; ..."> <!-- layout:layoutPanel position="left" -->
            </div>
            <div class="rf-pg-c" style="no float at all?"> <!-- layout:layoutPanel position="center" -->
            </div>
            <div class="rf-pg-r" style="generated float: right; ..."> <!-- layout:layoutPanel position="right" -->
            </div>
            <div class="rf-pg-b" style="?"> <!-- layout:layoutPanel position="bottom" -->
            </div>
          </div>
          <div class="rf-pg-ftr"> <!-- f:facet name="footer" -->
            <div class="rf-pg-ftr-cnt">Contact etc.</div>
          </div>
        </div>
      </body>

       

      Discussion material is below.

       

      5. Outer body RF class:

      I know that rf-pg-bdy on the outer body tag is kind of inconsistent with the RF 4 naming that should be used. But rf-pg-bdy would best hint that this class is for the page body. In any case, if it doesn't work out, returning to the "old way" can be achieved by deleting the rf-pg-bdy class.

       

      6. Menu bar:

      As an enhancement I'd like to see some kind of menu bar, here rf-pg-mnb between the page header and the layout div. Many apps can use this as their place for a menu, some tabs, or simply some navigational breadcrumb space without having to use the top layoutPanel. Please discuss a name for such a facet: menubar (my vote), menu, menuBar, topbar, bar, ...

       

      7. Layout container:

      Maybe there should be a div around the left, center, and right divs, but I really don't see that. Maybe that was rf-pg-m (rich-page-main) someday? It's not necessary to me (discuss).

       

      8. Floats:

      The left component generates float: left, the right generates float: right. I tried a one-column layout panel with center, but it seems to generate a float: left. If I want to center that content, I haven't figured out how to do that. I think it can't be done with the generated inline float: left. IMO the center component shouldn't generate a float at all.

       

      9. Naming:

      Maybe the layout divs should be rf-pg-lyt-t, rf-pg-lyt-l, rf-pg-lyt-c, rf-pg-lyt-r, rf-pg-lyt-b? +1 for that!

       

      Please discuss. I'm sure I didn't think about every aspect here (although I might be close ).

       

      Karsten