Detall dels tags - text
Defineix un camp d'entrada de texte, d'una linia.
Estén el tag layout:text ( http://struts.application-servers.com/doc/tags/field.html#text ) de Struts-Layout.
La documentació auto-generada del tag és a http://canigo.ctti.gencat.net/confluence/canigodocs/site/canigo2_2/tlddoc/fwk/text.html
Atributs heredats
Els atributs heredats de layout:text son: accessKey, arg0, arg1, arg2, arg3, arg4, bundle, cols, disabled, editType, hint, isRequired, key, layout, layoutId, maxlength, mode, name, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, policy, property, readonly, rows, size, style, styleClass, styleId, tabindex, textErrorStyleId, type, value.
Atributs específics de Canigó
| Atribut | Funció |
|---|---|
| autoTab | ¿no funciona? |
| convertTo | Llista de conversions a aplicar quan es finalitza l'entrada en el camp ("uppercase", "lowercase" i "trim"). Si n'hi ha més d'una, es separen per un espai. |
| dependentFields | Camps dependents |
| errorClass | Classe CSS que defineix l'estil del textField si es produeix un error |
| errorKey | Clau del texte d'error en els arxius i18n |
| iconStyleId | Identificador de la icona |
| indicator | Div a mostrar quan es fa petició AJAX |
| mask | Màscara que es vol aplicar al camp. Es un string composat pels caràcters "x" (lletra a-z A-Z), "#" (dígit 0-9), "*" (lletra a-z A-Z o dígit 0-9) |
| maskType | Tipus de màscara que es vol aplicar: "text", "date", "number" |
| selectOnFocus | Selecciona automàticament tot el contingut del camp quan aquest reb el focus |
| services | |
| showCalendar | Mostrar calendari d'edició de data |
| sourceErrorTooltip | Pot ser ICON, TEXT |
| textErrorStyleId | Div amb el text d'error |
| tooltipKey | Clau del literal del missatge a mostrar dins el tooltip |
| tooltipOptions | Opcions aplicades segons la implementació (en el cas actual sota DOM Tooltip) |
| tooltipTitleKey | Clau del literal a mostrar si volem mostrar un títol com a capçalera del tooltip |
| validationFieldMessageMode | Tipus de validació que volem mostrar quan salta la validació. Valors possibles: ICON, TOOLTIP, CHANGESTYLE, TEXTERROR |
| validationMessageFunction | Funció de presentació |
| validations | Validacions pel camp |
Per utilitzar els Tooltips cal incloure un conjunt d'arxius JavaScript i CSS:
- el full d'estil tooltips.css
- els arxius de scripts domLib.js i domTT.js
<LINK REL=StyleSheet
HREF="css/tooltips/tooltips.css"
TYPE="text/css"
MEDIA=screen>
<script type="text/javascript"
src="<c:url value="/scripts/tooltips/dom_tooltip/domLib.js"/>">
</script>
<script type="text/javascript"
src="<c:url value="/scripts/tooltips/dom_tooltip/domTT.js"/>">
</script>
Validacions
La validació dels camps d'un formulari es poden fer a nivell de cada camp definint-la al propi tag.
El tag fwk:text soporta dos mètodes de validació, ONCHANGE i ONSUBMIT. La primera es farà en perdre el focus el camp havent canviat el seu valor, i la segona al enviar el formulari al servidor.
Les validacions que es poden fer dintre d'aquests dos mètodes que acabem d'explicar són les mateixes que suporta la validació als formularis, per a més informació redirigim al document on es detallen: Validació dels Formularis
A continuació exposarem un exemple:
<fwk:label styleId="descnLabel" id="id" key="category.descn" styleClass="label"/> <fwk:text styleId="descn" property="descn" validationFieldMessageMode="ICON,TEXT,CHANGESTYLE" validations="ONCHANGE(date{datePattern:dd/MM/yyyy})" sourceErrorTooltip="TEXT" iconStyleId="descnIconError" textErrorStyleId="descnTextError" errorClass="errorNew" errorKey="forms.categoryForm.field.descn" styleClass="fieldText"/> <fwk:iconError styleId="descnIconError" style="display:none"> <img src="<c:url value="/images/iconWarning.gif"/>" id="imagen" class="icon" alt="Warning" /> </fwk:iconError> <fwk:textError styleId="descnTextError" styleClass="errorText" />
En aquest exemple es mostra un camp amb una validació del tipus ONCHANGE que comprova que una data sigui correcta.
Per mostrar l'error fem servir una icona i un text informant del mateix, a més a més el camp canviarà d'estil. L'atribut que fa possible aquest comportament és el següent:
validationFieldMessageMode="ICON,TEXT,CHANGESTYLE"
I els tags per mostrar els errors són fwk:iconError i fwk:textError.
<fwk:iconError styleId="descnIconError" style="display:none"> <img src="<c:url value="/images/iconWarning.gif"/>" id="imagen" class="icon" alt="Warning" /> </fwk:iconError> <fwk:textError styleId="descnTextError" styleClass="errorText" />
NOTA: El nom de l'atribut al tag fwk:text, iconStyleId i textErrorStyleId han de coincidir amb l'atribut styleId d'aquests tags, a més a més de seguir el patró <nomdelcamp>TextError i <nomdelcamp>IconError.
El text d'error es mostrarà al costat de la icona d'error i apareixerà al introduïr una data incorrecta i desapareixerà al escriure-la correctament.
I obtenim com a resultat:
Exemple
A continuació es presenta un fragment de pàgina que utilitza el tag fwk:text
Pel camp es defineix una màscara d'entrada estil NIF: 8 dígits, un guió que s'introdueix automàticament i una lletra. També s'especifica que el camp s'autoconverteixi a majúscules.
Pel camp de texte es crea automàticament una etiqueta i se li assòcia explícitament un tooltip amb títol. Els tres textes corresponents estan definits en els arxius d'internacionalització.
Pàgina JSP
<LINK REL=StyleSheet
HREF="css/tooltips/tooltips.css"
TYPE="text/css"
MEDIA=screen>
<script type="text/javascript"
src="<c:url value="/scripts/tooltips/dom_tooltip/domLib.js"/>">
</script>
<script type="text/javascript"
src="<c:url value="/scripts/tooltips/dom_tooltip/domTT.js"/>">
</script>
<fwk:configuration styleId="conf"/>
<fwk:form action="provesTagsSimple.do"
styleId="myActionForm"
reqCode="show"
method="post"
layout="true">
(...)
<fwk:text key="jsp.provesTags.ProvesTagsSimple.camp1"
styleId="camp1"
mode="E,E,E"
layout="true"
mask="########-x"
maskType="text"
convertTo="uppercase"
tooltipTitleKey="jsp.provesTags.ProvesTagsSimple.camp1.tipTitle"
tooltipKey="jsp.provesTags.ProvesTagsSimple.camp1.tip"
property="camp1"/>
(...)
Arxius d'internacionalització
jsp.provesTags.ProvesTagsSimple.camp1=Primer camp jsp.provesTags.ProvesTagsSimple.camp1.tipTitle=Ajuda jsp.provesTags.ProvesTagsSimple.camp1.tip=Ajuda del primer camp, que és un TEXT
Bugs
- L'atribut autoTab no funciona.
- L'entrada de dates amb un calendari no funciona.
- L'utilització dels atributs tooltipKey i tooltipTitleKey no inclouen automàticament els arxius javascript necessàris i cal fer-ho explícitament.
