Uploaded image for project: 'RichFaces Sandbox'
  1. RichFaces Sandbox
  2. RFSBOX-3

Use xxxStyleClass for component sublevel CSS class



      When a component has several levels (like a button inside a div), the "styleClass" JSF main attribute should apply to the top level element (here, the div). In order to allow users to specify sublevel CSS classes, use xxxStyleClass (like "buttonStyleClass").

      See Bootstrap button for real example : https://github.com/richfaces/sandbox/blob/develop/bootstrap/ui/src/main/templates/org/richfaces/bootstrap/buttonGroup.template.xml

      Read a short discussion to know why this is the recommended syntax :

      [15:59] <paul_dijou> Why using a "buttonStyle" attribute since it's only a CSS class ?
      [16:01] <paul_dijou> I mean, either way you use "styleClass="btn-primary"" or, eventually, you can have "buttonStyle="primary"", but having "buttonStyle="btn-primary"" seems strange to me
      [16:02] <@bleathem> I started with styleClass - but it's not a top level CSS class, it goes one level lower than the top level div
      [16:02] <@bleathem> other than that, I was just keeping with the bootstrap syntax for now
      [16:03] <@bleathem> we could drop the "btn-" - but then we'd need to re-document the attribute values
      [16:03] <@bleathem> there would be the "bootstrap way", and the "RichFaces way"
      [16:04] <@bleathem> but I do agree, seeing it standalone it does look odd
      [16:04] <paul_dijou> Hmmmm
      [16:05] <paul_dijou> That's problematic
      [16:05] <paul_dijou> Because there are other CSS classes
      [16:05] <paul_dijou> Like btn-small/large/... for the size
      [16:05] <paul_dijou> Or disabled
      [16:05] <paul_dijou> Does that mean you will need an attribute for each one ?
      [16:06] <@bleathem> no, we'd load 'em all in to the buttonStyle attribute
      [16:06] <paul_dijou> Rigth
      [16:06] <paul_dijou> Maybe buttonStyleClass so...
      [16:06] <@bleathem> that might make more sense for JSF users
      [16:06] <paul_dijou> Or buttonStyleClasses
      [16:07] <@bleathem> styleClass is the standard JSF term
      [16:07] <paul_dijou> For top level classes
      [16:07] <@bleathem> so buttonStyleClass would be good
      [16:07] <paul_dijou> In h: panelGrid
      [16:07] <paul_dijou> There is rowClasses and columnClasses
      [16:07] <@bleathem> ah, yes that's right
      [16:07] <paul_dijou> For CSS class in sub tr and td
      [16:07] <@bleathem> buttonClasses then?
      [16:09] <paul_dijou> I'm fine with both buttonStyleClass and buttonClasses
      [16:09] <paul_dijou> Because rowClasses are a bit special since you can have "," separator
      [16:09] <paul_dijou> Which is not the case in styleClass attribute
      [16:10] <paul_dijou> And not the case in our Bootstrap button too
      [16:10] <@bleathem> does styleClass not support , separators?
      [16:10] <paul_dijou> Does it ?
      [16:10] <@bleathem> we could easily transform the separator before we output it
      [16:11] <paul_dijou> Well, in rowClasses, it's not just a basic separator
      [16:11] <@bleathem> let me check - it might just be a passthrough attribute
      [16:11] <paul_dijou> If you have rowClasses="class1,class2"
      [16:11] <paul_dijou> class1 will be applied to even row and class2 to your odd row
      [16:11] <paul_dijou> (hopping my translation is correct...)
      [16:12] <@bleathem> ah yes - that's right
      [16:12] <@bleathem> your translation is spot on
      [16:12] <paul_dijou> So, I think buttonStyleClass would be the best choice
      [16:12] <@bleathem> I like buttonClasses myself - less verbose
      [16:13] <@bleathem> the only reason for style in styleClass is because Class on it's own is ambiguous

        Gliffy Diagrams




              • Assignee:
                bleathem Brian Leathem
                paul.dijou Paul Dijou
              • Votes:
                0 Vote for this issue
                0 Start watching this issue


                • Created: