Thursday, June 30, 2011

Hot to add custom functionality to user interface form

Introduction

One of common limitations of code generators is the inability for add custom functionality to automatically generated code, and if done, usually loss their integration with the generated code.

The  SFS Tools are totally different to other code generator  in this aspect, because allow a good integration between the generated code and the custom code.

In this tutorial we will add functionality to the user interface using the javascript framework: jquery (http://www.jquery.com ).

This is a ASP.NET MVC application, and ASP.NET MVC is highly dependent of javascript for add functionality. Learn the basics of jquery is minimal effort, and the benefit is great.

Pre-Requisites

  1. Create a sample application.
  2. Understand how to extend a entity for generation code.

Steps

Configure the entity and generate code

  1. In the entity file configuration “Contact”: “Contact.sfsedmx”, add the node “CustomProperties” and add the custom property “UIHeaderInclude” with the value “true” and save the changes.
    image
    This property allow add custom content in the head, in this case on the form  .aspx(<header></header>) and in the start of the form  ascx.

Create the file for add code manually

  1. See that file  “CreateGen.aspx” in the views folder  “Views/Contacts” of the presentatrion project “SFS.AventureWorks.Web.Mvc” not contains the next inclusion:
    <% Html.RenderPartialIfExist("HeaderContact", Model); %>
    image
  2. Regenerate the code of the presentation layer and see that now exists a new line with code in the form  CreateGen.aspx: The Framework hopes to find (maybe) a partial view called “HeaderContact.ascx”.
    image
  3. Now, Add the partial view with right click in the folder “Views / Contacts” and select “Add / View…” and in the window write  in the field “Vew name”: “HeaderContact”  and select the option “Create a partial view (.ascx)”.
    image   image

Adding code manually



  1. Identify the elements to add actions. Go to browser (IE), navigate to “SFSAdventureWorks/Contacts/CreateGen” and open the Developer Tools Window (Press F12).
  2. From the tab  HTML select the pointer tool.
    image
  3. Identify the three elements to add actions in this sample. The element checkbox: “NameStyle”, the container  “dcTitle” and the text field “MiddleName”.
    image
      image  image
    You may not need to do this inspection, if you know exactly the properties involved in functionality. It should be noted that the container (Of the label and the input field) start with “dc”.
  4. In the partial view “HeaderContact.ascx” add the functionality in javascript:
    image
    The content file:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <% if (Request.Url.ToString().Contains("CreateGen"))
    { %>
    <script type="text/javascript" >
    $(document).ready(function () {
    $("#NameStyle").change(
    function () {
    if ($(this).attr("checked")) {
    $("#dcTitle").hide();
    $("#MiddleName").val("this is a test");
    } else {
    $("#dcTitle").show();
    $("#MiddleName").val("");
    }
    });
    });

    </script>
    <% } %>

  5. More help about jquery use: http://docs.jquery.com/Main_Page.
  6. Build the applciation SFS.AdventureWorks.Web.Mvc and refresh the window in the browner “SFSAdventureWorks/Contacts/CreateGen”. Test the functionality with click in the checkbox “NameStyle”.
    image  image

Done. Now they can continue making changes, regenerating the code again and again and the file with the custom content “HeaderContact.ascxwill not be affected.


Conclusion


With the SFS Tools is easy to add custom code in separated files, these files are integrated on the runtime.


This is an important feature because it eliminates one of the most common disadvantages of the code generators.


You can also check the attribute “Type” with the value: “Include”, witch allows you to add white spaces anywhere on how to add completely custom code with the same advantages.

2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.
    I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.
    If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete