jsf2 – splitter composite component

I was playing with the composite component capability of jsf2. It essentially allows you to build up “templates” of reusable layouts and content.

One component that I did  not find in the jsf component library I am using (richfaces) is a splitter. I know its in the openfaces component library, but I was wondering how easy it would be to create something quickly.

So, without regard for colors and layout requirements, I put together:

   1: <?xml version="1.0" encoding="UTF-8"?>
   2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4: <ui:component xmlns="http://www.w3.org/1999/xhtml"
   5:     xmlns:h="http://java.sun.com/jsf/html"
   6:     xmlns:f="http://java.sun.com/jsf/core"
   7:     xmlns:ui="http://java.sun.com/jsf/facelets"
   8:     xmlns:a4j="http://richfaces.org/a4j"
   9:     xmlns:rich="http://richfaces.org/rich"
  10:     xmlns:composite="http://java.sun.com/jsf/composite">
  11:  
  12:     <composite:interface>
  13:         <composite:attribute name="type" required="false" default="v" />
  14:     </composite:interface>
  15:  
  16:     <composite:implementation>
  17:         <h:outputScript library="components" name="splitter.js" target="head" />
  18:         <h:outputStylesheet>
  19: #splitContent {
  20:     width: 500px;
  21:     height: 300px;
  22:     border: 1px solid Yellow;
  23: }
  24:  
  25: #splitContent div { 
  26:     overflow: auto;
  27: }
  28:  
  29: .vsplitbar {
  30:     width: 3px;
  31:     background: Red;
  32: }
  33:  
  34: .hsplitbar {
  35:     height: 3px;
  36:     background: Red;
  37: }
  38: </h:outputStylesheet>
  39:         <div id="splitContent">
  40:             <composite:insertChildren />
  41:         </div>
  42:  
  43:         <rich:jQuery selector="#splitContent" timing="domready"
  44:             query="splitter({type:'h'})" />
  45:  
  46:     </composite:implementation>
  47:  
  48: </ui:component>



Clearly I am using jquery along with splitter from here. I use richfaces (4.X) way of calling its builtin jquery method. I hardwire the styles into the component for convenience sake and the wild colors are there to allow me to see what is going on. The nice thing is that it just works of course. Now I have what is essentially a master-detail starting point to iterate on. Since I named the file resources/components/splitter.xhtml and threw in resources/componenst/splitter.js, an automatic tag library is created for me so I can use xmlns:components=”http://java.sun.com/jsf/composite/components” to pull in my components namespace into the “using” page. Whoops…I am even ignoring my own composite component interface argument.


My using page just needs to be something like:



   1: <ui:composition 
   2: ..
   3: xmlns:components="http://java.sun.com/jsf/composite/components"
   4: template="layout/mylayout.xhtml">
   5:  
   6: ...
   7:   <components:splitter id="myContentToSplit">
   8:     <div id="master">
   9:         ....
  10:     </div>
  11:     <div id="detail">
  12:         ....
  13:     </div>
  14:   </components:splitter>
  15: ..
  16:  
  17: <ui:composition>

And it all works.  That’s nice. I’ll clean up the composite component (CC) interface some and repost if I remember to do so.

Comments

Popular posts from this blog

quick note on scala.js, react hooks, monix, auth

zio environment and modules pattern: zio, scala.js, react, query management

user experience, scala.js, cats-effect, IO