Thank you ‘Yourstory’ for covering my story

I have always been in a continuous race to learn and let people learn by my work and experience. Though getting recognized is just another way to boost the confidence of the rising talents. I thank the team of ‘YourStory’ and Ms. Shraddha Sharma @sharmashradha for covering my unsung background and struggle. It was indeed an astounding experience to share my story with them.

I am grateful to my mentors, Mr. Mahesh Chand, Mr. Pinal Dave and Mr. Gaurav Mantri who have always guided me move through issues. Also I would like to thank my international mentors, Mr. Glenn Block, Mr. Dan Wahlin, Mr. Stephen Forte and Ms. Julie Lerman who have incredibly supported me over my past years.
Read my interview at Yourstory

How to create watermark Textbox in Windows Phone 8

In this tutorial in step by step manner we will learn to create watermark textbox in Windows Phone 8. Watermark textbox looks like below. You use watermark textbox in your app if you want to display readable text to user such that they can enter desired information in that particular textbox. In below app these two watermark textboxes are giving information that user should enter Name and Phone in first and second textboxes respectively.

image

Let us learn how we can create watermark textbox.

Step 1

Create two text boxes and set text property of textboxes as watermark text. Since we want to display Name and Phone as watermark text of two textboxes so we have set Text property as Name and Phone respectively.

 



<TextBox x:Name="txtName"
                     Text="Name"                     
                     GotFocus="txtName_GotFocus" 
                     LostFocus="txtName_LostFocus"
            />
                
            <TextBox x:Name="txtPhone" 
                     Text="Phone"                    
                     GotFocus="txtName_GotFocus"
                     LostFocus="txtName_LostFocus"
             />



I have also set GotFocus and LostFocus events of textboxes.

Step 2

In watermark textbox when user will click on the textbox prepopulated value should get erased and user can type in new value. In Windows Phone 8 for textbox GotFoucs event gets fired when user selects textbox, so on GotFocus we need to perform two tasks,

  1. Erase prepopulated task
  2. In case user has left textbox without putting any value then again set textbox text with previous prepopulated value.

 


        string data;
        private void txtName_GotFocus(object sender, RoutedEventArgs e)
        {

            TextBox t = sender as TextBox;
            data = t.Text;
            t.Text = string.Empty;

        }



In above code snippet we are typecasting as TextBox and then setting its Text property to string.empty. Before setting value to empty we are saving existing text value such that if user leaves textbox control without inserting any value then previous value can be used to prepopulate textbox.

Step 3

Assume that user clicked or touched textbox but did not type any value and went away. In this case pervious value should get prepopulated in textbox. So to do this when user will navigate from control we need to check that whether textbox contains any value. If textbox text is empty then we will set text property to previous value. This can be done as below,

 


   
private void txtName_LostFocus(object sender, RoutedEventArgs e)
        {
            TextBox t = sender as TextBox;
            if (t.Text.Equals(string.Empty))
            {
                t.Text = data;
            }

        }


This is what all you need to do to create watermark textbox in Windows Pone 8. I hope this post is useful. See demo of control below,

No Data tab in portal in Azure Mobile Services: Solved

Azure Mobile Service supports two platform for the backend. They are

  1. .NET backend
  2. JavaScript backend

I worked with JavaScript backend many times but with .NET backend it was my first attempt. So while creating Azure Mobile Service, I selected .NET platform as backend. To my surprise there is no Data tab available when you choose .NET backend.

clip_image002

Reason behind this is if you choose .NET backend data access becomes part of the .NET project and should be deployed from there. And in JavaScript backend Data tab would be visible in portal and scripts can run at the portal.

Learn AngularJS: Hour 2

In hour 1 of this series we learnt to get started with AngularJS. In this hour we will see Angular Templates and how AngularJS app can be embraced into a pattern.

Let us start with writing a simple web application with static template. In below application we are printing name of the authors in HTML unordered list.


<body>
    <h1>Authors : 8</h1>
   <ul>
       <li>Dhananjay Kumar</li>
       <li>Pinal Dave</li>
       <li>Glen Block</li>
       <li>Dan Wahlin</li>
       <li>Julie Learman</li>
       <li>Mahesh Chand</li>
       <li>Prabhjot Singh</li>
       <li>Gaurav Mantri</li>
   </ul>
</body>

We will get application rendered as below and authors are printed in HTML using static template. Below rendered page is pure static HTML page.

clip_image002

