Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

Wijmo is an awesome tool from ComponentOne. The goal of this tool is to help us web developers rapidly develop MVC applications with interfaces richer than WebForms.

Main Features:

1.Over 30 UI Widgets with everything from interactive menus to rich charts.
2.MVC scaffolding automation. This means that Wijmo generates rich interactive Views and Controllers for your entire Model.

Free Trial DownLoad: http://www.componentone.com/SuperProducts/StudioMVCWijmo/

In this review we'll take a look at Wijmo HTML Widgets and enhanced scaffolding feature.

PART 1: Looking at UI Widgets

STEP 1:

Fire up Visual Studio 2010 and Select -> New Project. Under Installed Templates -> Visual C#, select ASP.NET MVC 3 Wijmo Application

Name the project as you like but in this demo I'm going to name it as "MVC3Wijmo".

Now click OK to generate the default files for you. See below screen shot for a better look.




Since we are using the optimized ASP.NET MVC 3 Wijmo Application project you'll notice that it uses Wijmo controls for the default IU, and the necessary Wijmo assemblies are already referenced in the application's _Layout.cshtml page. Here's the page that I'm talking about:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/themes/sterling/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-open.1.2.0.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.1.2.0.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/raphael.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.1.2.0.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.1.2.0.min.js" type="text/javascript"></script>

</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>
                    My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#nav").wijmenu();
            $(".button").button();
            $(":input[type='submit']").button();
            $(":input[type='checkbox']").wijcheckbox();
            $(":input[type='radio']").wijradio();
            $(":input[type='text'],:input[type='password'],textarea").not(":wijmo-wijinputnumber").not(":wijmo-wijinputmask").not(":wijmo-wijinputdate").wijtextbox();
            $("select").not(":wijmo-wijcombobox").wijdropdown();
        });
    </script>
</body>
</html>

As you can see the application already has few widgets laid out in the _Layout.cshtml file. Here's a sample usage below:

<input type="button" class="button" value="Wijmo Button" />

Calling the class "button" will enable the button to become a Wijmo HTML. Take a look the screen shot below for sample comparison.



Can you see the difference? =} Now let's try to play around with some widgets that are not pre-defined in our _Layout.cshtml file. But before that we will update the Wijmo references first via Nuget. To do this just just follow this few steps:

1. Go to Project menu -> Add Library Package Reference.
2. In the Add Library Package Reference diaglog box select Online and then click NuGet official package source.
3. At the upper right corner, type in "Wijmo" in the search field box.
4. You should be able to see the following:




5. Click Install

After installation, you'll notice that additional js files, css files and images will be added within the Content and Script folders of your application:



Now let's go ahead and try some Wijmo wigets. In this demo we'll going to use wijmo tab first. Add the following mark up in your View:

<div id="wijTab">
       <ul>
         <li><a href="#tab0">FIRST</a></li>
         <li><a href="#tab1">SECOND</a></li>
         <li><a href="#tab2">THIRD</a></li>
       </ul>

       <div id="tab0" >
              First tab content.
       </div>
       <div id="tab1">
              Second tab content.
       </div>
       <div id="tab2">
              Third tab content.
       </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $("#wijTab").wijtabs();
    });

</script>

Here's the output when running it on the browser:



We have now a cool and richer tabs in our page. Let's try something else. Let's try Wijmo accordion. Copy this mark up in your view:

<div id="wijAccordion">
        <h1>Header 1</h1>
        <div>Content 1</div>
        <h2>Header 2</h2>
        <div>Content 2</div>
        <div>Header 3</div>
        <div>Content 3</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#wijAccordion").wijaccordion();
    });
</script> 

 

The output would look something like this:



Here's another example using Wijmo Combobox


<select id="wijCombobox">
    <option value="Vinz">Vinz</option>
    <option value="Ianne">Ianne</option>
    <option value="Jeff">Jeff</option>
    <option value="Jhen">Jhen</option>
    <option value="Jhen">Kenneth</option>
    <option value="Jhen">Xhaiden</option>
    <option value="Jhen">Kurt</option>
    <option value="Jhen">Angel</option>
</select>

