Friday, 13 April 2018

Understanding Delegates in C#

Background

Delegates are a very important part of C# programming language. A delegate in C# holds a reference to a method. Think of it as a pointer to the method. This reference or pointer can change at runtime. A delegate can also reference multiple methods and can invoke them all together. Think about event listeners for a Button in UI. You can add as many event listeners as you want and when the button is clicked all methods get the callback - much like the Observer Design Pattern. In this post well see how delegates work with an example.

Understanding Delegates in C#

Syntac of a delegate declaration is -
  • delegate <return type> <delegate-name> <parameter list>
For eg. consider -
  • public delegate void PriceChangeDelegate(int oldPrice, int newPrice); 

Now this delegate can point to any method that has return type void and parameters list (int, int). We will see a demo in a while. But the declaration syntax should be clear now.

So for this demo idea is to define an Item Object and with an attribute call price and we want to provide our own callback to receive updates whenever price of the item changes. We will do this using a delegate.

So let's first define our Item class -

namespace HelloWorld
{
    class Item
    {
        private int price;
        public PriceChangeDelegate PriceChanged;
        public int Price {
            get { return price; }
            set {
                if(value != 0)
                {
                    if(value != price)
                    {
                        PriceChanged(price, value);
                    }
                    price = value;
                }
            }
        }
    }
}



Notice how have created a private variable price (lower case by convention) and then a public property called Price (uppercase by convention) to encapsulate the price. Set method of this property is where our logic is. We are calling the delegate  PriceChanged when the old value price is different than current value. Also, notice how we have declared a public delegate member in class -
  • public PriceChangeDelegate PriceChanged;
 However, we have not yet declared our delegate type PriceChangeDelegate anywhere. Let's do that now -

namespace HelloWorld
{
    public delegate void PriceChangeDelegate(int oldPrice, int newPrice);
}


And there we go. Now our delegate instance can point to any methods of return type void and parameters (int, int) like we saw before. Now let's see all of this in action.


namespace HelloWorld
{
    class Program
    {
        public static void Main(string[] args)
        {
            Item item = new Item();
            item.PriceChanged = new PriceChangeDelegate(ItemPriceChangeCallback);
            item.Price = 100;
            Console.ReadLine();
        }
        public static void ItemPriceChangeCallback(int oldPrice, int newPrice) {
            Console.WriteLine("Item price changed from " + oldPrice + " to " + newPrice);
        }
    }
}


Here we are creating an instance of Item and setting a value for price to 100. Note the default value of primitive int is 0. So now when we set it to 100 we are essentially changing the price of the item. Also before that, we are assigning the delegate to the method we have locally called ItemPriceChangeCallback. So when items price will be changed ItemPriceChangeCallback will be called and our statement should get printed. Let's give it a try.




So that worked! Now like I said before a delegate can reference multiple methods as long as return type and paramters are same. Let's see how we can do that. Let's change our previous code a bit.


namespace HelloWorld
{
    class Program
    {
        public static void Main(string[] args)
        {
            Item item = new Item();
            item.PriceChanged += new PriceChangeDelegate(ItemPriceChangeCallback1);
            item.PriceChanged += new PriceChangeDelegate(ItemPriceChangeCallback2);
            item.Price = 100;
            Console.ReadLine();
        }
        public static void ItemPriceChangeCallback1(int oldPrice, int newPrice) {
            Console.WriteLine("ItemPriceChangeCallback1 :: Item price changed from " + oldPrice + " to " + newPrice);
        }
        public static void ItemPriceChangeCallback2(int oldPrice, int newPrice)
        {
            Console.WriteLine("ItemPriceChangeCallback2 : Item price changed from " + oldPrice + " to " + newPrice);
        }
    }
}


and the output is -


Notice our syntax for assigning delegate has changed. Instead of assigning we are adding it now -

  • item.PriceChanged += new PriceChangeDelegate(ItemPriceChangeCallback1);
  • item.PriceChanged += new PriceChangeDelegate(ItemPriceChangeCallback2);
instead of

  • item.PriceChanged = new PriceChangeDelegate(ItemPriceChangeCallback);

 We have defined two methods ItemPriceChangeCallback1 and ItemPriceChangeCallback2 to show this behavior. You can have as many as you wish as long as delegate contract in honoured - same return type and parameters type and number.

Also note you need not use new keyword again and again. C# compiler is intellegent enough to do this itself. You can simply do.

  • item.PriceChanged += ItemPriceChangeCallback1;
  • item.PriceChanged += ItemPriceChangeCallback2;
 It would give the same result.