Next we will learn to populate Authors dynamically using AngularJS. Before we get into implementation of this, let us understand that AngularJS Apps can be created adhering any MV* pattern. For this implementation we will follow Model-View-Controller pattern. Let us start with creating controller. Controller can be created in a separate JavaScript file. I have created a JavaScript file Product.js.

Author.js

 


var AuthorApp = angular.module('AuthorApp', []);

AuthorApp.controller('AuthorController',function($scope)
{
    $scope.authors =
        [
                { 'name': 'Dhananjay Kumar' },
                { 'name': 'Pinal Dave' },
                { 'name': 'Glen Block' },
                { 'name': 'Dan Wahlin' },
                { 'name': 'Mahesh Chand' },
                { 'name': 'Prabhjot Singh' },
                { 'name': 'Julie Learman' }
       ];
});


Let us examine the controller class,

  • In first line we are creating Module.
  • In second line we are creating Controller. Controller is a function which takes $scope as parameter.
  • Then adding authors JOSN array in scope of the controller. This is Model.

In Angular Controller is a constructor function that takes $scope parameter.

Once we have Controller in place we will have to create View. View simply displays model through templates.

image

View and Template get created in HTML. We will bind View with Controller and Angular will project data from Model on the View. On the View we are using various Angular directives.

image

We created AuthorApp module and AuthorController controller in Author.js. Now if you see we bind View and Controller in three steps,

  1. Implicit Scope Declaration
  2. Scope Inheritance
  3. Model-View Data Binding

In first step we did Scope declaration by setting ng-app directive to Angular module name.

clip_image002[6]

Then Scope Inheritance is done by setting ng-controller directive. After setting ng-controller directive scope of body is set to controller we created in Author.js

clip_image004

Now any element inside this body can bind to array of controller.

clip_image006

These are simple steps you need to follow to work with Angular Template and Controller. For your reference code of View an Template is given below,

 


<!DOCTYPE html>
<html ng-app="AuthorApp">
<head>
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Author.js"></script>
</head>
<body ng-controller="AuthorController">
    <ul>
        <li ng-repeat="author in authors">
            {{author.name}}
        </li>
    </ul>
</body>
</html>


In next hours we will get into other aspects of AngularJS.

Learn AngularJS : Hour 1

Who is not talking about Angular.JS? Undoubtedly it is most powerful framework (Not Library) to create Single Page Applications (SPA). In this Learn AngularJS series, I will focus on basics of Angular. This series will help you in getting started with AngularJS. In first hour we will write first AngularJS Apps and understand bootstrapping of AngularJS Application.

Hello World AngularJS Application

Best way to start learning is to write Hello World web app using AngularJS. Let us start with downloading AngularJS. Navigate to https://angularjs.org/ and click on Download button. You have various download options. I am going with Minified version of 1.3x. You are free to choose Uncompressed, Zip or even use CDN in your project. If you are using Visual Studio as development IDE then you can add AngularJS using Manage Nuget packages also.

image

I have downloaded minified version and added to demo project. To work with AngularJS, first we need to add reference of AngularJS.

image

As you see we need only one file to work with AngularJS. Now let us start writing a very simple application with AngularJS.

To start with I have created a div with following content.

image

On render we will get following output which is expected.

image

Let us convert above HTML in Angular Application. To do that we need to add Angular directive ng-app. This directory can be added at whole document level or body level or at the div level. I am adding at body level lie below,

image

Now On render we will get following output,

image

As you see now DOM has been converted to Angular Application, hence {{2+2}} has been evaluated to 4. Let us consider one more example, in below example we are binding ng-model directive to an expression.

image

As you type you will get data is getting printed from the model in expression. So Angular is binding data from model to expression very easily.

Bootstrapping of AngularJS Application

Now let us understand Bootstrapping of AngularJS Apps. Bootstrapping means how AngularJS can be initialize in application. There are two steps to do that,

  • Add reference of AngularJS using script. Recommended is to add reference at the bottom of page, such that app load time gets improved.
  • Next add ng-app directive at the root of the application i.e. on the HTML tag. This will auto bootstarp application.

Bootstrapping of Angular App occurs in three steps,

image

In further posts we will talk about Injector and Dependency Injection. In our example we put directive on the body element. To create root scope at whole application level, we need to put ng-directive at HTML level.

image

Let us conclude first hour of AngularJS learning. Full code for binding with static model is given below,

 


<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div >
        Grade <input type="text" ng-model="grade" />
        <br/>
        Printing from Model :  
        <br/>
        {{grade}}
    </div>
</body>
</html>

On running this application you will get application that on typing from textbox value will be binded to DOM. I hope first hour of learning is useful. Thanks for reading.