The Advantage of Being a OO Developer – The jQuery ASP.NET to WPF experience

Many of us developers have experienced the pain of accepting whatever our clients want (CHANGES). Some of us accept it negatively and some of us do accept it with passion (and i am one of those developers). Last Wednesday, I was told that the online version of my application due to network problems had shown some unusual behavior. The performance was affected, fetching of data became slow including the saving process of those information was heavily affected. Due to the current situation, my boss proposed a solution that would solve the problem. And the answer was an offline version of the online system. The objective was, whenever the system is not connected to the network, the application must access an offline copy of the system’s database, and whenever an internet connection is detected by the application, 1.) the local copy must be updated and 2.) the user must be informed whether he has some un-submitted records which needs to be saved to the server. With the objective on-hand, I told myself, thank God, I can just consume the methods and functions exposed by my BO Layer.

Before everything else, let me show you the UI  transformation which took 1 day, from ASP.NET with jQuery to WPF. Of course it took another 8 hours for making the application work. A programmer can simply create a new object that inherits many of its features from existing objects. This makes object-oriented programs easier to modify.

The jQuery,ASP.NET and C# version

cyber_jquery

The WPF with C# version.

cyber_wpf

How did I convert the application? – Take advantage of the OO principles.

OO by definition

One of the principal advantages of object-oriented programming techniques over procedural programming techniques is that they enable programmers to create modules that do not need to be changed when a new type of object is added.

With the definition above, I did change the User Interface but never changed the code that made the application do its purpose.

The Design

Architecture

The Code.

Note: The code shown below is an example of binding records, in the case of ASP.NET and jQuery we used JSON, for WPF, we used ADO.NET’s DataTable.

ASP.NET and jQuery


$("#btnRetrieveList").click(function() {
 HideDrps();
 document.getElementById("drpBrandForSellout").style.visibility="hidden";
 document.getElementById("drpCategoriesForSellout").style.visibility="hidden";
 ModalPopupsIndicator2("Fetching Data...");
 totalCount=0;
 $("#divListOfModels").html("");
 scroll(0,0);
 var brandid=$("#drpBrandForSellout").attr("value");
 var categoryid=$("#drpCategoriesForSellout").attr("value");
 $.getJSON('ModelsForSelloutHandler.ashx?brandId='+brandid+'&categoryId='+categoryid,function(mymodellist) {
 var chkId=0;
 $.each(mymodellist,function() {
 $("#divListOfModels").append("<div id='divModel"+chkId+"' style='float: left; position: relative; width: 960px;'><div style='float: left; position: relative; width: 50px; text-align: center;'>"+
 "<input type='checkbox' onclick='ChangeBack("+chkId+");' name='chkModel"+chkId+"' id='chkModel"+chkId+"'/></div><div style='float: left; position: relative; width: 150px; text-align: left;'>"+
 this['cnmodelname']+"<input type='hidden' id='hdnModelName"+chkId+"' value='"+this['cnmodelname']+"'></div><div style='float: left; position: relative; width: 80px; text-align: left;'>"+
 this['cnbrandname']+"</div><div style='float: left; position: relative; width: 90px; text-align: left;'>"+
 this['cncategoryname']+"</div><div style='float: left; position: relative; width: 90px; text-align: left;'>"+
 "<input type='text' name='txtSeloutQty"+chkId+"' id='txtSeloutQty"+chkId+"' style='text-align:right;width:80px; border-style:solid; border-color:silver; border-width:1px; padding:2px; font-family:verdana; font-size:11px;'/></div><div style='float: left; position: relative; width: 90px; text-align: left;'>"+
 "<input type='text' name='txtInvQty"+chkId+"' id='txtInvQty"+chkId+"' style='text-align:right;width:80px; border-style:solid; border-color:silver; border-width:1px; padding:2px; font-family:verdana; font-size:11px;'/></div><div style='float: left; position: relative; width: 90px; text-align: left;'>"+
 "<input type='text' name='txtSKUDisp"+chkId+"' id='txtSKUDisp"+chkId+"' style='text-align:right;width:80px; border-style:solid; border-color:silver; border-width:1px; padding:2px; font-family:verdana; font-size:11px;'/></div><div style='float: left; position: relative; width: 90px; text-align: left;'>"+
 "<input type='text' name='txtSKUBU"+chkId+"' id='txtSKUBU"+chkId+"' style='text-align:right;width:80px; border-style:solid; border-color:silver; border-width:1px; padding:2px; font-family:verdana; font-size:11px;'/></div><div style='float: left; position: relative; width: 90px; text-align: left;'><input name='txtSelloutRemarks"+chkId+"' id='txtSelloutRemarks"+chkId+"' type='text' style='width:180px; border-style:solid; border-color:silver; border-width:1px; padding:2px; font-family:verdana; font-size:11px;'/></div></div><div style='float: left; position: relative; width: 960px; height:1px; overflow:hidden; background-color:silver;'></div>");
 chkId=chkId+1;
 totalCount=totalCount+1;
 });
 CloseIndicator();
 });
 });

