SilverlightShow: Silverlight Community

Developing real-world applications with LightSwitch - Part 8: More extensibility with the toolkit

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 11 Oct 2011 14:52:00 GMT

We have arrived at part 8 in this article series on LightSwitch… And it is the final part. However, to go out with a bang, we’ll look at some more extension building with the extensibility toolkit.

Don't miss...

All SilverlightShow Ebooks

In part 6, we looked at building custom controls as a way to extend what LightSwitch has in the box. In part 7, the previous part, we used the extensibility toolkit for the first time. We created two types of custom control extensions. First, we created a value control extension, which gave us a way of overriding how a value was displayed using a custom control that we created. Secondly, we created a smart layout extension, which allowed us to create a layout, add placeholders to that layout and in the end, allow the end user of the extension to place controls in the placeholders.

Controls are just one of the six hooks we get with the LightSwitch Extensibility Framework. In this part, we’ll look at using some of the others.

Creating a new theme

As much as I want, I always fail miserably at creating great looking layouts. I think that if you are a developer reading this article, you’ll understand what I mean. We as developers aren’t meant to create great layouts; that’s the work of a designer in most cases.

In LightSwitch, the extensibility framework helps us in creating a new theme. Let’s look at how we can create such a custom theme.

1. Create a LightSwitch extension project

Just like we did in the previous part, create a new extension project. For this example, name the project CustomThemes.

2. Create the LightSwitch extension

Similarly to part 7, add a new theme extension to the Lspkg project. In this case, we are creating a new theme for MoviePolis so name the theme MoviePolisTheme.

3. Give the theme a meaningful name and description

Open the MoviePolisTheme.lsml file in the CustomThemes.Common –> Metadata –> Themes folder. In this file, the theme is described. We can change this default name, since this is the name that will be appearing later in the properties window in Visual Studio. Change the values as shown in the code below.

xml version="1.0" encoding="utf-8" ?>

<ModelFragment

    xmlns="http://schemas.microsoft.com/LightSwitch/2010/xaml/model"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Theme Name="MoviePolisTheme">

        <Theme.Attributes>

            <DisplayName Value="MoviePolis Default Theme"/>

            <Description Value="MoviePolisTheme contains all colors corresponding to

                the colors of the company"/>

        Theme.Attributes>

    Theme>

ModelFragment>

4. Start being creative… or let someone else do it!

A theme in LightSwitch is defined again in the CustomThemes.Client project. It exists out of a class which implements the ITheme interface. Theming (just like creating a custom Shell) is based on MEF (Managed Extensibility Framework): the class exposes itself through the Export attribute, passing in the ITheme type. A second attribute, the Theme attribute, receives as parameters the ID of the theme and the version. Both these parameters are defined further in the Constants block of the code.

The ITheme interface has another important property, namely the ColorAndFontScheme. This property returns a URI, containing the XAML that makes up the theme. This XAML file is nothing more than a Silverlight resource dictionary, containing a long list of named brushes, text styles… that are used by LightSwitch.

[Export(typeof(ITheme))]

[Theme(MoviePolisTheme.ThemeId, MoviePolisTheme.ThemeVersion)]

internal class MoviePolisTheme : ITheme

    #region ITheme Members

    public string Id

        get { return MoviePolisTheme.ThemeId; }

    public string Version

        get { return MoviePolisTheme.ThemeVersion; }

    public Uri ColorAndFontScheme

