In Relation To

Back to home

RichFaces 4 Overview. Part III – Panels components.

Posted by    |      

The series continues and in this entry I will give you an overview of the various panel components which are already ported to RichFaces 4 codebase (M1 release).

Simple Panel component

Actually there is almost nothing to describe as this probably the simplest and most well known layout component in the whole library :).

The following tags... 

<rich:panel header="Panel with default Look-n-feel">
    //Content inside 
</rich:panel>

...will be rendered as a skinnable rectangular panel with header on top:

So, let's not to spend much time on that component and go to the more complex ones.

Switchable Panels

This section should be much more interesting and we'll describe the changes in design of the switchable panels.

The first components which was migrated to the 4.0 codebase – Toggle components set. The reason is simple – it's a base one for all the other (TabPanel and Accordion are on our way for M2). The Toggle components set consist of:

  • togglePanel – parent component which contains from set of child panels and provides mechanism of switching between them.
  • togglePanelItem – child panel component which defines single state representation. In 4.x it's implemented as a child component instead of facet in order to distribute attributes and some component functionality more properly.
  • toggleControl – the behavior which performs switching of the panel. The main goal of implementation as a behavior – to provide the way to use any controls for states switching (and maybe to show once more that we are using hottest JSF 2 features :)). That's differs from 3.3.x where it was a component and rendered as HTML link element.

Simple sample of Toggle components usage: 

<style>
	.rf-tp-i {
		border: 1px solid #{richSkin.panelBorderColor}
	}
</style>
<h:form>
	<h:commandLink value="Toggle Panel Item 1">
		<rich:toggleControl forPanel="panel1" targetItem="item1" />
	</h:commandLink>
	<h:outputText value=" | " />
	<h:commandLink value="Toggle Panel Item 2">
		<rich:toggleControl forPanel="panel1" targetItem="item2" />
	</h:commandLink>
	<rich:togglePanel id="panel1" activeItem="item1">
		<rich:togglePanelItem name="item1" styleClass="rf-tp-i">
			<p>This toggle panel switches in Ajax mode. 
So only one active
				item loaded to the client.</p>
			<p>For now you are at Panel 1</p>
		</rich:togglePanelItem>
		<rich:togglePanelItem name="item2" styleClass="rf-tp-i">
<p>After the second link click - panel changed active item to the second one according to name specified in the
				togglePanelBehavior</p>
			<p>For now you are at Panel 2</p>
		</rich:togglePanelItem>
	</rich:togglePanel>
</h:form>

And on opening page you will see:

Note: It's also possible to switch between states sequentially without states definition at behavior. In that case the order of the child items will be considered. Could be useful for example for wizard panels creation.

The main ideas of the component has not changed much from 3.3.x – the component provides no predefined layout, and provides only switching between abstract states functionality using different modes. So any kind of switchable panel could be implemented using this component. E.g. example above created simplest tabs. And we could move switching controls to other place and align them as we need easily.

The main change to be considered if you have already used any of the components in 3.3.3 – all the functionality by switching of the states moved to the parent panels components. The controls like toggleControl and future tab or accordionItem control just calls the state change panel methods. Using that way we resolved the following problems:

  • All the attributes of the request in non-client mode – configured once at panel level.
  • Switching event managed at panel level using ItemChangeListener instead of having bunch of actions and listeners definitions at every control.
  • Client API available at panel level. So no more need in JavaScript clicks on controls in order to perform switch.

Learn more about the components at requirements wiki page

Popup Panel

First I need to mention before describing this component - we considered tons of requests on non-modal panel and finally single rich:popupPanel component is there. It has two modes modal and non-modal and renders popup with any content inside.

The usage is simple for those who already played with it in 3.3.x as it's almost not changed: 

<h:commandButton value="Call the popup">
	<rich:componentControl target="popup" operation="show" />
</h:commandButton>

<rich:popupPanel id="popup" modal="true"
	resizeable="true" onmaskclick="#{rich:component('popup')}.hide()">
	<f:facet name="header">
		<h:outputText value="Simple popup panel" />
	</f:facet>
	<f:facet name="controls">
		<h:outputLink value="#"
			onclick="#{rich:component('popup')}.hide(); return false;">
				X
		</h:outputLink>
	</f:facet>
	<p>Additionally there you could check how to handle the clicks
	outside the panel.</p>
	<p>In this sample the click outside - closes the panel as well as
	clicking hide control in the header</p>
</rich:popupPanel>

And in the result we will get next popup representation:

In order to use the panel in non modal state you should just use new modal boolean attribute with false value.

It could appear that the component was not changed much from usage point of view – but much work was done in order to optimize markup to make it more lightweight. So we are awaiting for the feedback on that!

Learn more about the popup component at requirements wiki page

What's next:

I guess that the Data Iteration Components overview and articles related to usage of those components will be probably most popular from all those reviews. So what the reason that them still not posted if components were available in A2? It's simple – we already had some good feedback on them and now just making some redesign and changes according to that feedback to make components easier to use and more intelligent. So when the picture on the changes and affect of those changes to usage will become clean – it will be there immediately!

And as I announced in my previous post I'm still reading JSF 2.0 Cookbook from Packt Publishing and also working on the review article continuously.

Any feedback always welcome at our RichFaces Design Space. And we will do our best to help you with any usage problems at RichFaces User Space

Back to top