×
Namespaces

Variants
Actions

Archived:Example Multiple Choice 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
Article
Created: User:Mirsilla (26 May 2008)
Last edited: hamishwillee (19 Jun 2012)
FNWID.gif
Multiple Choice Preview.png

The following example shows how to build a view in which multiple items can be selected, as there are no built-in UI components for such a task.

There are multiple ways to store the information on what items are selected:

  1. Current image on label, if it is checkbox_sel.png, it means that the item this label represents is selected.
  2. Components data-field. Used to contain a reference to the item data, but can also contain this information.
  3. In the CHOICES value structure, there can be a selected-field containing the information. However, usually it is better to consider the value structures as static.
  4. Separate list structure (or map) containing the info.

multiple_choice.he

class
{
  const int CMD_BACK        = 1;
  const int CMD_SELECT      = 2;
  const int CMD_DESELECT    = 3;
  const int CMD_SHOW        = 4;
  
  MenuItem BACK     = new MenuItem(CMD_BACK, "Back");
  MenuItem SELECT   = new MenuItem(CMD_SELECT, "Select");
  MenuItem DESELECT = new MenuItem(CMD_DESELECT, "Deselect");
  MenuItem SHOW     = new MenuItem(CMD_SHOW, "Show");

  Value CHOICES = [
    ["name" => "Microsoft", "id" => "MSFT.O"],
    ["name" => "Nokia", "id" => "NOK.N"],
    ["name" => "Google", "id" => "GOOG.O"],
    ["name" => "Yahoo", "id" => "YHOO.O"],
    ["name" => "Intel", "id" => "INTC.O"],
    ["name" => "Oracle", "id" => "ORCL.O"],
    ["name" => "IBM", "id" => "IBM.N"]
  ];
  
  
  Image i_checkbox = null;
  Image i_checkboxSel = null;
  
  List selected = new List();


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


  Shell openWidget()
  {
    i_checkbox = getImage("checkbox.png");
    i_checkboxSel = getImage("checkbox_sel.png");

    return new Shell(createFlow());
  }
  
  
  void closeWidget()
  {
    //free ui resources to save memory for other widgets
    i_checkbox = null;
    i_checkboxSel = null;
  }
  
  
  MenuItem getSoftKey(Shell shell, Component focused, int key)
  {
    if (key == SOFTKEY_BACK) {
      return BACK;
    
    } else if (key == SOFTKEY_MIDDLE) {
      String id = String(Value(focused.getData()).id);
      return (selected.indexOf(id) > -1)? DESELECT : SELECT;
    
    } else if (key == SOFTKEY_OK) {
      return SHOW;
    }
    return null;
  }


  void actionPerformed(Shell shell, Component source, int action)
  {
    if (action == CMD_BACK) {
      popShell(shell);
      
    } else if (action == FOCUS_CHANGED) {
      shell.updateMenu();
    
    } else if (action == CMD_SHOW) {
      setBubble(null, "Selected " + selected);
    
    } else if (action == CMD_SELECT) {
      String id = String(Value(source.getData()).id);
      selected.add(id);
      source.setImage(i_checkboxSel);


    } else if (action == CMD_DESELECT) {
      String id = String(Value(source.getData()).id);
      selected.remove(id);
      source.setImage(i_checkbox);
    }

    if (action == CMD_SELECT || action == CMD_DESELECT || FOCUS_CHANGED) {
      //middle soft key need to be redrawn if focus changed, or selected-value
      shell.updateMenu();
      source.repaint(false);
      flushScreen(false);
    }
  }
  
  
  Flow createFlow()
  {
    Flow flow = new Flow(getStyle("flow"));
    flow.setPreferredWidth(-100);
    flow.setFlags(VISIBLE|LINEFEED);
    
    
    flow.add(createHeader("Select companies"));
    foreach (Value choice : CHOICES) {
      flow.add(createChoice(choice));
    }
    
    return flow;
  }


  Label createHeader(final String text)
  {
    Label label = new Label(getStyle("header"), text);
    label.setPreferredWidth(-100);
    label.setFlags(VISIBLE|LINEFEED);
    return label;
  }


  Label createChoice(final Value choice)
  {
    Label label = new Label(getStyle("choice"), String(choice.name));
    label.setPreferredWidth(-100);
    label.setFlags(VISIBLE|LINEFEED|FOCUSABLE);
    label.setData(choice);
    String id = String(choice.id);
    label.setImage(selected.indexOf(id) > -1? i_checkboxSel : i_checkbox);
    return label;
  }
  
} //class

widget.xml

<?xml version="1.0" encoding="utf-8"?>
 
<widget spec_version="2.0">
  <info>
    <name>example_multiplechoice</name>
    <version>1.0</version>
    <author>example</author>
    <clientversion>1.0</clientversion>
    <shortdescription>Multiple Choice Example</shortdescription>
    <longdescription>Multiple Choice Example</longdescription>
    <tags>example soundplayer</tags>
  </info>
   
  <parameters>
    <parameter name="widgetname">Multiple Choice</parameter>
  </parameters>

  <resources>
    <code src="multiple_choice.he"/>
    
    <img src="checkbox.png"/>
    <img src="checkbox_sel.png"/>
    
    <stylesheet>
      mini {
        background: solid white;
        color: black;
        align: vcenter hcenter;
      }
      
      maxi {
        background: solid white;
        padding: 5 5 5 5;
      }
      
      flow {
        background: solid white;
      }
      
      header {
        font: medium bold;
        background: solid #FFCC00;
        align: vcenter hcenter;
      }
      
      choice {
        color: blue;
        font: small plain;
        padding: 0 0 0 5sp;
        border: 0 0 1 0;
        label-spacing: 5sp;
        border-type: transparent;
        
        focused {
          font: small bold;
          border-type: rectangle blue;
        }
      }
    </stylesheet>
  </resources>
    
  <layout minimizedheight="2em">
    <view id="viewMini" class="mini">
      <label class="mini">${widgetname}</label>
    </view>
  </layout>
 
</widget>

checkbox.png

Checkbox.png

checkbox_sel.png

Checkbox sel.png

This page was last modified on 19 June 2012, at 07:22.
58 page views in the last 30 days.