WEBLIGHT 2.00 OpenSource Component Library for MVC.NET 3 and 4

• Download Source Code + Mp4 Video (please download both files)

Note: To run this source code, you need to install following Framework /RDBMS:

• SQL Express 2008
• MVC.NET 3 or higher
• MS VISUAL STUDIO 2010

The only thing left to do is you have to run the system by pressing F5. Please take a look at the existing projects, Views, and Models. I recommend you to take a look the In WebTest project: Views in Areas, specifically the Messenging area and models in the other project named WebLightsModels, and BL directory.

These are will show how to write a product with 10% of the code required in other systems, is more reliable, is a higher quality of code, and finally, an actual high quality application.

What We Did

If you read my last two articles

www.codeproject.com/Articles/330172/OPEN-MVC-PLUS-ENTITY-FRAMEWORK-XML-DBplusWEBLIGHT

http://www.codeproject.com/Articles/189276/MVC-PLUS-for-MVC-NET-3-00

These components are DB Aware so you have no code in most cases and you must focus on your business layer. Separation of layers matters because my concept was to create a very reliable architecture.

On the server side we create MVC Plus which has it’s own ORM model, plus easy way to connect to any other respository such as Entity Framework, or NHibernate, or Hiberbate in Java. In .NET we have MVC which is our base architecture to make a 100% compatible system. We engineered the system and worked hard to create our own extensions so now the new framework is born and you can use it.

We created the sample with the following steps. First we designed the DB based on Domain Model using ER STUDIO 8.0 from Embarcadero.

We had a simple scenario for our sample. We create Persons, where each person might have one or more User ID and they can have an organization position. We also had a Mail Box for incoming messages, though we didn’t want to do it through 100% code less (meaning of hard code) especially in DB Tier. So instead we created our first sample using a non experienced developer. We taught her (in couple of days) how code with our system. She had a little experience (for example, she knew what style sheet meant) since she had bachelors in computer science and with our advice she was able to create this sample within 8 hours. She had 5 Forms,  she didn’t use our Visual Studio Extensions to create automated codes and she had to do the code through her own experience with manual coding. The same scenario will take much less time (2 hours) if you do them through our visual studio extensions.

MVC PLUS .NET and WEBLights is a 100%  standard MVC.NET library so you have to install MVC.NET 3.00 to run the sample + MSSQL Express 2008 (Version 10.0.2531 or higher)

Steps to create a program:

First, Create a New MVC PLUS Business Project from project templates.

Right click on BL folder, Add A Domain, and this will create the following folders with the following structure in BL directory:

• Models
• Service
• Policies
• Repository

Right-click on models and add your model, Add A Model, choose your database and select Table(s) and Fields you want to have in your model. The system will create select commands if necessary, and also you might have stored procedures or text for 18 different commands. In this article will tell you how to manage your models.

For example, for MessageBoxes you have the following code in your file.

namespace WEBLightsModels.BL.Messenging.Models
{
    [WLMORecursiveModel(Alias = "MessageBoxID=RecursiveID", StepLoadRecursive = false)]
    [WLMOTableInfo("MessageBox")]
    publil partial class MessageBox : BaseModel<MessageBox>
    {
        [WLFField(DBFieldName = "MessageBox.MessageBoxID"),
         WLFDisplayName("Box ID", Language = WLLanguages.Default)]
        public int? MessageBoxID
        {
            get { return this["MessageBoxID"]; }
            set { this["MessageBoxID"] = value; }
        }
        [WLFField(DBFieldName = "MessageBox.RecursiveID"),
         WLFDisplayName("Box ID", Language = WLLanguages.Default)]
        public int? RecursiveID
        {
            get { return this["RecursiveID"]; }
            set { this["RecursiveID"] = value; }
        }
        [WLFField(DBFieldName = "MessageBox.Caption"),
         WLFDisplayName("Caption", Language = WLLanguages.Default)]
        public string Caption
        {
            get { return this["Caption"]; }
            set { this["Caption"] = value; }
        }
        [WLFField(DBFieldName = "MessageBox.Name"),
         WLFDisplayName("Name", Language = WLLanguages.Default)]
        public string Name
        {
            get { return this["Name"]; }
            set { this["Name"] = value; }
        }
        [WLFField(DBFieldName = "MessageBox.IsDefault"),
         WLFDisplayName("Name", Language = WLLanguages.Default)]
        public bool? isDefault
        {
            get { return this["IsDefault"]; }
            set { this["IsDefault"] = value; }
        }
        public MessageBox(WLBaseMetaModel metamodel, string name, string profile)
            : base(metamodel, name, profile)
        {
        }
        public MessageBox(WLModel<MessageBox> baseModel)
            : base(baseModel)
        {
 
        }
    }
}

