You want to create simple GUI cross platform application without knowing the high level programming languages like C++, Java, C#~(using mono)? XUL is that answer.

Yes it is possible using XUL, the prerequisites for this is, knowledge of a declarative programming language(like HTML or XHTML, XAML etc…) and JavaScript.

XUL is basic building block of the Firefox UI and as we know Firefox works in Windows, Linux and MAC.

Actually XUL is a language which run on the XULRunner(Gecko) runtime from Mozilla.

If you really wants see how Firefox created this UI, go the FireFox installation folder. Normally it will be C:\Program Files\Mozilla Firefox\. Under that installation root folder, find a folder named “chrome”. Firefox has packaged the xul files in a zip format and they have renamed it as .jar. So look for a file browser.jar and rename it to zip. Extract it and have a look at content\browser\browser.xul. This file holds the UI definition for Firefox.

To learn more about XUL, refer these web sites

1. http://www.mozilla.org/projects/xul/
2. http://www.ibm.com/developerworks/web/library/wa-xul1/

Part 1 - Calling Server Side methods from Client Side

In this post, I will explain how to pass data from client to server in JSON format.

Microsoft AJAX client library has built-in methods which helps in serializing and de-serializing JSON. The methods are defined in Sys.Serialization.JavaScriptSerializer class. In server side we have JavaScriptSerializer that will help you out to do the JSON serialization and de-serialization.

With the help of these two classes, we can easily do the data transfer. Suppose you have class called Customer in server side, which looks like this

1
2
3
4
5
6
7
8
9
10
11
12

namespace ServerClientInteration
{
    [Serializable]
    public class Customer
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }
    }
}

This is our payload for this example, we are going to move this object from server to client and vice versa. For that I have exposed two static methods on the server side; one is for retrieving the customer details and the other is for updating the customer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

public partial class _Default : System.Web.UI.Page
  {
      private static Customer customer = null;

      protected void Page_Load(object sender, EventArgs e)
      {
          if (customer == null)
          {
              customer = new Customer();
              customer.ID = 1;
              customer.Name = "microsoft";
              customer.Address = "www.microsoft.com";
          }

      }

      [WebMethod]
      [ScriptMethod(UseHttpGet=true)]
      public static string GetTime()
      {
          return DateTime.Now.ToLongTimeString();
      }

      [WebMethod]
      [ScriptMethod(UseHttpGet = true)]
      public static string GetCustomer()
      {
          JavaScriptSerializer serializer = new JavaScriptSerializer();
          return serializer.Serialize(customer);
      }

      [WebMethod]
      [ScriptMethod]
      public static string UpdateCustomer(string jsonCustomer)
      {
          try
          {
              JavaScriptSerializer serializer = new JavaScriptSerializer();
              Customer cust = serializer.Deserialize(jsonCustomer);
              customer.ID = cust.ID;
              customer.Name = cust.Name;
              customer.Address = cust.Address;

              return "Updated";
          }
          catch(Exception Exception)
          {

          }

          return "Error occured while updating";
      }
  }

In the above code, you can see GetCustomer and UpdateCustomer methods. GetCustomer will serialize the static customer object and return it as JSON string; UpdateCustomer method accepts JSON string as input and that string is de-serialized in to a customer object and the static customer variable is updated with the new values. UpdateCustomer will return status message after the update.

Usually, we persist the customer in DB or some other states, but here for simplicity I have used a static variable which will simulate the persistence.

Now we need to call this from the client-side, for that I have two hyperlinks; one will get the customer from the server and other send the customer to the server.

