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

Post a Comment

Popular posts from this blog

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

quick note on scala.js, react hooks, monix, auth Reactjs hooks finally came out of preview in a recent version of React. scalajs-reaction has had support for hooks since they were in preview. React hooks seem like the hot new thing but for me the question is, do hooks help improve your code by improving maintainability, time to market, TCO, etc.? Let’s take a look using authentication as an example and employ monix , a reactive observable framework that also builds on cats . We will assume we are building a SPA. Does it improve your code and make your application & development experience better? Auth Auth processing can be complex. Many react auth examples you find in blogs like to show how to use “react-routing” and “auth” as a switch that determines which routes are protected or unprotected. Protected routes show application specific data. Unprotected routes show login content . Based on storing a “User” object in the browser session/local storage, th...
Read more

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

zio environment and modules pattern: zio, scala.js, react, query management This blog covers a zio-based fetch design for scala.js, react web applications. It heavily uses the zio “environment” feature to help motivate a point of view on the modules pattern in effect systems. At the end, I summarize some thoughts on ergonomics and complexity. This blog assumes a basic knowledge of zio and react. scala.js is just like scala so you mostly already know scala.js. This blog is a follow-on to previous blogs: https://appddeevvmeanderings.blogspot.com/2019/10/scalajs-react-fetcher-hook_48.html and https://appddeevvmeanderings.blogspot.com/2019/11/scalajs-and-react-suspense.html . I have been keeping an eye on and culling ideas from typscript/javascript fetching libraries that address query management concerns. The formulation below incorporates some of those concerns but does not try to comprehensively duplicate well established javascript libraries. I only care about ...
Read more

attributes with react and typescript.md

If you use typescript with react you may wonder what the right signature is for your “properties” interface. Obviously, your component will have few to many specific properties that reflect your domain. However, you may wish to also provide for the ability to add other attributes, such as those valid for a div property. In other words, you want to extend your props interface with that of the properties from a div element. How do you do that? There are really two issues: How do you extend your props interfaces How do you filter the props once you receive them to just those that apply. Extend Your Prop Interface or Use Sum Types It’s not uncommon to see interface Props { className ? : string yourProp ? : number } with the idea of using it in class MyComponent extends React.Component<Props, any> somewhere. If your component will have an outer div, you may also pass in a react element so that its configurable. But let’s say your outer element is a div and you wan...
Read more