In the meanwhile, this generate an XML file which contains the XML information of the model in your ModelXMLData Folder.

What are Next  Steps?

In your opened MVC PLUS Template Project add an area. Now add a controller and then in Models Directory add MVC Plus MetaModel. Now add your allocated models and make their relations. For example, Master/Detail and add required options to them.

A Sample MetaModel.

namespace MVCWebTest.Areas.Messenging.Models
{
    [WLMMDisplay("Messages", Hint = "Messages")]
    [WLMMWindow(Width = "800", Height = "600")]
    public class MessageViewIndex : WL.Web.Model.WLMetaModel<MessageViewIndex>
    {
        [WLMOAutoCreate]
        public WEBLightsModels.BL.Messenging.Models.MessageBody MessageBody { get; set; }
        [WLMOAutoCreate]
        [WLMOConnectModels("MessageID=MessageID", "MessageBody")]
        public WEBLightsModels.BL.Messenging.Models.Messages Messages { get; set; }
 
        [WLMOAutoCreate]
        [WLMOConnectModels("MessageBoxID=MessageBoxID", "Messages")]
        public WEBLightsModels.BL.Messenging.Models.MessageBox MessageBox { get; set; }
    }
}

Next step: Add A MVC PLUS VIEW to your views. Wwrite down your client side code.

View Razor Code:

using WL.Web.UI
@using WL.Base.Types
@using WL.Web.UI.Components
@using WL.Web.UI.Components.Tree
@model MVCWebTest.Areas.Messenging.Models.MessageViewIndex
@{
    Layout = "~/Views/Shared/_InternalLayout.cshtml";
}
@using (@Html.View(Model))
{
}
@using (Html.WLPanel("BoxesPanel", "Boxes Panel", dockAlign: WLDockAlign.Left, htmlAttributes: new { style = "width:200px" }))
{
    @Html.WLNavigatorFor(m => m.MessageBox, "Navigator", dockAlign: WLDockAlign.Top)
    using (var dc = Html.WLTreeFor(m => m.MessageBox, "MessageBoxTree", captionField: "Caption", showLines: true, htmlAttributes: new { style = "height:90px" }, dockAlign: WLDockAlign.Client, treeType: WLTreeType.Tree))
    {
    }
    using (Html.WLPanel("BoxesEditPanel", "Boxes Edit Panel", dockAlign: WLDockAlign.Bottom, htmlAttributes: new { style = "height:150px" }))
    {
    @Html.WLTextEditFor(m => m.MessageBox.Caption, showCaption: WLPosition.Top)
    @Html.WLTextEditFor(m => m.MessageBox.Name, showCaption: WLPosition.Top)
    }
}
@using (Html.WLPanel("MessageView", "MessageVoew", dockAlign: WLDockAlign.Client))
{
    using (Html.WLGridFor(m => m.Messages, "PersonGrid", dockAlign: WLDockAlign.Client, activeView: "DEFAULT", htmlAttributes: new { style = "height:400px" }).SetPageSize(6).SetUsePaging(true))
    {
 
    }
    using (Html.WLPanel("MessageView", "MessageVoew", dockAlign: WLDockAlign.Bottom, htmlAttributes: new { style = "height:400px" }))
    {
        using (Html.WLPanel("MessageViewTop", "MessageVoew", dockAlign: WLDockAlign.Top, htmlAttributes: new {style = "height:50px;background-color:silver"}))
        {
 
        }
        using (Html.WLPanel("MessageHtmlView", ""))
        {
            @Html.WLDivViewFor(m => m.MessageBody.Message)
        }
    }
}

Download the sample and let me know if you have any opinions on this technology in the comments below.

Here is the welcome page in the sample, with the unpinned panel in right side and other panels are pinned.

The Persons Editor Page Opened In TAB, a complex layout model inside and a master detail scenario inside.

Persons Editor Page Opened in an internal Window, you can maximize this internal window, hibernate it (Web Hibernation technology ) or minimize it.

Users Window Opened in TAB.

Organization Structure Editor Opened in an internal Tab

Messages Opened in a tab.