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;” >