Formats de texte en direct

Les sources pour le texte en direct sont des éléments d'étendue (<span>) ou de division (<div>) annotés avec une classe c2a:source. Les cibles sont des éléments de page HTML (<form>) annotés avec une classe c2a:target. Les sources et les cibles possèdent des propriétés obligatoires et facultatives. Ces propriétés sont fournies par des sous-éléments annotés de la balise source ou cible principale. La valeur de la propriété est le contenu intégral de l'élément de propriété annoté, les espaces au début et à la fin étant supprimés. Exemple :

<b class="c2a:value">
    johndoe@cntserv_exmp.com
</b>

correspond à une propriété c2a:value avec la valeur johndoe@acme.com. Bien souvent, une partie du contenu source ou cible sert uniquement pour le canevas click-to-action, mais par à l'utilisateur. Dans ce cas, vous pouvez masquer cette partie du contenu source ou cible pour l'exclure du rendu. Pour effectuer cette action, utilisez l'attribut HTML style="display:none".

La balise source doit être un élément d'étendue (<span>) ou de division (<div>) HTML annoté avec une classe c2a:source. Les propriétés d'une balise source sont comme suit :

Tableau 1. Propriétés de balise source

Propriété	Contenu	Obligatoire
c2a:typename	Nom de type avec espaces qui décrit le format et la sémantique des données fournis.	Oui
c2a:value	Données réelles transmises à l'opération cible.	Oui
c2a:anchor	Point d'ancrage facultatif que vous pouvez utiliser pour afficher le menu Click-to-action à survoler avec la souris. Si vous n'indiquez pas cette propriété, le contenu de la propriété c2a:value est par défaut utilisé.	Non
c2a:display	Marquage inséré comme en-tête dans le menu généré pour la source.	Non

Lorsque le portail détecte une ou plusieurs cibles correspondantes pour une balise source, le sous-élément c2a:anchor est marqué comme source click-to-action active, et le déclencheur du menu click-to-action apparaît si vous placez la souris sur l'élément. Vous pouvez contrôler la façon dont des ancres source sont affichées dans le navigateur par le fichier de feuille de style en cascade styles.css qui figure dans le répertoire c:\IBM\WebSphere\PortalServer\ui\wp.tagging.liveobject\semTagEar\Live_Object\Framework.ear\Live_Object_Framework.war\ui. La décoration pour les éléments avec un menu à survoler avec la souris est définie par les styles suivants par défaut :

.hasHover { border-bottom: 1px dotted #306bc4; }
img.hasHover { padding:1px; border:1px dotted #306bc4; }

Exemple de balise source :

<div class="c2a:source someotherclass">
    <span class="c2a:typename" 
          style="display:none">http://www.ibm.com/xmlns/prod/datatype#email822</span>
    <p>some content that is not relevant to click-to-action, also to make clear 
       that property elements do not have to be direct children
        <b class="c2a:value">johndoe@cntserv_exmp.com</b>
    </p>
    <img class="c2a:anchor" src="c2aHoverTrigger.jpg" />
    <p class="c2a:display" style="display:none;">             
        <b><c>This is a sample click-to-action source</c></b><br>           
        <b><c>You can add an optional header to your action menu</c></b>
  </p> 
</div>

La balise cible doit être un élément de page HTML (<form>) annoté avec une classe c2a:target. Les propriétés d'une balise cible sont comme suit :

Tableau 2. Propriétés de balise cible

Propriété	Contenu	Obligatoire
c2a:typename	Nom de type avec espaces qui décrit le format et la sémantique des données attendus.	Oui
c2a:action-label	Chaîne que vous voulez afficher pour l'opération dans le menu click-to-action.	Oui
c2a:action-param	Cette propriété doit être un élément d'entrée HTML (<input>) qui désigne l'endroit où les données sont envoyées.	Non

Lorsque le portail détecte une ou plusieurs cibles correspondantes pour une balise source, le sous-élément c2a:anchor est marqué comme source click-to-action active, et le déclencheur du menu click-to-action apparaît si vous placez la souris sur l'élément. Vous pouvez contrôler la façon dont des ancres source sont affichées dans le navigateur par le fichier de feuille de style en cascade styles.css qui figure dans le répertoire c:\IBM\WebSphere\PortalServer\ui\wp.tagging.liveobject\semTagEar\Live_Object\Framework.ear\Live_Object_Framework.war\ui. La décoration pour les éléments avec un menu à survoler avec la souris est définie par les styles suivants par défaut :

.hasHover { border-bottom: 1px dotted #306bc4; }
img.hasHover { padding:1px; border:1px dotted #306bc4; }

Lorsqu'une cible est sélectionnée dans un menu click-to-action, la page HTML correspondante est traitée comme si un utilisateur l'avait soumise. La zone d'entrée annotée comme c2a:action-param est renseignée avec les données source. Les gestionnaires onsubmit JavaScript sont alors appelés et le portail envoie la page à son URL cible. L'URL cible doit pointer vers la cible côté serveur pour Click-to-Action. Si vous voulez implémenter un gestionnaire click-to-action côté client, utilisez un gestionnaire onsubmit dans la page. Le gestionnaire JavaScript peut récupérer la page et la valeur d'entrée du modèle DOM (Document Object Model). Mais il est préférable que les données source soient aussi envoyées dans la variable globale window.ibm.portal.c2a.event.value.

Exemple de balise cible pour un gestionnaire côté serveur :

<FORM class="c2a:target" action="/myapp/do.something">
    <span class="c2a:typename"> http://www.ibm.com/xmlns/prod/datatype#email822</span>
    <p class="c2a:action-label">Show inbox</p> 
       Email: <input type="text" class="c2a:action-param" name="someInputName"> 
    <input type="submit">
</FORM>

Exemple de balise cible pour un gestionnaire côté client :

<FORM class="c2a:target" onsubmit="doSomething(this);return false" 
      action="javascript:void(0)" style="display:none"> 
    <span class="c2a:typename"> http://www.ibm.com/xmlns/prod/datatype#email822</span>
    <p class="c2a:action-label">Show inbox</p> 
    <input type="text" class="c2a:action-param" name="someInputName">
</FORM>