<script type="text/javascript">
    $(function () {
        $("#wijCombobox").wijcombobox({
        });
</script>

The output would look something like this:


There are some more cool widgets that are available for you such as Calenda, Charts, Diaglog, Expander, Grid, List, Menu, Pager, Progress bar, Slider, Splitter, Tree, Wizard etc.. You can find more details about each widgets here: http://www.componentone.com/SuperProducts/WijmoComplete/


PART 2: Looking at Scaffolding Features:

As you may know scaffolding allows you to quickly create rich Web applications. Scaffolding does all of the work for you by automatically creating your controllers and views, complete with CRUD (create,

read, update, delete) operations and validation. Wijmo further enhances the application with Wijmo widgets and styles. If you are new to ASP.NET MVC then I'd suggest you to look at my previous article here: http://geekswithblogs.net/dotNETvinz/archive/2011/06/03/asp.net-mvc-3-creating-a-simple-sign-up-form.aspx


STEP 1: Creating the Database

For this example I created a simple database called "Demo_DB.mdf" and added it into the application's App_Data folder and use it as our database.

If you don't have a database installed then you can add a reference to EntityFramework.SqlServerCompact library. Adding this library allows you to define the object model without having any database, and when you run the project, the database will be dynamically created.
To do this just:

1. Right click on the project name and select "Add Library Package Reference"
2. Under installed Packages, select Online and type in "EntityFramework.SqlServerCompact" in the search field box.



3. Click install and when it's done click Finish
4. Click Close and in the Solution explorer, right-click the project name and select Build to make sure the object model is compiled.


STEP 2: Adding the Model

I'm going to use Entity Framework as our Data Access mechanism so that we can program against the conceptual application model instead of progamming directly against  our database. Before we add the EDMX file lets create a "DB" folder within the "Model" folder first and then add the EDMX file there. To add the EDMX file just

1. Right-click on the "DB" folder, select Add -> New Item
2. Select ADO.NET Entity Data Model and then click Add
3. Select "Generate from Database" and then click Next
4. Click Next again and under Table select the table that you want to use. In this case I'm going to select the "Music" table as shown below:



5. Click Finish to generate the entity model for you.



What happend there is that EF will automatically generates the Business object for you within the Entity Data Model(EDM) that we have just created and let you query against it.The EDM is the main gateway by which you retrieve objects from the database and resubmit changes.

STEP 3: Adding the View Model

Just to recap Entity Framework will generate the business objects and manage Data Access within the application. As a result, the class Music is automatically created by EF and it features all the fields in the database table as properties of the class.

I don't want to use this class direclty in the View so I decided to create a separate class so that I can have a full control over it. Now let's add a the MusicModel class by right-clicking on the "Models" folder then select Add -> Class. Here's the code block for the "MusicModel.cs" class.

 


using System;
using System.ComponentModel.DataAnnotations;

namespace MVC3Wijmo.Models
{
    public class MusicModels
    {
       [Required]
        public string Title { get; set; }
       [Required]
        public string Artist { get; set; }
        [Required]
        public string Genra { get; set; }
        [Required]
        public DateTime Year { get; set; }
       [DataType(DataType.MultilineText)]
        public string Description { get; set; }

        [Range(0, 10), UIHint("IntSlider")]
        public int Rating { get; set; }
    }
}

Noticed that I added the Required and some other attributes for each property in the class. This attribute is called Data Annotations. Data annotations are attribute classes that lives in the System.ComponentModel.DataAnnotations namespace that you can use to to decorate classes or properties to enforce pre-defined validation rules.

STEP 4: Adding the Controller

1. In the Solution Explorer, right-click the Controllers folder and select Add -> Controller. The Add Controller dialog box opens.
2. Enter a Controller name, for example, MusicController. Click Add to generate the file. The file should look something like this:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC3Wijmo.Controllers
{
    public class MusicController : Controller
    {
       //
        // GET: /Music/
        public ActionResult Index()
        {
            return View();
        }
    }
}



3. Right Click on the Index() method and select Add View. The Add View diaglog box opens.
4. Check "Create stronly types view" and select the "MusicModel" class
5. Under Scaffold template, select "Create"
6. Check "Use a layout" and then browse the _Layout.cshtml file.
7. Click Add to generate the file.
8. Running the page will give you this cool and slicker UI in the browser.





Cool isn't it? =}


REFFERENCES AND DOWNLOADS:

 

http://www.componentone.com/SuperProducts/StudioMVCWijmo/
http://www.componentone.com/SuperProducts/WijmoComplete/
http://www.componentone.com/SuperProducts/WijmoScaffoldingMVC/


All I can say is that I'm really impressed with this UI Tools. It saves lots of time in developing your UI (especially if you are not that good in UI development) and it provides more flexibilty, interactive views and richer UI to make your page slicker. Thanks to ComponentOne team and Geekswithblogs team for giving me the opportunity to utilize this cool components. It's really Awesome!!! =}

Hope someone find this post useful!

Technorati Tags: ,,
Posted on Monday, August 22, 2011 6:08 PM ASP.NET | Back to top


Comments on this post: Product Review - ComponentOne Studio for MVC Wijmo

# re: Product Review - ComponentOne Studio for MVC Wijmo
Requesting Gravatar...
It is very nice post. Thank for sharing.

what are the advantages in sqlserver compact 4.0 as compare to .mdf database ?

Left by Chandradev on Aug 22, 2011 11:52 PM

# re: Product Review - ComponentOne Studio for MVC Wijmo
Requesting Gravatar...
sharing is really very nice, used it for this product
Left by Free Download on Dec 06, 2011 12:42 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net