Here is how the HTML looks like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<head runat="server">
  <title>Untitled Page</title>
  <style type="text/css">
    #result {
      width: 250px;
      height: 300px;
      overflow: auto;
      border: 1px solid #00d;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager
      ID="ScriptManager1"
      runat="server"
      EnablePageMethods="true"
    >
    </asp:ScriptManager>
    <div>
      <a href="javascript:callServerMethod()">Call Server method</a>
      <hr />
      <a href="javascript:getCustomer()">Get Customer</a>
      <div id="result"></div>
      <hr />
      <div>
        ID : <input type="text" id="custID" /><br />
        Name : <input type="text" id="custName" /><br />
        Adress : <input type="text" id="custAdd" /><br />
      </div>
      <a href="javascript:updateCustomer()">Update customer</a><br />
    </div>

    <script language="javascript" type="text/javascript">
      //<![CDATA[
      function callServerMethod() {
        PageMethods.GetTime(callBackMethod);
      }

      function callBackMethod(result) {
        alert(result);
      }

      function getCustomer() {
        PageMethods.GetCustomer(callBackGetCustomer);
      }

      function callBackGetCustomer(result) {
        var customer = Sys.Serialization.JavaScriptSerializer.deserialize(
          result
        );
        var content =
          "<br />ID :" +
          customer.ID +
          "<br />" +
          "Name : " +
          customer.Name +
          "<br />" +
          "Address : " +
          customer.Address;
        $get("result").innerHTML += content;
      }

      var clientCustomer = function(id, name, add) {
        this.ID = id;
        this.Name = name;
        this.Address = add;
      };

      function updateCustomer() {
        var id = $get("custID").value;
        var name = $get("custName").value;
        var address = $get("custAdd").value;

        var customer = new clientCustomer(id, name, address);
        var serializedCustomer = Sys.Serialization.JavaScriptSerializer.serialize(
          customer
        );
        PageMethods.UpdateCustomer(serializedCustomer, callBackUpdateCustomer);
      }

      function callBackUpdateCustomer(result) {
        alert(result);
      }

      //]]>
    </script>
  </form>
</body>

I think the above code is self explanatory, let me know if you have any difficulty in understanding this. Hope this will gave some idea about passing JSON between client and server.

I have uploaded the source code in my server and you can get it from here

Part 1 - Calling Server Side methods from Client Side

In this post, I will explain how to pass data from client to server in JSON format.

Microsoft AJAX client library has built-in methods which helps in serializing and de-serializing JSON. The methods are defined in Sys.Serialization.JavaScriptSerializer class. In server side we have JavaScriptSerializer that will help you out to do the JSON serialization and de-serialization.

With the help of these two classes, we can easily do the data transfer. Suppose you have class called Customer in server side, which looks like this

1
2
3
4
5
6
7
8
9
10
11
12

namespace ServerClientInteration
{
    [Serializable]
    public class Customer
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public string Address { get; set; }
    }
}

This is our payload for this example, we are going to move this object from server to client and vice versa. For that I have exposed two static methods on the server side; one is for retrieving the customer details and the other is for updating the customer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

public partial class _Default : System.Web.UI.Page
  {
      private static Customer customer = null;

      protected void Page_Load(object sender, EventArgs e)
      {
          if (customer == null)
          {
              customer = new Customer();
              customer.ID = 1;
              customer.Name = "microsoft";
              customer.Address = "www.microsoft.com";
          }

      }

      [WebMethod]
      [ScriptMethod(UseHttpGet=true)]
      public static string GetTime()
      {
          return DateTime.Now.ToLongTimeString();
      }

      [WebMethod]
      [ScriptMethod(UseHttpGet = true)]
      public static string GetCustomer()
      {
          JavaScriptSerializer serializer = new JavaScriptSerializer();
          return serializer.Serialize(customer);
      }

      [WebMethod]
      [ScriptMethod]
      public static string UpdateCustomer(string jsonCustomer)
      {
          try
          {
              JavaScriptSerializer serializer = new JavaScriptSerializer();
              Customer cust = serializer.Deserialize(jsonCustomer);
              customer.ID = cust.ID;
              customer.Name = cust.Name;
              customer.Address = cust.Address;

              return "Updated";
          }
          catch(Exception Exception)
          {

          }

          return "Error occured while updating";
      }
  }

In the above code, you can see GetCustomer and UpdateCustomer methods. GetCustomer will serialize the static customer object and return it as JSON string; UpdateCustomer method accepts JSON string as input and that string is de-serialized in to a customer object and the static customer variable is updated with the new values. UpdateCustomer will return status message after the update.

Usually, we persist the customer in DB or some other states, but here for simplicity I have used a static variable which will simulate the persistence.

Now we need to call this from the client-side, for that I have two hyperlinks; one will get the customer from the server and other send the customer to the server.

Here is how the HTML looks like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<head runat="server">
  <title>Untitled Page</title>
  <style type="text/css">
    #result {
      width: 250px;
      height: 300px;
      overflow: auto;
      border: 1px solid #00d;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager
      ID="ScriptManager1"
      runat="server"
      EnablePageMethods="true"
    >
    </asp:ScriptManager>
    <div>
      <a href="javascript:callServerMethod()">Call Server method</a>
      <hr />
      <a href="javascript:getCustomer()">Get Customer</a>
      <div id="result"></div>
      <hr />
      <div>
        ID : <input type="text" id="custID" /><br />
        Name : <input type="text" id="custName" /><br />
        Adress : <input type="text" id="custAdd" /><br />
      </div>
      <a href="javascript:updateCustomer()">Update customer</a><br />
    </div>

    <script language="javascript" type="text/javascript">
      //<![CDATA[
      function callServerMethod() {
        PageMethods.GetTime(callBackMethod);
      }

      function callBackMethod(result) {
        alert(result);
      }

      function getCustomer() {
        PageMethods.GetCustomer(callBackGetCustomer);
      }

      function callBackGetCustomer(result) {
        var customer = Sys.Serialization.JavaScriptSerializer.deserialize(
          result
        );
        var content =
          "<br />ID :" +
          customer.ID +
          "<br />" +
          "Name : " +
          customer.Name +
          "<br />" +
          "Address : " +
          customer.Address;
        $get("result").innerHTML += content;
      }

      var clientCustomer = function(id, name, add) {
        this.ID = id;
        this.Name = name;
        this.Address = add;
      };

      function updateCustomer() {
        var id = $get("custID").value;
        var name = $get("custName").value;
        var address = $get("custAdd").value;

        var customer = new clientCustomer(id, name, address);
        var serializedCustomer = Sys.Serialization.JavaScriptSerializer.serialize(
          customer
        );
        PageMethods.UpdateCustomer(serializedCustomer, callBackUpdateCustomer);
      }

      function callBackUpdateCustomer(result) {
        alert(result);
      }

      //]]>
    </script>
  </form>
</body>

I think the above code is self explanatory, let me know if you have any difficulty in understanding this. Hope this will gave some idea about passing JSON between client and server.

I have uploaded the source code in my server and you can get it from here

Part2 - ASP.NET AJAX - Passing JSON Object from Client to Server

ASP.net AJAX has got nice bridging between your server side and client side technologies. Using the ASP.net AJAX you can easily call a method in a page. The restriction here is that, the methods your are trying to call should be static and public.

This feature(calling server side static method) is not enabled by default, so you have to manually enable this and it is very very simple; just set the EnablePageMethods property of the ScriptManager to true like this

1

<asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="true"></asp:scriptmanager>

After this, create a public static method in your asp.net page and decorate it with WebMethod(System.Web.Services.dll) and ScriptMethod(System.Web.Extensions.dll) attributes. For example I have created a static method called GetTime() which returns current time as string.

1
2
3
4
5
6
7
8
9
10
11
12
13

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    [ScriptMethod]
    public static string GetTime()
    {
        return DateTime.Now.ToLongTimeString();
    }
}

Now you have configured everything correctly and I will show you how to call this method from the client side.

Earlier you have set the EnablePageMethods property of ScriptManager to true, as a result of that a new object called PageMethods is created by the ScriptManager when the page is rendered. This object has all the public static methods in that page. So that you call the server side method like PageMethods.[ServerSideMethodName]. When calling this methods from client side you have to provide a callback function because here all the call scriptmanager made will be asynchronous, and this callback method will get the returned result.

Below is the sample code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  </asp:ScriptManager>
  <div>
    <a href="javascript:callServerMethod()" >Call Server method</a>
  </div>
  <script language="javascript" type="text/javascript">
  //<![CDATA[function callServerMethod() {
            PageMethods.GetTime(callBackMethod);
          }
          function callBackMethod(result) {
            alert(result);
          }
  //]]>
  </script>
</form>

