V tomto článku se podíváme na možnosti několika komponent knihovny RichFaces, která je postavena nad Java Server Faces (JSF). Článek není míněn jako tutorial, ale spíše jako seznámení s JSF a RichFaces, které dnes patří k tomu nejlepšímu, co je mezi webovými frameworky k dispozici.

Pokud si chcete RichFaces vyzkoušet, doporučuji nainstalovat NetBeans a tento plugin: http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=8934. Při vytváření projektu pak stačí zvolit frameworky JSF a RichFaces. Více na http://blogs.sun.com/geertjan/entry/richfaces_for_netbeans_ide_6.

Kalendář

Použití komponenty calendar je jednoduché:

<h2>Víte, kdy bude další CZJUG?</h2>
<rich:calendar popup="true" locale="#{calendarBean.locale}" datePattern="d.M.yyyy" value="#{calendarBean.selectedDate}"/>

Zobrazí se nám vstupní pole a tlačítko. Po stisku tlačítka se objeví kalendář:

Calendar

Kontextové menu

Ukážeme si kontextové menu, které se zobrazí po stisku pravého tlačitka:

<h:graphicImage value="images/logo240.gif" id="logo"/>
<rich:contextMenu event="oncontextmenu" attachTo="logo" submitMode="none">
<rich:menuItem value="First item" onclick="alert('First item selected');"/>
<rich:menuItem value="Second item" onclick="alert('Second item selected');"/>
</rich:contextMenu>
ContextMenu

Google Maps

Chcete mít na stránce mapu? S komponentou gmap je to snadné:

<h2>Místo konání CZJUGů</h2>
<rich:gmap lat="50.076528" lng="14.418123"/>
GMap

Obrázky

Chcete generovat obrázky za běhu? RichFaces k tomu nabízí komponentu mediaOutput:

<a4j:mediaOutput element="img" cacheable="false" session="true" createContent="#{mediaBean.paint}" mimeType="image/png"/>

Samotné vytváření obrázků pak probíhá v JSF managed beaně:

public class MediaBean {
public void paint(OutputStream out, Object data) throws IOException {
int width = 300, height = 200;
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D graphics2D = img.createGraphics();
graphics2D.setBackground(Color.LIGHT_GRAY);
graphics2D.setColor(Color.DARK_GRAY);
graphics2D.clearRect(0, 0, width, height);
graphics2D.drawString("Vývoj HDP", 20, 20);
int[] xPoints = { 10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250, 270, 290 };
int[] yPoints = { 180, 170, 165, 160, 177, 155, 150, 130, 120, 105, 95, 90, 70, 55, 60 };
graphics2D.drawPolyline(xPoints, yPoints, xPoints.length);
ImageIO.write(img, "png", out);
}
}

Ajax

Potřebujete na pozadí natahovat data ze serveru? S komponentou poll žádný problém! Následující kód každou sekundu natáhne a zobrazí novou hodnotu property number beany pollBean.

<h:form>
<a4j:poll id="poll" interval="1000" enabled="#{pollBean.pollEnabled}" reRender="number"/>
</h:form>
<h:panelGrid id="number" columns="1">
<h:outputText value="Number: #{pollBean.number}"/>
</h:panelGrid>

Tree

Potřebujete zobrazit na stránce stromovou strukturu? Komponenta tree je tu pro vás:

<rich:panel header="Czech Java Community" style="width:300px">
<rich:tree switchType="client" value="#{library.data}" var="item">
<rich:treeNode icon="images/album.PNG">
<h:outputText value="#{item}"/>
</rich:treeNode>
</rich:tree>
</rich:panel>

"Obsah stromu" definujeme v JSF managed beaně:

public class Library {
private TreeNode data = new TreeNodeImpl<String>();
public Library() {
TreeNode jugs = new TreeNodeImpl<String>();
jugs.setData("CZJUGs");
TreeNode jug1 = new TreeNodeImpl<String>();
jug1.setData("Real-time Java na zemi a ve vesmíru");
jugs.addChild("11", jug1);
//...
data.addChild("JUGs", jugs);
//...
}
public TreeNode getData() {
return data;
}
public void setData(TreeNode data) {
this.data = data;
}
}

Tree

Nabízí váš webový framework něco podobného? A pokud ano, je to také tak snadné jako v RichFaces? Příklady v tomto článku jsou záměrně jednoduché. Pokud se chcete seznámit s RichFaces více, doporučuji tutorial na http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/index.html.