Lastly you can remove all references by setting delegate as null -
  • item.PriceChanged = null;
 You would get a Null reference exception since are using delegate without instantiating our delegate and it is null by default. But this is not a desired behavior. To avoid this we can define our delegate as event. For this go back to our Item class and change -
  • public PriceChangeDelegate PriceChanged;
to
  • public event PriceChangeDelegate PriceChanged;
 and you can see that assigning null to PriceChanged is no longer possible.



 And that's all for delegates. Post your questions in comments below. Thanks.



Thursday, 5 April 2018

How to use a file to store all your logs in Xamrin Android App

Background

You can see the debug logs in the Device Log tab in Visual studio but you need to connect a USB to your android phone (not needed if you are using an emulator). However this is for realtime debugging and will not be useful to check logs that were present couple of hours back. In this post I will show you how you can log into a file in the android sd card so that you can refer it at any point in time to see what has happened.


How to use a file to store all your logs in Xamrin Android App

You can log to a file using following code snippet -

using System;
namespace Com.Osfg
{
    public class LogUtils
    {
        String logFilePath = null;

        public LogUtils()
        {
            String path = Android.OS.Environment.ExternalStorageDirectory.Path;
            logFilePath = System.IO.Path.Combine(path, "log.txt");
            if(!System.IO.File.Exists(logFilePath))
            {
                using (System.IO.StreamWriter writer = new System.IO.StreamWriter(logFilePath, true))
                {
                    writer.WriteLine("Starting logging at " + DateTime.Now.ToString());
                }
            }
        }

        public void Log(String message)
        {
            using (System.IO.StreamWriter writer = new System.IO.StreamWriter(logFilePath, true))
            {
                writer.WriteLine(DateTime.Now.ToString() + " : " + message);
            }
        }
    }
}

Let's uderstand whats happening here -

In the constructor we are getting the external storage directory and creating a file called "log.txt" there. We are checking if the file already exists and if it does not we create it. Now anyone who want to log to this file can simple create an instance of LogUtils and call Log method on it.

You can do this on OnCreate of your main activity. For me external storage file is - /storage/emulated/0 so my complete log file path is /storage/emulated/0/log.txt

Make sure you have provided appropriate permissions in the manifest file -

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />


Related Links



Friday, 30 March 2018

Hello World Xamrin Android project tutorial

Background

Xamrin are set of tools built on .NET framework . It allows you to develop applications for Android, iOS and Windows using C# language and the .NET framework.In this post I am going to show you how to develop a native android application using xamrin.

Setup

For this tutorial you need to have Visual Studio with Xamrin components installed on your Windows operating system. You can get it from Visual Studio installer. Or from Visual Studio you can go to Tools -> Get Tools and Features.


 Hello World Xamrin Android project tutorial

Click on File -> New Project  and choose Blank App(Android)

 One you have created the project you should see following code structure -


 Let's go over some of the important files here -
  1. MainActivity.cs : This is your main launcher activity.
  2. Resources/layout/Main.axml : This is your launcher ctivity layout file
  3. Resources/values/String.xml : This is your string resource file.
Go to  Resources/layout/Main.axml and add a EditText and a Button to the Linear Layout that you have. You can do that from  Designer mode with just drag and drop.



Change the id of EditText and Button to "helloWorldeditText" and "ckickMeButton" respectively. So your source would look like -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/helloWorldeditText"
        android:text="Hello World!" />
    <Button
        android:text="Click Me!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ckickMeButton" />
</LinearLayout>
Now go to MainActivity.cs and make following changes. We are basically going to implement a button and  change the text of EditText on the click of the button.
using Android.App;
using Android.Widget;
using Android.OS;

namespace AndroidDemo
{
    [Activity(Label = "AndroidDemo", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            EditText helloWorldEditText = FindViewById<EditText>(Resource.Id.helloWorldeditText);
            Button clickButton = FindViewById<Button>(Resource.Id.ckickMeButton);
            helloWorldEditText.Text = "Hello World!";
            clickButton.Click += delegate { helloWorldEditText.Text = "Button Clicked!"; };
        }
    }
}



Notice the resource IDs we changed and use to reference it in the code. And that's it. Just deploy the code to an android device or an emulator and test our changes.





Related Links




Sunday, 18 March 2018

How To Set Up an HTTPS Service in IIS

Background

Windows provides Internet information service (IIS) to host your local applications on your windows machine. You need to enable IIS from "Turn Windows features on or off".



Once you have done that you can add an application to it and get started. I have created a youtube video to demo the same -



This video shows how to set up a simple website on IIS and also add https support. I am also going to show how to add https support part in this post.

How To Set Up an HTTPS Service in IIS