###Extra bits
In the above code you can see that I have placed link, when user click on that link a message is shown with the server time. So behind an asynchronous request is send to the server in this format http://[sitename]/[MethodName]. Server in turn returns the result as JSON back to the client. Here is a screen shot from the firebug

There is an optimization we have do here - you can see that, by default the request is a POST request, but in our case a POST request is heavy because we could have achieved the same using a GET request (Difference between POST and GET).

In order to change this request in to a GET request, we need to do a minor tweaking in the server side, set UseHttpGet=true parameter for the ScriptMethod attribute.

1
2
3
4
5
6

[WebMethod]
[ScriptMethod(UseHttpGet=true)]
public static string GetTime()
{
    return DateTime.Now.ToLongTimeString();
}

After this you can see that, request is changed to a GET request

Part2 - ASP.NET AJAX - Passing JSON Object from Client to Server

ASP.net AJAX has got nice bridging between your server side and client side technologies. Using the ASP.net AJAX you can easily call a method in a page. The restriction here is that, the methods your are trying to call should be static and public.

This feature(calling server side static method) is not enabled by default, so you have to manually enable this and it is very very simple; just set the EnablePageMethods property of the ScriptManager to true like this

1

<asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="true"></asp:scriptmanager>

After this, create a public static method in your asp.net page and decorate it with WebMethod(System.Web.Services.dll) and ScriptMethod(System.Web.Extensions.dll) attributes. For example I have created a static method called GetTime() which returns current time as string.

1
2
3
4
5
6
7
8
9
10
11
12
13

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    [ScriptMethod]
    public static string GetTime()
    {
        return DateTime.Now.ToLongTimeString();
    }
}

Now you have configured everything correctly and I will show you how to call this method from the client side.

Earlier you have set the EnablePageMethods property of ScriptManager to true, as a result of that a new object called PageMethods is created by the ScriptManager when the page is rendered. This object has all the public static methods in that page. So that you call the server side method like PageMethods.[ServerSideMethodName]. When calling this methods from client side you have to provide a callback function because here all the call scriptmanager made will be asynchronous, and this callback method will get the returned result.

Below is the sample code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  </asp:ScriptManager>
  <div>
    <a href="javascript:callServerMethod()" >Call Server method</a>
  </div>
  <script language="javascript" type="text/javascript">
  //<![CDATA[function callServerMethod() {
            PageMethods.GetTime(callBackMethod);
          }
          function callBackMethod(result) {
            alert(result);
          }
  //]]>
  </script>
</form>

###Extra bits
In the above code you can see that I have placed link, when user click on that link a message is shown with the server time. So behind an asynchronous request is send to the server in this format http://[sitename]/[MethodName]. Server in turn returns the result as JSON back to the client. Here is a screen shot from the firebug

There is an optimization we have do here - you can see that, by default the request is a POST request, but in our case a POST request is heavy because we could have achieved the same using a GET request (Difference between POST and GET).

In order to change this request in to a GET request, we need to do a minor tweaking in the server side, set UseHttpGet=true parameter for the ScriptMethod attribute.

1
2
3
4
5
6

[WebMethod]
[ScriptMethod(UseHttpGet=true)]
public static string GetTime()
{
    return DateTime.Now.ToLongTimeString();
}

After this you can see that, request is changed to a GET request

Silverlight 2 is out now with new features like rich set of controls, improved Text Rendering capabilities, rich networking support including calling secured(SSL) services etc…

Moreover Microsoft is partnered with Soyatec to sponsor tools for developing Silverlight applications using cross platform Eclipse development platform. eclipse2SL is first of that kind.

eclipse2SL is an open source tools integrated with the Eclipse development platform that enable Java developers to use the Eclipse platform to create applications that run on the Microsoft Silverlight runtime platform. Specifically, the project will be an Eclipse plug-in that works with the Eclipse Integrated Development Environment (IDE) and Eclipse Rich Client Platform (RCP) to provide both a Silverlight development environment and greater interoperability between Silverlight and Java, to facilitate the integration of Silverlight-based applications into Java-based web sites and services.

As an addition to the control set Microsoft is releasing Silverlight Toolkit by end of this month with more UI controls.

Silverlight 2 resources

