Canigó - Detall dels tags - textArea

Detall dels tags - textArea

Defineix un camp d'entrada de texte, de varies linies.

Hi ha dos modus se funcionament:

  1. entrada de texte sense format: presenta només el camp d'entrada de texte.
  2. entrada de texte amb format: presenta, a més del camp de texte, una barra de botons amb les diferentes opcions per donar-li format (negreta, cursiva, creació de llistes, etc.). Internament el texte es guarda en format HTML.

Estén el tag layout:textarea ( http://struts.application-servers.com/doc/tags/field.html#textarea ) de Struts-Layout.

La documentació auto-generada del tag és a http://canigo.ctti.gencat.net/confluence/canigodocs/site/canigo2_2/tlddoc/fwk/textarea.html

Atributs heredats

Els atributs heredats de layout:textarea son: accesskey, arg0, arg1, arg2, arg3, arg4, bundle, cols, disabled, 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, styleClass, tabindex, tooltip, value.

Atributs específics de Canigó

Atribut Funció
decoratorProperties Si està definit, activa el modus de texte amb format
services  
styleId identificador del tag, per lligar-lo amb la configuració injectada amb Spring
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

Per utilitar el tag en modus de texte amb format cal injectar-li l'atribut decoratorProperties. Per fer-ho, cal definir el bean corresponent en la configuració de Spring

<bean parent="textAreaFieldTag">
    <property name="styleId" value="camp6"/>
    <property name="layout" value="true"/>
    <property name="decoratorProperties">
        <map>
            <entry>
                <key><value>theme</value></key>
                <value>simple</value>
            </entry>
            <entry>
                <key><value>mode</value></key>
                <value>exact</value>
            </entry>
        </map>
    </property>
</bean>

Per defecte, el component a cadascun dels atributs del decoratorProperties envolta el value amb "". Hi ha atributs del tinyMCE que requereixen estar sense cometes. A partir de la versió 2.3.12 del Framework, es pot indicar que no posi cometes afegint un * davant del valor del value.

<entry> 
<key><value>theme_advanced_more_colors</value></key> 
<value>*false</value> 
</entry>

La entrada theme controla la quantitat d'opcions que es presenten en la barra de botons i pot tenir dos valors:

  • simple
  • advanced

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>

Exemple 1

A continuació es presenta un fragment de pàgina que utilitza el tag fwk:textarea en modus simple, sense format.

Pàgina JSP

<%@ include file="/WEB-INF/jsp/includes/fwkTagLibs.jsp" %>

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

<link rel="Stylesheet"
      href="css/tooltips/tooltips.css"
      type="text/css"
      media="screen">

<fwk:form action="provesTagsSimple.do"
          styleId="myActionForm"
          reqCode="show"
          method="post"
          layout="true">
    (...)
    <fwk:textarea styleId="camp6"
                  key="jsp.provesTags.ProvesTagsSimple.camp6"
		  mode="E,E,E"
		  layout="true"
		  rows="5"
		  cols="30"
                  tooltipTitleKey="jsp.provesTags.ProvesTagsSimple.camp6.tipTitle"
                  tooltipKey="jsp.provesTags.ProvesTagsSimple.camp6.tip"
                  property="camp6" />
    (...)
</fwk:form>

Arxius d'internacionalització

jsp.provesTags.ProvesTagsSimple.camp6=Sisè camp
jsp.provesTags.ProvesTagsSimple.camp6.tipTitle=Ajuda
jsp.provesTags.ProvesTagsSimple.camp6.tip=Ajuda del sisè camp, que és un Textarea

Exemple 2

A continuació es presenta un fragment de pàgina que utilitza el tag fwk:textarea quan es selecciona la edició "rica", amb format, que genera HTML

Pàgina JSP

<%@ include file="/WEB-INF/jsp/includes/fwkTagLibs.jsp" %>

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

<link rel="Stylesheet"
      href="css/tooltips/tooltips.css"
      type="text/css"
      media="screen">

<fwk:form action="provesTagsSimple.do"
          styleId="myActionForm"
          reqCode="show"
          method="post"
          layout="true">

    <fwk:textarea styleId="camp6"
                  key="jsp.provesTags.ProvesTagsSimple.camp6"
                  mode="E,E,E"
                  layout="true"
                  rows="5"
                  cols="30"
                  tooltipTitleKey="jsp.provesTags.ProvesTagsSimple.camp6.tipTitle"
                  tooltipKey="jsp.provesTags.ProvesTagsSimple.camp6.tip"
                  property="camp6" />

</fwk:form>

Configuració Spring

<beans>
  <bean name="/provesTagsSimple" class="net.gencat.ctti.canigo.provesTags.struts.action.ProvesTagsSimpleAction">
    <property name="tagsConfiguration">
      <map>
        <entry key="*">
          <list>
            <bean parent="textAreaFieldTag">
              <property name="styleId" value="camp6"/>
              <property name="layout" value="true"/>
              <property name="decoratorProperties">
                <map>
                  <entry>
                    <key><value>theme</value></key>
                    <value>simple</value>
                  </entry>
                  <entry>
                    <key><value>mode</value></key>
                    <value>exact</value>
                  </entry>
                </map>
              </property>
            </bean>
          </list>
        </entry>
      </map>
    </property>
  </bean>
</beans>

Arxius d'internacionalització

jsp.provesTags.ProvesTagsSimple.camp6=Sisè camp
jsp.provesTags.ProvesTagsSimple.camp6.tipTitle=Ajuda
jsp.provesTags.ProvesTagsSimple.camp6.tip=Ajuda del sisè camp, que és un Textarea

Bugs

  • L'utilització dels atributs tooltipKey i tooltipTitleKey no inclouen automàticament els arxius javascript necessàris i cal fer-ho explícitament.
  • Si es posa l'atribut decoratorProperties (decoratorProperties="theme:advanced,mode:exact") en el tag en la pàgina JSP, falla completament la generació de la pàgina. Per utilitzar decoratorProperties cal injectar-lo amb Spring.
  • Si una pàgina conté el tag fwk:configuration i el fwk:textArea en modus html, el textArea es presenta duplicat.

Attachments:
fwk_text.jpg (image/jpeg)
fwk_textarea.jpg (image/jpeg)
fwk_textarea2.jpg (image/jpeg)