Badblog

welcome to our blog

We are Learncodz.


Posts

Comments

The Team

Blog Codz Author

Connect With Us

Join To Connect With Us

facebook
twitter
google +
youtube
flickr

Portfolio

Visual Studio

Search Post by Codz Category

You are here : Home »

  • Software Requirements

    I wanted a non-trivial project to demonstrate this process, because I find the devil is in the details. I have often faithfully followed an overly-simple tutorial or introduction to an unfamiliar subject, then discovered that the tutorial did not prepare me for when you want to do something even slightly difficult. So, in this tutorial we'll be attempting to marry Knockout.js and jQuery UI. We will also be using a JSON file with a hierarchy of data to define a menu. We will use a Knockout.js template with a foreach binding which loops through the JSON data to emit a hierarchy of ul elements to act as the HTML markup for a menubar compatible with jQuery UI.
    Sadly, the menubar is not yet available (versions 1.9 or 1.10) bundled with jQuery UI, so you need to download the menubar files from the Menubar branch of jQuery UI. You also need the YUI Compressor for minifying your JavaScript source files. For this tutorial, you will need Visual Studio 2012 Express for Web installed. You will also need to download:
    If you're not used to JSON, it's a good idea to visit the JSON website.

    Why MSBuild and Not NAnt?

    If you read my last tutorial Using Ant to Build a JavaScript Library, you might be wondering why this tutorial is not about NAnt. Well, with my shiny new installation of Visual Studio 2012 Express, I would like to try to bring my development under one roof. My absolute favorite IDE for C# Assembly development, for many years, wasSharpDevelop. They moved some years ago from NAnt to MSBuild for SharpDevelop version three. It's finally time for me to follow suit.
    We are no longer using NAnt in our build process, we switched entirely to MSBuild / CruiseControl.NET. And we don't view the ability to depend on the dominant operating system as a step back: it helps reduce the number of moving parts, the different configurations, different user setups.


    #D 3.0 - Dropping NAnt Support: Why?

    Rationale: Why Integrate the JavaScript Build Into the .NET Build?

    For years, for my .NET development, I've worked with three different IDEs simultaneously:
    1. Sharp Develop for my C# assembly development, but I also shoe-horned the JavaScript and CSS concatenate and minify build process into that environment with a specially installed copy of NAnt.
    2. Visual Studio (2005 etc) for the master pages, content pages.
    3. An external editor like Aptana to handle JavaScript development.
    Using three IDEs like this was exhausting (and surprisingly taxing for my CPU and RAM), so another new year's resolution is to bring everything together into Visual Studio. Hence the need to understand how to integrate my JavaScript build process into the overall project build.
    One of the major draws of MSBuild for me (on Windows platforms) is that it comes as part of .NET itself. That means that any Windows machine that is up-to-date with Windows Update will have MSBuild available.


    Comparison of NAnt and MSBuild on StackOverflow.

    Setting Up Your Environment

    Open a new project in Visual Studio 2012 Express. I've called it NetTutsMSBuildJsand I've created it inside my NetTuts folder here: C:\NetTuts\MSBuildJs.

    New Project Dialog Box

    As you can see in the screenshot, I have created a number of folders as follows:

    js_folders

    FolderContents
    cssProduction release versions of jQuery UI CSS files. For this tutorial, we're using the smoothness theme.
    debugVarious versions of the Default.aspx web form page for debugging purposes.
    debug-jsThree folders: concat, min and src.
    jsProduction release versions of jQuery, jQuery UI and Knockout.
    jsbuildAn XML build file with all the tasks needed for the JavaScript build and a copy of the YUI compressor.
    jsonThe key JSON file menubar-data.json which has the data needed to build the menubar. Also the JSON files used to populate the page according to the user's menu choices.
    Notice some of the folders are greyed out. This is because I've excluded them from the project. You can toggle this setting from the context menu:

    exclude_from_project

    It's easy to delete and create directories during the build process, but there's no way to include or exclude items programmatically from the project. The concat and min folders in debug-js are disposable, generated automatically by the build process from whatever you've created in the src folder, so it's appropriate to exclude them from the project. Note, you can't exclude the debug folder from the project because it contains .NET web form pages that have code-behind files. If you exclude the folder, the web form pages throw errors saying that the classes defined in the code-behind files can't be found.

    show_all_files

    You can toggle whether these excluded objects should be shown by going to the Show All Files icon at the top of the Solution Explorer and clicking. I always want to be able to see them.
    There's one more key piece of configuration we need for this project. IIS and the built-in IIS Express don't include a JSON mime type by default, and we will be using JSON files extensively to deliver content, so we have to add that to the Web.config file. Within theconfiguration element add a system.webServer element like this:

    The JavaScript Project: Building a Menubar Using JSON, Knockout and jQuery UI

    The focus of this tutorial is on how to build a JavaScript project within a .NET project, but we can't go any further until we have something to build, so now let me explain the slightly ambitious project I have in mind.
    Here's a UML component diagram showing all the pieces that the project will need. Please note this is a comprehensive component diagram from a developer's point of view showing all sorts of disposable artifacts that are only important, for instance, for debugging. It's not a component diagram of only the key artifacts needed for the target system.

    Component Diagram

    A component diagram defines the composition of components and artifacts in the system.
    IBM: Component Diagrams
  • In UML 2.0, "component" is used to describe a more abstract idea: autonomous, encapsulated units; "artifact" is used to describe what I'm showing in this diagram: files and libraries. It's an ideal diagram to show how the various files depend on each other. For instance, all the web form pages depend on the Main master page. The js.buildfile won't work if the compressor jar file is not present. The project file and thejs.build file are, annoyingly, mutually dependent. If the js.build file is not present, the project will not load; js.build can't run alone, the tasks defined there are triggered by the AfterBuild event in the overall project build.
    For this tutorial, I want to display a horizontal menubar using the menubar branch of jQuery UI. To do that, I have a JSON file with the hierarchical data for the menu and a Knockout.js template looping through this data to render the
    HTML markup needed by jQuery menubar. I've added a callback function renderMenuwhich is fired by the afterRender event in the Knockout template. renderMenu then simply makes a call to menubar to finally render the menubar with all the lovely jQuery UI shiny features.

    Step 1: The Production Release Files

    CSS

    Download the full bundle from jQuery UI including a theme of your choice. After unzipping your download, drill down to the folder called css where you'll find a folder with the name of your chosen theme. In my case, I've chosen smoothness. Open that folder and you should see the files you need:

    jquery_ui_css

    Copy the whole theme folder (smoothness) and paste it into your css folder in the project. Come back to Visual Studio, click the refresh icon at the top of the Solution Explorer and the smoothness folder should appear in the css folder. You should include the folder in the project as well.
    In addition to jQuery UI and a specific theme, you also need the small CSS file specifically for the menubar. After downloading the menubar project from github, drill down to the jquery.ui.menubar.css file following this path: \jquery-ui-menubar\themes\base\jquery.ui.menubar.css. Copy that to the css folder of your project.

    JavaScript

    Download up-to-date versions of production releases of jQuery, jQuery UI and Knockout. I'm using 1.8.2 for jQuery, 1.9.2 for jQuery UI and 2.1.0 for Knockout. Copy them to the js folder in your project.
    You'll also need the latest, uncompressed release of jquery.ui.menubar.js, downloaded from the Menubar branch of the jQuery UI project. Copy that to the debug-js\src folder in your project.

    The Main Master Page

    We're creating several versions of the same page to help debug and test our JavaScript. The master page can of course help to prevent duplication of code. Call this master page Main.Master.

    add_new_master_page

    Leave the title element blank (we'll define the title for each page that uses this master) and link to all the stylesheets we need for jQuery UI and the menubar:
    Add a ContentPlaceHolder just before the end of the body where each page will link to the relevant JavaScript files

    Step 2: The JSON Definition of the Data Needed for the Menubar

    Here is the JSON object defining a menubar that we might use for an English Instructors' website. Create a JSON file called menubar-data.json in the json folder and populate it with the following JSON.
    Top-level nodes have no URL property defined, so when clicked, they will just display sub-menu items. The sub-menus contain nodes with the URL property defined. When you click one of these nodes, the system will retrieve the JSON data from the file at that URL.
    Each JSON file linked to, in the menubar, contains some content in a simple structure defining a header and some text:

    Step 3: The Knockout Template for the Menubar

    We define this in Main.Master. There is no obvious way of minifying or improving on it for deployment so I want to re-use it with every version of the pages that link to the master page.
    I wanted to have just one Knockout template to render the HTML markup (a set of nested ul elements) for the menubar, but not surprisingly the afterRender event associated with the foreach binding fires with every loop, not at the end of the whole rendering process. So, I needed to create an observableArray with only one ulelement, bind that to a Menu template which renders the outermost ul element, and nest the menubar template inside it. I can then handle that single foreach event with my function renderMenu, which calls the jQuery menubar constructor and renders the menubar in all its glory. I got a lot of help on this from this thread: nested-templates-with-knockoutjs-and-mvc-3-0.
    Here is the menu template:
    And here's the node template for each node of the menubar:
    You then need a div element which you bind to MenuTemplate:
    Notice that the node template uses containerless control flow syntax, which is based on comment tags. There are a few things going on here, so let me explain
    In the fully rendered jQuery menubar, I want to attach a handler to the select event. The handler has the signature event, ui. When you click a menubar item, the handler is passed the event object and a jQuery object representing the item. To get the text from the ui object, we can call the text method ( ui.item.text() ). But how do we get the url property from the underlying JSON? That is a little bit trickier and I explain it later when we look at the select function triggered by the click event on each sub-menu item and the custom binding addData attached to the li element in the Knockout template.
    Finally you just need a div element where we can display the content retrieved from the JSON data files:
Subscribe to: Posts (Atom)

Comments

The Visitors says

Copyright © 2014, Badblog Allrights Reserved

Published By Kaizen Template - Support KaizenThemes
Download Free Software Latest Version