Tvorba komponent v JSF

16. 7. 2010 • ⟶ BCVlog → Programming → Tvorba komponent v JSF

Cílem tohoto článku je ukázat, jakým způsobem je možné vytvořit vlastní grafickou komponentu při práci s webovým frameworkem JSF a Facelets.

Používáme-li “čisté” JSF, je vytvoření vlastní komponenty poměrně složitou záležitostí. Framework Facelets nám umožňuje vytvořit snadno a rychle komponenty vlastní. Pravda, takto vytvářené komponenty nemohou být vždy tak komplexní, jako komponenty ostatní (tj. ty, které jsou naprogramovány pomocí Java tříd), na vyřešení spousty požadavků však bohatě stačí.

V tomto příspěvku si ukážeme, jak vyřešit následující úkol:

Cílem tohoto článku je ukázat, jakým způsobem je možné vytvořit vlastní grafickou komponentu při práci s webovým frameworkem JSF a Facelets.

Používáme-li “čisté” JSF, je vytvoření vlastní komponenty poměrně složitou záležitostí. Framework Facelets nám umožňuje vytvořit snadno a rychle komponenty vlastní. Pravda, takto vytvářené komponenty nemohou být vždy tak komplexní, jako komponenty ostatní (tj. ty, které jsou naprogramovány pomocí Java tříd), na vyřešení spousty požadavků však bohatě stačí.

V tomto příspěvku si ukážeme, jak vyřešit následující úkol:

Vytvořte znovupoužitelnou komponentu, která po stisknutí tlačítka zobrazí pop up okno se seznamem uživatelů, přičem po vybrání uživatele se pop up okno zavře, ID vybraného uživatele se uloží do JSF managed beany a ve formuláři v hlavním okně se do input políčka načte příjmení vybraného uživatele.

Možná vás napadne, proč pro tento úkol vytvářet nějakou komponentu. Pokud bychom tuto funkčnost použili v aplikaci jen jednou, nemělo by to samozřejmě žádný smysl. V aplikaci, kterou nyní vyvíjíme, je však výše zmíněná funkčnost potřeba hned na několika místech. Díky vlastní komponentě nebudeme v aplikaci psát několikrát stejný kód a navíc je možné, že vytvořenou komponentu použijeme i jinde.

Jak tedy začít? Nejprve je nutné vytvořit soubor, ve kterém budeme definovat naše nové komponenty – tzn. jejich jméno a cestu k nim. Tento soubor umístěme např. sem:

Následující kód je JSF managed beana, kterou komponenta používá:

public class FindUserComponentBean {
	
	/** Seznam uživatelských jmen nalezených identit. */
	private List users;
	/** Vybraný uživatel z tabulky */
	private String selectedUser;
	public FindUserComponentBean(){
	}	
	public String search(){
		users = Data.find(View.Type.USER, new Criteria());
		return null;
	}
	public String selectUser(){
		return null;
	}
	public List getUsers() {
		if(users == null){
		      search();
		}
		return users;
	}

	public void setUsers(List users) {
		this.users = users;
	}

	public String getSelectedUser() {
		return selectedUser;
	}

	public void setSelectedUser(String selectedUser) {
		this.selectedUser = selectedUser;
	}
}

Nyní se konečně dostáváme v ukázce použití této komponenty:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:a4j="http://richfaces.org/a4j" 
	xmlns:bcv="http://www.bcvsolutions.eu/jsf" 
	xmlns:rich="http://richfaces.org/rich" 
	xmlns:c="http://java.sun.com/jstl/core" 
	template="usertemplate.xhtml">

<h:form>
    <table>
	<tr>
	   <th><h:outputText value="#{messages.name}"/></th>
	   <td><h:inputText value=“#{myBean.name}“</td>
	</tr>
	<tr>
	   <th><h:outputText value="#{messages.boss}"/></th>
	   <td>
               <h:inputText value="#{myBean.boss}" id="boss" disabled="true"/>
                   <h:outputLink value="#" id="linkBoss">
                      <h:outputText value="#{messages.cmn_btn_select}"/>
                      <rich:componentControl for="selectIdentity" attachTo="linkBoss" operation="show" event="onclick"/>
                  </h:outputLink>
          </td>
        </tr>
     </table>

	<bcv:findUserPanel panelId="selectBoss" reRender="boss" 
		selectedIdentity="#{myBean.boss}"
		setupNullLabel="#{messages.no_boss}"/>
	. . . 
	</h:form>
</ui:composition>

Všiměme si definice namespacu bcv:, pomocí něho se odkazujeme na naše komponenty. Celou komponentu by bylo možné (vhodné) upravit např. tak, aby i vytvořila input políčko a definici modal panelu vložila za něj. Dále by bylo možné doplnit do pop up okna tlačítko hledat a input boxy pro zadávání vyhledávacích kritérií.

A jaké jsou vaše zkušenosti s tvorbou vlastních komponent ve webových aplikacích?

Sdílej:

Like this:

Další témata