To get the basic understanding go to Get started, here are some good articles written by Scott Guthrie

1. Introduction
2. Creating “Hello World” with Silverlight 2 and VS 2008
3. Using Layout Management
4. Using Networking to Retrieve Data and Populate a DataGrid
5. Using Style Elements to Better Encapsulate Look and Feel
6. Using the ListBox and DataBinding to Display List Data
7. Using User Controls to Implement Master/Details Scenarios
8. Using Templates to Customize Control Look and Feel
9. Creating a Digg Desktop Version of our Application using WPF

Silverlight 2 is out now with new features like rich set of controls, improved Text Rendering capabilities, rich networking support including calling secured(SSL) services etc…

Moreover Microsoft is partnered with Soyatec to sponsor tools for developing Silverlight applications using cross platform Eclipse development platform. eclipse2SL is first of that kind.

eclipse2SL is an open source tools integrated with the Eclipse development platform that enable Java developers to use the Eclipse platform to create applications that run on the Microsoft Silverlight runtime platform. Specifically, the project will be an Eclipse plug-in that works with the Eclipse Integrated Development Environment (IDE) and Eclipse Rich Client Platform (RCP) to provide both a Silverlight development environment and greater interoperability between Silverlight and Java, to facilitate the integration of Silverlight-based applications into Java-based web sites and services.

As an addition to the control set Microsoft is releasing Silverlight Toolkit by end of this month with more UI controls.

Silverlight 2 resources

To get the basic understanding go to Get started, here are some good articles written by Scott Guthrie

1. Introduction
2. Creating “Hello World” with Silverlight 2 and VS 2008
3. Using Layout Management
4. Using Networking to Retrieve Data and Populate a DataGrid
5. Using Style Elements to Better Encapsulate Look and Feel
6. Using the ListBox and DataBinding to Display List Data
7. Using User Controls to Implement Master/Details Scenarios
8. Using Templates to Customize Control Look and Feel
9. Creating a Digg Desktop Version of our Application using WPF

Google chrome(0.2.149.30) has got some problem in rendering the checkboxes. Today I thought about buying a new laptop, so I was searching for a laptop that will fit into my budget and requirements. And I came across a website called http://www.compareindia.com/products/laptops/ , I was using Google chrome for browsing, but when viewed that page it was like this

There was no way for me to narrow my search because I couldn’t select any of options listed under “Narrow your Search” section, but after sometime i.e after doing some scrolling and switching tabs checkboxes appeared on the left side of this list

Initially I thought that, it will a problem with the way that page was developed(may be some JavaScript issues), but when I opened the same page in Firefox(3.0.1) it was rendering properly, even in IE 6 is rendered that page correctly.

FF I think this is a Chrome bug; I have reported this , follow this URL http://code.google.com/p/chromium/issues/detail?id=3151 if you have experienced same problem.

Google chrome(0.2.149.30) has got some problem in rendering the checkboxes. Today I thought about buying a new laptop, so I was searching for a laptop that will fit into my budget and requirements. And I came across a website called http://www.compareindia.com/products/laptops/ , I was using Google chrome for browsing, but when viewed that page it was like this

There was no way for me to narrow my search because I couldn’t select any of options listed under “Narrow your Search” section, but after sometime i.e after doing some scrolling and switching tabs checkboxes appeared on the left side of this list

Initially I thought that, it will a problem with the way that page was developed(may be some JavaScript issues), but when I opened the same page in Firefox(3.0.1) it was rendering properly, even in IE 6 is rendered that page correctly.

FF I think this is a Chrome bug; I have reported this , follow this URL http://code.google.com/p/chromium/issues/detail?id=3151 if you have experienced same problem.

Today I found a tool called Scrawlr that will help you to detect SQL injection loop holes in your web application. I hope it will be a good add-on to your archery against security attacks.

For those who don’t know what is SQL injection –

SQL injection is a technique that exploits a security vulnerability occurring in the database layer of an application. The vulnerability is present when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and thereby unexpectedly executed. It is in fact an instance of a more > general class of vulnerabilities that can occur whenever one programming or scripting language is embedded inside another.

Get more details about Scrawlr from this blog post