In this article you will see how to create a masked password textbox. A masked control is used to save time and reduce the complaints and errors. They enhance the function of the textbox control, which can validate the input. By default the property masked is set to none. A password textbox is used for authorization of an any application. It is very useful to provide security for any application.

1. Open Your VS LightSwitch and Create a New Table

2. Create a Table called Customer

3. Right Click on Screens à Add screen

4. Select New Data Screen

5. Expand Password à select textbox and custom control

6. Go to password properties à Click change

7. Select password control à OK

8. Click write code->Select CreateNewCustomer_InitializeDataWorkSpace->Write the following code

using System;
using System.Linq;
using System.IO;
using System.IO.IsolatedStorage;
using System.Collections.Generic;
using Microsoft.LightSwitch;
using Microsoft.LightSwitch.Framework.Client;
using Microsoft.LightSwitch.Presentation;
using Microsoft.LightSwitch.Presentation.Extensions;
namespace LightSwitchApplication
{
    public partial class CreateNewCustomer
    {
        partial void CreateNewCustomer_InitializeDataWorkspace(List<IDataService> saveChangesTo)
        {
            // Write your code here.
            this.CustomerProperty = new Customer();
             this.FindControl("Password").ControlAvailable += pwdAvailable;
        }
        private void pwdAvailable(object sender, ControlAvailableEventArgs e)
        {
            ((System.Windows.Controls.Control)e.Control).LostFocus += PasswordLostFocus;
        }
        private void PasswordLostFocus(object sender, System.Windows.RoutedEventArgs e)
        {
             this.CustomerProperty.Password = ((System.Windows.Controls.PasswordBox)sender).Password;
        }
        partial void CreateNewCustomer_Saved()
        {
            // Write your code here.
            this.Close(false);
            Application.Current.ShowDefaultScreen(this.CustomerProperty);
        }
    }
}

9. Run Application (Press F5)

Visual Studio over the years has provided very good support for the core application development languages like C#, VB, etc. But when it comes to web development languages like javascript and CSS, Visual Studio lacked some main support such as intellisense, debugging, etc. This article discusses some key features introduced in Visual Studio 11 with respect to Javascript and CSS.

Javascript

In this section we will look at some important and useful features that the Visual Studio 11 JavaScript editor provides.

Intellisense, Type Inference & Documentation

Prior versions of Visual Studio were a pain for Javascript developers due to the lack of intellisense for Javascript. The intellisense provided was very basic; developers had to be very sure of the method and class names, including the casing. Now Visual Studio 11 provides complete intellisense support for all the javascript objects and its methods. Fig below is a sample intellisense menu and you can see the number of options.



Visual Studio 11 also provides rich intellisense support for popular third party Javascript libraries like JQuery. Since Jquery is used by almost all web developers this will be of tremendous help to them. Fig below shows a sample intellisense available for JQuery in the Visual Studio 11 IDE.



In the above screenshot you would have noticed documentation for the method in the intellisense window like C# code. You could provide the documentation for your Javascript method as shown in the below example.

< script type="text/javascript">
        function DoSummation(a, b) {
            ///      <summary>
            ///            Returns the sum of the variables a and b
            ///      </summary>
            ///      <param name="a" type="int">Integer variable 1</param>
            /// <param name="b" type="int">Integer variable 2</param>
            return a + b;
        }
</script>

The Javascript editor also performs type inference, for example if a Javascript variable is assigned with a string value and later when the variable is used then the intellisense displays only the string related methods.

Curly Brace and Bracket Matching

When I use to write a large amount of Javascript code, especially with object oriented Javascript or jQuery, I used to get confused with the brackets and curly braces on their scopes. It may sometimes be a nightmare for developers to fix a brace mismatch on a huge Javascript code file. Fig below shows how the bracket scopes are highlighted by Visual Studio 11.



Go to Definition Feature

