NetBeans, JSP i biblioteka znaczników

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.

Ramka

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

 

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.