get

        { return new

            Uri(@"/CustomThemes.Client;component/Presentation/Themes/MoviePolisTheme.xaml",

            UriKind.Relative);

    #endregion

    #region Constants

        internal const string ThemeId = "CustomThemes:MoviePolisTheme";

        internal const string ThemeVersion = "1.0";

    #endregion

A short extract of the XAML file is shown next. Note that we don’t have to specify the names, they are used internally. What we can do, is changing the default values to something that stands closely to the theme we want to create to incorporate our company’s colors.

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:sys="clr-namespace:System;assembly=mscorlib">


******************************************************************************** 

-->


use FontBackgroundBrush -->


FontBackgroundBrush -->





<FontFamily x:Key="NormalFontFamily">Segoe UI, ArialFontFamily>

<sys:Double x:Key="NormalFontSize">11sys:Double>

<FontWeight x:Key="NormalFontWeight">NormalFontWeight>

<FontStyle x:Key="NormalFontStyle">NormalFontStyle>

<SolidColorBrush x:Key="NormalFontBrush" Color="#FF404040"/>

<SolidColorBrush x:Key="NormalFontBackgroundBrush" 

Color="White"/>

…

By means of test, change the following brush:

<SolidColorBrush x:Key="ScreenBackgroundBrush" Color="Red"/>

5. Test the theme

We can now test how the theme looks by running the extension. The experimental instance will open in which we again have to enable the extension like we did in the previous part.

After that, we need to select the theme to be the active theme for the application. In the General Properties tab, select the new theme from the dropdown list.

Run the application now and be amazed of your artistic work!

If you’re up for it, we’ll take a look at another extension!

Building a new business type for the movie duration

In part 7, we created a new control for the movie length (the Duration field). It contained an extra TextBlock that specified to the user that the movie duration is supposed to be entered in minutes.

We can take things a bit further here and create a new business type for this. This way, we create a new logical type on top of the Int32 type which contains extra logic such as validation (a movie length can’t be smaller than zero) and formatting. For the Minutes business type, we can specify the following rules:

Not negative
Not greater than 240 (who wants to sit through a film longer than 4 hours?)
Numeric

We’ll wrap these in a new business type in the following steps.

1. Create a LightSwitch extension project

This is getting boring, isn’t it? You already know now that you’ll need to create a new extension project. This time, I’ve named the project CustomBusinessTypes.

2. Create the LightSwitch extension

Create a new extension of type Business Type in the Lspkg project and name is MovieDuration.

3. Change the base type

The default base type is set to String. We can see that in the MovieDuration.lsml file. We can change that into Int32 as shown below. We have now indicated that in the database, the value is stored as an Integer value. The extra logic we’ll add is purely inside LightSwitch.

<SemanticType Name="MovieDuration"

    UnderlyingType=":Int32">

    <SemanticType.Attributes>

        <DisplayName Value="MovieDuration" />

    SemanticType.Attributes>

SemanticType>

4. Create a corresponding control for the type

If we would run the application with the new business type added at this point, we would see the business type appearing (after adding the extension of course). However, it would have no different way of working than any other control to enter an integer value into. At this point, that is quite logical since we haven’t specified how we want to display the control for the type nor did we specify any validation. We’ll start with the creation of a new control for the type.

Visual Studio has already created a default representation in the MovieDurationControl.xaml in the CustomBusinessTypes.Client project.

<UserControl

    x:Class="CustomBusinessTypes.Presentation.Controls.MovieDurationControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <TextBox Text="{Binding StringValue, Mode=TwoWay}"/>

UserControl>

We can change that to the following:

<UserControl

    x:Class="CustomBusinessTypes.Presentation.Controls.MovieDurationControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition>RowDefinition>

        Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="50">ColumnDefinition>

            <ColumnDefinition Width="80">ColumnDefinition>

        Grid.ColumnDefinitions>

        <TextBox Text="{Binding Details.Value, Mode=TwoWay}" Grid.Column="0"/>

        <TextBlock Text="minutes" Margin="5 0 0 0" Grid.Column="1">

        TextBlock>

    Grid>

UserControl>

We‘ve made a very simple change here; however we can go much further in this. There’s really no limit as this is pure Silverlight code.

5. Add validation rules

We are now ready to add validation rules onto the type. First, create a class that contains some constants for the project. Do this by creating a new class in the CustomBusinessTypes.Common project. The following code should be added in this class.

namespace CustomBusinessTypes

    internal static class SharedNames

        private const string Name = "CustomBusinessTypes";

        private const string ModulePrefix = Name + ":";

        private const string AttributePrefix = ModulePrefix + "@";

        internal static class MovieDuration

            private const string Name = "MovieDuration";

            public const string GlobalName = ModulePrefix + Name;

            internal static class ValidationAttribute

                private const string Name = "MovieDurationValidation";

                public const string GlobalName = AttributePrefix + Name;

Next, create another class in the same location which will contain the actual validation logic. In the Validate method, which will be called automatically, we first check if the underlying type is effectively of type Int32. If this is not the case, we can proceed with the normal validation rules. We first cast the passed-in value to an integer. After that, we write code which checks that the value is greater than 0 but less than 240. If not, the AddPropertyError method is used to raise the error.

public class MovieDurationValidation : IAttachedPropertyValidation

    public MovieDurationValidation(IEnumerable attributes)

        _attributes = attributes;

    private IEnumerable _attributes;

    public void Validate(object value, IPropertyValidationResultsBuilder results)

        if (value != null)

            // We need to check if the type is indeed Int32

            if (typeof(Int32) != value.GetType())

                throw new InvalidOperationException("Only valid on integer fields");

            int duration = (int)value;

            // Rule #1: value should not be less than 0

            if (duration <= 0)

                results.AddPropertyError("Duration of a movie can't be negative");

            // Rule #2: value should not be greater than 240

            else if (duration > 240)

                results.AddPropertyError("Duration of a movie should not be longer than 4

                    hours");

Now we need to create another class, the factory class for the Validation rules. This class will instantiate the class we just created. The code for this class is shown below (it can be found on MSDN as well, as this class is most of the time the same code).

[Export(typeof(IValidationCodeFactory))]

[ValidationCodeFactory(SharedNames.MovieDuration.ValidationAttribute.GlobalName)]

public class MovieDurationValidatorFactory : IValidationCodeFactory

    public IAttachedValidation Create(IStructuralItem modelItem,

        IEnumerable attributes)

        if (!IsValid(modelItem))

            throw new InvalidOperationException("Only valid on integer fields");

        return new MovieDurationValidation(attributes);

    public bool IsValid(IStructuralItem modelItem)

        INullableType nullableType = modelItem as INullableType;

        modelItem = null != nullableType ? nullableType.UnderlyingType : modelItem;

        while (modelItem is ISemanticType)

            if (String.Equals(((ISemanticType)modelItem).Id,

                SharedNames.MovieDuration.GlobalName, StringComparison.Ordinal))

                return true;

            modelItem = ((ISemanticType)modelItem).UnderlyingType;

        return false;

Finally, we need to link the validation code with the business type. We can do that through the MovieDuration.lsml code. In the following code, we have linked the MovieDuration type with the MovieDurationValidation class.

<SemanticType Name="MovieDuration"

    UnderlyingType=":Int32">

    <SemanticType.Attributes>

        <DisplayName Value="Movie Duration" />

        <Attribute Class="@MovieDurationValidation">

        Attribute>

    SemanticType.Attributes>

SemanticType>

<AttributeClass Name="MovieDurationValidation">

    <AttributeClass.Attributes>

        <Validator />

        <SupportedType Type="MovieDuration?" />

    AttributeClass.Attributes>

AttributeClass>

6. Test the business type and the validation logic

Now that we have written the validation code and the business type itself, it’s time to start playing with what’ve created. Run the extension and open the MoviePolis application in the Experimental Interface. Enable the extension first. Then, in the entity designer, change the type for Duration to Movie Duration.

The screens using the Movie entity will be updated.

Run the application now. When you enter a non-valid value for the minutes (it should be between 0 and 240 to be valid), you’ll get a validation exception, just as you would expect with other types. However, in this case, we’ve wrapped all of this logic inside the newly created type ourselves.

Other extensibility points

As mentioned in part 6, there are some other hooks that you get access to with the extensibility framework. We can build a custom data source, which is in fact a WCF RIA Service that connects to an external source of data. If for example you need to store your data in XML, you can build such a WCF RIA Service that does the plumbing to and from XML. The LightSwitch application then connects with the service; this process is entirely transparent for the LightSwitch application.

We’ve seen how we create new themes. However, if we want to override more than just the colors, we can create an entirely new shell. This allows us to plug in new navigation for example. Finally, when we aren’t satisfied with the available screen templates within the application, we can create our own as well.

Take a look at the pages in the LightSwitch developer center on MSDN if you want to create any of these!

Summary

In this final part, we’ve seen some more extension being built with the Extensibility Framework. We’ve seen how to create new themes and how to create new business types.

About Gill Cleeren

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switzerland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.

He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 7: Building control extensions with the extensibility toolkit

editorial@silverlightshow.net (Gill Cleeren ) — Wed, 05 Oct 2011 12:17:00 GMT

In the previous article, we looked at the extensibility hooks we get in LightSwitch applications. We’ve also constructed a LightSwitch extension by building a custom Silverlight control that we added to the LightSwitch application.

Don't miss...

All SilverlightShow Ebooks

In this part, we’ll use the extensibility toolkit to build extensions. The toolkit can be downloaded here: http://visualstudiogallery.msdn.microsoft.com/0dfaa2eb-3951-49e7-ade7-b9343761e1d2 .

Building a custom control

We can extend LightSwitch applications by creating custom controls. These can be value controls, which change or extend the way a value is represented inside the application. We can also construct collection controls, in which we can override how a collection is shown within the control. Other custom controls are group controls, which contain logic to organize their children. Group controls can contain for example a StackPanel, which will then stack its children horizontally or vertically, depending on how the StackPanel was specified. Another type of group control is a smart layout extension, which contains placeholders to place controls in. We’ll look at this type further in this article. Let’s first look at creating a value control extension.

In the MoviePolis application, we can add movies. Assume that we want to make it clear to the users of the application that the movie length is to be added in minutes. We can do so by creating a custom control that shows a TextBlock with the text “minutes” after the TextBox containing the minutes value. Let’s walk through the steps for creating this control.

1. Create a LightSwitch extension project

First things first of course: we should start by creating the extension project first. Open Visual Studio with the Extensibility toolkit installed. Under the LightSwitch node, select “LightSwitch Extension Library (C#)” as the project template. Name the project CustomControls. The following screenshot shows this.

Visual Studio will execute the template and no less than 7 projects will be created for you. The following explains the most important aspects of these projects.

Client: In here, we’ll place UI elements, such as the XAML of the control.
Design: contains elements such as images, which are used by the IDE to display the control.
Common: contains elements that are to be shared between client and server. The *.lsml files are located here as well. We’ll work with these a lot more soon.
Server: contains for example server-side validation logic.
Vsix: is a package project. A LightSwitch extension gets packaged into a *.vsix file, which can be distributed within your organization. This way, other developers (or more in general, LightSwitch application builders) can use the extension you as a developer created in their own applications.

2. Create the LightSwitch extension

The project on itself doesn’t know anything about the extension yet. Indeed, we have to select the type of extension we are building here. To do so, right-click on the CustomControls.Lspkg project, select Add –> New Item. In the dialog, select Control. Name the control MovieLengthControl.

3. Change the icon for the control

By default, Visual Studio has added for you 2 images in the solution. These are used to represent the control inside the IDE. It’s recommended to change these: if you are using more than one custom control, things might get complicated if all these controls are using the same icon.

To change the icon, go to the CustomControls.Client.Design project and navigate to the Resources –> ControlImages –> MovieLengthControl.png image. Right-click on *.png file and select Open With. You can select Paint here to let your creative side come to life!

Here’s my best effort to creating the best icon: a black rectangle with an M from MoviePolis!

After saving, Visual Studio will notify you that the file changed. Copy the file to the CustomControls.Design à Resources à ControlImages as well.

4. Specify which types are supported by our control

The *.lsml file in the CustomControls.Common –> Metadata –> Controls directory contains the model of the extension. Open the file and notice that the root element is the ModelFragment. When using your extension in the project, the ModelFragment will be added in the ApplicationDefinition.lsml file, which contains the raw definition of the application. By default, the file looks as follows:

xml version="1.0" encoding="utf-8" ?>

<ModelFragment

    xmlns="http://schemas.microsoft.com/LightSwitch/2010/xaml/model"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Control Name="MovieLengthControl"

        SupportedContentItemKind="Value"

        DesignerImageResource="CustomControls.MovieLengthControl::ControlImage">

        <Control.Attributes>

            <DisplayName Value="MovieLengthControl" />

        Control.Attributes>

        <Control.SupportedDataTypes>

            <SupportedDataType DataType=":String"/>

        Control.SupportedDataTypes>

    Control>

ModelFragment>

The SupportedDataType defines on which types the new control can be used. In other words, only when a field of an entity has the type specified in this field, the new control type will be shown. In our case, we want the control to be usable on the Minutes field, which is of type Integer. We can thus change this to become:

<Control.SupportedDataTypes>

    <SupportedDataType DataType=":Int32"/>

Control.SupportedDataTypes>

A single control may be used in some occasions on more than one type. If so, we can simply enumerate these types as follows:

<Control.SupportedDataTypes>

    <SupportedDataType DataType=":Int32"/>

    <SupportedDataType DataType=":String"/>

    <SupportedDataType DataType=":Int64"/>

Control.SupportedDataTypes>

5. Bind to the data in the control

In the CustomControls.Client, a XAML file was created when we created the control itself. This XAML file is the actual control as we’ll see it appear later in our application when we have installed the extension. By default, it contains the following code.

<UserControl

    x:Class="CustomControls.Presentation.Controls.MovieLengthControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <TextBox Text="{Binding StringValue, Mode=TwoWay}"/>

UserControl>

It is effectively nothing more than a simple Silverlight UserControl, which is bound to data, coming from LightSwitch. LightSwitch is actually providing the XAML UserControl with data. The DataContext for the control is of type IContentItem, which can be seen as the view-model class for our control. It contains quite a few properties that are being populated with data automatically so that the control can easily bind to it. For example, the StringValue property that the default TextBox is being bound to in the above sample, is a property which does conversion and validation automatically for the supported types of the control.

Swap the TextBox with the following code. It adds a TextBlock containing the minutes indication as well as some extra data bindings to the IContentItem properties.

<UserControl

    x:Class="CustomControls.Presentation.Controls.MovieLengthControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <StackPanel Orientation="Horizontal">

        <TextBox x:Name="MinutesTextBox"

            Text="{Binding StringValue, Mode=TwoWay}"

            TextAlignment="{Binding

            Properties[Microsoft.LightSwitch:RootControl/TextAlignment]}"

            Width="50"

            ToolTipService.ToolTip="{Binding Description}"/>

        <TextBlock Text="minutes" Margin="5 0 0 0">TextBlock>

    StackPanel>

UserControl>

6. Test the control

Finally, we have reached the point where we can test our work! Build the project and run it. A new instance of Visual Studio will open (called the Experimental instance). In this instance, open the MoviePolis application.

When the project is opened, we first have to enable the extension. Go to the Project properties and select Extensions. In the tab, you should see your extension appearing.

Now head over to the MovieDetail screen. For the Duration field, select the new control in the drop down list as shown below. LightSwitch will now use this new control to visualize the Duration field in this particular screen.

When we run the detail screen, we’ll see the following.

Great! We have created a custom control extension! Let’s take a look at another type of control extension: a smart layout extension.

Creating the Movie Smart Layout Extension

To finish this article, we’ll create another control: a smart layout control. As the word implies, this control does some layout, but in a smart way. We can define one or more (usually more than one) placeholders in a XAML user control. These placeholders will be replaced by a control in the screen designer. This way, we as extension developers are able to impose a certain layout on the extension user.

Next to smart layout control extensions, regular layout extensions exist, which for example can host an entire collection. A good example of this is a StackPanel extension, which simply places all its children horizontally or vertically.

For this sample, assume that in the MoviePolis application, we want to represent a movie by its thumbnail and the title. The title should go below the image. Let’s take a look how we can do so.

1. Create the extension project

Similarly to the previous example, create a new extension project. Name the extension CustomLayoutControls.

2. Create the LightSwitch extension

Again similar to step 2 in the previous example, create a new extension. The smart layout control is also a control, so we should select the Control template. Name the control MovieLayoutControl.

3. Change the icon for the control

We can again similarly change the icon for the control using Paint or another editor. I’ve again done my very best to create something nice, but this failed again miserably as you can witness below.

4. Change the *.lsml file

The control definition in the *.lsml file (the meta data file) requires some more work this time. For starters, we need to specify that this control is a group control (by default, the control is set to support a value). To do so, open the MovieLayoutControl.lsml file in the Common project and change the SupportedContentItemKind to Group:

<Control Name="MovieLayoutControl"

    SupportedContentItemKind="Group"

    DesignerImageResource="CustomLayoutControls.MovieLayoutControl::ControlImage">

Next, we can delete the SupportedDataTypes node. Since this is a group control, it won’t appear in a single control field, it will only appear when we are working on a group level. Delete the following entirely.

<Control.SupportedDataTypes>

    <SupportedDataType DataType=":String"/>

Control.SupportedDataTypes>

Next, add placeholders. In these placeholders, we’ll place controls later. The following code should go between the .

<Control.Placeholders>

    <Placeholder DisplayName="MovieImage" Name="MovieImageTemplate" />

    <Placeholder DisplayName="MovieTitle" Name="MovieTitleTemplate" />

Control.Placeholders>

5. Create the actual control using the templates

We can change the layout of the control’s XAML code now. For this sample, we are using a simple Grid, but since this is again Silverlight code, we can go very far in the design of this control. Note that we are using a LightSwitch control here, we also need to add a reference to the Microsoft.LightSwitch.Client namespace.

<UserControl

    x:Class="CustomLayoutControls.Presentation.Controls.MovieLayoutControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:framework="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="100">RowDefinition>

            <RowDefinition Height="40">RowDefinition>

        Grid.RowDefinitions>

        <framework:ContentItemPresenter ContentItem="{Binding ChildItems[0]}"

            Grid.Row="0" Margin="3" />

        <framework:ContentItemPresenter ContentItem="{Binding ChildItems[1]}"

            Grid.Row="0" Margin="3" />

    Grid>

UserControl>

6. Test the control

We’re ready to test the control. Run the extension project again and add the extension as before. We can now for a group control (for example by replacing the Rows Layout) select the new MovieLayoutControl as shown below.

Once selected, we can see that the 2 placeholders we created earlier are appearing.

For both placeholders, we can select a field.

The final result inside the screen designer is the following:

After applying these changes, we can run the control again. We’ll see the following for the smart layout extension.

As can be seen, there are some labels being added automatically within the control. We can override this behavior. Go back to the MovieLayoutControl.lsml file and add the following code between the tag. This will hide the labels for both levels.

<Control.PropertySources>

    <ControlPropertySource

        Property=":RootControl/Properties[AttachedLabelPosition]">

        <ControlPropertySource.Source>

            <ScreenExpressionTree>

                <ConstantExpression ResultType=":String" Value="None" />

            ScreenExpressionTree>

        ControlPropertySource.Source>

    ControlPropertySource>

Control.PropertySources>

<Control.ChildItemPropertySources>

    <ControlPropertySource

        Property=":RootControl/Properties[AttachedLabelPosition]">

        <ControlPropertySource.Source>

            <ScreenExpressionTree>

                <ConstantExpression ResultType=":String" Value="None" />

            ScreenExpressionTree>

        ControlPropertySource.Source>

    ControlPropertySource>

Control.ChildItemPropertySources>

The following image shows the result.

Summary

In this part, we’ve built some extensions using the extensibility toolkit for LightSwitch. We’ve only touched on building controls in this part. In the next - and final - part of this series, we’ll look at some more extensions we can add to the MoviePolis application. Stay tuned!

About Gill Cleeren

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 6: First steps in LightSwitch Extensibility

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 19 Sep 2011 11:18:00 GMT

In the previous articles (5 so far) in this series, we have covered most of the functions that are available in LightSwitch, right out-of-the-box. But LightSwitch is more than that.

Don't miss...

All SilverlightShow Ebooks

Throughout the articles, there are several occasions where I mentioned that some topic is an extensibility point. This effectively means that we as developers can write components that we can plug into LightSwitch on those particular places to extend the behavior of the tool.

To build extensions, we have several options. We can build extensions as custom Silverlight controls or we can use the extensibility toolkit. In this article, we’ll look at the first solution. In the next one, we’ll take a look at the latter.

The code for this article can be downloaded from here.

Extending LightSwitch

With LightSwitch, a lot of ground is covered with the functionality offered by default. Using this, both developers and non-developers (read: people who are technically savvy but aren’t spending their days with coding) can build great applications. Behind the scenes, a Silverlight application is constructed that can run stand-alone or in-browser.

However, having just what’s in the box might be limiting. That is exactly what Microsoft thought of when they created the tool. Developers may be wanting to use other controls than the once that are coming with the default install. Or they may want to use a different data source (for example use an Oracle database as the data source). Or maybe use a different layout or shell for the application. These are all valid reasons why Microsoft has allowed extending LightSwitch.

When LightSwitch was released, an extra toolkit became available, named the Visual Studio LightSwitch 2011 Extensibility Toolkit (with LightSwitch installed, you can download this for free from http://visualstudiogallery.msdn.microsoft.com/0dfaa2eb-3951-49e7-ade7-b9343761e1d2). When installed, it offers you a project template and several item templates to create a particular extension.

Apart from using the toolkit, we can also use custom Silverlight controls and reference these from a LightSwitch application. This is the focus of this article.

Extensibility points

As mentioned, throughout the article series, we have touched on a couple of points where LightSwitch can be extended. Here’s an overview of the extensibility points.

Business type

A business type can be seen as an extra layer of validation and formatting on top of a normal database type. With LightSwitch, several business types come in the box, including Money, Phone Number and Email Address. Based on the type, new options can appear in the Properties window in Visual Studio. An example is the default domain for the Email Address type.

New business types can be created to wrap additional validation and formatting onto the type. An example can be a temperature in degrees Celsius (which adds “° C” behind the value). Validation could perhaps be that the value should never be lower than -100°C.

Control

A control in LightSwitch refers to several types of controls. A control can be used to group other controls or it can be used to tell LightSwitch how to represent a value. By default, LightSwitch comes with several grouping controls (Rows Layout for example) as well as several item controls (a TextBox).

With the extensibility toolkit, all these controls can be constructed. These controls provide a tight integration with the LightSwitch application.

As mentioned, we can also create custom Silverlight controls and reference these from a LightSwitch application.

Data Source

LightSwitch applications can connect with SQL Server, SharePoint lists and WCF RIA Services. If you need to connect to another data source, extensibility kicks in. Through the use of WCF RIA Services as service layer, you can write code that connects with the external data source. LightSwitch interfaces with the services layer. This way, connecting with external services is transparent for LightSwitch application developers.

Screen template

A screen template is used when building new screens. By merging data with a screen template, screen code gets generated. LightSwitch uses defaults to generate the different fields as a specific control.

We can create new screen templates as well using extensibility. We can define layout properties such as arrangement, colors etc. This way, we have complete control over how the generated screens will be displayed.

Shell

The default shell of a LightSwitch application contains the Save and Refresh buttons at the top and a menu on the left. If we aren’t satisfied with this, we can create a new shell and specify that we want this to be used for our screens. Only one shell can be used in one application. Things like the logo, navigation structure etc can be defined in the shell.

Theme

Silverlight applications can be themed: we can specify which styles are to be used by the controls. We can create a new theme to let the application match the company colors. Using themes, it’s also easy to change the colors for the entire application in one single place.

Using an extension

Creating one of these extensions is the work a developer should do, since quite a lot of coding is required. Once created, these extensions can be used by everyone creating the application, without requiring any additional coding effort.

Once developers start sharing extensions they have been building, we can import these into our application. Let’s take a look at how we can use an extension that’s already been built.

For this demo, we’ll use an extension uploaded to the Visual Studio Gallery (http://visualstudiogallery.msdn.microsoft.com). Download the extension from this page: http://visualstudiogallery.msdn.microsoft.com/58e0f1f4-d2d8-41f9-a4f9-dae70d5826e9. The download contains a *.vsix file that you need to run on your system without having Visual Studio open.

Once ran, open your LightSwitch project in which you want to use the extension and navigate to the Properties. In the extensions tab, if all goes well, your extension should be listed, as shown below. Here we are adding the Luminous controls.

Note that we can select to use this control from now on in any new LightSwitch project we create.

These controls are now available in the application. For example, in the screen designer, we can add a new Group control as shown below.

Here’s an image showing the newly added control in action.

If we want to use an extension that contains shells or themes, we can work in a similar way. For example, download the Spursoft extension at http://visualstudiogallery.msdn.microsoft.com/18114b9a-5290-4766-991e-504ab6cfbda1. Install and activate the extension as explained above. This extension contains a new Shell and several themes. In the General tab of the Properties window, we can select these.

If we run the MoviePolis application now, we see the following.

Now that we have used controls and themes created by someone else, let’s take a look at how we can create our own.

Creating Silverlight custom controls

To finish this article, we’ll create our own extension. We’ll use the toolkit in the next article, so here we will use an often easier approach: a Silverlight custom control. Assume that people selling tickets can only open the LightSwitch application, they are not allowed to have a browser open on their PCs. However, at times during the day, ticket sales are slow, so the management has decided they are allowed to have a controlled browser environment on their machine. Since Silverlight has a WebBrowser control, we can make a Silverlight custom control with a small browser baked-in and add a screen with this control on it. Note that a WebBrowser control only works in out-of-browser applications. However, we are going to have the LightSwitch application run standalone so that won’t be a problem. Let’s take a look.

Add a new project to the solution. Make it a Silverlight Class Library. Here, I’ve named it SLExtensions. Make it a Silverlight 4 library in any case.

In the project, delete the default generated Class1.cs and add a new Silverlight User Control. I’ve named this control BrowserControl.xaml as shown below.

We can now write some code for this control. The code below creates a very simple browser, based on the Silverlight WebBrowser control.

<UserControl x:Class="SLExtensions.BrowserControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="40">RowDefinition>

            <RowDefinition Height="*">RowDefinition>

        Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Orientation="Horizontal"

            VerticalAlignment="Center">

            <TextBlock Text="Address:" Margin="5"

                VerticalAlignment="Center">

            TextBlock>

            <TextBox Text="Enter URL" Width="300" Margin="5"

                Name="AddressTextBox">

            TextBox>

            <Button Content="Go" HorizontalAlignment="Center"

                VerticalAlignment="Center" Margin="5" Name="GoButton"

                Click="GoButton_Click" >

            Button>

        StackPanel>

        <WebBrowser Grid.Row="1" Name="MainWebBrowser" Width="1000"

            Height="800">WebBrowser>

    Grid>

UserControl>

In the code-behind, add the following code. This code simply checks if the URL starts with http:// and adds it if not. Finally, it sets the source of the WebBrowser control.

private void GoButton_Click(object sender, RoutedEventArgs e)

    string uri = string.Empty;

    if(AddressTextBox.Text.Length > 0)

        uri = AddressTextBox.Text;

        if(!uri.StartsWith("http://"))

            uri = "http://" +AddressTextBox.Text;

        MainWebBrowser.Source = new Uri(uri, UriKind.Absolute);

Now, build the solution. In the LightSwitch application, add a new screen, but don’t add any data to it, as shown below. The screen template you select is of no importance. Give the screen a meaningful name (I’ve named it BrowserScreen). In the screen designer, select to add a New Custom Control, as shown below.

This will open a dialog, asking you which control you want to add.

Click on the Add Reference button and select the SLExtensions project.

Within this project, select your user control, as shown next.

Your new control will now be used on the screen.

Run the application now and navigate to the Browser screen. We can enter a URL, hit the Go button and the page will be shown.

We have successfully created a new custom Silverlight control and added it to LightSwitch.

Summary

In this article, we’ve taken a look at the options we have at our disposal to create extensions in LightSwitch applications. We’ve installed and used several of these and created a custom Silverlight control to be used from a LightSwitch application.

In the next article, we’ll be using the extensibility toolkit to create more extensions!

About Gill Cleeren

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 5: Security and deployment in LightSwitch applications

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 05 Sep 2011 10:40:00 GMT

Don't miss...

All SilverlightShow Ebooks

Part 5 already of our series on Visual Studio LightSwitch 2010! Now that we have a solid understanding of how we can build applications in LightSwitch, based on data, queries and screens, we have arrived at a point where we have to start asking questions like “Can each user access each screen?”, “How can I change permissions within my application” and “How do I get my application on the client’s machine?”. These are all valid questions that pop into a developer’s mind during the development of any application. In this article, we’ll tackle security and deployment topics.

The code for this article can be downloaded here.

Making your LightSwitch applications secure

LightSwitch has a built-in system that allows us to manage security at a fine-grained level. This system is a combination of authentication and permission-checking (authorization). Part of this can be set through a screen in the properties (see screenshot below). On the other hand, we can also check permissions from code. Let’s take a look.

Authentication

Authentication is a process where the application checks who is accessing it. Based on the passed-in data (usually in the form of a username/password combination), the user will be granted access to the application. When we create a new LightSwitch, authentication is disabled by default. This effectively means that the application, when deployed, can be opened by every user that wants to use it and each operation and screen within the application is available as well. The above screenshot of the Access Control tab (Properties à Access Control) shows that by default, the “Do Not Enable Authentication” is checked.

Other options that are available are Windows Authentication and Forms Authentication. When using Windows authentication, we get access to the user token that’s authenticated in Windows. If we want to use Forms authentication, the user will need to supply a username/password combination, similar to Forms authentication in an ASP.NET application. We’ll see further how we can use these.

Permissions

Without us asking, LightSwitch generates an entire system of access control methods along with the generated code. Methods are generated for screens, data, queries… This results in the ability to check whether a user can view a certain screen, if he/she can perform a save on a certain entity… We can hook into these methods and write code to check this. This system is based on permissions. Permissions are the lowest level of rights that the user can have within the application. We can define permissions and check whether or not a user has the permission.

Users and roles

In most applications, users aren’t given permissions directly. Instead, they are grouped in roles. In LightSwitch, this is exactly the same. The basic thought behind this is that the task of managing permissions for individual users would be too tedious to do (imagine you being the administrator to manage permissions per user on a day your company has hired 30 new people…!) We’ll soon see how we can create these roles and assign permissions thereon.

Applying security

Now that we know what security options are available, let’s take a look at how we can apply them together.

In MoviePolis, we identify 2 roles. One group manages the movies, show times, distributors and the rooms, while another group is responsible for ticket sales. A third role, the system administrator, has access to all functions and also manages the security in the application. This role is built-in in the application and is the one used by default when developing the application.

With the MoviePolis solution open, go to the Access Control tab. In here, select Windows authentication for now and notice that the permissions grid becomes editable. In this grid, add the following permissions:

CanManageRooms
CanManageMovies
CanSellTickets

Note the Granted for Debug checkbox in each row. When checked, the role is automatically granted when running the application from the debugger. This frees us from having to deal with logins during the development of the application.

We can now write code inside the access control methods that will check whether a user has a certain permission. The EditableMoviesGrid screen, used to manage the Movies, is only accessible for user in the role where the CanManageRooms permission is true. To check this, open this screen in the designer, click the Write code button and select the EditableMoviesGrid_CanRun method.

In the code, we can now check this permission as follows:

partial void EditableMoviesGrid_CanRun(ref bool result)

    result = User.HasPermission(Permissions.CanManageMovies);

If we run the application now, we won’t see any difference. However, if we uncheck the “Granted for debug” checkbox, we can see that the screen won’t turn up in the list of available actions, as shown below.

The other screens are similar.

We can also use these permissions in other places. For example, assume that we have another permission, CanDeleteMovies. Users that don’t have this permissions, can see the screen, view the data but can’t delete movies. LightSwitch generates quite a few access control methods for the data as well, as shown below.

We can check the permission using the following code:

partial void Movies_CanDelete(ref bool result)

    result = Application.Current.User.HasPermission(Permissions.CanDeleteMovies);

The result is shown below, where the delete button is disabled.

Managing the users and the roles

So far, we have been playing around with the checkbox to grant a permission in debug mode. Of course, we need a way to manage users and manage the permissions for the roles. Screens for this are built-in with LightSwitch, we don’t have to create them ourselves. Let’s take a look.

When deploying the application (we’ll look at deployment options later in this article) and running the installed version as the system administrator, a new Administration item appears with two subitems, Roles and Users. As can be deducted, the screens will allow the administrator to manage the roles and the allowed users. The application developer need not to worry about building these himself.

In the Roles screen, we can define the roles for our application.

For each role, we can then add the permissions (all permissions defined in the application are available through a dropdown selection).

Finally, we can add users to the role.

Note that if we take Windows authentication and only one user is available, with default settings, this user will become the administrator and can’t be added to another role.

The user screen gives us about the same data, but from a User management point-of-view.

Windows and Forms authentication

In the above sample, we used the easiest approach, where we used the built-in Windows authentication to manage the users. Let’s look at how we can work with Forms authentication, so that the user will have to log in to the application.

From the Access Control tab, select Forms authentication.

Deploy the application through the Publish wizard (again, we’ll look in more details at this in the Deployment section). Follow these screenshots for the deployment options.

Select Desktop for the type of application you want to create.

Select Local for where the services will be hosted.

You can choose where you want the output to be placed.

You can define where the database should go (you can leave the default options):

Define the administrator for the application. This user will get access to the administration screens.

In the other screens, just select the default. Finish the deployment wizard by hitting the Publish button. Visual Studio will now generate an *.msi (installer) file for you, located in the Publish location. Install this file and run the application.

We are now presented with a login screen.

We can now create new users and assign them to roles.

Each user will be presented with the login screen. Based on the user name, specific functions or screens will be available.

We have now already had an introduction to deployment. Time to learn more about it!

Deployment

Building an application on a single machine is one thing. A vital ingredient of developing applications is getting the application is the user’s hands (or at least on his machine J).

To deploy applications, LightSwitch has a wizard that guides us through the process of creating redistributable packages of our applications. This wizard will guide us through the different deployment options offered by LightSwitch. Keep in mind that we don’t have to worry about deployment during the development. In all cases, we are building the same (Silverlight) application that will be deployed on the desktop or run from within the browser.

Deployment options

LightSwitch applications are essentially 3-tier applications. However, we don’t have to physically use 3 machines to run a LightSwitch application! Instead, we can choose to run everything from the same machine if we want to. To make this distinction, LightSwitch offers several ways for deployment of both the client and the server tier.

On the client, we have:

Web/browser: the application will run as a Silverlight in-browser application. This may be easier when deploying inside an enterprise since users don’t have to perform an installation. However, since we are running Silverlight inside the browser, some functionality such as Excel export won’t work.
Desktop: in this case, the application is installed as a Silverlight out-of-browser application, running with elevated trust.

On the server-side, we can have:

Client machine: the server components and the database are installed on the same machine
IIS: the server components are installed in IIS on a webserver, the database may be on a different server.
Windows Azure: LightSwitch applications can be installed in Azure. Several building blocks of Azure are required. If using Azure, we of course need an Azure subscription. We need a hosted service where the server components will be hosted (this is basically a service in the cloud). A storage account is required as well. Finally, we can host the database in SQL Azure.

The full installation on Azure can be found here: http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=EN-US&k=k(LS.SERVERCONFIGURATION)&rd=true .

When using IIS or Azure, the client-side is just a thin layer.

Deployment Configuration

Once you know which way you’ll be going with your LightSwitch application, you can make your selections in the project properties. Once you’re ready, you can use the Publish button in this screen (or alternatively, right-click on the project and select Publish) and the LightSwitch Publish Application Wizard will start. We’ve seen this wizard already before, so I won’t be stepping through all the steps again.

Note that one single application can be installed in several ways. You can run the publish wizard several times with different settings (once cloud, once desktop). Any LightSwitch application can be installed in all above-mentioned deployment configurations, there’s no need to keep deployment options in mind while developing the application itself.

Summary

In this part, we’ve covered two topics, security and deployment. We’ve seen how we can create applications that manage users, roles and permissions and looked at the different available authentication options, Forms and Windows authentication. In the deployment part, we’ve look at the different options that LightSwitch offers to deploy an application.

In the next part, we’ll start looking at how we can extend LightSwitch. Stay tuned!

About Gill Cleeren

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 4: To query or to code, that is the question!

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 29 Aug 2011 12:02:00 GMT

Don't miss...

All SilverlightShow Ebooks

Welcome to part 4 in this article series on LightSwitch development. Now that we have deeply covered data and screens, the third fundamental, queries, is up next. Queries are used to get the data in screens; hence they are the missing link between these two. After we’ve looked at how we can influence the application by changing queries, we’ll start writing code in LightSwitch. In the previous part, we already wrote a couple of lines of code. In this part, we’ll see more places where coding is possible and in some cases, required.

The code for this article (as the solution is at the end) can be downloaded here.

Queries

Using a query, we can get data from the data source to the screen. When creating a new table, LightSwitch will automatically create 2 queries for us. The first one returns all items from the table (basically a SELECT * FROM TABLE). The second one returns a single instance (which effectively results in either 0 or 1 record being returned). In the screen designer, when clicking on the Add Data Item button, we can see these 2 queries, as shown in the screenshot below:

We can add these queries to a screen to return data. In fact, there are 2 types of queries in LightSwitch. As mentioned, each screen displaying data has a query. This is a local query, which is only used for one single screen. Secondly, we can create queries as part of the model. This query is more like a global query.

Local queries

When we create a new screen based on a table, LightSwitch will add a local query automatically. In the screenshot below where we are creating a new editable grid screen for Movies, the query is shown on the right.

By default, this is the “return me all the data you can find in the Movie table” query. However, with this screen, we want to show currently playing movies (in the Movie table, I’ve added a IsCurrentlyPlaying property without telling you…). To edit the query for this screen, we can click on the Edit Query link at the top of the right pane in the screenshot above. We now arrive in the query designer. This basically allows us to do filtering, sorting and adding parameters. For this demo, we can add a filter that says that only return Movies where the IsCurrentlyPlaying property is true as shown in the screenshot below. The results are shown ascending order based on the Title field.

Note that the query designer is smart enough to know what type the field has and based on that, it will show more or less options. Should we add a Filter based on the Id property, more options are possible since this field is of type Integer.

The query we have now created is bound to the screen we are using it in, it’s a local query. If we have put a lot of work in creating in, we’re basically stuck in terms of reusing it on another screen. If we want to build a query that we can reuse, we can do so.

Global queries

In the Solution Explorer, we can right-click on a table. One of the options that pops out, is the Add query one. When clicking this, we arrive again in the query designer. One important difference here is that the query now becomes part of the model: it can be seen directly linked to the table.

We can now use this query to base one or more screens upon. When adding a screen, we see this query pop up in the list together with the table entities. Note that you’ll see it appearing only with some templates, the Details template won’t show it for example.

This screen will now automatically use this query to start with. If we want, we can again edit the query and add new filters.

This type of query is global for the entire application to be used.

Parameters in queries

Assume that we want to change the screen so that the user can use a checkbox to indicate whether he wants to see only the currently playing movies. Let’s look at how we can build this.

In the query designer, we’ll now use a parameter for the filter, as shown below.

The parameter should be added as well. The parameter is named IsCurrentlyPlaying (you can give it any name really).

Now, in the screen designer for the screen, add a Data Property. Select a Boolean value and give it a name.

Again in the screen designer, select the parameter in the query. In the Properties window, under Parameter Binding, you can select the Boolean value you just added. If done correctly, an arrow appears that points to the parameter as shown below.

Finally, we need to add this Boolean value to the screen. To do so, select the Rows layout (root of the screen) and click on the Add button at the very bottom. In the context menu, select the Is Currently Playing parameter.

We can now see this parameter appearing as a checkbox in the screen.

Coding queries

The query designer only allows us so much; we can’t do all the things that we’re used with regular queries or LINQ (sum, top, count…). However, when we run into a limit here, we can start writing code.

Assume that we only want to return to the user a maximum of 100 movies in the grid. This is not possible with the query designer. However, inside the query designer, another Write Code button is winking at us:

In the PreProcessQuery method, we have access to the query before it is being executed. The query object is of type IQueryable, meaning that we can add an expression onto the object. This will then be combined with the normal query and the optimal query will be executed on the data source.

In the code below, we are adding to the query that we only want the top 100 results. Behind the scenes, LightSwitch will not fetch all records and then show only the first 100. Instead, the query that will be built includes a TOP 100 statement.

partial void CurrentlyPlayingMovies_PreprocessQuery(ref IQueryable query)

    query = (from q in query

        select q).Take(100);

This last part was a good bridge to the next part, writing code in LightSwitch.

Coding in LightSwitch

Although one of the important principles of LightSwitch says “No code required”, quite often, real applications will be code to be written. The tools and designers can only take you so far. When it comes to writing validation or business logic, code is going to be required. That being said, the code written in most LightSwitch applications will be limited. There’s no need to start writing code that says how to build up the screen or fetch the data. All of that is handled by LightSwitch.

LightSwitch offers quite a lot of places in the code where we can hook into, in the form of partial methods. Most of the code that we have to write will go in these partial methods as we’ll see soon. The code we are writing is Silverlight code.

Validation rules

As said, validation is one place where very often, code is required. Let’s take a look at writing a rule. LightSwitch creates for each property a Validate partial method in the generated code. We can thus easily add our own code. Let’s add validation rules for the ShowTime table.

The end time for a ShowTime should always be later than the starting time.

To implement this rule, we can select the StartTime field and click on Write code à StartTime_Validate. In this method, we can add the following code:

partial void StartTime_Validate(EntityValidationResultsBuilder results)

    if (EndTime < StartTime)

        results.AddPropertyError("Start time should be earlier than end time");

Similarly, for the EndTime field, add:

partial void EndTime_Validate(EntityValidationResultsBuilder results)

    if (EndTime < StartTime)

        results.AddPropertyError("End time should be later than start time");

Note that both these methods are partial. They are guaranteed to be called by LightSwitch, we don’t need to write any logic for that. LightSwitch will call these when validation is required on these fields, i.e. when the value has changed.

LightSwitch offers feedback to the user automatically in the UI:

If the showing is private (PrivateShowTime is true), the EndTime should be before 4pm. This rule is enforced by MoviePolis management. We can add another rule using the following code:

partial void PrivateShowTime_Validate(EntityValidationResultsBuilder results)

    if (PrivateShowTime.HasValue && PrivateShowTime.Value)

        if (StartTime.Hour > 16 || EndTime.Hour > 16)

            results.AddPropertyError("Private showings can't be after 4pm");

A validation error is shown in the UI when setting a time later than 4pm and checking the checkbox for PrivateShowTime, as can be seen below:

Business rules

When adding a new movie to the system, a new show time needs to be added automatically as well. MoviePolis has a rule that new movies should have their first showing on the next Friday at 8pm. We can add this business rule. For this, we have to hook into the save pipeline offered by LightSwitch. This pipeline can be seen as a series of events that happen after one another, for example when adding an entity. For this particular rule, we have to hook into the Inserting event of the Movie entity as follows.

In the table designer, with the Movie table open, click on the Write Code àMovies_Inserting (note that you should have the entity selected, not any of the fields).

In the partial method, we can write code that checks to find the next upcoming Friday and it will add a new instance of ShowTime for that day.

partial void Movies_Inserting(Movie entity)

    var todayDayOfWeek = DateTime.Now.DayOfWeek;

    DateTime nextFriday;

    switch (todayDayOfWeek)

        case DayOfWeek.Friday:

            nextFriday = DateTime.Now;

            break;

        case DayOfWeek.Saturday:

            nextFriday = DateTime.Now.AddDays(6);

            break;

        case DayOfWeek.Sunday:

            nextFriday = DateTime.Now.AddDays(5);

            break;

        case DayOfWeek.Monday:

            nextFriday = DateTime.Now.AddDays(4);

            break;

        case DayOfWeek.Tuesday:

            nextFriday = DateTime.Now.AddDays(3);

            break;

        case DayOfWeek.Wednesday:

            nextFriday = DateTime.Now.AddDays(2);

            break;

        case DayOfWeek.Thursday:

            nextFriday = DateTime.Now.AddDays(1);

            break;

        default:

            nextFriday = DateTime.Now;

            break;

    DateTime showTimeStart = new DateTime(nextFriday.Year, nextFriday.Month,

    nextFriday.Day, 20, 0, 0);

    var newShowTime = new ShowTime();

    newShowTime.Movie = entity;

    var room =

        from r in DataWorkspace.MoviePolisRoomManagementData.Rooms

        where r.RoomName == "Room 1"

        select r;

    newShowTime.Room = room.First();

    newShowTime.StartTime = showTimeStart;

    newShowTime.EndTime = showTimeStart.AddHours(2);

    entity.ShowTimes.Add(newShowTime);

The result can be seen below:

Custom screens with code

To finish off this part on coding, we’ll take another look at building a custom screen from scratch but now including code (in the previous article, we already looked at creating screens from scratch as well).

For this demo, assume that we are building a custom screen where the user can enter showtimes. Assume for this demo that private show times should not have an end time filled in (the people from MoviePolis don’t want their best customers to be rushed out of the room!). To do so, we’ll add a checkbox for the IsCurrentlyPlaying. When true, the end time field is shown, otherwise, it’s hidden. Let’s look at how we can create this.

Create a new data screen, but don’t select any data to be added (we’re starting from scratch, remember). On this screen, we’ll add a local property of type ShowTime:

Next, add 2 properties of type DateTime and a third one of type Boolean. Your screen should now resemble the following screenshot:

Now, we’ll write some code.

In the InitializeDataWorkspace method, we’ll write some initialization logic:

partial void CreateNew_InitializeDataWorkspace(List saveChangesTo)

    // Write your code here.

    IsCurrentlyPlaying = true;

Now, we’ll add code for the Changed events of the ShowTimeStart and the IsCurrentlyPlaying property.

partial void ShowTimeStart_Changed()

    ShowTimeEnd = ShowTimeStart.AddHours(2);

partial void IsCurrentlyPlaying_Changed()

    this.FindControl("ShowTimeEnd").IsVisible = IsCurrentlyPlaying;

Using the FindControl method, we are able to search for a control on the UI and execute code on it.

When we change the value for the start time, the end time value will be updated as well.

When unchecking the Is Currently Playing field, the Show End Time field will be hidden as can be seen below:

Summary

In this article, we’ve taken a look at the options we have when using queries in LightSwitch applications. Next, we have seen several places where it’s required to write code, including validation, business rules and custom screens.

In the next article, we’ll be diving into deployment and security!

About Gill Cleeren

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 3: Going visual with screens

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 22 Aug 2011 10:49:29 GMT

Don't miss...

All SilverlightShow Ebooks

After reading part 2 of this article series, you should have a solid understanding of the data aspect in LightSwitch. Data is the foundation for a LightSwitch application on which the rest of the application is built. In this third part, we’ll look at the visualization of the data: the screens. As with other development, screens are used to allow the user to interact with the data. We will see that to a certain extent, LightSwitch generates screens for us. But, as you can see by the length of this very article, we can do a whole lot more with screens than just have LightSwitch generate them for us. So fasten your seatbelt as I’ll be showing you screens in detail!

We are continuing to use the MoviePolis sample. Remember, the people from MoviePolis had an old COBOL application to manage their cinema complex with. They asked us to create a new solution which we are building using LightSwitch. The code for the MoviePolis application (as it looks at the end of this part) can be downloaded here.

The “Screen Machine”: screen templates

OK, perhaps I got carried away with this title… However, LightSwitch really has a built-in screen generator, based on the concept of screen templates. A screen template is really nothing more than a template to which we “feed” the data we want to be able to edit using the screen. When we look later at creating screen templates (yes, screen templates are another extensibility point of LightSwitch), we’ll see that a screen template consists out of XAML code.

Creating a screen is simple. By right-clicking on the Screens folder in the Solution Explorer, we can indicate that we want to add another screen to the application. LightSwitch opens a dialog, as shown below, which lists the available templates. LightSwitch comes out-of-the-box with 5 installed templates.

Quite logically, we can give the screen a name (a default name is generated for you if you omit doing so). In the Screen Data section, we can select which table (or global query - we’ll learn about those in the next article) we want to base the screen on. In the above screenshot, we selected a List and Details Screen for the Movies data. This screen template however is capable of showing related tables as well. Here, LightSwitch found that Movie ShowTimes are related so it proposes it as well, so that we can manage that data from the same screen.

What happens when hitting the OK button , is that LightSwitch will generate code that makes up the screen. Indeed, code-generation is taking place behind the scenes. That effectively means that updating the table ( for example adding a field) afterwards will not be reflected automatically in the screen, this needs to be updated manually.

Let’s look at the generated screen.

Parts of the screen

The screenshot below shows a generated screen.

At the very top (1), the Screen Command Bar resides. This bar has 2 buttons by default, allowing us to save data or refresh data. On the left (2), the navigation bar is placed under the Menu item (this arrow can be used to collapse the menu pane). Under the Tasks item, the available screens are placed. Clicking on an item in the Tasks list will open the corresponding screen in (3), which is by default a tab control. Note that not all screens are shown here: if we have a detail screen, which is opened from another screen using a parameter (ex an editable grid), this screen won’t be shown here.

This is the default layout. By saying default, I’m of course implying that we can change this screen. In fact, we can change this a lot. Some modifications can be done from the screen designer, which we’ll look at next. Changes to the general layout (that is, the shell of the screen) can be done by using another extensibility hook: the shell template. If we want to change colors, we can build a custom theme extension, which is another extensibility point. We’ll be looking at extensibility later in this series.

Screen and runtime designer

After generating a screen from a template, LightSwitch opens the Screen Designer. Using this designer, we can change the screen, although not using a drag-and-drop feature as we’re used in Visual Studio. Instead, we are shown a screen hierarchy to which we can add, change and remove items.

On the left, we see the data; on the right, the screen hierarchy is shown. Thinking in terms of MVVM, the data can be considered being the ViewModel, while the screen hierarchy is the View. Both parts are linked using data binding.

In the screen designer, we can change how the screen is built. By default, a Columns layout is generated, which places the master and detail screen next to one another. Assume we want to view them below each other, we can change this to be a Rows Layout, as shown next.

When running the application now again, we see that the screen layout has changed.

Now having a preview of what our changes look like inside Visual Studio can be seen as a limitation. However, a solution exists in the form of the runtime screen designer, which can be used in roughly the same way as the designer in Visual Studio. However, since it is part of the application (it’s a Silverlight page in fact), it shows the preview of the running application.

Accessing the runtime screen designer is possible using the Design Screen button at the top right of the screen. This button is of course only shown when running the application from Visual Studio.

Clicking this button takes us to the designer, which is shown on the next screenshot.

Assume that we aren’t happy with our previous change; we can then change the rows layout back into a Columns layout. This is done in the same way as previously inside VS.

Of course, other changes can be done here as well. Using the buttons at the top of the screen, we can move items and remove them.

Using the Add function, we can choose to add more available fields.

Using the properties window at the bottom, we can change layout properties such as alignment, sizing and display name.

One might ask: what is the use of this, we’re running the application, we aren’t inside Visual Studio. Will all of our changes be lost? Of course not! When hitting the Save button, the changes are sent back to Visual Studio, which will reflect the changes we made after exiting the debug session.

Control and layout types

In the screen hierarchy, we can add elements as well as change the representation of elements. Several control types are available.

Assume for the DistributorsListDetail screen that we also want the Grid with the related movies to include only a couple of fields. Additionally, we want to add a Movie detail screen. Here’s how we can do so.

1. First, in the Data Grid Movies, select the items you want to remove, so that only the following are left. Also, drag the Image field to be the first column in the Data Grid.

2. Select the Rows Layout Details Column and click on the Add button at the very bottom. Select Movies à Selected Item.

You should now have the following:

Next to adding items, we can also change the type that specifies how a particular item will be shown. For example, if we don’t want the title to be edited from this screen (and just use the field to display data), we can select the Label type.

Some other types have a more advanced way of being displayed. Take for example the Distributor field, which is displayed by default as a ComboBox. We can select various other options, including a Modal Window Picker.

When using this type, a modal dialog is shown:

Finally, composite controls can be used for a more advanced type of data visualizations. Let’s look again at the Movie Selected item. Instead of showing a grid of controls, we can select a composite control, such as the Text and Picture layout. When selecting this layout type, LightSwitch shows us the available placeholders. In each placeholder, we can select which field we want to display, as shown below:

When running the application, the composite control looks like this:

Let’s now take a look in some more detail at the available screen templates and their use.

Screen templates

Without adding any ourselves, LightSwitch has 5 screen templates available:

List and details screen: a master-detail screen. Both master and detail are shown in one single screen. We can also build a master-detail implementation spanning multiple screens ourselves if required.

This screen can be configured to included related entities, such as in the above screenshot where Movie ShowTimes are also being shown.
New data screen: the New Data screen allows us to configure the screen to add a new entity. If we don’t create one, LightSwitch will generate one for us on the fly.
Details screen: Similar to the new data screen, the Details screen can be used to override the default visualization LightSwitch generates for a detail of an entity.
Editable grid screen: This screen is composed out of a DataGrid which allows inline editing and adding entities. It can also edit via dialogs.

Although we can search from this screen, a more specific template is available.
Search screen: as the name implies, the search screen allows us to search data. This screen is very similar to the editable grid, although there are some differences.
Notice that there are no buttons to add or edit data and the Grid data itself is not editable. The title, which is the summary property, is shown as a link, allowing us to navigate to the detail of a Movie. If we have a detail screen created for Movie, we can make this screen the default detail screen for that entity when clicking on a link. To do so, in the Properties window of the Title field of the search screen, we can specify which detail screen we want to use as shown below.

Exporting to Excel

Several screen templates such as the editable grid and the search screen allow us to export to Excel. At the top of the grid, an Excel icon winks at us to export to that all so important tool in the eyes of every manager!

Creating a screen ourselves

After seeing screen templates, we might get the idea that we can create a screen from scratch in LightSwitch. Well, that certainly isn’t true. Let’s take a look at how we can create an entirely new screen.

1. In the Add new screen dialog, select any of the templates. However, don’t select any screen data. Here I’m creating a screen named MyNewScreen.

The result in the screen designer is, well… an empty screen!

2. Next, click on the Add Data Item button. In the dialog that appears, we can choose to add methods, local properties or queries. For now, let’s add one of the proposed queries (we’ll look in more detail at queries). Select the Movies (all).

This query is now added to the data on the right.

3. In the Add button, select Movies. A Data Grid is added.

4. With the columns layout selected, select Add Layout item à Group. A new rows layout gets added.

5. In the Rows layout, add the Selected Item for Movies.

Our screen looks as follows:

Changing screen navigation

You may have noticed already that the screens in the Tasks window are shown in the sequence they were added to the solution. Of course, we can change this. To do so, right-click on the LightSwitch project and select Properties. Navigate to the Screen Navigation tab. Via this screen, we have full control over how the screens are shown.

Screens are by default added to the Tasks node, which is a Group. Using the arrows on the right, we can move screens up and down within the Tasks group. We can also include screens that may not be in the list (they could have been removed earlier for example) using the Include Screen button. The screen also allows us to add groups using the Add Group button. Finally, by selecting a screen and hitting the Set button at the bottom, we can set a screen as the startup screen for the application. Below is a screenshot of changed navigation:

The result of this looks as follows:

Summary

After this third part of this article series, you should have a clear view of what screen can do in your application. We’ve explained the different ways of working with screens, the different screen templates and how we can build screens ourselves. We finished by looking at how we can change the navigation of a LightSwitch application.

In the next part, we’ll look at queries and we’ll start writing code in our applications.

About Gill Cleeren

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 2: Everything starts with data

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 15 Aug 2011 00:19:28 GMT

Don't miss...

All SilverlightShow Ebooks

In the first article of this series, we did a very high-level overview of LightSwitch. We looked at what exactly LightSwitch is and what you could do with it. We also built a very simple implementation of the demo we are using for this series, the MoviePolis application. This application consists at this point just out of 1 single screen, based on 2 entities.

In this part, we’ll focus first more on data. We’ll take a look at what options we have when creating data and we’ll also take a look at what happens behind the scenes.

The code for the MoviePolis application (as it looks at the end of this part) can be downloaded here.

Data as the foundation for a LightSwitch application

In the first part of this series, I already mentioned that in a LightSwitch application, things start with and evolve around data. Proof thereof is the landing page of a new LightSwitch project in Visual Studio, as can be seen in the following screenshot. The text “Start with data” is calling us to either create a new table from scratch in LightSwitch itself or to connect to an external data source.

Types of data

A LightSwitch application can connect to two types of data: local/internal data and external data. With local data, we are pointing at the database (SQL Server Express) that’s used behind the scenes by LightSwitch. If we start creating entities, by default, these will be created in this database. The local database is entirely managed by LightSwitch, which means that it can create entities but also do things such as managing the relations between entities.

An external data source points to all data that’s not the internal database. In other words, if we have LightSwitch connect to a SQL Server database, a SharePoint list or a WCF RIA Service, we are connecting to such an external data source. LightSwitch can manage the data of the external data source (it can perform CRUD operations for example); however it can’t manage the schema, create or delete relations etc.

The fact that we can connect to a WCF RIA Service is important. Since WCF RIA Services is DAL (Data Access Layer) neutral, it can basically connect with each type of DAL. Out-of-the-box, it supports Entity Framework and Linq-To-SQL, but it can perfectly work together with nHibernate if should be needed. Because of this, a LightSwitch application is not affected by the behind-lying database; the service layer forms an abstraction.

Although LightSwitch can’t change relations in an external source, it can create relations between an internal and an external source. What it does, it’s adding a foreign key in the internal table so it can keep track of the relation. Note also that one single LightSwitch application is capable of connecting with one internal and multiple external data sources at the same time. However, transactions on this aren’t supported.

The entity designer

The entity designer is really where it all starts. As the word says, we are creating the entities we will use in our applications here. The designer is really simple: it allows us to give the entity a name and add fields. Each field has a name, a type and a Boolean value indicating whether the field is required. The entity designer is shown next.

Both the entity and the fields have extended properties, which are displayed in the Properties window (it thus depends whether you have the entity selected or a field!). For the entity, we can specify the plural name, the name as it will be displayed and a summary property (we’ll look at this a bit further).

When we select a field, the following is shown in the Properties window. However, what is shown is dependent on the type we selected (String, Boolean…). Some properties, such as Maximum Length, are useful for validation purposes.

Let’s take a look at the available types…

Business types

When looking at the available types in the dropdown in the entity designer, we can see that there are some unusual types in there, including Money, Email Address and Phone Number. These are so-called Business Types. Such a type adds an extra layer on top of a normal database type. For example, the Email Address business type adds automatic validation for the entered value, as well as the ability to add a default domain to a string (so it becomes a valid email). Below is a screenshot showing the Properties window for the Email Address type.

When we run the application and we enter an invalid email, we’ll get feedback on this error without having to write any code for this.

When using the Phone Number type, at run-time, a specific window is shown to guide the user in entering a valid phone number, as shown below.

Business types are an extension point of LightSwitch, meaning that we can write our own. We’ll look at extensibility further in this series.

Summary properties and Computed properties

Let’s take another look at our current data model. We have movies and distributors. There’s a relation between these 2 entities. Let’s add another screen for the Movies, in this case an Editable Grid screen. Using this screen, we can add Movies, as shown below.

Note in the dialog that the Distributor drop-down is filled with a list of available Distributors. If we want to display an entity as a single line of text (which is done automatically for us here), we use a Summary Property. If none is defined for an entity, LightSwitch takes the first string property of the entity. However, assume that I’d like to show the contact name of the distributor here. In this case, we can change the property in the properties of the entity, as shown in the next image.

But wait, what happens if we want to make a combination, for example ( )? In this case, we need to write some code and use what is called a computer property. Let’s add one by clicking on the Computed Property button in the designer. A new property is added, let’s call it FullDistributorName. We can see it’s computed because of the small calculator in front of the line.

Now we need to add code for this property. In the Compute method of this field, we are going to create the value ourselves. In the properties for this method, click the Edit Method button.

We arrive in C# code in the Compute method. This method is called every time this value needs to be updated. We add the following code:

partial void FullDistributorName_Compute(ref string result)

    // Set result to the desired field value

    result = this.Name + " (" + this.ContactFirstName + " " + this.ContactName + ")";

Now change the Summary Property to be the FullDistributorName. When running the application now, we can see the new value being used to summarize a Distributor.

Choice lists

For some fields, the values a user can enter are limited. Think of Yes/No, Male/Female, Available/Not Available… In this case, LightSwitch offers a choice list. In the properties window, with a field selected in the designer, we can select Choice List and add the available values. Here, we are entering available genres for a movie:

When running the application, as expected, this is shown as a dropdown list where the user can select one of the available values.

Validation using code

When we were adding the Computed Property, we already looked at how LightSwitch allows adding code. While some basic validation can be covered with the properties window (think of the Maximum Length, the type of a field…), most validation and business rules require us to write custom code. Assume that we want to validate that an added movie isn’t longer than 200 minutes (who would want to see a movie longer than that?). This is logic we can enter via some code.

To do so, in the Entity Designer, we select the property (here Duration) and then under the Write code button, we select the Duration_Validate event. This event is triggered when the value of this field changes so that the code therein is triggered automatically. We don’t need to write any callers for this code; LightSwitch, in its generated code, contains partial method calls that will call this method. We can focus on writing the business logic instead.

In this event, we write the following code:

partial void Duration_Validate(EntityValidationResultsBuilder results)

    // results.AddPropertyError("");

    if (Duration > 200)

    results.AddPropertyError("A movie shouldn't be longer than 200 minutes!");

When we try adding a movie with a greater duration, we’ll see the error being displayed in the application immediately, as shown below.

In a later article, I’ll be doing a deeper dive in the validation options offered by LightSwitch.

Now that we have more knowledge on the data part, let’s take a look at how data relates to screens and queries.

Sorting and filtering data

Up until now, when we created a screen, the default query was used. Basically, this query retrieves all data (“Select * from TABLE”). When we want to change this, we can change the query that lies behind.

Assume that we want to by default in the EditableMoviesGrid, we want to see movies ordered by ReleaseYear and then by Title. To do so, we can in the screen, change the query by clicking on the Edit Query link.

This will open the query designer where we can add filtering, sorting and parameters. To achieve the required ordering, I’ve added two sort elements.

As can be seen, filtering is similar.

Now let us take a look at how we can integrate with an already existing database from this LightSwitch application.

Connecting to an existing SQL Server 2008 database

Assume for the sake of this application that MoviePolis has another system where they manage the rooms with. When defining Show Times, we of course need to use the available rooms to show a movie in. The rooms are available in another SQL Server database. In order not to duplicate that data, we’ll want to connect with it from our LightSwitch application. This way, if MoviePolis ever extends, they can add the new rooms from the other application and our LightSwitch application will have access to the updated data as well.

LightSwitch is capable of connecting with the external database and it can use the data in its tables. To do so, in the Solution Explorer, right-click on the Data Sources node and select Add Data Source. In the dialog that appears, select Database and connect to the external SQL Server Database.

The database appears in LightSwitch:

We can now create a relation between this external table and an internal one. Below is the entity designer with the ShowTime table open. I have created a relation between this entity and the Room entity, which is part of the external database.

This results in the following in the designer:

It’s clear that we can connect to and work with external data from LightSwitch. This way, LightSwitch lends itself to build applications that need to integrate with existing databases/applications.

As already mentioned, LightSwitch can also connect to SharePoint and to a WCF RIA Service for its data needs. We’ll have a deep look at working with WCF RIA Services near the end of this series. Remember for now that RIA Services can act as a gateway to other data layer/databases: they can be used as a pass-through for data.

Data behind the scenes

To finish off this part about data, I thought it would be interesting to see what’s happening behind the scenes, in other words, how LightSwitch is handling the data we are giving it and what is being generated.

At the very top level, a LightSwitch application has a DataWorkspace. Only one exists in our application. It keeps track of all the data sources we have in our application. In the case of the MoviePolis application, it contains 2 properties: one for the internal data source and one for the external database. The internal one is referred to as ApplicationData (the file-based database, located in the bin/data directory is also named ApplicationDataBase) and the external one is named Data (here MoviePolisRoomManagementData).

For the data sources, LightSwitch generates an entity set for each entity. We’ll thus have a Movies, Distributors… entity set in our sample. Note that these are the plural names. LightSwitch also generates query methods for each entity type in all of the available data sources. These are:_Single and _SingleOrDefault. Individual objects (instances that is) are represented as an EntityObject.

Summary

In this long article, we have looked at the specifics of data in a LightSwitch application. We’ve looked at the entity designer and how we can change properties for both the entity and its fields. We’ve covered summary properties and computed properties and wrote our first lines of code in a LightSwitch application to perform basic validation. Finally, we have created a connection to an external SQL Server database as well as created a relation to a table thereof.

In the next part, we’ll be looking at the specifics of screens for LightSwitch applications. Stay tuned!

About Gill Cleeren

Twitter: @gillcleeren

Developing real-world applications with LightSwitch - Part 1

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 08 Aug 2011 13:56:19 GMT

Don't miss...

All SilverlightShow Ebooks

In 2010, Microsoft announced LightSwitch, a product aimed at developing Line-of-Business applications with ease. In July 2011, the beta tag was finally removed from the product as Microsoft officially introduced Visual Studio LightSwitch 2011 as a new member of the Visual Studio family. Many however are still unsure about the product. Questions crossing a lot of minds include “Is it something for me?”, “What can I do with it?”, “Where should I use it?”, “Is it more than Microsoft Access?”, “Am I limited to what’s in the box?” and quite a few more.

For this reason, I have decided that a few articles are in place to give you a clear understanding of LightSwitch. I won’t be saying that you should LightSwitch for this or that. Using a sample application we will build throughout the series, I will try giving you an overview of how we can use it to build a real-world application. By reading these articles, I hope you’ll be able to make up your mind whether or not LightSwitch is something for you.

More specifically, I plan the following topics to be tackled along the way:

What is LightSwitch and where I see it being useful
The concepts of a LightSwitch application
Data in more detail
Screens in more detail
Queries in more detail
Writing business logic and validation
Managing security in a LightSwitch application
Deploying a LightSwitch application
Extensions - what and how
Using custom Silverlight controls in LightSwitch
Adapting the LightSwitch UI to your needs
Using RIA Services

In this first article, we’ll start by looking at what LightSwitch is and we’ll look at the concepts as well. First, let’s introduce the scenario we’ll use for this series.

The scenario

Imagine you are asked to build a new system for a movie theatre named MoviePolis. Today, they are using an old application which was written in COBOL and it consists out of several old-school screens, with absolutely no user experience at all. A typical interface of such an application is shown below.

As can be seen, this is not how we do things nowadays. That’s why MoviePolis wants a new system.

Their old system manages the following data:

Movies
Distributors
Show times
Tickets

Movies can be managed, they are owned by a movie distributor. For showing movies, show times are created. For show times, tickets can be purchased. This system already contains several interfaces, which are to be used by different people in the system: a manager will buy movies or add new distributors. An employee can manage show times. Ticket staff can view the interface to sell tickets for a show time.

Let’s now look at where LightSwitch in general can be used and what it really is.

Where is LightSwitch a good fit?

As a consultant, I’ve seen several times that non-technical people (sometimes with some technical background) have created applications, mostly in Excel or Access. There’s nothing wrong with that, absolutely not. Sometimes, even an entire organization runs on such an application. Things however may get difficult if that person decides to leave the company. In some cases, a consultant is hired to figure out how things work. Sadly, that’s costly and often very difficult to find out what is in the “application” and how it works (things like business rules, valid data etc). One of, if not the biggest problems here is that everyone creates such applications in their own way: there’s no consistency whatsoever. These people default to Access or Excel because it doesn’t require them to learn developing applications with a framework such as .NET. They get up-to-speed fast. Here, LightSwitch would be a good alternative. As we’ll see later on, there’s no development knowledge required to build a working application with LightSwitch. Not everything however can be done without writing code, so a good approach here might be that the non-technical/business person creates the rough outline of the application and a developer can then add finishing touches (that is, adding code to validate etc).

Reading this may get you thinking that I see LightSwitch as a tool only for those people. Well, I certainly don’t. In systems that I’ve build, very often typical administration screens need to be built. Things like managing countries, currencies, languages… Screens may have to be built for that type of data while there’s little business value here. Building those screens manually costs time (and therefore money). If we have these generated by LightSwitch, we’ll definitely make some profit.

Also, I see LightSwitch as a valid alternative for small applications. Very often, we as developers spend a lot of time thinking how we are going to build the application. Lot of time goes wasted in thinking about an architecture, a data access layer… even for small applications. LightSwitch can be a valid development platform here as well, since it has everything on board to get started, based on a solid foundation using Silverlight, RIA Services, MVVM etc.

Finally, using the extensibility features (which we’ll be looking at further down the road), a team of developers can build a number of extensions, typical for the business. Business persons can then use these extensions to create applications that are already tailored to the need of the business, without having to write logic.

Hello LightSwitch

Now that we have a bit of a clearer view on who could use LightSwitch and where it can be used, we can conclude that LightSwitch is a platform, part of the Visual Studio family, that allows building LOB applications in a rapid way. It allows people to build applications without writing code but it doesn’t block you from writing code. As developers, the tool can be used to build real applications, including validations etc. It has a rich extensibility framework that enables to build extensions to further customize the tool and the application that we are developing.

The applications we build are in fact Silverlight application. Because of this, LightSwitch applications can be deployed on the desktop (Silverlight out-of-browser application) and in-browser (Silverlight in-browser application). LightSwitch applications can be deployed to Windows Azure as well.

LightSwitch can be downloaded from http://www.microsoft.com/visualstudio/en-us/lightswitch. It can be installed in two ways. If you have Visual Studio 2010 already installed, it will integrate and become a new type of template that you can select. If not, it will install the Visual Studio Shell and it can run stand-alone.

Let’s now take a look at the foundations of a LightSwitch application.

Foundations of LightSwitch development

Any LightSwitch application evolves around 3 important foundations: data, screens and queries.

Data is where it all starts. Since LightSwitch is aimed at building LOB applications, it’s no wonder that we should start with the data aspect. LightSwitch has several options of working with data. It can work with a SQL Express database that it manages itself, it can connect to an existing SQL Server database or it can get data from a SharePoint list. On top of that, LightSwitch can consume WCF RIA Services, therefore. Because of this, we can virtually connect to any type of data source where RIA Services serves as some kind of middle tier to get and store data. We’ll look at this further in this series.

The default option is creating the application using an internal SQL Server Express database. In this case, we define the data from within the LightSwitch environment. Based on this data, LightSwitch can then be used to generate screens. Note that in one application, we can connect to an internal LightSwitch database and several external data sources. This way, it’s even possible to create relations between the several data sources: LightSwitch allows creating relations between entities inside the internal database and between the internal and any external database. It cannot change external databases though.

Once the data is defined, we can start generating screens on top of this data. (Note that LightSwitch supports an iterative way of working, so we can easily make changes to the data and alter the screens later on.) A screen can be created based on a template. Out-of-the-box, LightSwitch has some templates already; we as developers can create new templates as well. A screen template is as the word says nothing more than a template. We can change the screen once it’s generated to better fit our application needs.

The third and final foundation is queries. A query is the link between the data and the screen. A screen is always generated based on a query that runs on the data. Even if we don’t specify a query, a default query (Select * from …) is generated. We can change queries and we can create queries as well. We’ll be looking at how to do so later on.

Creating the MoviePolis application

Of course we can’t finish of the first part of this series without showing LightSwitch. Therefore, we’ll start with building the foundations of the application. In the next parts, we’ll be extending on this application a lot further.

So open Visual Studio LightSwitch and follow along to build the application. For the purpose of this demo, we create a LightSwitch C# application and name it MoviePolis.

When Visual Studio is ready creating the application from the template, we get the following screen. Note that LightSwitch suggest we connect to data first. For our demo, we are going to use the first option: we’ll create the data from scratch

Data of MoviePolis

As said, we should start with the data. In the solution explorer, we have 2 options: Data Sources and Screens. Right-click on Data Source and select Add Table. In the table/entity designer that appears, we can create our entity. Create the Movie entity as shown below.

Next, we’ll create the Distributor entity as shown below.

A Movie is distributed by a Distributor. We should therefore embed this information in a relation. In the designer with the Movie entity open, click on the Add relationship button. A dialog appears as shown below. Create the relationship so that one Distributor can have many Movie entities but each Movie can only have one Distributor.

The result is that this relation is shown in the designer.

For now, that’s enough data; we’ll model the other entities in the following articles.

Give me some screen

Now that we have our data model created in LightSwitch, we can move to creating some screens. In the solution explorer, right-click on the Screens folder and select Add Screen. In the dialog that appears, we see a list of screen templates that come with LightSwitch. Developers can create new ones, but for now, we’ll use one of the standard ones. Create a new List and Details screen and select that you want to use the Distributor entity. Mark that we also want to be able to edit the Movie data. The screenshot below shows these options.

LightSwitch will now reflect on the entity and generate a screen, based on this template. The screen designer shows a hierarchical view of the generated screen. Note that behind the scenes, code was generated. When we start editing this screen, this code will be changed.

Without any further ado, let’s run the application (remember to have your SQL Express instance running!). You’ll get a screen as shown below. We can edit the Distributor as well as add Movie instances.

At this point, we have a working application that handles things like adding, updating and deleting data.

Of course, we’ve only scratched the surface. In the following article, we’ll do a deep dive in all the options we have to work with data and screens and I’ll be telling you more on what happens behind the scenes. Stay tuned!

About Gill Cleeren

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switzerland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He is also SilverlightShow.net most appreciated webinar presenter, with 7 webinars delivered so far. Gill organizes the yearly Community Day event in Belgium.

Twitter: @gillcleeren

Beginners Guide to Visual Studio LightSwitch (Part - 5) - Working with Custom Validation

editorial@silverlightshow.net (Kunal Chowdhury ) — Tue, 04 Jan 2011 05:48:00 GMT

Don't miss...

($0.99)

All SilverlightShow Ebooks

This article is Part 5 of the series “Beginners Guide to Visual Studio LightSwitch”.

In my previous chapter “Beginners Guide to Visual Studio LightSwitch (Part – 4)” I guided you step-by-step process to create a List and Details screen. There I demonstrated you, how to integrate two or more tables inside a single screen.

In this chapter, I am going to demonstrate you of doing custom validation using Visual Studio LightSwitch. This time we will jump into writing some code to extend the functionalities.

Background

If you are new to Visual Studio LightSwitch, I will first ask you to read the previous three chapters of this tutorial, where I demonstrated it in detail. In my 3rd chapter, I discussed the following topics:

Creating the List and Details Screen
UI Screen Features
Adding a New Table
Creating the Validation Rules
Adding Relationship between two tables
Creating the new List and Details Screen
Application in Action

In this chapter we learn how to write custom validation for our table fields. Read it and start implementing your own logic. A quick jump to code will be there (for the first time). Enjoy reading the tutorial.

Setting up the basic application

Hope, you already read my first four chapters mentioned above. If not, read them first. It will be easy for you to get the base. Let’s start creating our new LightSwitch project. You know how to do that. Select the “LightSwitch Application for C#” template from the new project dialog. Give a proper name & location for your project and click “OK” to start creating the basic project.

Give some time to Visual Studio 2010 IDE to create the project. Once the project has been created, you will see the below screen inside the Visual Studio IDE:

Now you need to create a new table to start with the application. Create a simple basic table where we can add some custom validation logic. Chose your fields as per your requirement. For our sample, we will create a Employee table and there we will have some columns in it. Let us create 4 custom columns named “Firstname” of type(String), “Lastname” of type(String), “InTime” of type(DateTime) and “OutTime” of type(DateTime) to store the records of employees in and out time of particular day.

Here is the table structure for your reference:

Check “Required” field to do the null validation automatically by the tool. Hence, we don’t have to do it explicitly. I already demonstrated the same in my earlier chapters. Read them to understand it.

Validating Fields

Now it’s time to start the validation process for each field. Let’s start with the “Firstname”. Click on the row as marked in the below screenshot. Now go to the properties panel and scroll down it to the end. There you will find a grouped item named “Validation”. This panel hosts all the information of validation related to the selected field. Have a look it here:

As “Firstname” field is a String, you will see only “Maximum Length” as the default validation rule. If you want to change the maximum length of the string field, you can do that from here. If you want to write some custom validation rule, you can do it here by just clicking on the “Custom Validation” link from the properties panel. See the above screenshot for the details.

Let us check for the other field. This time we will do it for DateTime field. Select the InTime as shown below and check the properties panel. In the validation tab you will now see two fields “Minimum Value” and “Maximum Value”. Here you can specify your own custom value.

As mentioned above, we also have a link called “Custom Validation” here. You can write your own logic for validation by clicking it. Let’s do it. This is the first time we are going to write some code for LightSwitch application.

Click the “Custom Validation” link in the properties panel. This will open the code editor window inside the IDE. This editor window is very familiar to you. In the editor window, you will see the class file opened for you named “Employee”. This is nothing but the name of the table. It has a single event there and it looks as below:

You can do whatever validation logic you want it here. Want to write some code? Oh yeah! Ok, before doing anything, let me show you the API to throw the message on validation error. The output parameter “results” of type “EntityValidationResultsBuilder” has some APIs. If you want to throw some property validation error, use the “AddPropertyError()” method to return back the error message to the end user.

Have a look into the APIs mentioned in the below screenshot:

Ok, as per our requirement of the application, the OutTime of the employee must be after the InTime. An employee can’t go out if he/she is not in, am I right? So, let’s write some logic for that. If InTime is greater than OutTime (by any mistake by the end user, of-course), we will throw the error message to the user. We will use AddPropertyError() which takes string as message.

Have a look into the implementation here:

Hope, you got it. So, do it for the OutTime field too. Go to the table designer and select the row for “OutTime”. From the properties panel, click the “Custom Validation”, as we did it earlier. You will see the event generated for that in the code editor window.

Here, check whether OutTime is less than InTime. If so, throw the error as shown below:

We are ready with the custom validation. If you want to check for the various default validation rule for different controls, try it out. The custom validation is same for all the cases and if any issue, let me know. I will try to answer you as soon as possible.

See it in Action

Before closing this tutorial, you must want to see the demo in action. You must want to check whether we achieve our requirement or not. Hence, create a screen to check it out. For our sample, we will create an Editable Grid Screen for simplicity. Add the screen and don’t forget to chose the Employees table from the Screen Data dropdown.

Click “OK” and the IDE will create the screen for you. To show this demo, we don’t need to do any UI customization. Build the project. Hope, it will build successfully. If any issue, try to fix the error. Now run the application. You will see that, the application is up into the screen with the editable datagrid page opened in the main tab.

Try to add some records and you will notice that, the InTime and OutTime field has been automatically populated by the application. It will show you the current date time. Try to save the record. It will save properly without any error as the DateTime inserted is perfect.

Now, add a new record. Click on the InTime column. You will see that the calendar control. Yes, as you selected the column as DateTime type, the tool automatically added the calendar control for you. Now chose an earlier date from the calendar for the InTime field. Don’t change anything for the OutTime. Try to save the record. Woot, this time also the record saved successfully, because the validation rule passed the case.

Let us do something wrong now. Try to select a future date for the InTime. You will see the validation rule fails and the error message shown in the screen with a Red border to the InTime field. Have a look it here:

If you place the cursor into the Date field now, you will see the same error message that we wrote in the code window for the validation error of the InTime field.

Try to change the OutTime to a previous date. Woo, you will see the validation rule failed here too and the field automatically marked with a Red border.

If you place the cursor inside the field, you will see the error message shown into the screen. This is the same message we entered for the validation error of the OutTime field.

Try to save the table data after adding some records with empty text for the Firstname and Lastname field. You will see that, here also the validation failed because we marked those field as Required field. Hence, null record will throw validation error.

Correct the validation error and now you will be able to save the records without any issue.

End Note

You can see that, throughout the whole application (for all the previous 4 chapters) I never wrote a single line of code. I never did write a single line of XAML code to create the UI. It is presented by the tool template automatically. It has a huge feature to do automatically. From the UI design to add, update, delete and even sort, filter all are done automatically by the framework.

Only in this chapter, I introduced the code with you to extend the validation rule. I hope, you enjoyed this chapter of the series too. Huge nos. of figures I used here, so that, you can understand each steps very easily. If you liked this article, please don’t forget to share your feedback here. Appreciate your feedback, comments, suggestion and vote.

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/

Follow his new site: http://www.silverlight-zone.com/silverlight-zone.com for daily Silverlight related news.

Beginners Guide to Visual Studio LightSwitch (Part - 4) - Working with List and Details Screen

editorial@silverlightshow.net (Kunal Chowdhury ) — Thu, 02 Dec 2010 08:32:00 GMT

Don't miss...

($0.99)

All SilverlightShow Ebooks

This article is Part 4 of the series “Beginners Guide to Visual Studio LightSwitch”.

In my previous chapter “Beginners Guide to Visual Studio LightSwitch (Part – 3)”, I guided you step-by-step to create a DataGrid of records. Here you understood, how to insert/modify/delete records.

In this chapter, I am going to demonstrate you how to create a List and Details screen using LightSwitch. This will show you how to integrate two or more tables into a single screen.

Background

Create the Editable DataGrid Screen
See the Application in Action
Edit a Record
Create a New Record
Delete a Record
Filter & Export Records
Customizing Screen

In this Chapter, we will discuss on the List and Details Screen where we can integrate two or more Tables inside a single Screen. Read the complete tutorial to learn it. Enough images are there for you to understand it very easily. Don’t forget to vote and write some feedbacks on this topic.

Creating the List and Details Screen

Like the other screens, it is very easy to create the List and Details screen. Hope you have the basic table available with you. If you don’t have, read my first chapter of this tutorial to create the one for you. Now open the StudentTable inside your Visual Studio 2010 IDE. As shown in the below screenshot, click on the “Screen…” button to open up the Screen Template selector.

In the “Add New Screen” dialog that pops up (which is nothing but the Screen Template Selector), chose the “List and Details Screen” template. Check the below screenshot for details:

On the right side panel, chose the table that you want to use here. Select “StudentTables” from the Screen Data combo box and hit “Ok”. This will create the basic UI for you from the screen template with all the necessary fields.

You will be able to see the UI design inside the Visual Studio IDE itself. This will look just like this:

You will see that the screen has four TextBox named FirstName, LastName, Age and Marks. These are nothing but the table columns added to the screen.

Now run the application to see it in action. Once the application shows up in the display screen, click the “StudentTableListDetail” menu item from the left navigation panel. If you don’t know what is this navigation panel, read any one of the previous three chapters.

UI Screen Features

Here you will see that, there are two sections inside the main tab. One hosts only the FirstName from the records column and the right side panel has all the details for that specific record.

If you chose a different record from the left list, the right panel automatically reflect the record details. This screen calls as List and Details screen based on it’s UI. The left panel is the list of records and right panel is the details of the selected record.

Here, you will see that, like other screens “Add…”, “Edit…”, “Delete”, “Refresh” and “Export to Excel” buttons are available. The “Add” button will popup a new modal dialog with the form to enter new record. “Edit” button will popup a modal dialog with the selected record to modify it. “Delete” will simply delete the record from the table. It will not actually delete from the table unless you press “Save” after that. “Refresh” button will re-query the table to fetch the records. “Export to Excel” opens up the Excel application with the listed records.

You will also notice, there is a new Combo Box in the UI. It’s called as “Arrange By” (as shown in the below figure). If you click on the drop down you will see all the column names in the list.

From there, you can sort the records by any field. Once you select a different field from the drop down, it will again load the records sorted by that field.

Like the below screenshot, you will see an indicator while sorting and loading the records. No code to be written for all these functionalities. They are all out-of-box features.

Here you will see how the records have been sorted by FirstName (in ascending order):

If you want to sort them on descending order, just click the small arrow head just right to the “Arrange By” text. Here is the screenshot of the same (marked with Red circle):

Add, Edit operations are similar to the earlier screens. Either press the respective buttons or double click the DataGrid. Double clicking the DataGrid cell will do the operation inline but pressing the button will pop up a new modal dialog on the screen.

You can see the above figure. Once you click “Edit” button, the modal window will pop up as shown in the figure. Update the records with desired values.

Adding a New Table

Let us create a new Table. Open your Solution Explorer and right click on the “Application Data”. This will bring a context menu in the screen. As shown below, click on the “Add Table” menu item to open the Table designer.

In the table designer screen, enter all the columns with specific column types. For our example, we will create a StudentMarks table with three new columns named as “Math”, “Physics” and “Biology”. “Id” column is default primary key field.

All the columns are Int16 type in our case. The new table design will look like this:

Creating the Validation Rules

In earlier chapters, we saw how the IDE creates the validation rule by default for null value. Here, we will jump a little bit depth and set some additional validation rules. Of-course, they will not be in code but setting some properties inside the property panel.

Chose each one of the subject columns one by one and set the Minimum and Maximum values for them. In our case, the minimum value will be 0 (zero) and maximum value will be 100. Repeat the same step mentioned in the above screenshot for all the other two fields. Now, those fields will take an integer value ranging between 0 and 100. You will not be able to enter any value less than 0 or greater than 100.

If you enter any other value outside the range, it will fail the validation and show appropriate message on the screen. We will see that in action later. But before that, we need to create the screen.

Adding Relationship between two tables

Yes, we can easily create a relationship between two tables. How? Create the “Relationship…” button placed at the top left corner of the table designer screen (as shown below);

This will bring the “Add New Relationship” dialog in the screen. You will notice there that, it has two table field “from” and “to”. This means the relationship between two tables (one with the other). There is a field called “Multiplicity”. This is nothing but the relationship type (one to one, one to many, many to one etc.)

One to one is not supported in this Beta 1 version. Can’t say whether it will be available in the next versions. If you select one to one relationship, the wizard will show the appropriate message saying that “One to one relationships are not supported”. Have a look here:

For our example, chose Many to One relationship between StudentMarks and StudentTable. You can select the delete behavior in the wizard, whether it will support restricted or cascaded delete operation.

Once you setup the relationship between the two tables, click “Ok” to continue creating the relation. Now, Visual Studio 2010 IDE will show you how the relationship is binded between the two tables.

Here you will find the relationship as a diagram. See the box marked as Red:

You will see that, the StudentTable now has the one to many relationship with the StudentMarks table and it actually created a new field called StudenTable of type “StudentTable”.

Creating the new List and Details Screen

Now as a beginner, we will first remove the previous ListDetails screen. To do this, go to Solution Explorer and remove the StudentTableListDetail screen from the Screens folder. Here is the snapshot of the same:

The above step is not require if you are familiar with the screen customization. As the tutorial is targeted for beginners, hence I am removing this screen for you to understand properly.

Let use create a new List & Detail screen for our example. Go to the solution explorer. Right click on the Screens folder (as shown in the below figure), from the context menu chose “Add Screen…”.

This will popup the “Add New Screen” dialog. You are very familiar with this page as we discussed it earlier for several times. In this page, select “List and Details Screen” from left template panel.

In the right panel, select the desire table as the data source. In our example, we are going to use the “StudentTables” as the data source. Select it.

You will see that, it has now one more extra table called “StudentMarks” which you can chose from there. Let us select all the additional tables from the screen and click “Ok”.

This will create the UI for you and open up the UI inside Visual Studio IDE in the design view. You will see that the StudentMarksCollection (marked as Red in the below screenshot) also has been added to the screen and has reference to the StudentTableCollection.

In the right side design view you will see that, the StudentMarksCollection has been added to the screen as a DataGrid, means all the related data related to the actual StudentTable will be populated here.

You will be able to chose the fields from this screen. If you want, you can remove any field and/or select the control type for the respective column type.

Application in Action

This is all about the thing that we wanted to discuss here. Now it’s time to see the demo of the same in action. This will exactly tell about the feature that we wanted to learn. We will now be able to tell whether we were able to achieve the goal of this chapter.

Let us build the solution and run it. Once run, it will open the application UI. from the left menu panel, click the menu item called “StudentTableListDetail”. It will open the ListDetail screen as a new tab into the screen.

You will see that all the records are displayed in the middle panel of the screen. It is only showing the FirstName from the table. You can chose which field to display here by customizing the UI.

In the right panel, you will see two sections. The top section is nothing but a Form where you can view and update the respective records of the selected one. Below to that, there is a DataGrid which actually shows the respective related records from the 2nd table.

You can easily add, edit, delete and export records within this DataGrid. You all learnt about it in the previous chapter. Hence, I am not going to explain it more here.

Now comes the part to showcase the custom validation that we added for the fields. We entered the Maximum and Minimum value for the fields. Let us check whether these works actually. What do you think? Let’s do it.

Enter a negative value or a value higher than 100 (100 was our maximum value and 0 was the minimum value, if you can remember). You will see the proper validation message popup in the screen. If you entered a higher value, it will show “Value is more than the maximum value 100” and if you entered a lower value, it will show “Value is less than the minimum value 0”.

Once you corrrect those validation error, you will be now able to save the record.

Hey, did you notice one thing? We didn’t enter the validation message there. These are coming from the Tool itself. Everything is inbuilt there. No code. Click, click and click, you professional quality application is ready for you.

End Note

You can see that, throughout the whole application (for all the 4 chapters) I never wrote a single line of code. I never did write a single line of XAML code to create the UI. It is presented by the tool template automatically. It has a huge feature to do automatically. From the UI design to add, update, delete and even sort, filter all are done automatically by the framework.

I hope, you enjoyed this chapter of the series a lot. Lots of figures I used here, so that, you can understand each steps very easily. If you liked this article, please don’t forget to share your feedback here. Appreciate your feedback, comments, suggestion and vote.

I will soon post the next chapter on Custom Validation soon. Till then enjoy reading my other articles published in my Blog and Silverlight Show. Cheers…

About the Author

Beginners Guide to Visual Studio LightSwitch (Part - 3) - Working with Editable DataGrid Screen

editorial@silverlightshow.net (Kunal Chowdhury ) — Tue, 09 Nov 2010 05:46:00 GMT

Don't miss...

($0.99)

All SilverlightShow Ebooks

This article is Part 3 of the series “Beginners Guide to Visual Studio LightSwitch”.

In my previous chapter “Beginners Guide to Visual Studio LightSwitch (Part – 2)”, I described you how to create a search record window & export the records to Excel Sheet using Visual Studio LightSwitch for Silverlight. I also demonstrated about sorting and navigating records without writing a single line of code.

In this chapter, I will guide you step-by-step to create a DataGrid of records. Here you will know, how to insert/modify/delete records. These all steps are without writing any code. We will use just the tool to improve our existing application.

Background

If you are new to Visual Studio LightSwitch, I will first ask you to read the first two chapter of this tutorial, where I demonstrated it in detail. In my 2nd chapter, I discussed the following topics:

Create the Search Screen
See the Application in Action
Customizing the Search Screen
Sorting the Records
Customize the Name of the Screen
Navigation and Export to Excel

In this Chapter, we will discuss on the “Editable Data Grid” screen. Read it and learn more about this tool before it get release.

Create the Editable DataGrid Screen

Open the solution “HelloLightSwitchDemo1” that we created in our first chapter. From the Solution Explorer, double click to open the “StudentTables” as shown in the below figure:

This will open the table in design view. Click on the button called “Screen” to create a screen based on the entity.

This will open up the “Add New Screen” dialog in the screen. From the dialog shown below, select the “Editable Grid Screen” from the left panel. This will show the preview in the middle panel. The editable grid screen can be use to edit one or more records inside a datagrid.

From the right panel, select the Screen Data i.e. the table you want to work with.

This will set the ScreenName in the same dialog. You can change it too here or can change it later as discussed in the earlier chapters. Currently, I am going with the default name. Click “OK” to continue creating the screen.

Once you click “OK”, it will close the dialog and open the designer window of the screen inside Visual Studio IDE. You can change something here. If you read the earlier chapters, you will familiar with this screen. Currently I am going with the default screen because I want you should understand it easily.

Once everything is done, run the application to see the screen in action.

See the Application in Action

Now, it’s time to run the application to see the implemented screen. To do this, press F5. This will build the project and run the Silverlight application outside browser window (Out-of-Browser application). You will see the following UI once it run properly:

The default screen here will be the “New Student” tab. Close the tab and from the left panel click on the menu item called “EditableStudentTableGrid”.

It will open the tab ain to the screen s shown below:

You can see that, the screen has one search textbox panel which actually filters the records. It has a command button panel to do Add, Edit, Delete and Refresh function. It has a button called “Export to Excel”. It exports the record to the excel application sheet. It has one navigation panel to paginate the records. Let’s discuss them one by one.

Edit a Record

Let us start discussing on how to edit a record first. I will show two different approach. Select any record and double click on the column that you want to modify. You will see that, the cell will become in editable mode and the value present in the cell will be selected automatically.

Now set a different value to the cell. Press TAB to modify another cell.

Once you done modifying your records, press the “Save” button placed at the top left corner of the screen. You can also press “CTRL + S” to save the modified records.

Now let’s see another approach to edit a record. Select the row that you want to modify and click on the button called “Edit…”.

This will bring a child window with all the fields related to the record. The input boxes will be auto field with the data records. Modify the fields that you want and click “OK”.

Now press “Save” to update the records in the database table.

Create a New Record

We just completed editing the records. So, what next? Let’s create a new record from this screen. Here also, I will show you two different approach for inserting a new record.

In the first approach, click on a empty row and it will create a new row in the DataGrid as shown in the above UI. Start entering some records in the Grid.

Fill up all the fields and press the Save button present at the top left corner of the screen. This will save the records to the table.

Now we will show the same step using the second approach. Click on the “Add…” button as shown in the below screen:

This will popup the Child Window on top of the screen. It will have all the fields present in the table. Enter all the records.

Click “OK” and in the parent screen, press “Save” to store the new record. You will see the new records in the DataGrid.

Validate the Record

Before doing anything, I will show you the validation in the same screen. We will enter empty record in the screen and press “Save” button now. See the following screenshots:

You will see that, it actually validates the record automatically and show a message to the screen showing “Please correct data entry errors and try to save again.” Click “OK” to go back to the parent screen.

You will notice that it actually mark those fields as “Red border”.

Fill those mandatory fields and click “Save” once again. You will notice that, those validation error will go out from the screen and the new records will get saved in to the table.

Delete a Record

We had gone to a lengthy discussion of inserting and modifying records. Now it’s time to delete a record. Select the record(s) and press delete. You will notice that, the record has been deleted from the DataGrid.

Now go with the second approach. It is the same thing that we saw in the first approach. Select the row(s) and click the “Delete…” button in the screen (as shown in the below screenshot).

You will see that, the record has been deleted from the DataGrid and there is a red “x” mark placed at the side of the record. That means, the record has been deleted.

Press “Save”. You will see the record completely removed from the record table.

Woo, what a simple approach. No code, no XAML. The application is ready with add, edit and delete functionality. Let’s see some more features of it.

Filter & Export Records

This step we already discussed in the 2nd Chapter. But we will discuss it once again. In the same screen you can sort the records very easily. If you want to sort them by “Age”, click on the header of the column and you will see the records automatically sorted.

To filter out the records, start typing your query key in the search panel. You will notice that, the record has been filtered properly as per the search key. Have a look in to the following snapshot:

Oh yea, you can also export the records to an Excel worksheet by just pressing a single button. Click on “Export to Excel” button and you will watch the records exported to a Excel workbook. Yes, there’s a condition. You must have Excel installed in your PC.

There’s also a Navigation panel to paginate all the records.

Customizing Screen

You can also customize the screen. You can change the title of the screen. I will not discuss more on this topic. Read the first two chapters. I discussed more about this point there. To change the screen name, click on the “Customize Screen” button placed at the right corner of the screen.

Once you update the display name there, save the settings and restart the application to see the updated settings in the screen.

That’s all about it. You will now see that the new name has been assigned to the screen.

End Note

You can see that, throughout the whole application I never wrote a single line of code. I never did write a single line of XAML code to create the UI. It is presented by the tool template automatically. It has a huge feature to do automatically. From the UI design to add, update, delete and even sort, filter all are done automatically by the framework.

I will soon post the next chapter. Till then enjoy reading my other articles published in my Blog and Silverlight Show. Cheers…

About the Author

Beginners Guide to Visual Studio LightSwitch (Part - 2) – Working with Search Screen

editorial@silverlightshow.net (Kunal Chowdhury ) — Mon, 25 Oct 2010 10:55:00 GMT

Don't miss...

($0.99)

All SilverlightShow Ebooks

This article is Part 2 of the series “Beginners Guide to Visual Studio LightSwitch”.

Introduction

In my previous Chapter “Beginners Guide to Visual Studio LightSwitch (Part–1)” I described about LightSwitch and did demonstration from creating a new LightSwitch project to create a simple form to insert new Student record.

In this article, I will show you how to create a search record window & export the records to Excel Sheet using Visual Studio LightSwitch for Silverlight. No need to write a single piece of code, no need to write a single XAML code. Read through the complete article to learn more about it.

Background

If you are new to Visual Studio LightSwitch, I will first ask you to read the first chapter of this tutorial, where I demonstrated the following points:

Setting up LightSwitch Environment
Creating a LightSwitch Project
Create a Database Table
Create a Data Entry Screen
See the Application in Action
Validation of Fields
More on Save
Customize the Screen

If you go through the above points, you will be familiar with it and you will be able to understand this Chapter. You can read the first Chapter here: Beginners Guide to Visual Studio LightSwitch (Part–1). Don’t forget to vote for it.

In this article, we will talk about the Search Screen. We will create the search window, where we will be able to search for a particular record, sort the records and export the record to Excel Sheet. Yes, without writing any code.

Create the Search Screen

Open the solution that we created in the previous chapter. By default, the table designer will be visible on the screen. If not, open the “StudentTables” from the Solution Explorer. This will open the below screen in your Visual Studio IDE:

Click on the “Screen” button as shown in the above figure. This will pop up the “Add New Screen” to the desktop. Here you can select a screen template. Default selection is “New Data Screen”. As we are going to create a Search Screen, hence choose the “Search Data Screen” template from the template panel situated at the left side of the dialog window. It will show you the preview of the screen in the middle panel. Here it is:

In the right panel, select the appropriate “Screen Data” i.e. your table. In our case, it is the “StudentTables”. Select it from the dropdown. The “Screen Name” will be automatically updated by the IDE. If you want, you can change it here or can change it later from the Screen Designer window.

Click “Ok” to continue. This will generate the appropriate Search screen for your Student Table. Here it is in design view:

We will not modify anything there now. We will customize it at later point of time. As of now, our search screen is ready. We can now run the application and see the live demo.

See the Application in Action

Once the screen is ready, press F5 to run the application. Once the application has been launched as the OOB Silverlight Window, you will see the below screen:

By default the first screen (i.e. the “New Student” Screen in our demo application) will be visible. From the left panel, select the menu item called “SearchStudentTable”. This will open the “SearchStudentTable” screen as a new Tab. You will also see a loader while fetching the table values.

Once the fetch has been done, you will see the screen loaded with all the records in a Data Grid. In the same screen you will see a “Refresh” button, a “Search Panel” and a button called “Export to Excel”.

Now, click on the Search box and start typing your search query. Once entered, click on the search button.

This will filter out the DataGrid with the respective result based on the search term. You can see the same as live here:

All the things demonstrated here is without writing a single piece of code. You can see that. It is really very easy to create the professional application using the LightSwitch within a small amount of time. No need to know more about Silverlight XAML.

Customizing the Search Screen

If you look into the UI properly, you will notice that the table has a wrong column name. The first column name is “Student Table”. This is nothing but the “FirstName” column of the Student Table. So, we need to modify the UI to show the proper column name. In this point, we will discuss about it. Add some more records into the database table.

At the top right corner, you will see a “Customize Screen” button. You can click it to start customizing the Search Screen. Be sure that, the search screen is open in the UI. Click the button to continue.

This will open the Search Screen in Customization Mode. We are familiar with this screen, right? We have already seen this screen in our first chapter. To modify the first column of the DataGrid, click the small arrow head near to the “DataGridRow | StudentTable” to expand it.

Once expanded, you will see a Tree item named “Summary” (as shown in the below screenshot). Click on it. Now click on the “Delete” button placed at the edge of the left panel.

This will delete the summary column from the screen. You can see that in the right panel. Now select any of the label (as shown in the below screen) under the DataGridRow placed in left panel. You will see a dropdown menu added at the below screen.

Now click on the “Add” menu. This will pop up the full menu items in the screen. Select “FirstName” from the menu.

Once selected, you will see it live in the right panel too. Click on MoveUp icon at the edge of the left panel or press Ctrl + u. Continue pressing the MoveUp button unless it moves up to the top.

Now you will see the DataGrid structured properly with FirstName, LastName, Age and Marks.

Click on “Save” button to save the changes.

Now run your application to see the changes live. Here is the snapshot of the same:

Here you will see the records shown as per the order of insertion in the table. They are based on the Record Id. If you want to show the Id in the UI, go to the design view and add the Id column into the Screen.

Sorting the Records

If you want to sort the records, you can easily do it. The DataGrid has the mechanism to do it automatically. If you want to sort the data based on a particular column values, click on that column to sort it.

Let us sort the records by the FirstName field. Hence, click on the FirstName column header. Woo, what did you see? The records has been automatically sorted on FirstName.

Let us do another sort based on the “Age” field. Click on the “Age” column header to do the Sort by the application.

If you want to sort the records for the other fields, click on the respective column header to sort.

Customize the Name of the Screen

This point is already covered in the previous chapter. For sake of your understanding, I am again repeating this point. To change the title of the Search screen, click on the “Customize Screen” button to open up the screen in Customization Mode.

Select the first item from the left panel. In this example, it is: “Vertical Stack | SearchStudentTable”.

In the bottom right panel, find out the field named “Display Name”. Change the value for it from “SearchStudentTable” to “Search Student”. Save the settings.When you back to the UI screen, you will see that it has been updated in the tab. But in the left menu, the text is not yet updated.

Restart the application to reflect all the changes. After restart, your application will look as below:

Navigation and Export to Excel

If you have a huge records in the table, you will see the navigation panel in action. See the below screenshot:

In the above screenshot you will see the “Export to Excel” button. This is nothing but exporting your records to the Excel Work Sheet automatically. Just click on the button. The whole content of the records will be exported to the Excel application and you will see it like this:

End Note

You can see that, for the whole sample application, I didn’t write a single piece of XAML or C# code. This is the power of Visual Studio LightSwitch for the Silverlight developers. If you haven’t yet started working on LightSwitch, try exploring it from now.

I am feeling it very useful, as I am exploring it now. I will post the next chapter soon for you, so that, you can learn about it in depth. Don’t forget to vote for it. Appreciate your feedbacks and/or suggestions.

About the Author

Beginners Guide to Visual Studio LightSwitch (Part - 1) – Working with New Data Entry Screen

editorial@silverlightshow.net (Kunal Chowdhury ) — Mon, 25 Oct 2010 10:42:00 GMT

Don't miss...

($0.99)

All SilverlightShow Ebooks

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.