General .NET – Page 2 – Shokr's Technical Blog

SharePoint Saturday Kuwait’s 1st EVER SharePoint Saturday held at MIC

Posted on October 19, 2010October 19, 2010 by Ahmed Shokr in General .NET

I hope that helped

Ahmed

Using Microsoft Virtual Earth for Vehicle Tracking and Geo Fencing Sample

Posted on March 10, 2009March 10, 2009 by Ahmed Shokr in General .NET

Introduction

Today, I had to build a sample demo using Microsoft Virtual Earth to simulate vehicle tracking and geo fencing.

The term geo fencing was a little bit new to me, you can have a look here for more details.

Using the code

My sample here consists of two parts, one is the live tracking of moving objects based on geospatial data [Longitude, Latitude], and the second part is about geo fencing a moving object to a limited geographic area.

During my research on how to calculate geospatial data for a specific point on the map, I came across the following sample which helped me a lot to get the test data for my sample.

Now, let’s have a look at our sample and how it works:

First, we need to build our default.aspx page:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
      <title>Vehicle Tracking System</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script language="javascript" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>   1:  
   2:       <script language="javascript" type="text/javascript" src="scripts/Tracking.js">
</script>

   </head>

   <body onload="GetMap();">

   <table width="100%" border="0" cellpadding="0" cellspacing="10">

        <tr>

            <td  id="tabsContainer">

                <a onclick='StartTracking();'>Vechile Tracking Demo</a>

                <a onclick='StartGeoFencing();'>Geo Fencing Demo</a>

                 <br />

                <div id="traceArea"></div>

            </td>

       </tr>

       <tr>

            <td>

                <div id="myMap"></div>

            </td>

        </tr>

   </table>

   </body>

</html>

Then, we need to build the Tracking.js which contains all the JavaScript code for our demo:

// The Map Object
var map = null;
        
      function GetMap()
      {
         map = new VEMap('myMap');
         var centerat = new VELatLong(29.511604, 47.6061625);
         map.LoadMap(centerat,12,VEMapStyle.Road ,false);
         map.SetZoomLevel(9);
      }
      
      function StartTracking()
      {
            // Vechile one
            // Create sperate layer for that vechile
            var layer = new VEShapeLayer();
            map.AddShapeLayer(layer);
            // Add the intial position
            AddPushpin(29.791604, 47.7061625,'Vehicle 999001',"Time: " + new Date().toTimeString(),layer,'auto1.gif');
            // Add the addtional positions
            window.setTimeout(function() { AddPushpin(29.807604, 47.7141625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},1000);
            window.setTimeout(function() { AddPushpin(29.803604, 47.7201625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},2000);
            window.setTimeout(function() { AddPushpin(29.801604, 47.7281625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},3000);
            window.setTimeout(function() { AddPushpin(29.830604, 47.7331625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},4000);
            window.setTimeout(function() { AddPushpin(29.870604, 47.7451625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},5000);
            window.setTimeout(function() { AddPushpin(29.890604, 47.7601625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},6000);
            
            // Vechile two
            var layer2 = new VEShapeLayer();
            map.AddShapeLayer(layer2);
            AddPushpin(29.711604, 47.8061625,'Vehicle 999002',"Time: " + new Date().toTimeString(),layer2,'orange_car_icon.gif');
            window.setTimeout(function() { AddPushpin(29.707604, 47.8141625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},1000);
            window.setTimeout(function() { AddPushpin(29.703604, 47.8201625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},2000);
            window.setTimeout(function() { AddPushpin(29.701604, 47.8281625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},3000);
            window.setTimeout(function() { AddPushpin(29.695604, 47.8331625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},4000);
            window.setTimeout(function() { AddPushpin(29.685604, 47.8451625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},5000);
            window.setTimeout(function() { AddPushpin(29.680604, 47.8601625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},6000);
            
            // Vechile three
            var layer3 = new VEShapeLayer();
            map.AddShapeLayer(layer3);
            AddPushpin(29.660604, 47.6601625,'Vehicle 999003',"Time: " + new Date().toTimeString(),layer3,'shippingVechile.png');
            window.setTimeout(function() { AddPushpin(29.670604, 47.6451625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},1000);
            window.setTimeout(function() { AddPushpin(29.685604, 47.6331625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},2000);
            window.setTimeout(function() { AddPushpin(29.701604, 47.6281625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},3000);
            window.setTimeout(function() { AddPushpin(29.703604, 47.6201625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},4000);
            window.setTimeout(function() { AddPushpin(29.707604, 47.6141625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},5000);
            window.setTimeout(function() { AddPushpin(29.711604, 47.6061625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},6000);
      
      }
      
      function StartGeoFencing()
      {
      // Load the map on the required location
        var centerat = new VELatLong(29.34524, 47.66744);
         map.LoadMap(centerat,12,VEMapStyle.Road ,false);
         map.SetZoomLevel(11);
         // Create the layer for the vechile
        var layer = new VEShapeLayer();
        map.AddShapeLayer(layer);
        // Add the points
        AddPushpin(29.429, 47.48891,'Vehicle 999231',"Time: " + new Date().toTimeString(),layer,'car-icon.gif');
        window.setTimeout(function() { AddPushpin(29.42541, 47.53011,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},1000);
        window.setTimeout(function() { AddPushpin(29.42182, 47.57543,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},2000);
        window.setTimeout(function() { AddPushpin(29.41943, 47.61526,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},3000);
        window.setTimeout(function() { AddPushpin(29.37516, 47.63036,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},4000);
        window.setTimeout(function() { AddPushpin(29.35841, 47.65233,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},5000);
        window.setTimeout(function() { AddPushpin(29.34524, 47.66744,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},6000);
        window.setTimeout("alert('The vehicle 999231 crossed to Al Jahra boundries');",6100);
      }
      
      function AddPushpin(pLat,pLong,title,desc,layer,imgName)
      {   
          // Clear the layer shapes  
          ClearLayer(layer);
          // Create the shape object
          var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(pLat, pLong));
          shape.SetCustomIcon("<img src='images/" + imgName +"'/>");
          shape.SetTitle(title);
          shape.SetDescription(desc);
          layer.AddShape(shape);
      }

      function ClearLayer(layer)
      {
      // Delete all shapes in a layer
        layer.DeleteAllShapes();
      }

As you see all the test data I got it from the Location Chooser sample.

Now. let’s see some screenshots from our demo:

The initial screen

The vechile tracking demo:

As you see the the vechiles images keep on moving according to the coordinates I gave to it from the JavaScript, sure you can retrieve these data from a database or a web service.

The next screen shot shows a moving vechile that suppose to not cross a specific boundary.

When the car cross that boundary which is [Al Jahra] boundary, an alert appears to the user to tell about that error.

We can use the sample basics to provide a near real time tracking for any moving objects.

The objects itself must use some technique like GPS to tell the application about its current location.

I’m working now on some more advanced geo fencing techniques using Microsoft Virtual Earth and ArcGIS, I’ll post about it soon.

You can download the sample code here.

I hope that helped

Ahmed

jQuery AJAX Load Sample

Posted on February 26, 2009 by Ahmed Shokr in General .NET

Introduction

Many of us need use tabs to load multi view information to the user.

Using server side tabs which reload all the page to show a specific piece of information is not a desirable technique all the time.

jQuery has a very nice way to do so, which is the topic of that post.

Using the code

In this sample I’m using the jQuery AJAX load function to get specific information from the server, based on query string using client side scripts.

First, let’s build the default.aspx page like the following:

<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>JQuery AJAX Load Sample</title>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>        <script language="javascript" type="text/javascript" src="Scripts/Main.js">
</script>

</head>

<body>

    <div>

        <h1>JQuery AJAX Load Sample</h1>

        <div id="tabsContainer">

        <a class="tab" onclick="GetSectionDetails('summery','detailsArea');">Summery</a>

        <a onclick="GetSectionDetails('certificates','detailsArea');" >Certificats</a>

        <a onclick="GetSectionDetails('contacts','detailsArea');">Contact details</a>

        </div>

        <div id="detailsArea"></div>

    </div>

</body>

</html>

Second, let’s build the generic handler GetDetails.ashx, which will be used to retrieve the section details:

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

namespace JQuery.Samples.AJAX.Handlers
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class GetDetails : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            // Just to let you see the loading effect
            System.Threading.Thread.Sleep(2000);

            // Getting the correct data according to the query string.
            // You can replace the static content with database retrieved data.
            switch (context.Request.QueryString["sectionId"].ToLower())
            {
                case("summery"):
                    context.Response.Write(@"Having +3 years of experience as a software developer specialized in design and implementation of web based applications using Microsoft technologies associated with strong analytic and design skills. 
                                             <br/>Worked with both Waterfall and Agile project management methodologies and managed teams with Scrum. 
                                             <br/>Holding a MCTS and MCPD in web development and had great knowledge dealing with web applications. 
                                             <br/>Also had a good experience in the development with MOSS 2007, MCMS 2002 and beginning MS Dynamic CRM 4.0");
                    break;
                case ("certificates"):
                    context.Response.Write(@"<h2>MCPD</h2>
                                            Enterprise Applications Developer, Visual Studio 2005 
                                            <br/>Web Developer, Visual Studio 2005
                                            <h2>MCTS</h2>
                                            Microsoft Office SharePoint Server 2007 ― Application Development 
                                            <br/>Distributed Applications Development, .NET Framework 2.0 
                                            <br/>Windows-Based Client Development, .NET Framework 2.0 
                                            <br/>Windows SharePoint Services 3.0 Application Development 
                                            <br/>Web-Based Client Development, .NET Framework 2.0
                                            <h2>MCP</h2>
                                            Application Development Foundation, .NET Framework 2.0
                                            <h2>Bachelor of  Science</h2>
                                            Mansoura University, Information Systems Department, 2005");
                    break;
                case("contacts"):
                    context.Response.Write(@"<h2>Email</h2>     
                                            shokr.ahmed@gmail.com
                                            <h2>MSN</h2>    
                                            shokr.ahmed@hotmail.com
                                            <h2>Skype</h2>
                                            ahmed.shokr
                                            <h2>Mobile (Kuwait)</h2>
                                            +96565963141
                                            <h2>Mobile (Egypt)</h2>
                                            +20104492755
                                            <h2>Address</h2>
                                            Amman St., Salymia, Kuwait");
                    break;
            }
        }

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

Now, all what we need to do, is to retrieve the correct section information form the client script:

// The handler url
var handlerUrl = 'Handlers/GetDetails.ashx';

// Load the first tab on the page load
$(document).ready(
                    function(){
                                GetSectionDetails('summery','detailsArea');
                              }
                  );

// Loads the specified section details
function GetSectionDetails(sectionId,detailsAreaId)
{
    var detailArea = '#' + detailsAreaId;
    var getUrl = handlerUrl + '?sectionId=' + sectionId;
    $(detailArea).html("Loading....");
    $(detailArea).load(FormatUrl(getUrl));
}

// Format the url to include a random number to avoid caching
// This is very important when dealing with dynamic data
function FormatUrl(url)
{
    var newUrl = url;
    newUrl += '&ver=' + Math.random().toString();
    return newUrl;
}

The sample in action:

The loading… effect:

The first section after loading:

Another section loaded by client side event:

You can play with the styles to make it more like tabs control, but I don’t like CSS so much so I’m leaving it to you 🙂

You can download the sample here.

I hope that helped

Ahmed

Just passed MCTS Microsoft Office SharePoint Server 2007: Application Development

Posted on February 9, 2009 by Ahmed Shokr in General .NET

I just passed my MCTS MOSS Application Development, the exam was not that difficult, I had passed with 980 score out of 1000 🙂

The exam was just 32 questions and it covers the following areas:

Enterprise Search
Working with templates and forms
BDC of course 🙂
Excel services
User profile (Try to practice the usage of the UserProfileManager)
Document libraries
Workflow (Not enough questions on WF, it needs more deep ones)
Audience management (Try to practice the usage of AudienceManager)
SSO (Not enough also 🙂 )

This is the main topics, I can’t say any more information of course 🙂

It’s very nice to test your knowledge and get recognized as expert in the same time, thanks to MS for that 🙂

For who wants to see my full transcript please go to Microsoft certification transcript online

Use the following details to get the transcript:

Transcript ID: 748530
Access code: publicview

I hope that helped

Ahmed

Authenticate .NET web service using custom SOAP header

Posted on January 26, 2009January 26, 2009 by Ahmed Shokr in General .NET

Introduction

Using this method we simply add a required SOAP header to our web services calls.

We embed the SOAP header into our message and validate its contents on the server.

If the SOAP header validation done successfully, the web server sends the web service response to the consumer.

Pretty simple, right?

Using the code

First we had our service declaration:

/// <summary>
/// Summary description for SOAPHeaderService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(Name = "TestService",ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SOAPHeaderService : System.Web.Services.WebService
{
    // Visual studio will append a "UserCredentialsValue" property to the proxy class
    public UserCredentials consumer;

    public SOAPHeaderService()
    {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

Notice that the “WebServiceBinding” attribute has the “Name” argument set to “TestService”, I’ll explain this later.

Now, I write the custom SOAP header that I want to include in the SOAP message.

To do this I’ll create a class inherited from “System.Web.Services.Protocols.SoapHeader” , and I’ll but the required properties in it.

public class UserCredentials : System.Web.Services.Protocols.SoapHeader
{
    public string userName;
    public string password;
}

Let’s add instance from that header in our service

// Visual studio will append a "UserCredentialsValue" property to the proxy class
    public UserCredentials consumer;

Note that the visual studio will create a property in web service proxy called “UserCredentialsValue” which will map the “consumer” public property in the web service.

Now we had to write a “Web Method” that uses that header in messaging.

[WebMethod]
    [SoapDocumentMethod(Binding = "TestService")]
    [SoapHeader("consumer",Required=true)]
    public string GetBalance()
    {
        if (checkConsumer())
            return consumer.userName + " had 10000000 credit";
        else
            return "Error in authentication";
    }

Note that I have added the “Binding” value to that I had used in declaring my service.

Also I declared the SOAP header that method will require when called, as long as declaring it with required.

Now, the only thing is remaining is to call the service with the SOAP header:

SOAPHeaderService.SOAPHeaderService service = new SOAPHeaderService.SOAPHeaderService();
SOAPHeaderService.UserCredentials user = new SOAPHeaderService.UserCredentials();

user.userName = "Ahmed";
user.password = "1234";

service.UserCredentialsValue = user;

Console.WriteLine(service.GetBalance());

We just get reference to the service and the SOAP header, assign the SOAP header properties, attach it with the SOAP message and then make our call to the web method.

This is the console result after calling the service with username = “Ahmed” and password = “1234”

This one with other data

Securing their web services is a thing that many developers ignore while they are working; they relay that on that is a difficult and nasty task.

In the fact securing web service is all about understand the messaging layer and the protocols, you just need to go a little more deep and then you will find it is a very simple task.

Sample Project

I hope that helped

Ahmed

Rule based security using Microsoft Enterprise Library and CAS

Posted on January 25, 2009 by Ahmed Shokr in General .NET

Introduction

Rule based security is a very effective way to authorize your code, and code access security is a clean, easy to use and effective way to handle the security validation.

The Enterprise Library Security Application Block provides a configurable way to handle Rule based security.

In this article I’ll explain a solution to secure web applications using custom membership and role providers with the Enterprise Library Security Application Block and code access security.

You need the Enterprise Library installed.

Using the code

First, we need to implement our custom membership provider, in this example I’ll just use static code to explain the provider [Not going to the database or anything].

For this sample I just need to implement the following method:

public override bool ValidateUser(string username, string password)
        {
            return true;
        }

Then, we need to implement our custom role provider.

I just need the following to implement methods:

public override string[] GetRolesForUser(string username)
{
            return SecurityProvider.GetRolesForUser(username);}

public override bool IsUserInRole(string username, string roleName)
{
            return SecurityProvider.IsUserInRule(HttpContext.Current.User, roleName);}

Sure, you can build your own providers with a custom database.

Now, Let’s have a look on the [SecurityProvider] class:

public class SecurityProvider{
        public static bool IsUserInRule(IPrincipal principal, string ruleName)
        {
            IAuthorizationProvider authorizationProvider = AuthorizationFactory.GetAuthorizationProvider();
            return authorizationProvider.Authorize(principal, ruleName);
        }

        public static string[] GetRolesForUser(string username)
        {
            switch (username.ToLower())
            {
                case ("admin"):
                    return new string[] { "Admin" };

                case ("manager"):
                    return new string[] { "Manager" };

                case ("user"):
                    return new string[] { "User" };

                default:
                    return new string[] { "" };

            }
        }
    }

I use the Enterprise Library Security Application Block to make the validation on the rules from the configuration file.

Then, we need to implement a custom CAS permission and attribute like the following [Not implemented functions removed from the next code section but is available in the source code]

public class RulesSecurityPermission : IPermission
    {

        private string _rule;
        public string Rule
        {
            get
            {
                return this._rule;
            }
            set
            {
                this._rule = value;
            }
        }

        public RulesSecurityPermission(string roleName)
        {
            _rule = roleName;
        }

        void IPermission.Demand()
        {
            if (!SecurityProvider.IsUserInRule(Thread.CurrentPrincipal, Rule))
                throw new SecurityException();
        }
    }

public class RulesSecurityPermissionAttribute : CodeAccessSecurityAttribute
    {
        public RulesSecurityPermissionAttribute(SecurityAction action)
            : base(action)
        {
            
        }

        public override IPermission CreatePermission()
        {
            return new RulesSecurityPermission(Rule);
        }
        
        private string _role;
        public string Rule
        {
            get
            {
                return this._role;
            }
            set
            {
                this._role = value;
            }
        }
    }

Now, let’s have a look on the configurations file:

<configuration>
  <configSections>
    <section name="securityConfiguration" type="Microsoft.Practices.EnterpriseLibrary.Security.Configuration.SecuritySettings, Microsoft.Practices.EnterpriseLibrary.Security, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
  </configSections>
  <securityConfiguration defaultAuthorizationInstance="RuleProvider" defaultSecurityCacheInstance="">
    <authorizationProviders>
      <add type="Microsoft.Practices.EnterpriseLibrary.Security.AuthorizationRuleProvider, Microsoft.Practices.EnterpriseLibrary.Security, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
        name="RuleProvider">
        <rules>
          <add expression="R:Admin" name="Administratoin" />
          <add expression="R:Admin OR R:Manager" name="Management" />
          <add expression="R:Manager OR R:User" name="Usage" />
        </rules>
      </add>
    </authorizationProviders>
  </securityConfiguration>

  <system.web>
    
    <compilation debug="true" />
    
    <authentication mode="Forms">
      <forms loginUrl="~/Login.aspx" defaultUrl="~/Default.aspx">
      </forms>
    </authentication>
    
    <authorization>
      <deny users="?"/>
    </authorization>
    
    <membership defaultProvider="CustomMembershipProvider">
      <providers>
        <clear/>
        <add name="CustomMembershipProvider" type="Shokr.Security.RuleBasedSecurity.CustomMembershipProvider"/>
      </providers>
    </membership>
    
    <roleManager defaultProvider="CustomRolesProvider" enabled="true">
      <providers>
        <clear/>
        <add name="CustomRolesProvider" type="Shokr.Security.RuleBasedSecurity.CustomRolesProvider" />
      </providers>
    </roleManager>
    
    </system.web>
</configuration>

In the above code, I had registered the [AuthorizationRuleProvider] from the Enterprise Library and configured our custom membership and roles providers.

Finally, this is the sample in action:

Navigate to the login page, and login with [admin] and any password.

You will be redirected to the default page:

Click on [Administrative function], you will see that the method executed successfully

Click on [User function], you will see security error:

Sample project

I hope that helped

Ahmed

Silverlight Stock Rates Rotator

Posted on January 25, 2009January 25, 2009 by Ahmed Shokr in General .NET

Introduction

Silverlight is a rich framework that works in web browsers using a browser plug-in, just like Flash, but with it, you can interact more easily with .NET libraries. Silverlight has the same code-behind model that exists in ASP.NET, and operates under a modified light version from the .NET framework. With Silverlight, you can build Flash-like applications with full .NET server side code integration. Now, I’ll go through how to build a stock rates rotator with Silverlight and embed it into an ASPX page, step by step. First, you have to download the Silverlight Tools Beta 2 For Visual Studio 2008.

Using the code

Open Visual Studio 2008, and open a new project, select the Silverlight node under Visual C#, and select Silverlight Application:

Click OK to proceed to the following screen:

Select the first option to add a new web site to test your Silverlight controls, and click OK.

Notice these files in you solution:

App.xaml: The entry point for your application that tells which control to begin with, and within it, you can declare the shared variables.
Page.xaml: A Silverlight control which will hold the XAML and has a code-behind file “Page.xaml.cs” which holds the server side code.

Now, I’ll start developing the email form in “Page.xaml”:

<canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns="http://schemas.microsoft.com/client/2007">
        <canvas.triggers>
            <eventtrigger routedevent="Canvas.Loaded">
                <beginstoryboard>
                    <storyboard repeatbehavior="Forever"
                           storyboard.targetproperty="(Canvas.Left)" x:name="animation">
                        <doubleanimation duration="0:0:10" to="-820"
                               from="0" storyboard.targetname="txtResult">
                    </doubleanimation>
                </storyboard>
            </beginstoryboard>
        </eventtrigger>
        <border opacity="1" background="Red">
            <textblock text=" Updating stock rates ...... please wait "
                       foreground="Wheat" x:name="txtLoading" />
        </border>
        <textblock x:name="txtResult">
</textblock></canvas.triggers></canvas>

I made the animation to rotate the “txtResult” textblock from right to left forever. This is a very simple animation; also, I added another textblock to simulate the loading effect. Now, I’ll code the web service which will provide the stock rates to the Silverlight control.

[WebMethod]
public string GetStockData()
{
    // Just to see the loading effect
    System.Threading.Thread.Sleep(2000);

    StringBuilder stockData = new StringBuilder();
    Random randomRate = new Random();

    stockData.Append("USD " + randomRate.NextDouble() + "   |   ");
    stockData.Append("KD " + randomRate.NextDouble() + "   |   ");
    stockData.Append("GBP " + randomRate.NextDouble() + "   |   ");
    stockData.Append("EGP " + randomRate.NextDouble() + "   |   ");
    stockData.Append("AUD " + randomRate.NextDouble());

    return stockData.ToString();
}

It’s a very simple web method just to return the required string. Now, we must code calling the web service from the Silverlight control.

public partial class Page : UserControl
{
    # region "Public members"
    DispatcherTimer timer;
    BasicHttpBinding bind;
    EndpointAddress endPoint;
    // Change this to your local URL
    const string WebServiceUrl =
      "http://localhost:11545/StockRotatorWeb/services/StockData.asmx";
    WebServices.StockDataSoapClient stockService;
    # endregion

    public Page()
    {
        InitializeComponent();

        // Initialize timer
        timer = new DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, 10);
        timer.Tick += new EventHandler(timer_Tick);
        // Initialize the web service proxy and add the event handler
        bind = new BasicHttpBinding();
        endPoint = new EndpointAddress(WebServiceUrl);
        stockService = new WebServices.StockDataSoapClient(bind, endPoint);
        stockService.GetStockDataCompleted += new
          EventHandler<stockrotator.webservices.getstockdatacompletedeventargs>(
          stockService_GetStockDataCompleted);
        stockService.GetStockDataAsync();
        // Start the timer
        timer.Start();
    }
    // Invoked when the calling completed or timed out
    void stockService_GetStockDataCompleted(object sender,
         StockRotator.WebServices.GetStockDataCompletedEventArgs e)
    {
        try
        {
            // Update the result
            txtResult.Visibility = Visibility.Visible;
            txtResult.Text = e.Result.ToString();
        }
        catch (Exception ex)
        {
            // Display the error
            txtResult.Text = ex.InnerException.Message;
        }
        finally
        {
            // Hide the loading textbloxk and restart the timer
            txtLoading.Visibility = Visibility.Collapsed;
            timer.Start();
        }
    }

    void timer_Tick(object sender, EventArgs e)
    {
        timer.Stop();
        txtLoading.Visibility = Visibility.Visible;
        txtResult.Visibility = Visibility.Collapsed;
        // Make the async call to the web service
        stockService.GetStockDataAsync();
    }
}

And this is the test page in action:

And, this with the data displayed:

Sample project

I hope that helped

Ahmed

Slide menu using jQuery

Posted on January 25, 2009January 25, 2009 by Ahmed Shokr in General .NET

Introduction

jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add AJAX interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

In this article, I’ll build a sliding JavaScript menu using jQuery.

Using the code

First, you must reference the jQuery library which can be downloaded form here. Then, you can make the menu HTML page as in the following code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JQuery Sample Menu</title>
    <link rel="Stylesheet" type="text/css" href="styles/navigation.css" />
    <script type="text/javascript" language="javascript" src="scripts/jquery-1.2.3.js"/>
    <script type="text/javascript" language="javascript" src="scripts/CustomMenu.js"/>
</head>
<body>
<h2>This is a sample menu using JQuery</h2>
<h4>Try to click on the clickable items in the menu to see the animation</h4>
<ul class="menu">
    <li>- Parent item with no children</li>
    <li>
    - Item 1 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    </ul>
    </li>
    <li>
    - Item 2 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    <li>Nested item 4</li>
    </ul>
    </li>
    <li>
    - Item 3 with children
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li></ul>
    </li>
    </ul>
</body>
</html>

Now, for the JavaScript magic! Just use the following JavaScript piece of code:

$(function() // Register the menu
      {
// Add the click event handler on the list item with sub list
$('li:has(ul)') 
           .click(function(event){
            if (this == event.target) {
               // Hide all the children of the other lists
               $('li:has(ul)').children().hide('slow'); 
               // Make the animation
               $(this).children().animate({opacity:'toggle',height:'toggle'},'slow'); 
                                      }
                     return false;
                                 }
                   )
            // Change the cusrsor.
           .css({cursor:'pointer'})
           // Hide all the nested lists (on the first tinm only).
           .children().hide();
       }
 );

Now you can have the sliding effect without so much JavaScript coding.

Menu at start:

Menu in action:

Sample project

I hope that helped

Ahmed

	Ashish on Using Enterprise Library to Ma…
	gold flats on Kuwait Civil ID Validator
	weight loss on SharePoint Saturday Presentati…
	Nadia on SharePoint Saturday Presentati…
	Rachelle on Visual Studio 2012 Report Proj…

	Ashish on Using Enterprise Library to Ma…
	gold flats on Kuwait Civil ID Validator
	weight loss on SharePoint Saturday Presentati…
	Nadia on SharePoint Saturday Presentati…
	Rachelle on Visual Studio 2012 Report Proj…

Shokr's Technical Blog

If everyone is thinking alike, then no one is thinking

Category: General .NET

SharePoint Saturday Kuwait’s 1st EVER SharePoint Saturday held at MIC

Using Microsoft Virtual Earth for Vehicle Tracking and Geo Fencing Sample

Introduction

Using the code

jQuery AJAX Load Sample

Introduction

Using the code

Just passed MCTS Microsoft Office SharePoint Server 2007: Application Development

Authenticate .NET web service using custom SOAP header

Introduction

Using the code

Rule based security using Microsoft Enterprise Library and CAS

Introduction

Using the code

Silverlight Stock Rates Rotator

Introduction

Using the code

Slide menu using jQuery

Introduction

Using the code

Share this:

Like this:

Introduction

Using the code

Share this:

Like this:

Introduction

Using the code

Share this:

Like this:

Share this:

Like this:

Introduction

Using the code

Share this:

Like this:

Introduction

Using the code

Share this:

Like this:

Introduction

Using the code

Share this:

Like this:

Introduction

Using the code

Share this:

Like this: