Testing WCF Services with WCFTestClient

This is for those who dont know this Add-in tool yet which is very usefull when it comes to developing WCF services. I’ve been searching for this Add-In since, luckily I had a Team Lead which is not that selfish in terms of knowledge sharing. So I will do the same for those who has problems debugging their wcf service.

Okey here are the steps.

1.) Locate the add-in which resides on your installation path under \Microsoft Visual Studio 9.0\Common\IDE\WcfTestClient.exe

IE: C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\WcfTestClient.exe

2.) Add WCF TestClient to your External tools under Tools > External Tools menu of VS 2008. Under the Command field, copy and paste that path of the WCFTestClient.exe. And you name the tool in the Title field like the image you see below.

Debugging Example

1.) Build your project containing the wcf service.
2.) Launch the WCTTestClient which will appear under the Tools menu of Visual Studio 2008 after adding in the external tools.

3.) Right-click “My Service Projects” and select “Add Service”

4.) Once the service is successfully added. Your service operations will be listed in the left pane. To test these service operations, just double – click the operation and press invoke.

Any breakpoint(s) in the service method which is invoked will cause a break point after pressing invoke.

Finally, our problem of testing a wcf service has been made easy with Visual Studio 2008’s WCF Test Client.

Embedding a Font at runtime in Silverlight

Most of us wants our RI Application to be flexible as much as possible, and at the same time compatible and is uniform to the resources that we are using. A common example for this scenario is when using a font family that is not commonly installed in the client’s computer. Now you can picture the problem. Lets say, i have a rounded font, which is widely used in all of my xaml pages and it is not pressent in the users machine. Solution? Embed the font to our application. In this article I’ll show you how to achieve that with these few lines of code.

Add your font file as embedded resource to your Siverlight Project.

1. Add font to project.

2. Set Build Action of your font file as Embedded Resource

After adding the font as embedded resource, we can now call the font in a form of a Stream. But before that, lets see the content of our xaml page.

<UserControl x:Class="EmbedFont.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <TextBlock x:Name="txtRoundedFont" FontSize="30" Text="Dont stop learning."/>
  </Grid>
</UserControl>

On our Xaml page we have a TextBlock named txtRoundedFont and by running the application the result will be something like this silverlight page with its default font family

Finally, in order for this to work, we need to add a loaded event on our xaml pages’ constructor.

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

And inside our loaded event will be this three lines of code.

void MainPage_Loaded(object sender, RoutedEventArgs e) {
	System.IO.Stream streamedFont = this.GetType().Assembly.GetManifestResourceStream("EmbedFont.Fonts.VAGRounded-Black_0.otf");
	txtRoundedFont.FontSource = new FontSource(streamedFont);
	txtRoundedFont.FontFamily = new FontFamily("VAGRounded");
}

And here is our new TextBlock with an embedded font.

Now how did we achieve that?
First we have the below statement which loads our embedded font resource and assign that to our streamedFont identifier which is of type System.IO.Stream. Now inside our GetManifestResourceStream function is a string parameter which represents our project name “Embed.” then the folder inside our project “Embed.Fonts.” then the file name “Embed.Fonts.VAGRounded-Black.otf”.

System.IO.Stream streamedFont = this.GetType().Assembly.GetManifestResourceStream("EmbedFont.Fonts.VAGRounded-Black_0.otf");

The second line simply assigns our streamedFont bufferred data to the FontSource property of txtRoundedFont textblock.

 txtRoundedFont.FontSource = new FontSource(streamedFont);

Finally, we have to insert our final statment which sets the font family of our textblock.

txtRoundedFont.FontFamily = new FontFamily("VAGRounded");

NOTE: To know the exact name of a font. Double-click the file and check the font name.

Runtime Animation with Silverlight

As I progress to our game development with Silverlight, I was asked how to animate a UIElement in silverlight 3 from code without using XAML or the Objects and Timeline.

Here is the simplest implementation that I have.

Storyboard myStoryBoard = new Storyboard();
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
Storyboard.SetTarget(myDoubleAnimation, myTargetObject);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath("Opacity"));
myStoryBoard.Completed += (object sender, EventArgs e) =>
{
	//--Animation Completed
};
myDoubleAnimation.From = 1;
myDoubleAnimation.To = 0;
myDoubleAnimation.Duration = new TimeSpan(0, 0, 0, 0, 5000);
myStoryBoard.Children.Add(myDoubleAnimation);
myStoryBoard.Begin();

Lets Inspect the code.

First we created a new instance of StoryBoard class where our animated object resides.

Storyboard myStoryBoard = new Storyboard();

Then we create a double animation for our UIElements’ property with double or numeric value.

DoubleAnimation myDoubleAnimation = new DoubleAnimation();

After creating an instance of double animation, we then set our target object.

Storyboard.SetTarget(myDoubleAnimation, myTargetObject);

We also need to set our target property through this line.

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath("Opacity"));

If we have other things to do after our animation is completed, we have to set the
storyboards Completed event.

myStoryBoard.Completed += (object sender, EventArgs e) =>
{
	//--Animation Completed
};

We need to provide a value also for our animations starting point which is achieved through this line.

myDoubleAnimation.From = 1;

And our destination point or value which is 0. In this case we are actually making a fade out effect.

myDoubleAnimation.To = 0;

Then of course the duration of our animation in milliseconds (1000ms=1s)

myDoubleAnimation.Duration = new TimeSpan(0, 0, 0, 0, 5000);

We are done with setting up our double animation. Its time we add it to our storyboard.

myStoryBoard.Children.Add(myDoubleAnimation);

And finally to begin our animation. We call a descriptive method called Begin();

myStoryBoard.Begin();

That’s it. With this simple implementation we can achieve animations or effects like fade-in fade-out. Or move an object from point a to point b.
My next post would be easing, for smooth animations.

Storyboard vStoryboard = new Storyboard();
DoubleAnimation vDoubleAnimation = new DoubleAnimation();
Storyboard.SetTarget(vDoubleAnimation, cSlotsGrid.Children[i]);
Storyboard.SetTargetProperty(vDoubleAnimation, new PropertyPath(“Opacity”));
if (i == cSlotsGrid.Children.Count – 1)
{
vStoryboard.Completed += (object sender, EventArgs e) =>
{
SlotsShowSecondaryCommon();
};
}vDoubleAnimation.From = 1;
vDoubleAnimation.To = 0;
vDoubleAnimation.Duration = new TimeSpan(0, 0, 0, 0, Convert.ToInt32((double)GetValue(HidePauseMillisecondsProperty) / 2));
vStoryboard.Children.Add(vDoubleAnimation);
vStoryboard.Begin();

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

The WPF with C# version.

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

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.

Dynamic Image Binding in WPF

Yesterday I was asked to deploy a registration system that has a configurable background image. The application was to be developed in WPF. My Solution? Include the filename of the image in the app.config file of the application. So, next time, when a registration system is needed, my fellow teammates or the team that needs the system will just set the location of the background in the config file.

App.config

<?xml version="1.0"?>
<configuration>
 <startup>
 <supportedRuntime version="v2.0.50727"/>
 </startup>
 <appSettings>
 <add key ="imageLocation" value ="front.jpg"/>
 </appSettings>
</configuration>

RegistrationForm.xaml.cs

