Contacts component for Symbian Web Runtime - Revision history

Hamishwillee: Hamishwillee - Fix categories

2012-07-05T03:29:54Z

Hamishwillee - Fix categories

Hamishwillee: moved Contacts component for Web Runtime widgets to Contacts component for Symbian Web Runtime: Rename in line with current branding

2012-05-08T00:53:34Z

moved Contacts component for Web Runtime widgets to Contacts component for Symbian Web Runtime: Rename in line with current branding

Hamishwillee: Hamishwillee - Fix categories (remove Mobile Design). Tidy wiki text

2012-05-08T00:53:09Z

Hamishwillee - Fix categories (remove Mobile Design). Tidy wiki text

Hamishwillee: Hamishwillee - Bot update - Fix metadata etc

2012-05-07T05:24:59Z

Hamishwillee - Bot update - Fix metadata etc

Hamishwillee: Hamishwillee - Tidy wiki text

2012-02-10T05:33:07Z

Hamishwillee - Tidy wiki text

Show changes

Hamishwillee: Hamishwillee - Bot update - Fix ArticleMetaData and RevieweApproval

2012-02-10T05:05:44Z

Hamishwillee - Bot update - Fix ArticleMetaData and RevieweApproval

Hamishwillee: Hamishwillee - Automated change of text from Forum Nokia to Nokia Developer. (Rebrand)

2011-06-22T11:27:23Z

Hamishwillee - Automated change of text from Forum Nokia to Nokia Developer. (Rebrand)

Hamishwillee: Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com)

2011-06-21T12:21:06Z

Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com)

Hamishwillee: Automated change of category from Web Runtime (WRT) to Symbian Web Runtime

2011-04-12T23:04:37Z

Automated change of category from Web Runtime (WRT) to Symbian Web Runtime

Girishpadia: /* Dynamic filtering of contacts */

2011-03-01T16:48:56Z

Dynamic filtering of contacts