— The IHttpHandler for ASP.NET


public class ModelsForSelloutHandler : IHttpHandler {

 public void ProcessRequest(HttpContext context) {
 //drpCategories.DataSource = m_boSelloutEntry.GetCategories(1, Convert.ToInt32(drpBrands.SelectedValue));
 //drpCategories.DataBind();

 int brandId = Convert.ToInt32(context.Request.QueryString["brandId"]);
 int categoryId = Convert.ToInt32(context.Request.QueryString["categoryId"]);

 Sellouts boSelloutEntry = new Sellouts();
 DataTable dtModelsForCart = boSelloutEntry.GetModelsForCart(brandId, categoryId);

 System.Text.StringBuilder sbModelsForCart = new System.Text.StringBuilder();
 sbModelsForCart.Append("[");

 for (int i = 0; i < dtModelsForCart.Rows.Count; i++) {
 sbModelsForCart.Append("{");
 sbModelsForCart.Append("\"cnmodelid\":\"" + dtModelsForCart.Rows[i]["cnmodelid"].ToString() + "\",");
 sbModelsForCart.Append("\"cnmodelname\":\"" + dtModelsForCart.Rows[i]["cnmodelname"].ToString() + "\",");
 sbModelsForCart.Append("\"cncategoryname\":\"" + dtModelsForCart.Rows[i]["cncategoryname"].ToString() + "\",");
 sbModelsForCart.Append("\"cnbrandname\":\"" + dtModelsForCart.Rows[i]["cnbrandname"].ToString() + "\",");
 sbModelsForCart.Append("\"cncategoryid\":\"" + dtModelsForCart.Rows[i]["cncategoryid"].ToString() + "\",");
 sbModelsForCart.Append("\"cnbrandid\":\"" + dtModelsForCart.Rows[i]["cnbrandid"].ToString() + "\"");
 sbModelsForCart.Append("},");
 }
 string sr = sbModelsForCart.ToString().Remove(sbModelsForCart.Length - 1, 1) + "]";

 context.Response.ContentType = "application/json";
 context.Response.ContentEncoding = System.Text.Encoding.UTF8;
 context.Response.Write(sr.ToString());
 context.Response.End();
 }

 public bool IsReusable {
 get {
 return false;
 }
 }
 }

WPF


void btnGetModels_Click(object sender, RoutedEventArgs e) {
 dgInfraModelList.DataSource = boSellouts.GetModelsForCart(Convert.ToInt32(drpBrandForSellout.SelectedValue), Convert.ToInt32(drpCategoryForSellout.SelectedValue)).DefaultView;
 }

If you’ll notice, we have lots of lines from our ASP.NET version that’s because we used jQuery and created an on the fly Tabular list of records. In the case of our WPF version we did not convert our datatable to JSON. Either way, we still called  GetModelsForCart() function (from our BOLayer) both for our ASP.NET and WPF version.

Conclusion

We can do more by reusable objects. Please watch out for my next post, because I am going to start posting about animations on silverlight and WPF.

Advertisements

2 thoughts on “The Advantage of Being a OO Developer – The jQuery ASP.NET to WPF experience

Add yours

  1. Wow, fantastic weblog format! How lengthy have you ever been blogging for? you made running a blog look easy. The total glance of your web site is fantastic, as well as the content!

  2. Undeniably consider that that you said. Your favorite justification appeared to be
    on the web the easiest factor to remember of. I say to you, I certainly get annoyed even as other folks consider concerns that they just don’t recognise about. You managed to hit the nail upon the highest and also outlined out the whole thing with no need side effect , other people can take a signal. Will likely be back to get more. Thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: