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.