Tuesday, September 20, 2011

Design and Deploy Visual Studio Light Switch 2011 Application in Windows Azure – Part 1


Introduction

In this article we are going to see how to design a Visual Studio Light Switch 2011 Application and deploy the application to the windows azure to access the application online in cloud.

Overview

Visual Studio Light Switch 2011 is a light weight programming model through which we can build application without writing single line of programming code. Microsoft introduces Light Switch as "Visual Studio LightSwitch 2011 is a development tool that helps you build business applications quickly. LightSwitch provides a simplified development environment that enables you to concentrate on the business logic instead of the application infrastructure."
We can download Light Switch 2011 as a free trial for 90 days using the link Microsoft Light Switch 2011 Trial. Also many starter kits are available provided by Microsoft and we can download them using the link Microsoft Light Switch 2011 Starter Kits
In this article we are going to see the below steps one by one in details
  • Creating a light switch application from scratch
  • Publishing Model of Light Switch 2011 Application
  • Publishing the Light Switch Application to Cloud
Let us see the step by step process on how to start creating a Light Switch Application using Visual Studio 2010 and then see on how to publish it to the cloud with the in built features in the tool and finally access the application online

Steps

Go to programs and select Microsoft Visual Studio Light Switch 2011, we can see the Visual Studio IDE opened as shown in the screen below.

Now go to File --> New Project and we can see a pop up window as shown in the screen below with the options. Just follow the below steps to configure the project
  1. Select Light Switch template in the left menu
  2. elect Light Switch Application in C# (We can select VB.net or C#.Net based on the requirement)
  3. Enter a User friendly Name (VSLightSwitchAzure) as shown in the screen below
  4. Enter a valid path to save the project.
  5. Click on OK button to proceed further.

We can now see a nice interface of the Visual Studio Light Switch 2011 IDE as shown in the screen below. The IDE looks the same with the different explorers available (Solution Explorer, Properties etc).

Now we can see in the solution explorer we have the application created for Light Switch, and it has 2 different folders as
  1. Data Sources - To keep hold of the data sources used in the application.
  2. Screens - To keep track of the different screens used in the application.
In the Designer view we can see option to add a table directly or to attach it from an external source. Since in our sample we are going to see the basic idea on creating the VS Light Switch 2011 Application we will select Create New Table option as highlighted in the screen below.

Once we selected the Create New Table we will see a designer view with the option to add the structure to the data source which we are going to use. Follow the below steps in order to create a fully structured design as shown in the screen below
  1. ExpenseTracker - The name of the table which we are going to use as a data source
  2. List of table columns which we are going to use as fields in our form
  3. List of data types which can be selected for each field based on our requirement.
  4. Check box to select if the field is required or not i.e. the field is viewable in front screen or not.
  5. We can see the new data source is added with name ExpenseTrackers under ApplicationData
  6. List of properties specific to the data source, we can use this to customize our view.
  7. This option is optional since this provides option to write any custom code required which in our example is not required to do.

Once we are done with the above steps we can see the screen ready with the list of data fields as per our requirement. Now we need to add a front screen to display our data. To do that now right click on the Screens folder in our solution explorer and select Add Screens option as shown in the screen below.

We can see a screen with the list of templates available to design our front screen as shown in the screen below. We can select a template as per our requirement, in our example we are going to select List and Details screen as shown in the screen below
  1. Select List and Details Screen or any of the other template as per the requirement
  2. Sample view of the screen template which can be considered before selecting a particular one.
  3. Details of the template on to which the data will be display in the respective format.
  4. Provide a userfriendly name for the screen (Expensetrack) as shown in the screen below.
  5. Select the data source which we created in our earlier step(Datasource - ExpenseTrackers)
  6. Select the check box to include the existing data to the details screen
  7. Click on OK button to add the screen to the list and proceed further.

Clicking on OK button will add the ExpenseTrack screen and open a designer view with the list of the data field which we created in our data source. Since we have given the option to add the data fields we will see the ExpenseTrack screen spitted as shown in the screen below. We can select a particular field and change the layout as per our requirement; also we can use the Properties window to change the Name, Display name, and Description of the data fields as shown in the screen below.

To change some properties of a particular field, just click on the field and we can see the properties of the field in the property window as shown in the screen below. In the property window we can see the option Appearance where we can limit the field not to be viewable to the end user by unselecting the Is Visible check box.
  1. Select the respective field which we need to customize
  2. We can see the Appearance section in the property window where we can customize the visibility of the field as mentioned above
  3. We can customize the string to be displayed with the Vertical or Horizontal Alignment as shown.

Once we are done with the customization and selecting the appropriate properties, now Press F5 function key or the play button from the tool box to start building and executing the application as shown in the screen below.

Once the Execution is completed we can see the application is opened as a windows application form as shown in the screen below. We can see the List and the View separately shown in separate frames since we selected the List and View template while designing the screen.

We can add data to the form by clicking on the + Symbol at the top as highlighted in the screen below. We will get a popup which shows the list of the data fields which we added to the data source. We can also see if we have selected any field Is Visibility is false then that particular field will not be available to the user.
Since we selected some field's data type as Money we can see the default validation is also added and it shows the default value of $0.00 added to the field value.

In the final output we can see different sections as highlighted in the screen below.
  1. The list of data added to the data source from the front end view(User Inputs)
  2. Clicking on an item in the list will show the details here as highlighted.
  3. Options available to add, edit, delete or export the list to excel sheet. In this export to excel will play a major role since we used to write some major code normally to export the grid contents
  4. Name of the screen (User-friendly name) which we provided as screen name initially.
  5. Options to save or refresh the page. We can refresh it after adding a data to show in the list view.
  6. This is an important option, clicking on this will open the screen in designer view for any alteration or modification on the front end screen.

Now click on the Design Screen Customize (Option 6) will open a Customization mode as shown in the screen below. Using this view we can customize our data fields as per our requirement.

Now we are going to do a small customization of making the Account Balance Visibility to false, to do that select the Account Balance field from the left side menu and go to the properties window and un check the Is Visible check box as highlighted in the screen below.

Now we are done with some customization, to check if it's working fine Press F5 to build and execute the application. We can see the output as shown in the screen below with Account Balance field is not visible to the end user.

Now we are ready with our application, but to deploy our application online to the cloud we need to have our application as a web application. To convert our application as a web application we need to follow some steps.
To convert the application to a web application Right click on the Project Name (VSLightSwitchAzure) and go to properties as shown in the screen below.

We can see a list of properties available for the project like General Properties, Extensions, Screen Navigation, Access Control and Application Type. Since we need to change the type of application from Windows Application to Web Application navigate to the Application Type tab and we can see a list of options as shown in the screen below

We can see that by default the application is pointing to Desktop client, to make the application available online as a web application. Also we have option to host the application on to an IIS server or directly host it to the Windows Azure environment. To test our application we will first try to host it in local IIS Server, so select the option Host Application Services on an Internet Information Services IIS Server. A separate server is required as sown in the screen below.

After making the selection as per the above screen, Press F5 to build and execute the application. Once the build is succeeded we can see our application is opened in a browser as shown in the screen below.

Summary

To conclude in this article we have seen on how start using Visual Studio Light Switch 2011 application with a basic screen design. In our next article we will see how to deploy the Light Switch application to the cloud using the inbuilt tools with Visual Studio IDE.

No comments:

Post a Comment