Dev: Visual Studio 2013 Single Page Application with BackBoneJS

Introduction:
As part of my exploration from the last blog post I have been digging into BackBoneJS. Here I take a look at getting started with BackBoneJS in a Microsoft environment. Ultimately, I don’t think this is a very clean solution, so I’ll follow up with another that’s not integrated with ASP.Net’s MVC.

There’s a few requirements for this post.

Our goals with this website is to get a basic MVC website up and running using the BackBoneJS framework.
You can learn more about BackBoneJS here: http://backbonejs.org/
So, once you’ve got Visual Studio installed and running, and the BackBoneJS template installed, go ahead and create a new Visual C#  Web ASP.NET Web Application. It should look like this:
vs2013-spa-backbonejs-01
This will give you a new window of options; choose the Single Page Application.
vs2013-spa-backbonejs-02
Okay, let that build the solution. If you want to see what it does right off, run it with F5.
This theme uses the popular Bootstrap theme (CSS3) to achieve a “responsive” look and feel. Responsive simply means the website will attempt to mold itself to whatever screen size your users browse the site with. Be that a tiny screen through a smartphone or a big screen through a desktop computer. This concept can save you a lot of development time down the road when clients ask for a version of your site to work on their iPad. Responsive is better, in my opinion, than a mobile version of a website. This comic attempts to explain precisely why: http://xkcd.com/869/

You can learn more about Bootstrap at their website: http://getbootstrap.com/

We’re using Bootstrap with this theme automatically, but I don’t want to use the default Bootstrap theme. It’s unoriginal and sort of lazy to use the default theme. So, I’ll go to a website that offers other themes that work with Bootstrap: http://bootswatch.com/ and download the “Slate” theme. Save the “bootstrap.css” and “bootstrap.min.css” to your projects “Content” folder. This will overwrite the defaults that came with the project.

Centering images in the JumboTron

Personally, I’m going for a pretty simple page here. A centered logo at the top, followed by some page content with images. For the “header” section of a web page, Bootstrap delivers JumboTron. In their words, “A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.” You can learn more about the JumboTron on their website: http://getbootstrap.com/components/#jumbotron

What JumboTron does not do out of the box is give you a class to center your image. Developers will waste hours trying to hack the CSS, but, CSS requires finesse, not muscle. Here’s the code that accomplishes a centered image without much fuss:


<div class="jumbotron">
<div class="row well well-lg">
<div class="col-md-6 col-md-offset-3">
             <img src="~/Content/logo_bw_trans.png" alt="header" class="img-responsive text-center" />
        </div>
</div>
</div>

I found this, like almost all code snippets, on stackoverflow: http://stackoverflow.com/questions/18706544/jumbotron-alignment-issues

The Grid System

Bootstrap uses a popular CSS technique for laying out web pages. In bygone years, this was popularized by the creators of CSS frameworks like the 960, http://960.gs/, and BluePrint, http://www.blueprintcss.org/. From my perspective, these CSS frameworks became popular when UI developers realized the middle tier devs weren’t going to take the time to learn CSS and would keep using HTML tables to layout sites. So, they made CSS frameworks to try to help those same devs. Even then it took several years for frameworks like Bootstrap to make it easier. I believe Twitter’s Bootstrap may have grown up from HTML5Boilerplate http://html5boilerplate.com/, but, I don’t know.

The default template starts me off with a 3 section layout, but I only want 2. So, here is what they give us in the template:


<div class="row">
<div class="col-md-4">
        …content…
    </div>
<div class="col-md-4">
        …content…
    </div>
<div class="col-md-4">
        …content…
    </div>
</div>

Without understanding the grid system, you can quickly see there’s some logic to this. The class “col-md-4” seems to have a naming convention to it. It does and it is explained in detail here: http://getbootstrap.com/css/#grid. If you’re guess was that they all add up to 12, then you’re right! I want 2 columns, so mine is reduced to this:

<div class="row">
<div class="col-md-6">
        …content…
    </div>
<div class="col-md-6">
        …content…
    </div>
</div>

Now, I want four rows of content with two columns, so I’ll just copy and paste that a few times and fill in the content. Once that’s done I want a section at the bottom with a big button telling my users what to do. As you are dropping content and images onto the page, you might notice that your images don’t come out the size you made them.

So if we look at this piece of code:


<img src="~/Content/dojo-path.png" alt="header" class="img-responsive text-center" />

You can see the class “img-responsive.” This is one of those magic Bootstrap CSS3 classes that makes your website scale for smartphones or big websites. While you may be tempted to take this off, I advise you leave it and let Bootstrap do what it knows best.
At the end of the page I want an email sign-up form so I can keep in touch with my prospective customers. Email sign up forms are something that almost every website in existence uses, so, there should be very little coding here. But you searched through the Bootstrap website and didn’t find it. Luckily there’s another website, http://bootsnipp.com/, and if you do a quick search on sign up forms, you’ll see there are a few to choose from. I liked this one: http://bootsnipp.com/snippets/featured/sign-up-form.

Well, that’s enough to get your basic functionality so you can wire in some email server. But I’d like to go a bit further.
I already have an account with MailChimp, a popular mailing list website, http://mailchimp.com/, so let’s just see what it takes to wire up a signup form to a mailchimp auto-responder list. So, if you have a mailchimp account, you can get your basic code for a signup form and combine with some of the Bootstrap visual enhancements and end up with code like this:


<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" class="text-center">
<form action="http:/url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="span6" id="mce-EMAIL" placeholder="email address" required>
                <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_31c7d2f366bf7abc8b70e0bf3_64a94b06cb" value=""></div>

                    <button type="submit" id="mc-embedded-subscribe" class="btn btn-default btn-lg">
                        <span class="glyphicon glyphicon-off btn-lg"></span> Subscribe
                    </button>
                
</form>
</div>
<!--End mc_embed_signup-->

This gives you a decent looking sign up like this:
vs2013-spa-backbonejs-03
Which works. And when you hit submit, it opens a new window from mailchimp for the user to confirm their information… which sucks.
What I really want is to use the MailChimp API so you can handle the request from within your application. Since we’re not using WordPress or Drupal, we need to do this with ASP.Net. Unsurprisingly, someone has already done this, and their GitHub project is here: https://github.com/danesparza/MailChimp.NET

So, let’s get to it. We’re going to install this into our project using the Package Manager Console [Tools–Library Package Manager–Package Manager Console] and type: Install-Package MailChimp.NET

That should get you a bunch of successful messages. Next I need my API Key from MailChimp. That’s covered here: http://kb.mailchimp.com/article/where-can-i-find-my-api-key essentially, it’s: primary dashboard–Account Settings–Extras–API Keys

Okay, you’ve imported the MailChimp API, you have your secret API key, now it’s time to go to your Controller and write your function.
Throw these imports into the top of the Controller:


using MailChimp;
using MailChimp.Lists;
using MailChimp.Helper;
Then add a function:
public void SubscribeEmail() {
            MailChimpManager mc = new MailChimpManager(&#8220;YourApiKeyHere-us2&#8243;);
            //  Create the email parameter
            EmailParameter email = new EmailParameter()
            {
                Email = &#8220;customeremail@righthere.com&#8221;
            };
            EmailParameter results = mc.Subscribe(&#8220;YourListID&#8221;, email);
        }

But that will wait till next time.

A Simple HTML5 & CSS3 Layout

I’ve been working with HTML5 and CSS3 since they came out.  At first I remember being confused.  I had spent some time getting my bearings in Flash when the buzz began touting HTML5 & CSS3 as the “simple” solution for the future.  I’m all for the future of technology, but, I think any of us who have worked in HTML5 and CSS3 might take issue with the “simplicity” of this new cross-browser functionality.  As a community we’ve stuck with it though many blogs and conference lectures on “What is HTML5″, and after a few years, most of the browsers have adopted it, and a few major players have used it.

Pandora, which had a beautiful user interface, wanted to stay at the forefront of technology and recently released it’s HTML5 version: http://www.pandora.com While some people may feel it lost some “crispness” I think they accomplished their goals of a light-weight and elegant solution that will work across platforms and devices.

The code I’ll show here will accomplish a very simple layout that shows off some of the things developers want: rounded corners and dropped shadows.  I don’t understand why we like these two features so much, but we do.  I rarely see a developer new to the technique not experience some sort of inner-glee.  And business people think we’re “square”… pshaw!

Here’s a picture of the finished results:

A Simple HTML5/CSS3 layout

A Simple HTML5/CSS3 layout

This sort of layout is where I like to start for a website.  It’s past all the irritating CSS3 layout annoyances and before dropping custom images in.  Okay, here’s the code

<!doctype html>
<html lang="en">
<head>
    <title>Some Title</title>
    <!--    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>-->
    <link href="Version2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="outsideBox">
        <header>
            <table class="headerTbl">
                <tr>
                    <td>
                        <h2>
                            AwesomeSauce LLC.</h2>
                    </td>
                    <td style="text-align: right;">
                        Search&nbsp;&nbsp;<input type="text" maxlength="100" size="50" />&nbsp;&nbsp;<img
                            src="resources/images/smallSearch.png" alt="Search for DDA" />&nbsp;&nbsp;
                    </td>
                </tr>
            </table>
        </header>
        <nav>
            <ul>
                <li class="selected"><a href="#">Pending</a></li>
                <li><a href="#">Advances</a></li>
                <li><a href="#">Quick Entry</a></li>
                <li><a href="#">Commitments</a></li>
                <li><a href="#">Rates</a></li>
            </ul>
        </nav>
        <div id="alerts">
            alerts go here</div>
        <div id="sideNav">
            <ul class="top-level">
                <li class="selected"><a href="#">Pending</a></li>
                <li><a href="#">Advances</a></li>
                <li><a href="#">Quick Entry</a></li>
                <li><a href="#">Commitments</a></li>
                <li><a href="#">Rates</a></li>
            </ul>
        </div>
        <div id="mainContent">
            <table>
                <tr>
                    <td>
                        <div id="parentBox">
                            Top Level Grid here
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="childBox">
                            Bottom Level Grid here
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

And here’s the CSS:

body {
    background: #fff;
}

.outsideBox {
    height: 100%;
    min-height: 650px;
    border: 1px solid black;
    border-radius: 1.6em;
    padding: 1em;
    margin: 2em;
    position: relative;
    display: block;
    box-shadow: 4px 4px 4px 4px #202e46;
}

.headerTbl {
    width: 100%;
}

/*------------------------------
= TOP NAVIGATION
------------------------------*/
nav {
    position: absolute;
    left: 0;
    width: 100%;
    background: #202e46;
}

nav ul {
    margin: 0 auto;
    width: 940px;
    list-style: none;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    margin-right: 20px;
    width: 140px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #777;
}

nav ul li a:hover {
    background: #F0F0F0;
    color: #202e46;
}

nav ul li.selected a {
    background: #F0F0F0;
    color: #000;
}

/*------------------------------
= ALERTS
------------------------------*/
#alerts {
    width: 100%;
    display: block;
    width: 940px;
    background-color: Red;
    color: White;
}

/*------------------------------
= VERTICAL NAVIGATION
------------------------------*/
#sideNav {
    float: left;
    font-size: 1em;
    width: 150px;
    padding-top: 3em;
}
#sideNav ul {
    height: 100%;
    border-radius: 1.6em;
    margin: 0px;
    padding: 0px;
}
#sideNav li {
    list-style: none;
}

ul.top-level {
    background: #202e46;
}

#sideNav a {
    color: #777;
    cursor: pointer;
    display: block;
    line-height: 25px;
    text-indent: 25px;
    text-decoration: none;
    width: 100%;
}
#sideNav a:hover {
    background: #F0F0F0;
    color: #202e46;
}
#sideNav li:hover {
    background: #f90;
    position: relative;
}

/*------------------------------
= MAIN CONTENT
------------------------------*/
#mainContent {
    padding-top: 3em;
    display: block;
    float: right;
    height: 100%;
    min-height:500px;
    width: 80%;
    font-size: 1em;
}
#mainContent table {
    height: 100%;
    border: 1px solid black;
    width: 100%;
}

If you have tried to do HTML5 and CSS3 like I have, you’ve probably come across some impressive kitchen sink solutions along the way.   I personally don’t have 100 hours to put towards figuring it all out :-)  I have about 10.  If you have less than 10, here’s something for you.

Enjoy

Special thanks to (some of these were used in the final solution for JQuery & DataTables):

  • http://jonraasch.com/blog/css-rounded-corners-in-all-browsers  http://thany.nl/apps/boxshadows/
  • http://html5shim.googlecode.com/
  • http://dotnetspeaks.com/DisplayArticle.aspx?ID=68 http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=67
  • http://aspdotnetcodebook.blogspot.com/2010/01/page-languagec-autoeventwireuptrue.html
© Copyright Duke Hall - Designed by Pexeto