First, make sure you have self-signed certificate generated in your IIS manager. To do that go to "Server certificates" in your machine home node inside your IIS manager -


Next, double-click the "Server Certificates" section and make sure a self-signed certificate exists. 




If no certs exist for localhost go ahead and create one using "Create self-signed Certificate". 

Once you have the certificate go to Sites in the navigation panel on the left and click on Default website under sites.


Next, click on "Bindings" in the section on the right and add https binding. Make sure you select correct SSL certificate in the process that we create in previous steps.


Once you are done just click ok and you should have https binding set for your website.


Now you can open your website with https protocol.




Related Links

Sunday, 11 March 2018

AngularJS Routing Using UI-Router

Background

In the last post, we saw AngularJS Hello World example. In this post, we will see how we can create an angular JS app with routing using UI-Router module. If you have not read the previous post I would highly recommend you read that first.


 Setup

There is a small change in the file structure than our previous example. Create files as shown in the following screenshot -



Following are file details -
  • helloWorld.html : Our main HTML file. Starting page similar to the last example.
  • helloworld.module.js : Declares angular module and it's dependencies
  • helloWorld.controller.js : Controller for the module
  • helloworld.config.js : Config for the module.  
  • login.html : login page to route to
  • setting.html : setting page to route to
 Also make sure you install http-server module to host your angular app and test it -
  • npm install -g http-server


Then you can simply run in your project directory as -
  • http-server -o 
NOTE : -o option is to open browser.

AngularJS Routing Using UI-Router


Now let's see one by one content of each file. Let's start with  helloWorld.html -

<html>
    <head>
        <title>Hello World!</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
            <script type="text/javascript" src="helloworld.module.js"></script>
        <script type="text/javascript" src="helloWorld.controller.js"></script>
        <script type="text/javascript" src="helloworld.config.js"></script>
    </head>
    <body ng-app="helloWorldApp">
        <div ng-controller="helloWorldAppController" ng-init="init()">
                  <p>Enter Message here : <input type="text" ng-model="message"></p>
                   <p>Entered Message :  {{ message }}!</p>

                   <a href="/login">Login</a> <br/>
                   <a href="/setting">Setting</a>

                <div class="content-wrapper">
                    <ui-view></ui-view>
                </div>    
        </div>
    </body>
</html>


In this base HTML file we have just referenced other angular JS files that we need. An interesting thing to note here is the ui-view tag. This is where the injected code goes. But we will see that in a moment.


Let's see out module and controller files next -


helloworld.module.js

(function() {
    'use strict';
    console.log("In hello world module");
    angular.module('helloWorldApp', ['ui.router']);
})();


This code just declares your module as we did in last example. Only change is that it has an additional dependency on ui.router module. Note we have included a new script in helloWorld.html to get code for this module.


helloWorld.controller.js

(function(){
    'use strict';
    console.log("In hello world controller");
    angular.module("helloWorldApp").controller("helloWorldAppController", function($scope) {
        $scope.init = function() {
            console.log("Init method called");
            $scope.message = "Hello World!";
        }
    });

})();


This is a controller of the module we defined. This is again same as we did in last post. No new changes here.


Now let's see our new logic - helloworld.config.js


(function() {
    'use strict';
    console.log("In hello world config");
    angular.module('helloWorldApp').config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider.state('login',{
                     url: "/login",
                     templateUrl: "login.html"
                })
            .state('settings',{
                    url: "/setting",
                    templateUrl: "setting.html"
            });
        }
    ]);
})();






 

This is actually the routing logic. For eg. if it encounters URL "/login" it will render page "login.html" that we have in same folder. Same for setting.html.


Finally, let's see out login.html and setting.html files -


login.html -


<h1>This is a login page!</h1>
<a href="/helloWorld.html">Back</a>



setting.html -


<h1>This is a login page!</h1>
<a href="/helloWorld.html">Back</a>


 Once you have all files in place just run http-server as follows -




And you should see following behavior - 


 






But wait what happened? I thought the code was supposed to be injected at tag ui-view.

This is because we do not actually use angular routing per say to change the state. Let's do some changes to see how we can do that. Change your login href as follows - 

<a href="" ng-click="replaceLoginPage()">Login</a>


and now add this method to the controller -


(function(){
    'use strict';
    console.log("In hello world controller");
    angular.module("helloWorldApp").controller("helloWorldAppController", function($scope, $state) {
        $scope.init = function() {
            console.log("Init method called");
            $scope.message = "Hello World!";
        }

        $scope.replaceLoginPage = function() {
            console.log("In replaceLoginPage");
            $state.go("login");
        }
    });

})();



And now it should replace ui-view tag.









Related Links



t> UA-39527780-1 back to top