Semantic tagging formats

Portal, Express Beta Version 6.1
Operating systems: i5/OS, Linux,Windows

Semantic tagging formats

Semantic tagging of sources and targets is based on special HTML classes that are attached to elements of the HTML markup. Note that the class attribute can be attached to any HTML element and that it can have multiple values, separated by spaces. Therefore you can annotate any HTML element in your output with a click-to-action class, even if it has already a class attribute for CSS formatting.

Sources for semantic tagging are span ( <span> ) or division ( <div> ) elements that are annotated with a c2a:source class. Targets are HTML form ( <form> ) elements that are annotated with a c2a:target class. Both sources and targets have mandatory and optional properties. These properties are provided by annotated sub-elements of the main source or target tag. The property value is the entire content of the annotated property element with leading and trailing white spaces removed Example:

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

represents a c2a:value property with the value johndoe@acme.com. In many cases some of the source or target content is only relevant for the click-to-action framework but not for the user. In such cases you might want to hide that part of the source or target content from actually rendering. To do this, use the HTML attribute style=“display:none”.

Source tag

The source tag must be an HTML span ( <span> ) or division ( <div> ) elements that is annotated with a c2a:source class. The properties of a source tag are as follows:

Table 1. Source tag properties
Property	Content	Mandatory
`c2a:typename`	Namespaced type name that describes the format and semantics of the data that is provided.	Yes
`c2a:value`	Actual data that is passed to the target operation.	Yes
`c2a:anchor`	Optional anchor point that you can use for displaying the Click-to-action hover menu. If you do not specify this, the content of the property `c2a:value` is used as the default.	No
`c2a:header`	Markup that is inserted as a header into the menu that is generated for the source,.	No

When the portal finds one or more matching targets for a source tag, the c2a:anchor subelement is marked as an active click-to-action source, and hovering over the element displays a click-to-action menu trigger. You can control the way that source anchors are displayed in the browser by the CSS file styles.css that is located under the directory portal_profile\installedApps\nodename\Live_Object_Framework.ear\liveobjects.war\ui. The decoration for elements that offer a hover menu is by default defined by the following styles:

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

The value of the property c2a:typename is used to match sources to targets. This value can have an XML namespace associated to avoid unintended type name clashes. As plain HTML does not support the use of standard XML namespaces and namespace prefixes, a namespaced name is represented as namespaceURI#localPart.

Source tag example:

<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@acme.com</b>
    </p>
    <img class="c2a:anchor” src=“c2aHoverTrigger.jpg” />
    <p class="c2a:header" 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>

Target tag

The target tag must be a HTML form ( <form> ) that is annotated with a c2a:target class. The properties of a target tag are as follows:

Table 2. Target tag properties
Property	Content	Mandatory
`c2a:typename`	Namespaced type name that describes the format and semantics of the data that is expected.	Yes
`c2a:action-label`	The string that you want to be displayed for the operation in the click-to-action menu.	Yes
`c2a:action-param`	This must be an HTML input ( `<input>` ) element, designates the place where the data is passed.	No

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

When a target is selected from a click-to-action menu, the corresponding HTML form is processed just as if a user had submitted it. The input field that was annotated as c2a:action-param is filled with the source data, JavaScript onsubmit handlers are invoked, and finally the portal sends the form to its target URL, which should point to the server side target for click-to-action. If you want to implement a client side click-to-action handler, use an onsubmit handler on the form. The JavaScript handler can retrieve the form and the input value from the page Document Object Model (DOM), but for convenience, the source data is also passed in the global variable window.ibm.portal.c2a.event.value. Target tag example for a server side handler:

<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>
    <input type=“submit”>
</FORM>

Target tag example for a client side handler:

<FORM class="c2a:target” obsubmit=“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”></input>
</FORM>

Parent topic: Semantic tagging for click-to-action Related concepts
Integrating click-to-action targets with the people menu Related reference
Relation to cooperative portlet wiring Comparison of the new features with click-to-action in IBM portlets

Library | Support | Terms of use |