UMass Lowell Dept. of Computer Science
COMP 4620 — GUI Programming II
Spring 2016 Semester, Section 201
Prof. Jesse M. Heines
Notes for Class No. 8
Moving Data Out of Views and Into Controllers
Thursday, February 11, 2016
A video of this class is (or will be) posted at:
http://echo360.uml.edu/heines2016/comp4620-201.html
Handouts and Materials
Openings / Announcements / Reminders
Proposal resubmissions are due next Thursday, but may be resubmitted at any time
Justin Nguyen — please see me re our recent email exchange
Class Notes
Related reading for this class: GetMEAN: Chap. 4
Concepts (p. 106)
We ended our last class with all the content and data still hard-coded in the views.
- “An end goal of the MVC architecture is to have views without content or data.”
- “The views should simply be fed data that they present to the end users, while being agnostic of the data they’re fed.”
- “The views will need a data structure, but what is inside the data doesn’t matter to the view itself.”
In “the MVC architecture, the model holds the data, the controller then processes the data, and finally the view renders the processed data.”
- moving the data out of the views will yield “the ideal front end”
- at the same time, this step “slowly reverse-engineers the data back through the MVC steps as our understanding of the requirements solidifies”
Approach
- “take every piece of content out of the Jade view”
- “update the Jade files to contain variables in place of content, and [define] the content as variables in the controllers”
- note that this is still an intermediate step, because the ultimate goal is to have the content in the MongoDB database
- but since it is the controllers that will interface with the database, this step gets us much closer to the desired final architecture
- in addition, after this step the views will be “able to accept and display whatever data is sent to them”
Updating the Home Page (p. 107)
Current code in file loc8r/app_server/views/locations-list.jade (the view)
- note that there are two pieces of data here: the page title and the “strapline” (subhead)
Current code in file loc8r/app_server/controllers/locations.js (the controller)
- “the second parameter in the
render function is a JavaScript object containing the data to send to the view”
- at present, title is being used in the view statement:
title= title
The first step is to update the controller to pass the data that is currently in the view
- this is in file
loc8r/app_server/controllers/locations.js
- “For neatness and future manageability the title and the strapline are grouped together within a
pageHeader object.”
- ”This is a good habit to get into, and will make the controllers easier to update and maintain further down the line.”
We can now update the view to use the data passed from the controller
- this is in file
loc8r/app_server/views/locations-list.jade
- note the two syntaxes here
- the first syntax uses the
= sign and is called “buffered code”
- this string is essentially JavaScript
- it can include operators such as the
+ sign for concatenation
- example:
h1= "Welcome to" + pageHeader.title
- however, note that any HTML included in the string will be displayed to the user
- to override that behavior, replace the
= sign with !=
- the second syntax encloses data within
#{...} and is called “interpolation”
- this allows data to be included within other content
- once again, however, any HTML included in the string will be displayed to the user
- to override that behavior, replace the opening
# sign with !
- example:
h1 Welcome to !{pageHeader.title}
Coding Repeating Data (p. 109)
Lists often display data in the same pattern in the same layout, and those lists are most often coded as arrays
The loc8r home page display data on each location in the following format
These data can be encoded in a JavaScript object as follows
An array of such objects is then added to the controller
Jade code to step through each element in the locations array (p. 111)
Original code in file loc8r/app_server/views/locations-list.jade
Wrapping in a loop
- given the locations array defined in the homelist function above, this Jade code generates the following HTML
Jade code to output the rating stars (p. 113)
Desired result
Original code (hard-coded)
Using location.rating, which is passed into the template by the homelist function, as in:
locations: [{
name: 'Starcups',
address: '125 High Street, Reading, RG6 1PS',
rating: 3,
facilities: ['Hot drinks', 'Food', 'Premium wifi'],
distance: '100m' ,
detailpage: 'starcups-detail' // added by JMH on January 3, 2016 at 8:58 PM
}, { ...
- the lines that begin with hyphens (
-) are truly JavaScript
- the Jade engine runs the JavaScript itself
- that is, the JavaScript is not passed to the browser
- note that there are no curly brackets
- instead, the code block is defined by indentation, as is all Jade code
- look at this code carefully
- what piece of data is hard-coded here that might be passed to the Jade code instead?
Jade Includes and Mixins (pp. 113-115)
Both of these are reusable components
A mixin is essentially a function
- like other functions, mixins can accept parameters
The following code wraps the rating stars routine above in a mixin
This mixin is then called simply by placing a + sign before its name
+outputRating( location.rating )
Mixins should be inserted in Jade files immediately following the extends statement, and before the block content statement
An include is essentially a C-like #include
- it brings an external file into a Jade template
Holmes creates a subfolder of the app_server/views folder named _includes
- the mixin above is then copied to a file in that subfolder named
sharedHTMLfunctions.jade
To use the mixin in the external file, Holmes then replaces the the mixin in the above code with the statement:
include _includes/sharedHTMLfunctions
- note that the .jade file extension can be omitted
Note typo on page 115: file locations-listings.jade should be locations-list.jade
Finishing Up (p. 117)
“Appendix C goes through the process for each of the three remaining pages, showing what the controller and view code should look like for each one.”
“The end goal is to have no data in any of the views.”
Process for each page
- Look at the data in the view.
- Create a structure for that data in the controller.
- Replace the data in the view with references to the controller data.
- Look for opportunities to reuse code.
My implementation
http://peaceful-shelf-9605.herokuapp.com/
Please read Chapter 5 before our next class, as we will begin looking at MongoDB and Mongoose next week
