Często używacie jakichś standardowych fragmentów stron?
Może zamiast pisać je za każdym razem skorzystajmy z biblioteki znaczników?
Zdarzyło się tak, że na kilku stronach musiałem umieścić taki mały dynksik.
Oczywiście nic skomplikowanego, ale jak się kilka razy coś takiego wstawi i potem trzeba zmienić wszędzie wygląd klawisza, zaczyna boleć.
Kod generujący to cudo wygląda mniej więcej tak:
[codesyntax lang=”html4strict” lines=”normal” lines_start=”1″ title=”Kod źródłowy” bookmarkname=”Kod źródłowy”]
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>Test obrazków</title>
</h:head>
<h:body>
<h:form>
<p:panel id="pnl" >
<c:forEach var="l" items="#{testQueryBean.lista}" varStatus="rowCounter">
<h:panelGroup style="position:absolute;left:#{l.x*5+100}px;top:#{l.y*5}px;" >
<h:panelGrid columns="2" rules="none" frame="none" border="1" style="width:150px">
<h:outputText value="#{l.slowo}" style="width:100px" />
<h:panelGrid columns="1" rules="none" frame="none" style="float:right" >
<p:commandButton id="#{l.id}u" image="arrowUP" style="margin-right:20px;"
actionListener="#{testQueryBean.do_gory}" update="pnl" />
<p:commandButton id="#{l.id}d" image="arrowDOWN" style="margin-right:20px;"
actionListener="#{testQueryBean.w_dol}" update="pnl" />
</h:panelGrid>
</h:panelGrid>
</h:panelGroup>
</c:forEach>
</p:panel>
</h:form>
</h:body>
</html>
[/codesyntax]
Aż się prosi, żeby fragment objęty znacznikami <h:panelGroup> </h:panelGroup>, czyli od linii 15 do 25 gdzieś wynieść na zewnątrz i nie powtarzać w każdym miejscu. NetBeans umożliwia zrobienie tego jednym kliknięciem. No może dwoma…
Podświetlamy kawałek kodu, który ma być wyniesiony jako znacznik, klikamy prawym klawiszem myszki, wybieramy Refactor/Convert to Composite Component i wyskakuje okienko:
Teraz zapisujemy nowy znacznik i ukazuje się skrócona wersja naszej strony:
[codesyntax lang=”html4strict” lines=”normal” lines_start=”1″ title=”Wersja skrócona” bookmarkname=”Wersja skrócona”]
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">
<h:head>
<title>Test obrazków</title>
</h:head>
<h:body>
<h:form>
<p:panel id="pnl" >
<c:forEach var="l" items="#{testQueryBean.lista}" varStatus="rowCounter">
<ez:rameczka/>
</c:forEach>
</p:panel>
</h:form>
</h:body>
</html>
[/codesyntax]
Prawda, że ładniejsze?
Teraz wypadałoby dopisać przekazywanie parametrów do nowego komponentu.
W komponencie jest sekcja:
<cc:interface>
</cc:interface>
Wstawiamy do niej
[codesyntax lang=”html4strict”]
<cc:interface> <cc:attribute name="x" displayName="Współrzędna X" type="int" /> <cc:attribute name="y" displayName="Współrzędna Y" type="int" /> <cc:attribute name="slowo" displayName="Słowo" /> <cc:attribute name="ID" displayName="ID" /> </cc:interface>
[/codesyntax]
A w sekcji <cc:implementation> wykorzystujemy tak stworzone zmienne jako #{cc.attrs.x}, #{cc.attrs.y}…
Czyli linia pozycjonująca mój komponent na ekranie przyjmie postać:
<h:panelGroup style=”position:absolute;left:#{cc.attrs.x*5+100}px;top:#{cc.attrs.l.y*5}px;” >