Like the C# Visual Studio editor of Visual Studio, now the Javascript editor also provides the Go to definition feature, which will be very useful in going through the code flow or to debug a Javascript issue especially when there are a lot of files involved and the method calls are scattered. In order to make this feature work you need to add the reference path of the .js file containing the method implementation onto the caller .js file. Below is a sample.

/// <reference path="File1HavingImplementation.js" />

A generic approach to provide the reference path is to add them to the _references.js file.

Debugging

There is a new window added to Visual Studio 11 called the Javascript Console, which provides various features in terms of debuggingJjavascript code. I will cover this topic in a separate article.

CSS

In this article we will take a look at two important features on the CSS front.

Code Snippets and Writing Vendor Specific CSS

One of the most repetitive and boring tasks for the UI developer is to write the vendor specific styles in a CSS file. Vendor specific CSS is nothing but writing the same style with different names as supported by different browsers in order to get the style working on multiple browser combinations. Now Visual Studio 11 provides CSS code snippets, for example type transform and hitting tab would create the different vendor specific properties for transform in a CSS class. Below is the generated CSS class.

.MyClass
{
       -ms-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
       -webkit-transform: rotate(-90deg);
       transform: rotate(-90deg);
}

Color Picker

One thing that bothered me while writing CSS classes is providing the color code. I had to use some external utility to figure out the color code of the color being used, which I was trying to create a style for. Now with Visual Studio 11 the UI designer doesn’t have to move away from the CSS editor to pick the color, the editor itself has the color picker integrated. Fig below shows the screenshot of the color picker on a CSS file.



I hope these features have simplified and provided solutions for some long lasting issues faced by web developers.

Happy reading!

“Track Change” one of the best interesting features in visual studio which indicates the code changes with a color indicator at the beginning of the line.  Generally we know about the two color indicator  “Green” and “Yellow” which are used indicting the color change till VS 2008 along with those VS 2010 introduced another new color “Orange” which indicates some additional track change for undoing file after save. In this blog post I am going to explain how those color indicator helps developers to track the code changes.

In Visual Studio 2010, there is three color indicator

Green color indicates the lines  which you have edited before your last save.  Save again the file and green mark will be disappear.



Yellow color indicates the lines which  you have edited since the  last save of that file.  Yellow becomes Green after saving of the file. Once you close the file that indication disappears.



Orange color indication has newly introduced in VS 2010.  This color will come when  user does an undo after a save operation for that current file. Orange color indicates  that current changed line is different from the saved version of the file.



How to Enable / Disable Track Change features ?

To enable or disable  the “Track Change” features, Goto Tools > Options > TextEditor . In General section, you can checked or Unchecked the “Track Change” option



Key Note :  While you are using “Track Change” option, you have to select “Selection Margin” display option other wise, “Track Change” Won’t work.



One Quick Flow of “Track Change”

You have opened one code file in visual studio 2010 which having below lines of code. By default there is not color indicator with line number.



Now, you have started editing the file Yellow indicator shows , you have made changes on those line.



When you are done with your changes, Save the file. Green indicator shows, all of your changes has been saved.



Now, you have undoing the files after save, orange indicator saying that, the lines is different  than the save version. It means, you have changed something on original file, saved it and again undo it.



When you first undoing it, it will be showing as “Yellow”, which means you are editing with this line, but when you have done with all the undoing for that line which is different the saved version colors becomes “Orange”. Which means, it is different than the saved version.

To get a clear , just compare the below two image . Yes,  all the orange color  marked line are similar with default version image.



But, the Saved version of the file is



Similarly, This Track changes also works for config files also.



Summary : “Track Change” is one very useful features in Visual studio , by which You can see where you have edited / saved on  a file for that current VS IDE state . Green color indicates the lines  which you have edited before your last save.Yellow color indicates the lines which  you have edited since the  last save of that file. Orange color indicates  that current changed line is different from the saved version of the file.

 If you want to know more about editor setting options , please check the below link

How to: Set Text Editor Options