Assume we want to parse or simply display a list of a few popular cities of the world, and that this data will be created and stored locally in our widget as follows:
To create our List of major cities
app, we can initialize a wijdatasource
class and utilize our data as follows:
If the code is successfully run, you will see a message on your browser's screen telling you what the app does. A log of the objects is outputted to the console.
Once again, we add references to the Wijmo widget dependency files from CDN.
Next, we create the list of cities.
Next, we create the datareader
object that has the format for arranging our list, and we set the datareader
object to a myReader
handle.
Time for the real deal! We initialize the datasource
object as follows:
Then, we load the datasource
object using datasource.load()
. The loaded
function, which is a property of wijdatasource
, is called after datasource.load()
fires off. The loaded data is referenced as the parameter or argument in that function for which the items within can be referenced by data.items
.
It is also possible to load data from a prepared datasource
object into a targeted UI element such as a <div>
or <p>
tag. This datasource
object could be prepared via a proxy, which is a mechanism for retrieving data from a remote source, or locally as previously shown.
To show how to work with wijdatasource
and HTML elements, let us look at one more example that utilizes local data. Assume that we have a list of some countries we want to populate in a list. Assume that we also want a selection of those cities visible only after some substring of that country is entered in an input field. We also want this event to trigger only when a button is clicked.
For instance, say we have a list containing the words Computer, Motherboard, Commute, Mother, apple, and people. If the user enters Com
and clicks on the button, the output should be a new list containing Computer
and Commute
. Also, if the user enters ple
and clicks on the button, the output should be a new list containing apple
and people
.
To properly illustrate this, we will make use of a Wijmo widget called wijlist
. A wijlist
object is simply a Wijmo list widget, which can be created by targeting a given element on the page and initiating the widget on it with the following code:
The preceding code assumes the existence of a class called myList
, and we initialize or host the wijlist
object on all elements with a myList
class. We create a local array referenced by myArr
. Finally, we render the wijlist
object on our browser.
Having understood what a wijlist
object is and how to deploy one in our widget, we can proceed with our app. Enter the following code in your favorite editor:
If the preceding code is successfully run, you will have something like this in your browser:
So once again, starting from the document.ready
function, we will go through our code to explain how this widget works:
First of all, we create a wijlist
object by hosting it on the div
tag with id = list
.
Next, we create a local array, testArray
, which will be digested by the loadList
function. This will set testArray
as the new content of the wijlist
object.
By clicking the Load Data button, we compare the text entered in the input field with id = "testInput"
, and each of the items in the wijlist
object via a for
loop.
During the loop, we append subsequent matches to a new local array, newList
.
At the end of the loop, if newList
is not empty we set newList
as the new Wijmo list data, thus overwriting the previous list data and getting a new result in our browser.
In the just-concluded example, it is important to note that we only used a local array without making reference to a wijdatasource
object. Usually, some array is passed as one of the properties in the parameters of a wijdatasource
object, which sets the array as a datasource
object. The app we just created did not use a datasource
object but a wijlist
object.
To use the datasource
and wijlist
objects, copy the following code into your editor and run it:
In the preceding code, we actually instantiate a datasource
object using the local array or data. These are all done when the page loads.
The reader
property is set to myReader
. This is the format for processing testArray
, which is assigned to the data
property of the wijdatasource
object. The loaded
function is called after the wijdatasource
object is created, and it calls loadList()
. This, in turn, renders the wijlist
object in the list
div. The functionality of the app, however, remains the same.
So far, we've demonstrated how to manipulate local data sources. The team at Wijmo was also aware of the possibilities of working with distributed systems that host data in remote locations, and thus provided a mechanism for digesting remote or distributed data sources over the network. This is achievable using the proxy
property of the wijdatasource
object. The proxy is set to the remote location of the data.
The following code was obtained from http://wijmo.com/wiki/index.php/Datasource and modified to function like our wijdatasource
app, as was done previously, but makes use of a proxy now.
The preceding code pulls data from a proxy instead of local data. The data obtained has been limited to a maximum of 12, starting with ab
. The functionality of our widget remains the same.