In this article I describe the LightSwitch development environment in Visual Studio 2012. We can easily create a LightSwitch application using Visual Studio LightSwitch 2012.

LightSwitch Development in Visual Studio 2012

Visual Studio LightSwitch automatically creates the User Interface for a DataSource without manually writing any code.

In order to begin our work with LightSwitch 2012 we will perform the following steps:

Step 1

1. Open the Visual Studio 2012.
2. Go to "File" => "New" => "Project..."
3. In "New Project" => "Installed" => "Template"
4. In "Template" => "LightSwitch"
5. Select "LightSwitch Application (Visual C#)".
6. Enter the Name and choose the location.
7. Click "OK".

Step 2

After creating the project a LightSwitch Designer will appear on the screen.

LightSwitch Designer consists of the following two options:

- we can create a new table for our application.
- we can also attach an external database. 

Step 3

Now we will see that Solution Explorer consists of a list of the following items along with two folders:

- Data Sources
- Screens

Here the "Data Sources" folder is used to store user data i.e. "Database Tables" and the "Screens" folder is used where we can create the user interface for our application.

Step 4

When we click on "Create new table" we will get the following image:

Each table consists of an "Id" that is automatically assigned and is also a "Primary Key" of the table.

Step 5

First we will rename the title of the table from "Table" to "ContactTable". Now we will add four additional columns called "Name", "Email", "Age" and "Address" to our table.

Step 6

In order to insert the record we need to create a User Interface screen. When we right-click on the "Screens" Folder we will click on "Add New." It will open the "Add New Screen" dialog window. As the window opens we will select "New Data Screen" from the Screen Template, we will also provide a Screen Name to our screen and choose the database table.

In order to continue we will Click on the "Ok" button. This will create a new UI screen for inserting a new data record by a user.

"Properties" are those where you set properties for various items.

Step 7

When we run the UI screen we get the following.

Step 8

Now we are able to insert a new record without writing any code. We don't need to create anything since Visual Studio LightSwitch automatically creates the screen for us with "Save" and "Refresh" buttons.

Step 9

In the following step we insert a record of another user; for that we create a new contact table.

Step 10

In Light Switch validations are automatically applied to the table. We do not need to apply any kind of validation on their own.

Deploy your LightSwitch application with only 3.00 EUR/month with HostForLIFE.eu

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)

One of the biggest benefits of building applications with Visual Studio LightSwitch is that it generates the user interface for you, including labels, data-bound fields, commands, and controls. You can rearrange the positions of controls on the screen, and you can determine a number of properties for setting up the appropriate layout. If you're an experienced developer coming from a different development environment, you might need to set up additional requirements such as displaying text messages, implementing a home screen, or interacting with controls at runtime. This article shows a number of handy tips and tricks that you can use to create even more powerful and interesting screens.

Adding Labels and Descriptive Text

LightSwitch automatically adds label and text box controls to display data-bound information coming from the data source for both single entities and entity collections. This is a tremendous benefit because it saves the developer from having to select and add the appropriate controls. However, in LightSwitch every label or text box control is data-bound. Unlike in other development environments, such as Microsoft Access or Visual Studio 2010, you can't show a text message inside an unbound control.

For instance, you might want to show warning messages, advice, or welcome text in your controls. To accomplish this goal in LightSwitch, you use local properties, which are basically data items associated to the selected screen and representing a piece of information that isn't related to the bound data source. Think of a local property as a variable of a given type.

Let's try an example. Suppose you want to display a warning message inside a screen. Follow these steps:

1. Open the screen designer for the screen and click Add Data Item. This action opens the Add Data Item dialog.

2. Select the Local Property item.

3. Specify the data type in the Type combo box (see Figure below) and a name for the property. For this example, use a String type, enter WarningMessage as the property name, and then click OK. At this point, the new data item appears with the list of other data items and methods.

Make sure that the Is Required check box is deselected when you use local properties to display descriptive messages; otherwise, the validation mechanism will throw an exception. In fact, data validation automatically runs against local properties.

4. Drag the property from the list of data items onto the designer's surface and release it under the Screen Command Bar element. Since the property will only be used to display some text, you can replace the default Text Box with a Label.

5. Go to the Properties window, where you can fine-tune the appearance of your label.

6. Change the value of the Label Position property from Left-aligned to None. This change ensures that the name of the label will not be shown.

