Silverlight Validation Using INotifyPropertyChanged

If we want to perform validation in silverlight we have to use INotifyPropertyChanged interface which notifies clients that a property value has changed.

Create a user class and implement INotifyPropertyChanged interface.

public class User : INotifyPropertyChanged

{

        //Delegate.

        public event PropertyChangedEventHandler PropertyChanged;

        //Username.

        private string userName;

        public string UserName

        {

            get { return userName; }

            set

            {

                //Validate the username for 6 chars.

                if (value.Length < 6)

                {

                    throw new ArgumentException("User Name should contain atleast 6 chars");

                }

                userName = value;

                RaisePropertyChanged("UserName");

            }

        }

        //Password.

        private string password;

        public string Password

        {

            get { return password; }

            set

            {

                //Validate the password for 6 chars.

                if (value.Length < 6)

                {

                    throw new ArgumentException("Password should contain atleast 6 chars");

                }

                password = value;

                RaisePropertyChanged("Password");

            }

        }

        //Occurs when a property value changes.

        private void RaisePropertyChanged(string propertyName)

        {

            if (this.PropertyChanged != null)

            {

                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

}

In Login.xaml page:-

<Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="30"></RowDefinition>

            <RowDefinition Height="30"></RowDefinition>

            <RowDefinition Height="30"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid Grid.Row="0">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="250"></ColumnDefinition>

                <ColumnDefinition Width="100"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <sdk:Label Height="28" Grid.Column="0" HorizontalAlignment="Left"  Name="lblUserName" Content="Enter User Name:" VerticalAlignment="Top" Width="100"/>

            <TextBox Grid.Column="0"  HorizontalAlignment="Right"  Name="txtUserName" VerticalAlignment="Top" Width="150">

                <TextBox.Text>

                    <!--Binding should be twoway-->

                    <Binding Mode="TwoWay" Path="UserName" NotifyOnValidationError="True" ValidatesOnExceptions="True"/>

                </TextBox.Text>

            </TextBox>

        </Grid>

        <Grid Grid.Row="1">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="250"></ColumnDefinition>

                <ColumnDefinition Width="100"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <sdk:Label Height="28" Grid.Column="0" HorizontalAlignment="Left"  Name="lblPassword" Content="Enter Password:" VerticalAlignment="Top" Width="100"/>

            <TextBox Grid.Column="0"  HorizontalAlignment="Right"  Name="txtPassword" VerticalAlignment="Top" Width="150">

                <TextBox.Text>

                    <!--Binding should be twoway-->

                    <Binding Mode="TwoWay" Path="Password" NotifyOnValidationError="True" ValidatesOnExceptions="True"/>

                </TextBox.Text>

            </TextBox>

        </Grid>

        <Button Grid.Row="2" Content="Login" Height="23" HorizontalAlignment="Left" Name="btnLogin" VerticalAlignment="Top" Width="75" />

    </Grid>

In constructor:-

public partial class Login: UserControl

    {

        public Login()

        {

            InitializeComponent();

            //User object.

            User objUser = new User();

            LayoutRoot.DataContext = objUser;

        }

    }

Run the appliction without debugging.

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com

Silverlight HtmlPage Class

HtmlPage.BrowserInformation gives general information about the browser, such as name, version, and operating system.

HtmlPage.Window gets the browser's window object.

HtmlPage.Document gets the browser's document object.

HtmlPage.PopupWindow opens a pop-up window.

Calling  javascript functions  from silverlight :-

private void btnAlertWindow_Click(object sender, RoutedEventArgs e)

{

    //First parameter is function name then parameters to send.

    HtmlPage.Window.Invoke("alertWindow", "hai");

}

In silverlight host page:-

function alertWindow(mes) {

//Alert the user.

      alert('alert from html page...' + mes);

}

Calling  silverlight  functions  from javascript:-

If we want to call Silverlight functions from javascript we have to create a class  with attributes like ScriptableType and ScriptableMember.

[ScriptableType]

public class User

 {

    [ScriptableMember]

    public string GetFullName(string firstName, string lastName)

    {

            return firstName + " " + lastName;

    }

}

Then register the user object with key name which is usefull to get the object in javascript.

HtmlPage.RegisterScriptableObject("objUser", new User());

In silverlight host page:-

function getFullName()

{

//Here we are getting the host div tag.

var silverlightControlHost = document.getElementById('divHost');

//Here we are getting the silverlight object tag and user object by     key     name and calling the function.

var result =   silverlightControlHost.all.namedItem('objHost').Content.objUser.GetFullN ame("David", "Jackson");

//Alert the user.

alert('Full name:' + result);

}

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com

Crossdomain Calls Using Window Name

ParentPage Js File:-

         //Last recieved value.

         var last = 0;

        //Send message to iframe.

        function toIFrame() {

            //Get the iframe.

            var iFrame = document.getElementById("iframepage").contentWindow;

            //Send the message to iframe.

            iFrame.name = "message=" + new Date().getTime();

        }

    <div>

        <div>

            <input type="button" value="ToIFrame" onclick="return toIFrame();" />

        </div>

        <iframe id="iframepage" src=" iframe page url "

            width="400" height="300" border="1"></iframe>

    </div>

IFramePage:-

        //Last recieved value.

        var last = 0;

        //Get the message on time interval.

        function getMessage() {

            //Get the window name.

            var wName = window.name;

            //Check the window name value.

            if (wName) {

                //Message

                var message;

                //Get the messgage.

                message = wName.split('=')[1];

                //Check the last value with current value.

                if (last != message) {

                    //Assign last value.

                    last = message;

                    //Append the message to body.

                    $('<div/>').html(message).appendTo('#output');

                }

            }

        }

        //Timer for getting messages.

        setInterval(getMessage, 200);

    <div id="output">

    </div>

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com

Crossdomain Calls Using IFrame Reload

ParentPage Js File:-

         //Last recieved value.

         var last = 0;

        //Url of iframe page

        var url = "iframe page url";

        //Send message to iframe.

        function toIFrame() {

        //Get the iframe.

        var iFrame =                                                    document.getElementById("iframepage").contentWindow;

            //Send the message to iframe.

            iFrame.location = url + "?message=" + new Date().getTime();

        }

        //Get the message on document load.

        $(document).ready(function () {

            //Message.

            var message;

            //Get the query string value.

            var qstring = location.href.split('?');

            //Check whether query string exist or not.

            if (qstring.length > 1) {

                //Get the message.

                message = qstring[1].split('=')[1];

                //Append the message to body.

                $('<div/>').html(message).appendTo('#output');

            }

        });

      <div>

        <div>

            <input type="button" value="ToIFrame" onclick="return toIFrame();" />

        </div>

           <iframe id="iframepage" src="iframe page url "

              width="400" height="300" border="1"></iframe>

         <div id="output">

         </div>

      </div>

 IFramePage:-

          //Last recieved value.

        var last = 0;

        //Url of parent page

        var url = "parent page url ";

        //Send message to parent page.

        function toParent() {

          //Send message to parent.

          window.parent.location = url + "?message=" + new Date().getTime();

        }

         //Get the message on document load.

        $(document).ready(function () {

            //Message.

            var message;

            //Get the query string value.

            var qstring = location.href.split('?');

            //Check whether query string exist or not.

            if (qstring.length > 1) {

                //Get the message.

                message = qstring[1].split('=')[1];

                //Append the message to body.

                $('<div/>').html(message).appendTo('#output');

            }

        });

     <div>

          <input type="button" value="ToParent" onclick="return  toParent();" />

    </div>

    <div id="output">

    </div>

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com

Crossdomain Calls Using Hash

Hash is a read/write string property of the URL object. It marks the rest of the URL as a fragment identifier. For crossdomain calls in javascript we can use this hash value.

ParentPage Js File:-

        //Last recieved value.

                var last = 0;

        //Url of iframe page

        var url = "iframe page url";

        //Send message to iframe.

        function toIFrame() {

            //Get the iframe.
            var iFrame = document.getElementById("iframepage").contentWindow;

            //Send the message to iframe.

            iFrame.location = url + "#message=" + new Date().getTime();
        }

        //Get the message on time interval.

        function getMessage() {

            //Get the hash value.
            var hash = window.location.hash;

            //Check the hash value.

            if (hash) {

                 //Message

                var message;

                //Get the messgage.
                message = hash.split('=')[1];

                //Check the last value with current value.

                if (last != message) {

                    //Assign last value.

                    last = message;

                    //Append the message to body.

                    $('<div/>').html(message).appendTo('#output');
                }
            }
        }
        //Timer for getting messages.
        setInterval(getMessage, 200);

<div>
   <div>
     <input type="button" value="ToIFrame" onclick="return toIFrame();" />
        </div>
           <iframe id="iframepage" src="iframe page url "
            width="400" height="300" border="1"></iframe>
        <div id="output">
        </div>
</div>

IFramePage Js File:-

        //Last recieved value.

      var last = 0;

      //Url of parent page

      var url = "parent page url ";

      //Send message to parent page.

      function toParent() {

       //Send message to parent.

               window.parent.location = url+"#message=" + new Date().getTime();
     }

        //Get the message on time interval.

        function getMessage() {

            //Get the hash value.
            var hash = window.location.hash;

            //Check the hash value.

            if (hash) {

                //Message

                var message;

                //Get the messgage.

                message = hash.split('=')[1];

                //Check the last value with current value.
                if (last != message) {

                    //Assign last value.

                    last = message;

                    //Append the message to body.

                    $('<div/>').html(message).appendTo('#output');
                }
            }
        }

        //Timer for getting messages.
        setInterval(getMessage, 200);

<div>

   <div>
     <input type="button" value="ToParent" onclick="return toParent();" />
   </div>
   <div id="output">
   </div>
</div>

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com