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.