J4Fry JSF Panels
Characteristics
| Attribute | Value |
|---|---|
| Project name | J4Fry JSF Panel [Subproject of J4Fry JSFComponents] |
| Prerequisites | JDK >= 1.4, MyFaces, JSON, EzMorph |
| CVS module | JSFComponents |
| Responsible developer | Alexander Bell |
Why should u use the J4Fry panel tag?
The J4Fry panel tag provides an easy way to seperate your business content.
You can customize the panel with your own css styles. There is also a possibility to
collapse the panel as well. There is a live demo at the Example Application.
If u've got some problems with the tag please contact the J4Fry member
Alexander Bell.
Usage
Refer to the general JSF Components installation for installation instructions.
There is a number of attributes for the J4Fry panel tag which are listed in the
J4Fry Taglib description.
The panel is separated in five different facets:
| Facet name | Description |
|---|---|
| title | The title of the panel (right hand side of the header) |
| toggleOpen | The area that you can push to open the panel e.g. plus-image (left hand side of the header) |
| toggleClose | The area that you can push to close the panel e.g. minus-image (left hand side of the header) |
| bodyBottom | In this area, you could place your business-content. This facet is positioned below the title. |
| bodyTop | In this area, you could place your business-content. This facet is positioned above the title |
According to the JSF specification you can place only one component inside a facet. So if you've got more than one component you have to nest them into a <h:panelGroup/> tag, for instance.
Here are some examples to illustrate the principle of the tag.
For a very simple use, just drop your business content in the panel and give it a title.
All the other settings get default values.
<fry:panel styleClass="j4fryPanel" title="My J4Fry Panel
headerClass="j4fryPanelHead"
bodyClass="j4fryPanelBody">
... some other JSF Components ...
</fry:panel>
You can customize the panel as well. For instance you create your own toggle-facets. The business-content can be placed in the "bodyBottom" facet.
<fry:panel styleClass="j4fryPanel"
headerClass="j4fryPanelHead"
bodyClass="j4fryPanelBody">
<f:facet name="title">
<h:outputText value="My first J4Fry Panel" />
</f:facet>
<f:facet name="toggleOpen">
<h:outputText value="[OPEN]" />
</f:facet>
<f:facet name="toggleClose">
<h:outputText value="[CLOSE]" />
</f:facet>
<f:facet name="bodyBottom">
<h:panelGroup>
<h:outputText value="Some Business Content..." />
<h:inputText value="#{myBean.text}" id="text1" />
</h:panelGroup>
</f:facet>
</fry:panel>
It's possible to use "bodyBottom" and "bodyTop" together.
You don't have to specify the facets "toggleOpen" and/or "toggleClose" cauz there are
two default images for these facets.
There is a "title" attribute as well. So you don't have to write a facet if it's only contains text.
The following examples shows the possibilities:
<fry:panel styleClass="j4fryPanel" title="My second J4Fry Panel"
headerClass="j4fryPanelHead"
bodyClass="j4fryPanelBody">
<f:facet name="bodyTop">
<h:panelGroup>
<h:outputText value="Some Business Content above the header" />
<h:inputText value="#{myBean.text1}" />
</h:panelGroup>
</f:facet>
<f:facet name="bodyBottom">
<h:panelGroup>
<h:outputText value="Some Business Content below the header" />
<h:inputText value="#{myBean.text2}" />
</h:panelGroup>
</f:facet>
</fry:panel>
There are some other interesting attributes which you can use with the J4Fry panel tag.
One of them is the attribute "movable". If you change the value of "movable" to TRUE
you can move the panel all over the page.
Please consider: If the "movable" attribute is TRUE the panel is gonna take out
of the usual pageflow.
If the "state" attribute is an expression, the toggle state will be saved in the specified bean property.
<fry:panel title="My movable J4Fry panel width footer" styleClass="j4fryPanel"
headerClass="j4fryPanelHead"
bodyClass="j4fryPanelBody"
footerClass="j4fryPanelFoot"
state="#{myBean.stateForMyPanel}"
movable="true">
...
some other jsf components
...
</fry:panel>
Styles for the panel
You can use CSS-Styles to change the appearance of your panel.
We've prepared some styles that you could use with the j4fry-panel tag.
The default style has got a white color.
If you want to use any of these styles you have to include the css-styles in your css file and
use the following attributes in your j4fry-panel tag:
- styleClass="j4fryPanel"
- headerClass="j4fryPanelHead"
- bodyClass="j4fryPanelBody"
- toggleClass="j4fryPanelToggle"
Grey style
div.j4fryPanel {
border: 1px solid #000000;
font-family:Verdana;
color:white;
width:100%;
}
div.j4fryPanelHead {
padding:0.4em 0.6em 0.4em 0.6em;
font-size:10px;
font-weight:bold;
background-color:#494949;
width:100%;
}
div.j4fryPanelToggle {
margin-right:3px;
cursor:hand;
}
div.j4fryPanelBody {
border-top:1px solid #000000;
font-size:10px;
background-color:#B1B1B1;
color:black;
width:100%;
}
Blue style
div.j4fryPanel {
border: 1px solid #226ABC;
font-family:Verdana;
color:black;
width:100%;
}
div.j4fryPanelHead {
padding:0.4em 0.6em 0.4em 0.6em;
font-size:10px;
font-weight:bold;
background-color:#96B0DC;
width:100%;
}
div.j4fryPanelToggle {
margin-right:3px;
cursor:hand;
}
div.j4fryPanelBody {
border-top:1px solid #226ABC;
font-size:10px;
background-color:#DDE7F8;
width:100%;
}
Green style
div.j4fryPanel {
border: 1px solid #2ABC22;
font-family:Verdana;
color:black;
width:100%;
}
div.j4fryPanelHead {
padding:0.4em 0.6em 0.4em 0.6em;
font-size:10px;
font-weight:bold;
background-color:#96DC98;
width:100%;
}
div.j4fryPanelToggle {
margin-right:3px;
cursor:hand;
}
div.j4fryPanelBody {
border-top:1px solid #2ABC22;
font-size:10px;
background-color:#DDF8DE;
width:100%;
}
Red style
div.j4fryPanel {
border: 1px solid #BC2222;
font-family:Verdana;
color:black;
width:100%;
}
div.j4fryPanelHead {
padding:0.4em 0.6em 0.4em 0.6em;
font-size:10px;
font-weight:bold;
background-color:#DC9697;
width:100%;
}
div.j4fryPanelToggle {
margin-right:3px;
cursor:hand;
}
div.j4fryPanelBody {
border-top:1px solid #BC2222;
font-size:10px;
background-color:#F8DEDD;
width:100%;
}
Orange style
div.j4fryPanel {
border: 1px solid #FF9428;
font-family:Verdana;
color:black;
width:100%;
}
div.j4fryPanelHead {
padding:0.4em 0.6em 0.4em 0.6em;
font-size:10px;
font-weight:bold;
background-color:#FFCA95;
width:100%;
}
div.j4fryPanelToggle {
margin-right:3px;
cursor:hand;
}
div.j4fryPanelBody {
border-top:1px solid #FF9428;
font-size:10px;
background-color:#FFDFBF;
width:100%;
}
Yellow style
div.j4fryPanel {
border: 1px solid #FFD900;
font-family:Verdana;
color:black;
width:100%;
}
div.j4fryPanelHead {
padding:0.4em 0.6em 0.4em 0.6em;
font-size:10px;
font-weight:bold;
background-color:#FFFFB3;
width:100%;
}
div.j4fryPanelToggle {
margin-right:3px;
cursor:hand;
}
div.j4fryPanelBody {
border-top:1px solid #FFD900;
font-size:10px;
background-color:#FFFFCA;
width:100%;
}