By default, string values are presented in the Cúram application, such as e-mail addresses, without any HTML mark-up. The string value is simply added to the HTML page in the appropriate location. The e-mail address widget must produce HTML in the following form for an e-mail address such as info@example.com:
<span class="email-container">
<a href="mailto:info@example.com">
<img src="../Images/email_icon.png"/>
info@example.com
</a>
</span>
The HTML above is formatted for clarity, but it will be generated without any indentation or line breaks, as these are not necessary for the browser to present the e-mail address properly and only increase the size of the page.
A span element specifying a custom CSS class name contains a hyperlink defined by the a (anchor) element. The anchor element's href attribute prefixes the e-mail address with mailto:, as most browsers will react to that value by opening the system's default e-mail application and creating a new message with that address in the To: field. The anchor element contains an img element for the e-mail icon and the e-mail address text that will be displayed for the user to click.
.email-container img {
vertical-align: middle;
}
The CSS vertical-align style applies only to the img element. It ensures that the e-mail address text shown to the user lines up with the centerline of the text, rather than the baseline. This looks more appealing. The same styling goal could be achieved if the class attribute were placed on the img element instead of the span element. However, placing the email-container class name on the span element allows further customization of the other elements using different CSS selectors without the need to change the HTML structure generated by the widget, which would involve changing and rebuilding the Java source code.
The Cúram Web Client Reference Manual provides more details on adding custom CSS resources to the application.