Revision as of 07:11, 19 June 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Example HyperText in WidSets

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The article is believed to be still valid for the original topic scope.

Article Metadata
Created: User:Copyeditor 1 (23 May 2008)
Last edited: hamishwillee (19 Jun 2012)

This example shows how to use the HyperText component.

With the HyperText component you can

  • Render contents of each tag with a different style
  • <a> (anchor) is the only tag with a special meaning. Text contained within an a-tag can be focused and accessed using the middle softkey.
  • Text contained within the a-tag itself is returned as source component data to the actionPerformed handler.
  • Newlines are rendered as linefeeds/newlines.


  const int CMD_BACK    = 1;
  MenuItem BACK    = new MenuItem(CMD_BACK, "Back");

  void startWidget()
    setMinimizedView(createMinimizedView("viewMini", getStyle("default")));

  Shell openWidget()
    HyperText ht = new HyperText(getStyle("maxi"));
      "<h1>The Document</h1>\n"+
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. "+
      "Aliquam eu ligula et lectus commodo condimentum. "+
      "Aenean nibh eros, gravida eget, facilisis in, facilisis "+
      "aliquam, enim. Aliquam non nulla in lacus dapibus volutpat. "+
      "Nullam id est. Phasellus nec mi eu sem tristique scelerisque. "+
      "Cras elementum lacinia lacus. Integer lectus. Nulla nibh "+
      "neque, aliquet quis, adipiscing sed, aliquam vel, orci. "+
      "Duis egestas. Phasellus lectus odio, malesuada ut, semper et, "+
      "ullamcorper et, sem. Fusce pharetra urna. Integer bibendum "+
      "imperdiet lorem. Vestibulum et ante. Sed metus ante, feugiat "+
      "ac, viverra et, malesuada ac, tortor. Donec elementum massa "+
      "et sapien pretium euismod. Maecenas ut arcu non est posuere "+
      "ultricies. Nulla vel massa ac lorem molestie congue. "+
      "Phasellus tempus, libero et aliquam luctus, nisi est laoreet "+
      "lectus, feugiat sollicitudin lacus lectus sagittis quam. "+
      "Donec auctor purus eu quam. Etiam luctus mauris sit amet est.\n\n"+
      "<a foo>Foo</a>\n"+
      "<a bar>Bar</a>\n"+
      "<a ding>Dong</a>\n\n"+
      "Donec adipiscing, sapien ac varius condimentum, tellus pede "+
      "hendrerit libero, vel luctus sapien purus sit amet velit. "+
      "Pellentesque dui pede, laoreet sit amet, pretium eget, "+
      "pharetra eget, orci. Suspendisse vestibulum facilisis erat. "+
      "Proin posuere purus ut magna. Maecenas nec orci eget massa "+
      "ullamcorper ullamcorper. Aliquam erat volutpat. In hac "+
      "habitasse platea dictumst. Sed urna. Aenean vel nisl. Nam "+
      "mattis magna sed odio. Integer scelerisque sem vitae massa."+
    return new Shell(ht);

  MenuItem getSoftKey(Shell shell, Component focused, int key)
    if (key == SOFTKEY_BACK) {
      return BACK;
    return null;

  void actionPerformed(Shell shell, Component source, int action)
    if (action == CMD_BACK) {
    } else if (action == OPEN_LINK) {
      setBubble(null, "Link: "+source.getData());


<?xml version="1.0" encoding="utf-8"?>
<widget spec_version="2.0">
    <shortdescription>HyperText Example</shortdescription>
    <longdescription>HyperText Example</longdescription>
    <tags>example hypertext</tags>
    <parameter name="widgetname">HyperText Example</parameter>
    <code src="hypertext.he"/>
      mini {
        background: solid white;
        color: black;
        align: vcenter hcenter;
      maxi {
        background: solid white;
        padding: 5 5 5 5;
      hyper.h1 {
        color: black;
        font: large bold;
        border: 0 0 2 0;
        border-type: rectangle black;
      hyper.p {
        color: black;
        font: medium plain;
      hyper.a {
        color: blue;
        font: medium bold;
        focused {
          color: orange;
          border: 0 0 2 0;
          border-type: rectangle orange;
  <layout minimizedheight="2em">
    <view id="viewMini" class="mini">
      <label class="mini">${widgetname}</label>
This page was last modified on 19 June 2012, at 07:11.
27 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.