This article is Part 1 of the series “Beginners Guide to Visual Studio LightSwitch”.
Visual Studio LightSwitch is a new tool for building data-driven Silverlight Application using Visual Studio IDE. It automatically generates the User Interface for a DataSource without writing any code. You can write a small amount of code also to meet your requirement.
Recently, I got some time to explore Visual Studio LightSwitch. I created a small DB application with proper data inserting UI within a small amount of time (without any XAML or C# code).
Here in this article, I will guide you to understand it with the help of a small application. There will be a series of articles on this topic regularly. Read the complete article to learn about creating a Silverlight data driven application with the help of Visual Studio LightSwitch.
Setting up LightSwitch Environment
Microsoft Visual Studio LightSwitch Beta 1 is a flexible, business application development tool that allows developers of all skill levels to quickly build and deploy professional-quality desktop and Web business applications. To start with LightSwitch application development, you need to install the Visual Studio LightSwitch in your development machine. To do so, follow the below steps:
- Install Visual Studio 2010
- Install Visual Studio LightSwitch
The LightSwitch installation will install all other components to your PC one by one including SQL Express, Silverlight 4, LightSwitch Beta server etc.
You can download the LightSwitch Beta 1 from here: Microsoft Download Center (Visual Studio LightSwitch Beta 1)
Creating a LightSwitch Project
Once you installed Visual Studio LightSwitch, Run the Product to create a new project. Go to File –> New –> Project or press Ctrl + Shift + N to open the “New Project”. From the left panel, select “LightSwitch”. In the right pane, it will filter the LightSwitch project templates. This will include of type VB & C#. Select your respective type. Here I will use the C# version.
In the above dialog Window, enter the name of the project, select proper location for the project to create and hit “Ok”. This will create the blank LightSwitch project for you by the Visual Studio 2010 IDE. It will take some time for the project creation. So, be patient.
Create a Database Table
After the project has been created by the IDE, it will open up the following screen:
You can see that, it has two options in the UI. You can create a new table for your application. Also, you can attach an external database. If you open the Solution Explorer, you will see that, the project is totally empty. It has only two folders named “Data Sources” and “Screens”.
“Data Sources” stores your application data i.e. Database Tables. On the other side, the “Screens” folder stores the UI screens created by you. I will describe them later in this tutorial.
Let’s create a new Table for our application. Click on the “Create new table” to continue. This will bring up the following screen in your desktop:
In the above page, you can design your Table structure as you do in the SQL server while creating a new table. Each table will have a “Id” assigned to the table of type “Int32” & it is a Primary Key to the table. Add some additional columns to the table.
In the above snapshot, you can see that, there are several column types (data types) available in LightSwitch application. For our sample application, we will create 4 additional columns called “FirstName (String)”, “LastName (String)”, “Age (Int16)” and “Marks (Decimal)”. Change the title of the table from “Table1Item” to “StudentTable”. This name will be used while saving the table. Save the table now. If you want to change the name of the table later, just rename the table header and save it. This will automatically update the table name.
Be sure to set all the fields as “Required” field. This will be helpful validating the data. I will show it to you later.
Create a Data Entry Screen
Once you are done with structuring your database table columns, you will need to create a UI screen for your application to insert records. Click on the “Screen…” button from the top panel as shown in the below snapshot:
This will open the “Add New Screen” dialog window to the screen. Select “New Data Screen” from the Screen Template, provide a Screen Name in the right panel & chose the database table as Screen Data from the dropdown.
Click “Ok” to continue. This will create a new UI screen for your application to insert new data record by end user. Now, in the solution explorer you can see that, the “Data Sources” folder has one database named “ApplicationData” and it has a table called “StudentTables”. In the “Screens” folder you can find the recently created data entry screen named “CreateNewStudentTable”.
You can change the design of the UI from the below screen:
You can add or delete new field or controls. You can also rearrange the controls in the UI. For our first sample application, we will go with the default layout controls.
See the Application in Action
Woo!!! Our application is ready. We will able to insert new records in our database table from our application. No need to write a single line of code. What? You are not agreeing with me! Let’s run the application by pressing F5. This will build your solution. It will take some time to compile the solution. Once it builds successfully, it will open the following UI in your desktop:
It is a Silverlight OOB Application. If you want to confirm, right click on the application & you will see the Silverlight context menu pops up in the screen.
OMG!!! We didn’t do anything to design the above UI! The Visual Studio LightSwitch automatically created the screen for you with a “Save” and “Refresh” button. You can see a collapsible “Menu” panel at the left of the screen. In the right side, you will see tabular panel containing some labels and TextBox which will be require to insert data in your application database.
In the top right corner of the screen, you will see a “Customize Screen” button. Once you click this, it will pop up another Child Window for you to customize the application screen at runtime. This will not be visible, once you deploy the application. We will cover them later in different article.
Validation of Fields
As I told you earlier, our application is ready. So, what to do for writing some simple validation for our application? Wait, you don’t have to worry about that. LightSwitch internally does that for you. Let’s have a demo on it.
In the form panel, insert some data. We will purposefully write invalid data in the “Age” field. Instead of entering age, we will enter some text in the age field. If you press tab or click elsewhere (on lost focus), it will do the validation & show the error on the screen.
You can see the validation error popup in the screen as shown here:
Now enter proper values for all of the fields and click “Save”. This will save the records properly.
More on Save
Once you entered proper values in the input boxes, click “Save” to store the record.
This will save the record and add another field called “Id” in the UI. The value for the Id will be 1 (one) as this was our first record & will increase by 1 as we add more records.
To add more records, close the current tab and click “CreateNewStudentTable” menu item from the left panel.
Now enter some records and click Save button. You will see it in action that, the Id is automatically increasing by 1 as and when you are saving a new record.
If you have any unsaved records and want to close the tab or want to add a new record, it will open a message dialog to the screen warning about unsaved changes. It will ask you to save the changes before proceeding.
Click “Save” to save the unsaved record to database. Click “Discard” if you don’t want to save the record. Click “Cancel” to stay on the same page.
Customize the Screen
If you want to change the UI at runtime, click on the “Customize Screen” button available at the top right corner of the application window. Remember, this button will not visible once you deploy the application. Once you click the button, it will popup the Customization screen. Here you can change the layout of the screen, insert come new field or delete something which are already exist. For now, we will not go with changing the layout or controls. I will cover them in another article.
Here, we will change the display name of the new student menu item. Select the top level node of the screen items and in the properties panel change the “Display Name” from the default one to “New Student”. Now save the settings and restart the application for the changes to take effect.
Once you run you application now, you will see the display name of the menu item has been changed to the entered value i.e. “New Student”. This is more meaningful than the default text.
If you want to do the same thing inside the Visual Studio IDE, go to the properties pane as shown in the below figure. Find the “Display Name” property and change the display name to your own meaningful name. Run the application to see it in action.
You can change many other properties from the properties panel too.
End Note
Oh, it is too easy to create a data-driven Silverlight OOB application using Visual Studio LightSwitch. No need to write XAML or C# code to create such professional quality application in Silverlight.
Hope, this helped you to understand Visual Studio LightSwitch to create a simple data entry application without writing any C# code or writing any XAML code. In the next few articles of the series, I will discuss more about the other screens.
I think, you enjoyed it a lot and hence please give your feedback about this article.
About the Author
|
Kunal is a Microsoft MVP in Silverlight, currently working as a Software Engineer in Pune, India. He is a Silverlight enthusiastic and want to work in Silverlight, WPF & Microsoft Surface. Apart from his daily office work, he spends a huge time on online communities. Writing articles, blogging, tweeting and answering to forums are some of his regular activities. He likes to share knowledge and learn newer things.
Follow him in his blog: http://www.kunal-chowdhury.com/
He also Tweets. Follow him in Twitter - @kunal2383 |