Teaching Guide

Elvenware Logo

TOC

Prog 272 Midterm 2015

Our main goals are to understand and demonstrate knowledge:

Example Program and other Resources

This example program from JsObjects should help you get started:

A few of the slides near the beginning of this deck might prove useful:

And don't forget the elvenware jQuery page.

Details

New Pages

I don't care much how the page looks, but mine looks like this:

About Page

I use gravatar to manage my picture.

Bootstrap with Mixins

You should use mixins for all, or nearly all, the elements that use bootstrap. For instance, you should use mixins for these bootstrap elements:

When you add items to the list-group, do it like this:

$("#jsonDisplay").append('<li class="list-group-item">' + etc...

Bootstrap Mixin

The version of Bootstrap that you use is important. My bower file looks like this:

{
  "name": "seltest",
  "version": "0.0.1",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
    "bootstrap": "~3.3.2"
  }
}

You can see that I'm using 3.3.2 bootstrap. That brought with it, automatically, jquery. It is version 2.1.3. Here is the header for that version of jquery.js:

/*!
 * jQuery JavaScript Library v2.1.3
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 *
 * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2014-12-18T15:11Z
 */

It is not necessarily important that you have those exact versions, but you should have versions that work well together. If you screen looks like the image shown below, then something is wrong, and one likely candidate is the versions of bootstrap that you are loading. In particular, the image below is what things look like if no CSS has been applied to the web page.

Bad Bootstrap CSS

You are looking at plain, default HTML with no CSS. Below you can see what the menu should look like.

Good CSS Menu

IDs for Controls

Here are the IDs for a number of the controls used in the program.

DIVs

Buttons

Input Controls

Paragraphs or Spans in Paragraphs

RadioButtons

##Menus on Each Page {#menus}

Each page should have a copy of the menu. For instance, there will be three jade files involved in composing each page. They are named like this

layout.jade : headers
The menu in: menu-mix-in.jade
The new page in index.jade, or in about.jade, etc.

And of course at least the last two pages will both have mixins.jade in it. I gave you a new copy of mixins.jade in the JadeMixinsComplete project.

There is a hierarchy in the three files used to compose each page:

For instance, top of menu-mix-in.jade, might look like this:

extends layout

include mixins

The top of index.jade and your JsonAjax page might look like this:

extends menu-mix-in

block append content

NOTE: If you decide to use mixins in layout.jade then you should move the include statement back to the top of layout.jade.

I gave you the actual menu to use during the in-class assignment on Thursday. You also saw the code for high-lighting the menus.

Create a new Page

You need to create a new page for displaying a list of the loaded JSON. It should look like this:

JSON

Here we are using a bootstrap list-group to display the scientists names. We have a mixin for this as described above.

Unit Tests

One of the trickier parts of unit tests, perhaps, is handling ajax calls. Please see these resources.

In your tests, you may optionally continue to use the HTML for MainCode.html generated for the jQuery assignment. The underlying structure of the program has not really changed structure very much, so it is semi-acceptable to do that. Even though we have split the program into two pages, we can, at least for now, continue to pretend in our tests that it is all one page. Please check back here for possible updates on this issue.

Tests and MainCode.html

I originally taught you to put code to load Control.js and other files at the top MainCode.html. I knew that was strange from the start, but it has taken me a long time to see the problem. Here is what you should do.

Here is what it looks like, minus a few details such as the getAjax method:

function errorHandler(jqxhr, textStatus, error) {
    var err = textStatus + ", " + error;
    $('#debug').html("Request Failed: " + err);
}

function getJson(callback) {
    var result = $.getJSON('./Presidents.json', callback);
    result.fail(errorHandler);
}

function initialize() {
   // place all the code from document ready here.
   // This is mostly the jquery onClick handlers that begin $("#... 
}

$(document).ready(function() {
    initialize();
});

At the top of the tests I gave you, add a call to initialize after MainCode.html has been loaded:

beforeEach(function (done) {
    $('#mainArea').load('./MainCode.html', function() {
        initialize();  // << Add this call
        $("#insertMale").trigger('click');
        $("#getFirstName").trigger("click");
        $("#getAge").trigger("click");
        $("#getCityStateZip").trigger("click");
        done();
    });
});

Now you can load jquery and your css in index.html:

    <div id="mainArea"></div>

    <!-- include source files here... -->
    <link href="../public/css/style.css" rel="stylesheet" type="text/css">
    <script src="../public/components/jquery/dist/jquery.js"></script>
    <script src="../public/js/Control.js"></script>

The point is that we have to initialize the onclick methods after we have loaded the HTML. JQuery does not know how to connect your on click methods to your HTML unless the HTML is already loaded. So first we load MainCode.html, then we ask jquery to connect you onclick events to the HTML by writing code like this:

 $('#getJson').click(function() {
        getJson(display);
});

Its these types of methods that need to be in initialize. You should have a good number of them.

Once you are done, you no longer need to paste any script or link tags at the top of MainCode.html

For more guidance, see the MochaIntegrationTests from JsObjects.

Starting your App with Grunt

To start the application, type: grunt. This does two things:

See these parts of Gruntfiles.js:

grunt.registerTask('delayed-livereload', 'Reload after server start.', function () {
   etc...

grunt.registerTask('default', [
    'develop',
    'watch'
  ]);

And in package.json we load watch and grunt-develop:

"devDependencies": {
    "grunt": "~0.4.5",
    "grunt-develop": "~0.4.0",
    "grunt-contrib-watch": "~0.6.1",
    etc...
  }

The point here is that you can configure Grunt to do all kinds of background tasks during development.

##Turn it in

Place your work in a folder called Week08-Midterm. Include screenshots of the main pages of your application. This time I would prefer for you to attach the screenshots to the assignment when you submit. Put the project in your repository, and attach the screen shots to your assignment.

Screenshots:

Summary (Thanks to Mr. Yee):