Part 1
Version en español
Desktop version:
Part 10
*NOTE: jqm = jquery mobile
We have our index, lets create the dashboard view, in this post we will create the views for all the nominations that an user can have such as "Mine", "Voted", "Appear", screen will look like this:
Dashboard
OK, lets start with the page layout, for that we will create a new file called "dashboardm.jade"
- if (invited)
.invited(invited="#{invited}")
#dashboard-mine(data-role="page", data-theme="d")
div(data-role="header", data-theme="b", data-position="inline")
h1= t('app.name')
a(href="#", data-icon="plus", class="ui-btn-right") Invite
div(data-role="navbar")
ul
li
a#minel.ui-btn-active(href="#dashboard-mine", data-icon="star") Mine
li
a#votedl(href="#dashboard-voted", data-icon="check") Voted
li
a#appearl(href="#dashboard-appear", data-icon="alert") Appear
///navbar
///header
div(data-role="content")
fieldset.ui-grid-b
.ui-block-a
a.create(href="#", data-role="button", data-theme="b") Create
.ui-block-b
.ui-block-c
a(href="#", data-role="button", data-theme="b", data-icon="refresh") Refresh
br
ul#mine(data-role="listview")
li(data-role="list-divider") Select to see the details
///content
div(data-role="footer", data-theme="b", data-position="fixed")
label(data-theme="c", for="search-basic") Search nomination:
input#searc-basic(data-theme="c", type="search", name="search", value="")
///footer
///page mine
#dashboard-voted(data-role="page", data-theme="d")
div(data-role="header", data-theme="b", data-position="inline")
h1= t('app.name')
a(href="#", data-icon="plus", class="ui-btn-right") Invite
div(data-role="navbar")
ul
li
a#minel(href="#dashboard-mine", data-icon="star") Mine
li
a#votedl.ui-btn-active(href="#dashboard-voted", data-icon="check") Voted
li
a#appearl(href="#dashboard-appear", data-icon="alert") Appear
///navbar
///header
div(data-role="content")
fieldset.ui-grid-b
.ui-block-a
a.create(href="#", data-role="button", data-theme="b") Create
.ui-block-b
.ui-block-c
a(href="#", data-role="button", data-theme="b", data-icon="refresh") Refresh
br
ul#voted(data-role="listview")
li(data-role="list-divider") Select to see the details
///content
div(data-role="footer", data-theme="b", data-position="fixed")
label(data-theme="c", for="search-basic") Search nomination:
input#searc-basic(data-theme="c", type="search", name="search", value="")
///footer
///page voted
#dashboard-appear(data-role="page", data-theme="d")
div(data-role="header", data-theme="b", data-position="inline")
h1= t('app.name')
a(href="#", data-icon="plus", class="ui-btn-right") Invite
div(data-role="navbar")
ul
li
a#minel(href="#dashboard-mine", data-icon="star") Mine
li
a#votedl(href="#dashboard-voted", data-icon="check") Voted
li
a#appearl.ui-btn-active(href="#dashboard-appear", data-icon="alert") Appear
///navbar
///header
div(data-role="content")
fieldset.ui-grid-b
.ui-block-a
a.create(href="#", data-role="button", data-theme="b") Create
.ui-block-b
.ui-block-c
a(href="#", data-role="button", data-theme="b", data-icon="refresh") Refresh
br
ul#appear(data-role="listview")
li(data-role="list-divider") Select to see the details
///content
div(data-role="footer", data-theme="b", data-position="fixed")
label(data-theme="c", for="search-basic") Search nomination:
input#searc-basic(data-theme="c", type="search", name="search", value="")
///footer
///page appear
#popup(data-role="page")
div(data-role="header", data-theme="e")
h1 Message
///header
div(data-role="content", data-theme="d")
h2#title
p#msg
p
a(href="#one", data-rel="back", data-role="button", data-inline="true", data-icon="back") Back
///content
div(data-role="footer")
h4= t('app.name')
///footer
///page message
Line1-2: check if the user come with a reference nomination
3: Page for "mine" nominations, we specify that this div its a page with `data-role="page"` and we are also using the theme "d" with `data-theme="d"`
4: `data-role="header"` is for page header and we use the "b" theme and the position will be "in-line", jqm will put it at the top of the page as a bar
5: App title header, since its inside the header, this will be shown centered in the header bar
6: Invite link, its a regular link but since its on the header part jqm put styles to look like a button, we are adding an icon with `data-icon="plus"` this is the "+" sign and also we are adding a class `class="ui-btn-right"`, this class will tell jqm that we want this button on the right side, if we don't put this class the button will be on the left by default
7-14: Navigation bar `data-role="navbar"`, its a list that jqm will put in a vertical bar with big buttons, each button is a list item, each list item have a link tag, we will add the class `.ui-btn-active` to the current link so it looks different
17: the actual page content `data-role="content"`
18: for this page we will use the class `.ui-grid-b` in a fieldset, this will make jqm to divide this section of the page in 3 parts, which we will fill out with divs, other classes divide the screen with different sizes
19-23: all the divs to fill out the fieldset have the class `.ui-block-a`, the last character change for "b" or "c" to change the position in the fieldset, we are also adding links, in this case since we are not inside a navegation bar or the heade/footer bar we need to specify that we want to look like a button with `data-role="button"`
25-26: This will hold the list of nominations, in this case of type "mine", the list are created with `data-role="listview"`, we are also adding a list divider item that its just an item to display kind of a title in the list but it doesn't do anything, we put that with `data-role="list-divider"`, dividers can go in any part of the list
29: The footer `data-role="footer"` with theme "b" and fixed position, this will make the footer to always appear at the bottom, for example if the list of nominations is too big, the user have to scroll down to see all of the nominations, while the user is scrolling the footer will hide, when the user finish scrolling the footer will appear again at the bottom
30-31: A search form with a label and an input, will hide/appear with the footer
35-101: the others pages are like mine just changing the type of nomination and the active button in the navigation bar
We have all the "pages" in one, the first page described is the one that jqm will show for default, other wont be processed until the user change to that page or something, remember jqm load the pages with ajax
102-119: this page is different since we are going to use it to show messages to the user, at call we will fill out the divs here and show the page
This is all for the jade part, now lets add functionality with js, for that we need to create a new filled called"mscript.js"
$( document ).bind( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.touchOverflowEnabled = true;
$.mobile.allowCrossDomainPages = true;
});
function loadNominations(type){
$.mobile.showPageLoadingMsg();
$.getJSON('http://nomination.cloudno.de/nominations/'+type, function(data) {
var list = $('#'+type);
if (data.length < 1 ){
//showMsg('dashboard.warning', 'dashboard.warning_zarro');
}else{
$.each(data, function(key, value){
list.append('<li id="'+value._id+'" type="'+type+'"><a class="details" href="http://www.blogger.com/blogger.g?blogID=3456447871634044420#">'+value.name+'</a></li>');
});
list.listview('refresh');
}
$.mobile.hidePageLoadingMsg();
}).error(function() { $.mobile.hidePageLoadingMsg(); showMsg('dashboard.error', 'dashboard.warning_nominations'); });
}
$('#dashboard-mine').live('pagecreate', function(){
loadNominations('mine');
});
$('#dashboard-voted').live('pagecreate', function(){
loadNominations('voted');
});
$('#dashboard-appear').live('pagecreate', function(){
loadNominations('appear');
});
function showMsg(err, msg){
var dialog = $("#popup");
dialog.find("#title").html(err);
dialog.find("#msg").html(msg);
$.mobile.changePage( dialog );
}
1-5: start some jqm stuff
6-20: with this function we will load all the nominations by type, we first show a loading msg and then with ajax load this nominations in json format, if we don't have errors and we have some data lets add the results to the list of nominations and at the end we need to do a refresh() to the listview if not jqm wont format them and we erase the loading msg; if we have errors lets show or error page with some details
21-29: this is some kind of "ready" in jquery but for mobile, we are telling jqm here that when the page is ready load the nominations of that kind
30-35: The functionality to show msgs, in this case we load the dialog, fill it out with some details and then show the dialog with "changepage", this is to change the page programatically
OK, to see this page running lets add a temporary route to "dashboard.js", since we don't have a lot functionality we don't want users to get stuck on this page... add this around line 56:
/**
* Dashboardm landing, TODO: erase this
*/
app.get('/dashboardm', function(req, res){
res.render('dashboardm',
{
user: req.session.user,
error : req.param('error'),
type: 'dashboard',
invited: false,
layout: 'layoutm'
});
});
We are just showing the mobile dashboard page with the mobile layout and passing some needed variables, to see this page, login like always and when you are on the dashboard change the end of the url to "dashboardm" and you will see the mobile part
Fork the code
[https://github.com/nodejs-mexico/nomi-nation](https://github.com/nodejs-mexico/nomi-nation)
Greetings
No comments:
Post a Comment