void RegistrationForm_Loaded(object sender, RoutedEventArgs e) {
 string myPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString() + ConfigurationSettings.AppSettings["imageLocation"].ToString();
 Uri myUri = new Uri(myPath.Replace(@"\",@"/"));
 BitmapImage bi = new BitmapImage(myUri);
 imgPath.SetValue(Image.SourceProperty, bi);
 }

RegistrationForm.xaml

<Window x:Class="Summer09Launch.RegistrationForm"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="RegistrationForm" Height="800" Width="1280" WindowStyle="None" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" ScrollViewer.VerticalScrollBarVisibility="Disabled" Topmost="True" x:Name="RegistrationForm">

<Grid x:Name="grdOne">

<Image Margin="0,0,0,0" Stretch="Fill" Width="1280" Height="800" x:Name="imgPath"/>

</Grid>

</Window>

The Output

Change the appSettings section in the App.config file

<appSettings>
 <add key ="imageLocation" value ="newBackground.jpg"/>
</appSettings>

Output after setting the new filename.

Note

The above technique also works on silverlight.

Tracking your TIME in the office with Manic Time

There are times in the office where I feel a little worried whenever I notice that I am spending too much time on emails, research, and not on my vs 2008 IDE. Time on morning breaks like snacks, lunch breaks. Time that should have been spent on coding, upgrading existing applications, improving existing sql jobs, rewriting slow sql queries, and other important matters such as attending to the problems of irate customers.

This time, I found a free personal time management software that would track my time in the office. Name of the application? Its called Manic Time.

About Manic Time.

Manic Time is a personal time management software that would track every running applications on your pc such as internet explorer, windows explorer, microsoft office, and other applications that are currently opened. It logs the time you started that application and the time you closed that application. It also records the time spent when you are away from your pc. Below is a sample log of the application.

Detailed Log

Summary Log

The above image clearly shows what manic time can do. For me, this application has a very important purpose on my machine. I will no longer worry at the end of the day whether I have delivered the equivalent effort to the salary and the benefits that the company is giving me.

Want to learn more? Click Me.

Download it here.

jQuery Autosuggest Textbox

Want something other than dropdownlist? How about providing a fully responsive autosuggest textbox that quickly responses to every letter or character that you type? Yes it is possible with ASP.NET, with the help of my favourite language (C#) and jQuery.

The Process.

1. On page load, fetch all the data that needs to be listed, for example, cities, countries, product categories, products.
2. Load the data in an array in javascript through JSON.
3. In every character that you input in your textbox, match it with every word in your array with regards to the position of the character.
4. Display all the items that matched your criteria in the textbox.

The Architecture.

Web Form                         Generic Handler        Business Object Layer/Helper Class           Data Layer

The Logic Behind Each Process.

Web Form

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>

 <script src="suggestions.js" type="text/javascript"></script>

 <script src="autosuggest.js" type="text/javascript"></script>

 <script src="jquery.js" type="text/javascript"></script>

 <script language="javascript" type="text/javascript">
 var modelArray = new Array();
 $(window).load(function(){
 $.getJSON("ProductsHandler.ashx", function(result) {
 var pos = 0;
 $.each(result, function() {
 modelArray[pos] = this['cnmodelname'];
 pos = pos + 1;
 });

 });
 });
 $(document).ready(function() {

 $("#txtProducts").focus(function() {
 var oTextbox=new AutoSuggestControl(document.getElementById("txtProducts"),new ProductsSuggestions());
 });
 });

 </script>

 <style>
 div.suggestions
 {
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 border: 1px solid #cccccc;
 position: absolute;
 }
 div.suggestions div
 {
 cursor: default;
 padding: 0px 3px;
 }
 div.suggestions div.current
 {
 background-color: #3366cc;
 color: white;
 }
 </style>
</head>
<body style="margin-top: 100; margin-left: 100;">
 <form id="form1" runat="server">
 <div>
 <input type="text" id="txtProducts" />
 </div>
 </form>
</body>
</html>

Generic Handler

using System;
using System.Data;
using System.Text;
using System.Web;

namespace TestWebApplication {

public class ProductsHandler : IHttpHandler {

public void ProcessRequest(HttpContext context) {

string results = "";

Products p = new Products();
DataTable dt = p.GetCurrentProducts();
StringBuilder sb = new StringBuilder();
sb.Append("[");
foreach (DataRow item in dt.Rows) {
sb.Append("{");
sb.Append("\"cnmodelid\":\""+item["cnmodelid"].ToString()+"\",");
sb.Append("\"cnmodelname\":\"" + item["cnmodelname"].ToString() + "\"");
sb.Append("},");
}
results = sb.ToString();
results = results.Remove(results.Length - 1, 1) + "]";

context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Write(results);
context.Response.End();
}

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

Business Object Layer/Helper Class

using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;

namespace TestWebApplication {

public class Product  {
DataLayer dal;
public Product() {
dal = new DataLayer();
}

public DataTable GetCurrentProducts() {
using (SqlCommand sqlCommand = new SqlCommand()) {
sqlCommand.CommandText = "sp_GetProducts";
sqlCommand.CommandType = CommandType.StoredProcedure;

return dal.GetRecords(sqlCommand);
}
}
}
}

Data Layer

using System;
using System.Data;
using System.Data.SqlClient;

namespace TestWebApplication {
public class DataLayer {

public DataTable GetRecords(SqlCommand sqlCommand) {
using (SqlConnection sqlCon = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial Catalog=OnlineBackupApplication;User Id=constantine;Password=100885101#;")) {
sqlCon.Open();
SqlCommand sqlCmd = sqlCommand;
sqlCmd.Connection = sqlCon;
SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

DataTable dtLocal = new DataTable();
sqlDa.Fill(dtLocal);
sqlCon.Close();
return dtLocal;
}
}

}
}

Our Records

Our Output

Note:

Please download this scripts from this site. http://www.phpguru.org/static/AutoComplete.html
1. suggestions.js
2. autosuggest.js

Changes Made to suggestions.js

1. Added the below functions to get the exact location of our textbox.

</pre>
function getAbsolutePosition(element){
 var ret = new Point();
 for(;
 element && element != document.body;
 ret.translate(element.offsetLeft, element.offsetTop), element = element.offsetParent
 );

 return ret;
}

function Point(x,y){
 this.x = x || 0;
 this.y = y || 0;
 this.toString = function(){
 return '('+this.x+', '+this.y+')';
 };
 this.translate = function(dx, dy){
 this.x += dx || 0;
 this.y += dy || 0;
 };
 this.getX = function(){ return this.x; }
 this.getY = function(){ return this.y; }
 this.equals = function(anotherpoint){
 return anotherpoint.x == this.x && anotherpoint.y == this.y;
 };
}

Changes Made to autosuggest.js

1. Changed getLeft function to the following block of code.

AutoSuggestControl.prototype.getLeft = function () {
var iLeft = getAbsolutePosition(document.getElementById("txtProducts")).x;
return iLeft;
};

2. Changed getTop function to the following block of code.

AutoSuggestControl.prototype.getTop = function () {
var iTop = getAbsolutePosition(document.getElementById("txtProducts")).y;
return iTop;
};

[/sourcecode]

Creating a modal message box in jQuery

One of the common tasks of web developers is to develop and design their site according to its purpose. And in-order for their sites to look more professional, the theme of the site, the animations, banners, buttons, fonts, links should be uniform. For example the font of a link button must be the same with the font of the content.

In this article, I am going to show you how to create a modal dialog using jQuery instead of showing the usual pop-up message of your web browser. First lets take a look at the common way of doing it.

The usual style.

<script language=”javascript” type=”text/javascript”>

function ShowModalBox() {

alert(“The common box”);

}

</script>

<input type=”button” value=”Show Modal Box” onclick=”ShowModalBox();” />

The output.

The jQuery way of  doing it.

<script language=”javascript” type=”text/javascript”>
$().ready(function() {
$(“#btnShowModalBox”).click(function() {

$(“#Container”).css(“visibility”,”visible”);
$(“#Container”).css(“float”,”none”);
$(“#Container”).css(“position”,”absolute”);
$(“#Container”).css(“left”,0);
$(“#Container”).css(“top”,0);
$(“#Container”).css(“width”,window.screen.width);
$(“#Container”).css(“height”,window.screen.height);
$(“#Container”).css(“background-color”,”#555555″);
$(“#Container”).css(“opacity”,”0.5″);

var left = window.screen.width / 2 – 200;
var top = window.screen.height / 2 – 300;
$(“#PopupBox”).css(“visibility”,”visible”);
$(“#PopupBox”).css(“float”,”none”);
$(“#PopupBox”).css(“position”,”absolute”);
$(“#PopupBox”).css(“left”,left);
$(“#PopupBox”).css(“top”,top);

});
$(“#btnClose”).click(function() {
$(“#PopupBox”).css(“visibility”,”hidden”);
$(“#Container”).css(“visibility”,”hidden”);
});
});
</script>

<body style=”margin: 50px; font-family: Verdana; font-size: 11px; font-weight: bold;”>
<form id=”form1″ runat=”server”>
<div style=”float: left; position: relative; width: 100%;”>
<input type=”button” id=”btnShowModalBox” value=”Show Modal Box” />
</div>
<div id=”PopupBox” style=”width: 400px; height: 300px; visibility: hidden; z-index: 1;”>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 365px; color: #ffffff; padding-left:5px; padding-top:5px;”>
JQuery Modal Dialog
</div>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 30px; color: #ffffff; padding-top:5px; text-align:center;”>
<input type=”button” id=”btnClose” value=”x” style=”border-style:solid; border-width:1px; background-color:#ffffff; height:15px; padding:0px; cursor:pointer;” />
</div>
<div style=”float: left; position: relative; background-color: #ffffff; width: 400px;
height: 150px;text-align: center; vertical-align:middle;”>
This is how to implement a simple Modal Dialog
</div>
</div>
<div id=”Container” style=”visibility: hidden; z-index: 0;”>
</div>
</form>
</body>

The output.

If you’ll notice there is now a gray background on top of our page where our dialog box is aligned in the middle.

How did we achieve that?

I. We must first create our dialog box.

Here is the code for the message box.

<body style=”margin: 50px; font-family: Verdana; font-size: 11px; font-weight: bold;”>
<form id=”form1″ runat=”server”>
<div style=”float: left; position: relative; width: 100%;”>
<input type=”button” id=”btnShowModalBox” value=”Show Modal Box” />
</div>
<div id=”PopupBox” style=”width: 400px; height: 300px; visibility: hidden; z-index: 1;”>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 365px; color: #ffffff; padding-left:5px; padding-top:5px;”>
JQuery Modal Dialog
</div>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 30px; color: #ffffff; padding-top:5px; text-align:center;”>
<input type=”button” id=”btnClose” value=”x” style=”border-style:solid; border-width:1px; background-color:#ffffff; height:15px; padding:0px; cursor:pointer;” />
</div>
<div style=”float: left; position: relative; background-color: #ffffff; width: 400px;
height: 150px;text-align: center; vertical-align:middle;”>
This is how to implement a simple Modal Dialog
</div>
</div>
<div id=”Container” style=”visibility: hidden; z-index: 0;”>
</div>
</form>
</body>

II. Then our gray background which will cover the entire page.

<body style=”margin: 50px; font-family: Verdana; font-size: 11px; font-weight: bold;”>
<form id=”form1″ runat=”server”>
<div style=”float: left; position: relative; width: 100%;”>
<input type=”button” id=”btnShowModalBox” value=”Show Modal Box” />
</div>
<div id=”PopupBox” style=”width: 400px; height: 300px; visibility: hidden; z-index: 1;”>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 365px; color: #ffffff; padding-left:5px; padding-top:5px;”>
JQuery Modal Dialog
</div>
<div style=”float: left; position: relative; height: 20px; background-color: navy;
width: 30px; color: #ffffff; padding-top:5px; text-align:center;”>
<input type=”button” id=”btnClose” value=”x” style=”border-style:solid; border-width:1px; background-color:#ffffff; height:15px; padding:0px; cursor:pointer;” />
</div>
<div style=”float: left; position: relative; background-color: #ffffff; width: 400px;
height: 150px;text-align: center; vertical-align:middle;”>
This is how to implement a simple Modal Dialog
</div>
</div>
<div id=”Container” style=”visibility: hidden; z-index: 0;”>
</div>
</form>
</body>

III. Finally our jQuery Code

// jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event

$().ready(function() {

}

//Then we assign a click event for our btnShowModalBox button

$().ready(function() {
$(“#btnShowModalBox”).click(function() {

});

});

//Then we manipulate the position,visibility, width and height of our gray message box container.

$(“#Container”).css(“visibility”,”visible”); -> sets the visibility of our div to visible which is initially hidden.
$(“#Container”).css(“float”,”none”);  -> sets the float property
$(“#Container”).css(“position”,”absolute”); -> sets the position and assign aabsolute value
$(“#Container”).css(“left”,0);  -> sets the left property
$(“#Container”).css(“top”,0); -> sets the top property
$(“#Container”).css(“width”,window.screen.width); -> sets the width of our div
$(“#Container”).css(“height”,window.screen.height); -> sets the height of our div
$(“#Container”).css(“background-color”,”#555555″); -> sets the background color
$(“#Container”).css(“opacity”,”0.5″); -> sets the opacity of our gray background to half

//And then we show our message box

var left = window.screen.width / 2 – 200;
var top = window.screen.height / 2 – 300;
$(“#PopupBox”).css(“visibility”,”visible”);
$(“#PopupBox”).css(“float”,”none”);
$(“#PopupBox”).css(“position”,”absolute”);
$(“#PopupBox”).css(“left”,left);
$(“#PopupBox”).css(“top”,top);

//Finally to hide our box we assign a click event to our button located on the upper right-most of the message box.

$(“#btnClose”).click(function() {
$(“#PopupBox”).css(“visibility”,”hidden”); -> hides the messagebox
$(“#Container”).css(“visibility”,”hidden”);-> hides the gray area
});

And that is how we create a simple modal message box using jQuery.  You can even make the message box fade by using the bellow function in jQuery.

$("#PopupBox").fadeIn("slow");

A Devigner(Developer Designer) in the making.

Good day everyone, this is my first post in the world of blogging. I hope this wont be another crap in the internet.  Well, this is just about my self, telling the world that a new blogger has come sharing everything he knew about his profession, experiences, opinion on something, and many more.

Before I got to where I am right now, I started from a lonely province named Biliran. It was peaceful back then since only few people lived there during our time. I really hate school during my elementary years so my mind was only full of monkey business during school hours nothing serious when it comes to studies.  When I reached grade four it was when my mother told us that we should meet our father.  An engineer who never focused on his family, only to his profession (reason he left us).  Before he finally left me, my sister, and my already suffering mother, he told me that when I grow up, I should be like him. So here I am a software engineer by profession who loves to develop applications that will help an organization with their daily business processes.

When I reached my final year in elementary, I saw my cousin sketching wolverine of x-men in a peace of paper. While he was finishing up with the drawing, I noticed something, It was just gray, yes it was wolverine but in black and white. So I asked him, is it really the hero you are trying to draw because you really need to complete it by putting colors in it to make it more look like the wolverine. Since I was younger than him he told me, “why do you care? can you do what I’m doing?” At the back of my mind, I was thinking, I really can do more than that. That was when I started sketching, drawing objects, until I brought a trophy in our school during an inter-school competition. Not only that, I also brought the first gold medal in feature writing for our school. That time I finally noticed that I can imagine things and bring it to life either by writing or drawing.

When I reached high-school, that was when I started to fall on things and focused more on activities that where not in-line with what I really wanted to do.  Those days , I learned to dance, sing and even joined a group of regular singers at school. I became an MVP in basketball, and was chosen to sing the responsorial psalm who didn’t showed up a single day for practice. The result? I just opened my mouth and prevented the voice that is uncertain of what note to hit. But during graduation I still received the Artist of the Year award for winning either the 1st or 2nd spot during school competitions. Then the time for serious business started, I am now in college and is ready to do whatever it takes to get a job and build my future.

At STI EDSA I became a student assistant that saved my tuition for 4 years and was assigned in the library which was a good thing. That was the time when I started to love books. I graduated Cum Laude in our batch and just after one week got a job as a software engineer in small software house company called Computer Craft Corporation. After six months I moved on to a Consulting Company called Information Professionals and was deployed to a Japanese Company named System Renovations Inc. During my stay with this company, I learned the importance of team work and enhanced my coding skills with the help of my project manager. After a year and a half with SRI I moved on to Magsasay Shipping as a mid-level .NET developer and further improved the way I develop and maintain applications that has a big impact for the shipping company. In search of another environment, I moved on to the electoronic giant Sony Philippines. This was the time where I learned to merge the most important things in a software or business application (the look and feel of an application) or the functionality and the design of a computer application. This time I go solo, I did the look the user interface and the functionality of each application that I develop. I learned Silverlight, jQuery, JSON, AJAX, and is now mastering my favourite language (C#).

Bellow are some of the Rich Internet Applications that I developed using C#, Silverlight, and ASP.NET.

Finally I started using jQuery which is a great mix with ASP.NET, C#, and more responsive web applications. During my next post I will start sharing technically and start sharing the codes and final product of my applications…