Building Enterprise HTML5 Application

Step 2) The Sub Views

In this step we will create the two first sub views with some sample data. There will be no interaction yet. The result of this first step will look like this:

Tutorial 02 - Source | Demo

New files

In this step, we are going to add two sub-views ProjectListNav and ProjectView.

  • Views' .js, .css, .tmpl: We will add the ProjectListNav and ProjectView, .js, css, and .tmpl (html templates) files in their respective directory.
  • js/main.js: as with main.css, the convention is to include the first application js (usually name main.js) file after libraries but before View js files. main.js is a great place to expose application wide data and utilities.
  • .css and .tmpl auto loading: Note that since we setup brite to auto load .css and .tmpl files in the previous steps, we do not need to include them in the index.html
  • .js auto loading: Note that brite will always attempt to automatically load the View .js file if the view has not been registered already. This way, if the files are already included (e.g., concatinated and minimized in a prod environment), then brite won't load them (since the view will be already registered), but for development, we can just not inlude them, and brite will automatically load them when needed.

MainView to add subviews

To add the other two Views to the MainView view, we can implement another View method, the postDisplay, and just call the brite.display(...) to display the ProjectListNav and ProjectView views.

js/MainView.js

brite.registerView("MainView",{emptyParent:true},{
  
  create: function(){
    return render("tmpl-MainView");
  },
  
  // Called after the view is displayed to the user
  postDisplay: function(){
    var view = this;
    
    // Display the two sub-views
    brite.display("ProjectListNav",view.$el.find(".MainView-left"));
    brite.display("ProjectView",view.$el.find(".MainView-projectViewPanel"));
  }
    
});

Because brite manages the Views' lifecyle, after calling the create method, brite add to the View's instance the .$el property, which is the top jQuery wrapped HTML element of the view (element returned by its create method), and .id property, which is a unique id for this view which can be used for namespacing event bindings.

Sample Data Set

Before implementing the two sub views, we need some data. For this step, we will create some temporary simple data set in the main.js for each entity type. It is important to have well structured data set (i.e. normalized) so that your UI code assume a production like dataset from the start.

js/main.js

....  
  main.projectListTestData = [
    {id:"001",title:"Grocery List"},
    {id:"002",title:"House Remodeling"},
    {id:"003",title:"Learn HTML5"},
    {id:"004",title:"Learn Brite"}
  ]
  
  main.taskListTestData = [
    {id:"101",projectId:"001",done:false,title:"Heavy Whipping cream"},
    {id:"102",projectId:"001",done:true,title:"1 Garlic"},
    {id:"103",projectId:"001",done:false,title:"Mushrooms (c├Ępe)"},
    {id:"104",projectId:"001",done:false,title:"Fresh Pasta"}
  ]  

ProjectListNav View

The ProjectListNav view implementation is trivial. Using the wrapper render function with the proto data main.projectListTestData will run the template (below) on the data and display the list of projects.

js/ProjectListNav.js

brite.registerView("ProjectListNav",{

  create: function(){
    return render("tmpl-ProjectListNav",{projects:main.projectListTestData});
  }
  
});

The Handlebars.js template is a simple as the following.

tmpl/ProjectListNav.tmpl (wrapped in script tag)

<div class="ProjectListNav">
  <h2>Projects</h2>
  <ul>
    {{#each projects}}
    <li>{{title}}</li>
    {{/each}}
  </ul>
</div>

The CSS is as trivial, but there is a very important convention to follow. The top view element must have a css class as class="ViewName" as we can see it in the above templates, and the View css files need to scope all their css styles with either .ViewName ___ or .ViewName-___. For example, the ProjectListNav.css looks like this:

tmpl/ProjectListNav.css

.ProjectListNav{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: dashed 1px blue; /* for layout debug */
}

.ProjectListNav h2{
  margin: 0;
  padding: 7px 0 5px 10px;
  line-height: normal;
  font-size: 20px; 
  color: rgba(100,100,100,.5);
}

.ProjectListNav ul{
  margin: 0;
  padding: 0;
}

.ProjectListNav ul li{
  list-style: none;
  margin: 0;
  padding: 5px 0 5px 10px;
  opacity: .8;
  cursor: pointer;
}

ProjectView View

The ProjectView View css, js, and template files are very similar to the ProjectListNav ones.

js/ProjectView.js

brite.registerView("ProjectView",{
  create: function(){
    return render("tmpl-ProjectView",{project:main.projectListTestData[0],tasks:main.taskListTestData});
  }
});

tmpl/ProjectView.tmpl

<div class="ProjectView">
  <header>
    <h2>{{project.title}}</h2>
  </header>
  <section class="heading">
    <label>Tasks</label>
  </section>
  <section class="content">      
    <table class="table">
        {{#each tasks}}
        <tr {{#if done}}class="done"{{/if}}>
          <td class="title">{{title}}</td>
        </tr>
        {{/each}}        
    </table>
  </section>    
</div>

css/ProjectView.css

.ProjectView {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: dashed 1px green; /* for layout debug */
}
.ProjectView header{
  padding: 5px 20px 5px 20px;
  height: 60px;
}

.ProjectView header h2{
  color: #999;
  letter-spacing: .1em;
  margin: 0;
  font-size: 23px;
}
Step 1 - The First View Step 3 - Adding Dao

Ask, learn, share about brite.js

Go to brite.js G+ community