Mijn ervaring is dat het nier veel langer duurt dan andere talen.
Alleen wat ik wel heb is dat ik voor veel componenten in mijn webpagina zelf custom JSF tags heb ontwikkeld. (bijvoorbeeld tabbladen, tabellen met sortering en paging erin, menu/submenu, etc..).
Ikzelf ben begonnen met Struts maar ben nu langzamerhand een nieuw basis framework aan het maken in JSF. En ik kan hier nog veel sneller mee ontwikkelen dan dat ik met Struts kon. Zeker op gebied van custom components is JSF veel flexibeler en krachtiger.
Hier een simpel voorbeeld:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <vh:table border="0" cellspacing="0" cellpadding="3">
<vh:tr>
<vh:td colspan="2">
<vh:datatable
width="400"
list="#{languageHandler.languages}"
variable="var"
paginatorselectedpage="#{languageHandler.selectedpage}"
paginatorrowsperpage="5"
paginatormargin="4"
actionlistener="#{languageHandler.processAction}"
enablerowevents="false">
<vh:column sortable="true" sortfield="#{var.code}">
<vh:header styleclass="dGHLeft" onmouseoverstyleclass="dGHLeft dGHLeftOnMouseOver" onmouseoutstyleclass="dGHLeft dGHLeftOnMouseOut">
<h:outputText value="#{applicationmessages['label.code']}"/>
</vh:header>
<vh:value styleclass="dGVLeftRequired" onmouseoverstyleclass="dGVLeftRequired dGVLeftOnMouseOverRequired" onmouseoutstyleclass="dGVLeftRequired dGVLeftOnMouseOutRequired">
<h:inputText id="code" value="#{var.code}" required="true" styleClass="requiredgrid">
<f:validateLength maximum="255"/>
<vh:validateemail/>
</h:inputText><vh:br/>
<h:message for="code" infoClass="messageinfo" warnClass="messagewarn" errorClass="messageerror" fatalClass="messagefatal"/>
</vh:value>
</vh:column>
<vh:column sortable="true" sortfield="#{var.name}">
<vh:header styleclass="dGHMiddle" onmouseoverstyleclass="dGHMiddle dGHMiddleOnMouseOver" onmouseoutstyleclass="dGHMiddle dGHMiddleOnMouseOut">
<h:outputText value="#{applicationmessages['label.description']}"/>
</vh:header>
<vh:value styleclass="dGVMiddleRequired" onmouseoverstyleclass="dGVMiddleRequired dGVMiddleOnMouseOverRequired" onmouseoutstyleclass="dGVMiddleRequired dGVMiddleOnMouseOutRequired">
<vh:table border="0" cellspacing="0" cellpadding="0">
<vh:tr>
<vh:td valign="top">
<vh:togglearea open="${pageContext.request.contextPath}/global/image/arrow_down.gif"
close="${pageContext.request.contextPath}/global/image/arrow_right.gif"
for="naam"
smallwidth="100px"
smallheight="30px"
largewidth="200px"
largeheight="200px"/>
</vh:td>
<vh:td>
<h:inputTextarea id="naam" value="#{var.name}" style="width: 100px; height: 30px;" cols="24" rows="32" required="true" styleClass="requiredgrid">
<f:validateLength maximum="255"/>
</h:inputTextarea>
</vh:td>
</vh:tr>
</vh:table>
<h:message for="naam" infoClass="messageinfo" warnClass="messagewarn" errorClass="messageerror" fatalClass="messagefatal"/>
</vh:value>
</vh:column>
<vh:column sortable="true" sortfield="#{var.prlsCode}">
<vh:header styleclass="dGHMiddle" onmouseoverstyleclass="dGHMiddle dGHMiddleOnMouseOver" onmouseoutstyleclass="dGHMiddle dGHMiddleOnMouseOut">
<h:outputText value="#{applicationmessages['label.pro.logboek.code']}"/>
</vh:header>
<vh:value styleclass="dGVMiddle" onmouseoverstyleclass="dGVMiddle dGVMiddleOnMouseOver" onmouseoutstyleclass="dGVMiddle dGVMiddleOnMouseOut">
<h:inputText id="prlsCode" value="#{var.prlsCode}" size="24" styleClass="normalgrid">
<f:validateLength maximum="255"/>
<vh:validateequal for="code" label="#{applicationmessages['label.code']}"/>
</h:inputText><vh:br/>
<h:message for="prlsCode" infoClass="messageinfo" warnClass="messagewarn" errorClass="messageerror" fatalClass="messagefatal"/>
</vh:value>
</vh:column>
<vh:column sortable="true" sortfield="#{var.default}">
<vh:header styleclass="dGHMiddle" onmouseoverstyleclass="dGHMiddle dGHMiddleOnMouseOver" onmouseoutstyleclass="dGHMiddle dGHMiddleOnMouseOut">
<h:outputText value="#{applicationmessages['label.default']}"/>
</vh:header>
<vh:value styleclass="dGVMiddle" onmouseoverstyleclass="dGVMiddle dGVMiddleOnMouseOver" onmouseoutstyleclass="dGVMiddle dGVMiddleOnMouseOut" align="center">
<h:selectBooleanCheckbox value="#{var.default}"/>
</vh:value>
</vh:column>
<vh:column>
<vh:header styleclass="dGHRight" onmouseoverstyleclass="dGHRight dGHRightOnMouseOver" onmouseoutstyleclass="dGHRight dGHRightOnMouseOut">
<vh:nbsp/>
</vh:header>
<vh:value styleclass="dGVRight" onmouseoverstyleclass="dGVRight dGVRightOnMouseOver" onmouseoutstyleclass="dGVRight dGVRightOnMouseOut">
<vh:datatablecommandbutton value="#{messages['button.remove']}" actionlistener="#{languageHandler.processAction}" eventid="remove" arg0="#{var.id}"/>
<vh:datatablecommandbutton value="#{messages['button.copy']}" actionlistener="#{languageHandler.processAction}" eventid="copy" arg0="#{var.id}"/>
</vh:value>
</vh:column>
</vh:datatable>
</vh:td>
</vh:tr>
<vh:tr>
<vh:td>
<h:commandButton id="add" value="#{messages['button.add']}" actionListener="#{languageHandler.processAction}"/>
</vh:td>
<vh:td align="right">
<h:commandButton value="#{messages['button.store']}" action="#{languageHandler.store}"/>
<h:commandButton value="#{messages['button.cancel']}" action="#{languageHandler.cancel}"/>
</vh:td>
</vh:tr>
</vh:table> |
Dit is een scherm met een tabel erin, hierin zitten een aantal kolommen. één met e-mail validatie en een maximum lengte. kolom twee heeft een toggle functie (klik op de toggle en het invoerveld wordt vergroot) en een maximum lengte validatie. kolom drie heeft een maximum lengte validatie en als er wat ingevuld is dan moet dit dezelfde waarde hebben als kolom één. kolom vier heeft twee knoppen waarbij de eerste knop de mogelijkheid geeft de regel te verwijderen en de tweede knop de mogelijkheid geeft de regel te kopieren naar een nieuwe regel. daarnaast zijn alle kolommen sorteerbaar op de laatste na. en onder de tabel is een reeks aan pagina nummers.
Dit voorbeeld heb ik in 8 minuten gemaakt waarbij de data op de server volledig afgehandeld wordt.
Mijn custom componenten zijn in dit geval:
De tabel (incl. sorteren).
De knoppen (geven een event met opgegeven argumenten).
De e-mal validatie.
De validatie of het ene veldt gelijk is aan het andere veldt.
Het scherm. (UI achtig scherm)
Ik hoef nul, nul javascript te schrijven (wordt gegenereerd)
Veel mensen die beginnen met J2EE Web Applicaties door alleen een basis framework te bruiken zoals bijvoobeeld Struts, alleen maken ze vaak geen componenten. En daar zit hem juist de kracht van Java.
3015 Wp-z 5360 Wp-nno op 2 x SMA-SB3600 TL-21, Warmtepomp: ERSC-VM2CR2 / PUHZ-SHW140 YHA, WTW Q350, EV Kia Ev6 GT-Line