7. Change the value of the Font Style property from Normal to Warning. As Figure below shows, you can select from a number of font styles. When you select Warning, your text message will be displayed in red and boldfaced (assuming that you're using the default LightSwitch theme).

So far you've prepared a label to display text, but the dialog offers no way to assign text to the label at design time. The only way to perform this assignment is by writing code, so click the Write Code button in the upper-right corner of the screen designer. You can write the label assignment in a couple of different method hooks:

- Created. Write the assignment inside Created when your text is a message that doesn't take information from the screen's data source. This is exactly our case.

- InitializeDataWorkspace. If you need to display some text that's constructed with information coming from the screen's data source, write the assignment inside InitializeDataWorkspace.

Listing 1 shows how to perform the assignment. (In your code, replace ScreenName with the name of the screen you're creating.)

Listing 1—Assigning the content of an informative label.

Private Sub ScreenName_Created()
    Me.WarningMessage = "Warning: the application is going to handle your information."
End Sub

This is nothing but a variable assignment. If you run the application, you'll see how the text message appears, as represented in Figure below.

There are two types of Authentications available in LightSwitch applications.

1. Forms Authentication
2. Windows Authentication

In this article, I will discuss the first one, Forms Authentication.

Forms Authentication:

Forms Authentication means that a username/password is prompted for when the application opens and these values are checked against the database.
 
This works nicely for clients running across the Internet that are not on a Windows domain. I'll show you both but first let's choose Forms Authentication.

Setting up LightSwitch Solution:

Create a LightSwitch Desktop Application. And create a table called Person as shown in the following picture.

Design a screen for the created table Person. We will discuss the design in future articles

Select the List and Details Screen from the Screen Template list [No: 1] for getting the Person details as well as the Details of the selected Person.

Give a name for the Screen [No: 2].

Select the Date for the Screen Data ComboBox [No: 3] which is retrieved from the table we have created.

Enabling Authentication:

By default the authentication is not enabled. To enable the authentication just select the project's properties from the Project Menu.
Select Access Control [No: 1] Menu Tab.

From the Access Control Tab, select the Use Forms Authentication option [No: 2].

Yes. We have just done that with enabling the forms authentication. The next step is to create the Permissions for Roles for Users. We will discuss Roles and Users later; first we will see how Permission works.

Adding Permissions:

Permissions are nothing but allowing the user to do something on our LightSwitch application.

In the above picture we have created three permissions Read, Write and Delete. The SecurityAdministration is the default permission provided by the LightSwitch application to create Users and Roles.

We have selected the four permissions to True on Debug mode. So that user can Read, Write and Delete or Add users and roles in Debug mode.
Set the permissions we have created to take effect.

Setting Permissions in Methods:

To add a method to check for the permission, we need to open the table we have created. For this application we have created Person table; just open it.

On the right top corner you can see the Write Code menu. Just click it. You will get a collection of items. From that select Access Control group as shown in this above figure.

Click on People_CanInsert, _CanDelete and _CanRead. These are the default methods provided by LightSwitch.

Now write a line of code as shown in the figure given below.

At the time of creation of Permissions an enumeration of Permissions will be created for us with the Permissions we created in the Access Control Tab in Project Properties.

The first method _CanDelete will check for the currently logged in user whether the user has the permission to do a Delete. If it is true then the application will allow the user to delete.

As like _CanDelete method, the other methods will act.

Now we are ready to Press F5. Just press it.

In Debug mode the LightSwitch application will not show the Login form; it will ask for the user name and password only on Published Application. But permissions that we have selected as granted will havew an affect in Debug mode. Let's see in Action.

As we have enabled all the Permissions the Buttons for Add Edit and Delete are enabled here.

Now deselect the CanDelete permission in Project Properties to check whether it is preventing the user to delete the data.

Here we have deselected the CanDelete Permission. Let's see in Code and Screen.

We can see that the result is false because the Permission CanDelete is deselected.

As the CanDelete Permissions is deselected, the Delete button is disabled in the application.

We have just enabled Permissions in Debug mode but we need to create the user and their roles and permissions for that roles created.

In Part II we will discuss about how to add Users Roles and Permissions for the Roles.

As we know, Visual Studio 2012 has been released on Aug 15, 2012 I just wanted to discuss about the new features of LightSwitch.

In Visual Studio 2012, LightSwitch is included as a core part and we can create the LightSwitch application from Visual Studio 2012 IDE. LightSwitch will be available as a Project Template group Node in the Visual Studio 2012.

New Lightswitch Architecture

Visual Studio 2012 LightSwitch has a lot of enhancements including OData Services which leads to define the new architecture for the LightSwitch Application Development. You can get more details about the LightSwitch Architecture, please have a look at MSDN.

New Enhancements in LightSwitch 2012

There are ton of new features included in the Visual Studio 2012 LightSwitch. We will briefly discuss about all the new features of the new enhanced LightSwitch.

1. Connecting with OData Services:

LightSwitch 2012 now supports Open Data Protocol Services.

2. Formatting Numbers & Dates:

We can easily format the Numbers and Dates using Format Pattern property in LightSwitch 2012. This Format Pattern Property is available only for the particular data types.

3. New Data Types in LightSwitch:

Visual Studio LightSwitch team has introduced two more Data Types namely Percent and Web Address. Here the Decimal will be treated as Percent business type and the String will be treated as Web Address.

4. Static Label & Image Control:

LightSwitch 2012 includes two more controls which can be used to display the content statically without binding data. These controls can be used to display the static texts about the organization and logo.

5. Improved Application Security:

In LightSwitch Business Application we can apply security by two ways like Forms Authentication and Windows Authentication, In Windows Authentication it is possible to provide the Roles & Permissions to Active Directory User Groups.

You can download the Visual Studio 2012 90 days trail version from the Microsoft site.

If you need LightSwitch hosting, please check our site at http://www.hostforlife.eu.

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!