Node.js(Part-4) Some more Jade + Bootstrap

Welcome to yet another tutorial in the series. HERE is a reference to the previous tutorial in case you might want to revisit anything there. This tutorial will guide you through some of the advanced features of Jade and Bootstrap. This will also give you a brief idea as to how your views/html code should be structured.

First things first. Right now we have all the view code in ‘views/index.jade’  that is inserted into the ‘views/layout.jade’ and then rendered. This is only feasible(and practical) if the views are less in number and hence easily manageable- a situation you are very less likely to end up in. Ideally you would want to have separate components for each module/functionality and have their separate views. So we will refactor this code first and move each functionality in a separate places(files).

First, Tell express that you don’t want to use layouts anymore.

In the app.js, add the following line to the configuration.

now this will make sure that you are responsible for rendering each and every view(page) of your application and linking them to one another. To begin with, you have already specified which directory is going to be your views directory in ‘app.js’ by mentioning the following line

express will, by default, look for the file named ‘index.jade’ in this directory(/views) as the first lookup.  We will put our javascript and stylesheet includes in it. The path that is specified here will be with respect to “public” folder from document root. So, for example, if you want to include a javascript file called ‘test.js’ which is in folder ‘public/js/test.js’ then you would specify only the path from ‘public’ folder, i.e. “link(href=”/js/test.js”)”. Following is a snipped of ‘views/index.jade’ that shows our script includes.

Also we will see how we can include other view files in this file and hence, make the code readable and modular.

I am going to divide the page into three parts that will be put in three separate views(files) and then included in ‘index.jade’ to construct the page. These will be :

1. Topbar – Containing the code of top navigation bar and authentication forms
2. Signup Modal  Box – Containing the code of user signup form
3. Signup Error Modal  Box – Containing the code when user login fails

The MODAL used here is a Bootstrap plugin that enables the specified component(e.g. a text box or a div) and hides everything else in the background. Its helpful for having sign-up forms/reset-password forms or message prompts.

We will be adding the components for blog post views later. This is the basis of Jade Template Inheritance  which will be used extensively throughout the application but right now only the ‘include’ statement will be used which lets you include the code of other file(s).

The following is the snippet from ‘index.jade’ file. It contains the entire body of the application.

body
  include topbar
  div.container
    div.content
      div.page-header
        h1 Main Page
          small Welcome to #{title}
      div.row-fluid
        div.span9
          div.hero-unit
            h2 Page Content
            p Primary content of the blog goes here
            include signupModal
            include signupErrorModal
        div.span3
            div.well.sidebar-nav
              h3 Secondary Content

    div.footer
      p © nodeblox 2011

The first include is the ‘topbar’. When Jade engine encounters the include statement, it looks for the specified file(topbar, in this case) in the current directory. We have moved all the code of topbar from ‘index.jade’ to ‘topbar.jade’ in ‘/views’ directory. We have also added two files called ‘signupModal.jade’ and ‘signupErrorModal.jade’.

signupModal.jade : This file contains a  simple form for a new user who wants to sign up for the application. This will contain the basic fields like name, email and password.

signupErrorModal.jade : This file contains the error message that is shown in case the user enters incorrect login credentials.

The Modal’s are nothing but normal div’s that are shown as the full page content when they are activated. Everything else apart from that div goes into background.

There are three steps for using a modal in Bootstrap.

  1. Download the “bootstrap-modal.js” from HERE and include it in ‘index.jade’

  2. Create a div(“signup-modal”, in this case) in the main page or create it in a separate file (“signupModal.jade”, in this case) and include it in the main page

  3. In the javascript file, specify that the div created in step 2 is a modal by writing the following code.

– ‘keyboard’ options enables closing of modal when the escape key is pressed

– ‘backdrop : ‘static” option disables the background when modal is visible

– ‘toggle’ option manually toggles the modal.

That’s about all that we will require in terms of visual components for completing the first functionality- login-logout flow. In the next tutorial we will rig up the UI components with backend to make a complete authentication cycle.

As always, the code for this tutorial(and the next one for that matter) is available on the project github page HERE.

Share Comments
comments powered by Disqus