Introduction
This article demonstrates how to extend a WinJS ListView control with custom item events like onItemsloading, onItemsLoaded, onItemFocus, onItemBlur etcetera. In the end, it gives you an idea of how to extend a WinJs control with custom events indirectly.
In this article, I'll discuss how to add the following events to a WinJS ListView control and listen with your custom code.
Event |
Description |
onItemsLoaded |
Fired when all the list items loaded in ListView |
onItemsLoading |
Fired when items loading in ListView |
onViewPortLoaded |
Fired when items view port loaded |
onFocus |
Fired when item receives focus |
onBlur |
Fired when item lost focus |
Creating a blank JavaScript store app
Create a blank JavaScript store app with the name say "ExtendListViewApp".
Add a new JavaScript file for data initialization.
Add a new Java Script file data.js (or grab it from the attached zip). This file is responsible for creating a list with countries and storing it in the global namespace with the name MyData.
Adding ListViewExtension JavaScript file
Grab ListViewExtension.js from attached source code. This file is responsible for extending ListView control with custom item events.
In three steps, you can attach a custom event to any control, they are:
1. Define control custom event constants (to be consistent across the app instead of hard-coding the string values) but not essential.
2. Clone the original method with a new name and attach it to the control. Create a new method with the original method name and add your custom code. Don't forget to call the original method.
3) Register custom events. This can be done by calling WinJS.Class.mix
Adding a ListView control
Open default.html, add a ListView control with item template as shown in the following (or copy the code from default.html in the attached source code). Here an extra textarea is included for event output logging from event listeners.
Adding Event listeners
Add a new JavaScript file, say MyList.js, then add the following code in the page ready event:
You can access the WinJS control from obj.target.
The Log function looks as in the following:
Adding script references
Open default.html and add the script references; ListViewExtensions.js must be after ui.js and before MyList.js; see:
All done, deploy and run the app. Click items one by one, the item focus and blur events are fired. All the log messages will appear in the textarea.
Output
Summary
In this article, I discussed how to extend a WinJS control with custom events.
The source code is attached.