Tento článek navazuje na článek
"Dokáže tohle váš webový framework?".
Tentokrát se podíváme na komponenty fileUpload, hotKey, inputNumberSpinner, insert,
progressBar a tabPanel.

FileUpload

Pro upload souborů na server je komponenta fileUpload:

<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" immediateUpload="false" maxFilesQuantity="3"

acceptedTypes="jpg,gif,png"/>

Zobrazí se tlačítko, jehož stisk vyvolá standardni
"Open File" dialog. Po výběru souboru máme
možnost provést upload:


FileUpload


Zpracování souboru probíhá v JSF managed beaně:

public class FileUploadBean {

    public void listener(UploadEvent e) {

        UploadItem item = e.getUploadItem();

        //...

    }

}

Hot keys

Pomocí tagu hotKey lze reagovat na
stisk klávesy:

<script type="text/javascript">

    function enlarge(id) {

        var img = document.getElementById(id);

        img.width *= 1.05;

        img.height *= 1.05;

    }

    function shrink(id) {

        var img = document.getElementById(id);

        img.width *= 0.95;

        img.height *= 0.95;

    }

</script>

<h:graphicImage id="logo" value="images/logo240.gif"/>

<rich:hotKey key="ctrl+up" handler="enlarge('#{rich:clientId('logo')}');return false;"/>

<rich:hotKey key="ctrl+down" handler="shrink('#{rich:clientId('logo')}');return false;"/>

Spinner

Schází vám ve webových aplikacích ovládací prvky,
na které jste zvyklí? S RichFaces možná nebudou.
Např. spinner se vytvoří takto:

<rich:inputNumberSpinner value="#{car.speed}" minValue="20" maxValue="100" step="1"/>

Zobrazení zdrojáků

Potřebujete zobrazit na stránce zdrojový kód? S
komponentou insert je to snadné. A
pokud přidáte k projektu knihovnu jhighlight, můžete mít i syntax
highlighting:

<rich:insert src="Program1.java" highlight="java"/>



Insert

Progress Bar

Provádíte operaci, která může trvat delší dobu a
chcete dát uživateli vědět, jak dlouho bude ještě
čekat? Následující kód zobrazí progressBar a každé 2 sekundy jej
aktualizuje podle hodnoty property currentValue beany progressBarBean.

<h:form>

    <a4j:outputPanel>

        <rich:progressBar value="#{progressBarBean.currentValue}" interval="2000" label="#{progressBarBean.currentValue} %"

         minValue="0" maxValue="100"/>

    </a4j:outputPanel>

</h:form>



ProgressBar

Tab Panel

Stýská se vám po panelu se záložkami? RichFaces jej
má:

<rich:tabPanel switchType="client">

    <rich:tab label="Java">

        Java is the best!

    </rich:tab>

    <rich:tab label="C#">

        ...

    </rich:tab>

    <rich:tab label="C++">

        ...

    </rich:tab>

</rich:tabPanel>



TabPanel

Zaujaly vás komponenty RichFaces? Na http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/index.html se s nimi můžete seznámit více.