@@ Line 1: / Line 1: @@
-[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:UI]]
+[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:UI]][[Category:PIM]]
 {{ArticleMetaData <!-- v1.2 -->
 |sourcecode= [[Media:Wrt ContactsComponent.zip]] [[Media:ContactsComponentWidget.zip]] [[Media:Wrt ContactsComponent.zip]]

@@ Line 1: / Line 1: @@
-[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:Mobile Design]][[Category:How To]][[Category:Symbian Web Runtime]][[Category:Symbian Web Runtime]]
+[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:How To]][[Category:UI]]
 {{ArticleMetaData <!-- v1.2 -->
 |sourcecode= [[Media:Wrt ContactsComponent.zip]] [[Media:ContactsComponentWidget.zip]] [[Media:Wrt ContactsComponent.zip]]
@@ Line 28: / Line 28: @@
 ==Introduction==
-The Contacts component is a customizable user interface component that allows listing, visualization, filtering and handling of contacts retrieved from the device phonebook.
+{{Abstract|The Contacts component is a customizable user interface component that allows listing, visualization, filtering and handling of contacts retrieved from the device phonebook.}}
 [[File:Wrt contactscomponent.png]]

@@ Line 1: / Line 1: @@
 [[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:Mobile Design]][[Category:How To]][[Category:Symbian Web Runtime]][[Category:Symbian Web Runtime]]
-{{ArticleMetaData <!-- v1.1 -->
+{{ArticleMetaData <!-- v1.2 -->
-|sourcecode= [[Media:Wrt_ContactsComponent.zip]] [[Media:ContactsComponentWidget.zip]] [[Media:Wrt_ContactsComponent.zip]]
+|sourcecode= [[Media:Wrt ContactsComponent.zip]] [[Media:ContactsComponentWidget.zip]] [[Media:Wrt ContactsComponent.zip]]
 |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
@@ Line 11: / Line 11: @@
 |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 |translated-by= <!-- [[User:XXXX]] -->
@@ Line 31: / Line 30: @@
 The Contacts component is a customizable user interface component that allows listing, visualization, filtering and handling of contacts retrieved from the device phonebook.
-[[Image:Wrt_contactscomponent.png]]
+[[File:Wrt contactscomponent.png]]
 ==Contacts component: how to use it==
 In order to use the the Contacts component, these steps are necessary:
 ===JavaScript component library===
-First thing to do, is to include the {{Icode|ContactsComponent}} JavaScript file (available here: [[Media:Wrt_ContactsComponent.zip]]) in the widget's code:
+First thing to do, is to include the {{Icode|ContactsComponent}} JavaScript file (available here: [[Media:Wrt ContactsComponent.zip]]) in the widget's code:
 <code javascript>
 <script language="javascript" type="text/javascript" src="ContactsComponent.js"></script>
@@ Line 426: / Line 425: @@
 These related resources are available for download:
 * A sample widget that uses the Contacts component: [[Media:ContactsComponentWidget.zip]]
-* The Contacts component JavaScript source code: [[Media:Wrt_ContactsComponent.zip]]
+* The Contacts component JavaScript source code: [[Media:Wrt ContactsComponent.zip]]

@@ Line 1: / Line 1: @@
-{{ReviewerApproved}}
+{{ArticleMetaData <!-- v1.1 -->
-[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:Mobile_Design]][[Category:How To]]
+|sourcecode= [[Media:Wrt_ContactsComponent.zip]] [[Media:ContactsComponentWidget.zip]] [[Media:Wrt_ContactsComponent.zip]]
 This articles shows a '''Contacts component for Web Runtime''' widgets, with the following features:
 * '''customizable user interface''' and visualized '''contacts' information'''

@@ Line 54: / Line 54: @@
 * '''"{LastName} {FirstName}"''': to display last and first name of each contact
 * '''"{LastName} {FirstName}, &lt;em&gt;{MobilePhoneGen}&lt;/em&gt;"''' to display last and first name, and the general mobile phone in empathized style.
-For a '''complete list of allowed template keys''', check out this Forum Nokia Library page:
+For a '''complete list of allowed template keys''', check out this Nokia Developer Library page:
 * [http://library.developer.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-686FDCE2-4487-4402-8347-875350D30163.html Supported contact keys]
 ====The handler function====
-The '''handler function is called when the user clicks on a contact element'''. The component will pass to the handler the '''contact data as argument'''. The '''data format''' of the contact information is the one returned by the Contacts Service API, and is '''detailed in this Forum Nokia Library page''':
+The '''handler function is called when the user clicks on a contact element'''. The component will pass to the handler the '''contact data as argument'''. The '''data format''' of the contact information is the one returned by the Contacts Service API, and is '''detailed in this Nokia Developer Library page''':
 * [http://library.developer.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-CD495D49-E492-4E88-833D-29EF222B097F.html Contact data format]
 A '''sample handler function''', that alerts the chosen contact's first name, is the following:

@@ Line 1: / Line 1: @@
 {{ReviewerApproved}}
-[[Category:Code Examples]][[Category:Web Runtime (WRT)]][[Category:Mobile_Design]][[Category:How To]]
+[[Category:Code Examples]][[Category:Symbian Web Runtime]][[Category:Mobile_Design]][[Category:How To]]
 This articles shows a '''Contacts component for Web Runtime''' widgets, with the following features:
 * '''customizable user interface''' and visualized '''contacts' information'''
@@ Line 18: / Line 18: @@
 <script language="javascript" type="text/javascript" src="ContactsComponent.js"></script>
 </code>
-[[Category:Web Runtime (WRT)]]
+[[Category:Symbian Web Runtime]]
 ===Defining an HTML node for the component===
 Before actually creating the Contacts component, it is necessary to '''define a HTML element that will contain the component's data'''. An example is given by the following DIV element:
@@ Line 87: / Line 87: @@
 contacts.initialize();
 </code>
-[[Category:Web Runtime (WRT)]]
+[[Category:Symbian Web Runtime]]
 ===Dynamic filtering of contacts===
 Once initialized, all the loaded contacts are shown to the user. In order to allow the user to dynamically filter the contacts, it is possible to '''set an input field as filter for the displayed contacts'''. Once it is set as filter, the '''component automatically uses the input field value as filter for the displayed contacts''', matching its value with a customizable set of fields. '''Default searched fields are the contact's first and last name'''.

@@ Line 87: / Line 87: @@
 contacts.initialize();
 </code>
 ===Dynamic filtering of contacts===
 Once initialized, all the loaded contacts are shown to the user. In order to allow the user to dynamically filter the contacts, it is possible to '''set an input field as filter for the displayed contacts'''. Once it is set as filter, the '''component automatically uses the input field value as filter for the displayed contacts''', matching its value with a customizable set of fields. '''Default searched fields are the contact's first and last name'''.
@@ Line 92: / Line 93: @@
 * '''define an INPUT element''' in widget's code:
 <code html4strict>
-<input type="text" name="contacts_filter" id="contacts_filter" />
+<input type="text" name="contacts_filter" id="contacts_filter" onkeypress="javascript:init();" />
 </code>
 * '''set the field as filter for the Contacts component''', through the '''setFilterInput()''' field:
@@ Line 103: / Line 106: @@
 </code>
 When applying the dynamic filter, the '''global filter''', passed as argument to the initialize() method '''is still active''', so both the filters are actually applied to the contact list.
 ===Complete usage code===
 The complete code needed to use and customized the Contacts component is summarized by the following snippet: