In my last post regarding the PEPBrowser project, we ended with a need for a new Evently widget. The Evently widget displays the PEP document statuses of the documents under the selected category and the number of documents for each status. I'm really not that great in explaining it with just words so lets try this example.
Create 'categorystatus' View
Lets start creating this Evently widget by making a CouchDB View that will allow us to get a list of status under each category, with the number of documents for each status.
{"rows":[
{"key":["Informational","Active"],"value":12},
{"key":["Informational","Draft"],"value":4},
{"key":["Informational","Final"],"value":15},
{"key":["Informational","Rejected"],"value":3},
{"key":["Informational","Superseded"],"value":1},
{"key":["Informational","Withdrawn"],"value":3}
]}
{"rows":[
{"key":["Standards Track","Accepted"],"value":10},
{"key":["Standards Track","Deferred"],"value":17},
{"key":["Standards Track","Draft"],"value":20},
{"key":["Standards Track","Final"],"value":96},
{"key":["Standards Track","Rejected"],"value":57},
{"key":["Standards Track","Superseded"],"value":3},
{"key":["Standards Track","Withdrawn"],"value":15}
]}
Create a boileplate View using the 'couchapp' command-line tool.
$ couchapp generate view categorystatus
Remember that you have to run the above command inside the PEPBrowser app directory.
function(doc) {
if (doc.type == 'pep') {
emit([doc.category, doc.status], 1);
}
}
The code for map.js is shown above.
function(keys, values, rereduce) {
return sum(values);
}
The code reduce.js is shown above.
After modifying the map.js and reduce.js, you could now run 'couchapp push' and test the View.
http://[host]:[port]/pepbrowser/_design/pepbrowser/_view/categorystatus?group_level=2&startkey=['Standards Track']&endkey=['Standards Track', {}]
Start the pepstatuslist Widget
After setting up the CouchDB View, let us start making the 'pepstatuslist' widget. This widget would display a list of the status of documents under a category.
The first step in creating this widget would be to make a 'pepstatuslist' directory under the 'evently' directory. After creating the directory, we already have a widget that does nothing. But before making the widget functional, lets assign it first to a div container and make it receive events from the 'peplist' widget. The 'peplist' widget should be able to send it an event when the user taps on a category. To do this we modify the 'main.html' file inside the '_attachments' directory as follows.
<!doctype html>
<html>
<head>
<title>PEP Browser</title>
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" type="text/css">
<script src="js/myloader.js"></script>
<script src="js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.couch.app(function(app) {
$("#maincategorylist").evently("peplist", app);
$("#maincategorystatuslist").evently("pepstatuslist", app);
$.evently.connect("#maincategorylist","#maincategorystatuslist", ["setcategory"]);
});
</script>x
</head>
<body>
<div data-role="page" id="categorylist">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincategorylist">
</div>
</div>
</div>
<div data-role="page" id="categorystatuslist">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincategorystatuslist">
</div>
</div>
</div>
</body>
</html>
The changes are highlighted in the code above. The first statement assigns the 'pepstatuslist' widget to the div container with the 'id' of 'maincategorystatuslist'. The second statement routes the 'setcategory' event from the 'peplist' widget to the 'pepstatuslist' widget.
$.evently.connect("#maincategorylist","#maincategorystatuslist", ["setcategory"]);
This means that everytime a 'setcategory' event is triggered inside the 'peplist' widget, the same event is sent to the 'pepstatuslist' widget. This enable the 'peplist' widget to send a message to the 'pepstatuslist' widget everytime a category is selected in the 'peplist' widget.
Back to the 'peplist' Widget
Before proceeding work with the 'pepstatuslist' widget, we go back to the 'peplist' widget. Why? Because in the previous section, we set the 'peplist' widget to communicate to the 'pepstatuslist' widget by routing the 'setcategory' event. So before proceeding work with the 'pepstatuslist' widget, lets add the code to 'peplist' to trigger the 'setcategory' event.
So back to the 'peplist' widget, we add the following folders and files under the '_init' folder.
These folders and file assign a click handler function to the link tags of the 'peplist' widget. Because the only links in the widget are links referring to a PEP doc category, all click events should load the proper category statuses in the 'pepstatuslist' widget and change the page to the 'categorystatuslist' page. The switching of the page is already finished in this blog post. To facilitate the loading of the category statuses, we put the following code to the 'click.js' file.
The first step in creating this widget would be to make a 'pepstatuslist' directory under the 'evently' directory. After creating the directory, we already have a widget that does nothing. But before making the widget functional, lets assign it first to a div container and make it receive events from the 'peplist' widget. The 'peplist' widget should be able to send it an event when the user taps on a category. To do this we modify the 'main.html' file inside the '_attachments' directory as follows.
<!doctype html>
<html>
<head>
<title>PEP Browser</title>
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" type="text/css">
<script src="js/myloader.js"></script>
<script src="js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.couch.app(function(app) {
$("#maincategorylist").evently("peplist", app);
$("#maincategorystatuslist").evently("pepstatuslist", app);
$.evently.connect("#maincategorylist","#maincategorystatuslist", ["setcategory"]);
});
</script>x
</head>
<body>
<div data-role="page" id="categorylist">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincategorylist">
</div>
</div>
</div>
<div data-role="page" id="categorystatuslist">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincategorystatuslist">
</div>
</div>
</div>
</body>
</html>
The changes are highlighted in the code above. The first statement assigns the 'pepstatuslist' widget to the div container with the 'id' of 'maincategorystatuslist'. The second statement routes the 'setcategory' event from the 'peplist' widget to the 'pepstatuslist' widget.
$.evently.connect("#maincategorylist","#maincategorystatuslist", ["setcategory"]);
This means that everytime a 'setcategory' event is triggered inside the 'peplist' widget, the same event is sent to the 'pepstatuslist' widget. This enable the 'peplist' widget to send a message to the 'pepstatuslist' widget everytime a category is selected in the 'peplist' widget.
Back to the 'peplist' Widget
Before proceeding work with the 'pepstatuslist' widget, we go back to the 'peplist' widget. Why? Because in the previous section, we set the 'peplist' widget to communicate to the 'pepstatuslist' widget by routing the 'setcategory' event. So before proceeding work with the 'pepstatuslist' widget, lets add the code to 'peplist' to trigger the 'setcategory' event.
So back to the 'peplist' widget, we add the following folders and files under the '_init' folder.
These folders and file assign a click handler function to the link tags of the 'peplist' widget. Because the only links in the widget are links referring to a PEP doc category, all click events should load the proper category statuses in the 'pepstatuslist' widget and change the page to the 'categorystatuslist' page. The switching of the page is already finished in this blog post. To facilitate the loading of the category statuses, we put the following code to the 'click.js' file.
function () {
$(this).trigger('setcategory', [$(this).attr('title')]);
};
The code is so simple because it just triggers a 'setcategory' event and with the event sends the value of the 'title' attribute of the clicked link. The value of the 'title' attribute is the name of the category referred to by the link. This event is sent to the 'pepstatuslist' widget and the 'pepstatuslist' widget should update its contents according to the value passed with the event. The code for doing this would be made in the 'pepstatuslist' widget.
This blog post is becoming too long, I'll continue in another blog post.
No comments:
Post a Comment