Lightswitch

Microsoft LightSwitch
development


Microsoft describes Visual Studio LightSwitch
as “the simplest way to create business
applications for the desktop or the cloud.”


INSTALLING VISUAL STUDIO LIGHTSWITCH


CREATING YOUR FIRST LIGHTSWITCH APPLICATION
Creating a Project


Creating a Project

The root node of the hierarchy is the
AlbumTracker node representing the project.
The Data Sources and Screens
folders are empty now, but as you continue
with the application’s development, they will
be ﬁ lled with the artifacts you create.


Creating a Table
Click the “Create new table” task
Change the name by entering Album Click the empty cell below Id
in the Name column to enter the ﬁeld name.


Creating a Project
Add a few new ﬁelds to the table


Creating a Screen to List Album Information
Creating a New Screen

1. In the toolbar at the top of the Designer
window, locate and click the Screen button

2. From the list on the left side of the dialog,
select the List and Details Screen option

3. Select Albums from the Screen Data drop-
down menu to indicate that your screen
should be created with album information.

4. Click OK to create the screen. Its structure
is displayed in the AlbumTracker Designer
window.


How It Works
LightSwitch is different. Instead of a WYSIWYG (what-you-
see-is-what-you-get) view of the screen, you have a layout
structure


Running the Application


Running the Application

Click the Add button again.
This time, enter some
invalid information (for
example, leave the Title
ﬁeld empty, or enter
letters where numbers are
expected), and click OK.
The invalid data items are
visually highlighted on the
user interface



How It Works

Any data modifications you make,
such as adding new records,
deleting existing ones, or altering
record attributes, are first saved
into memory but left intact in the
database. LightSwitch keeps track
of all changes you’ve made. You
must use the Save button to write
Unsaved data is marked with an asterisk.
all modifications into the database.
LightSwitch uses its tracking list to
send the modified records to the
database as a single batch.


Customizing the Application’s UI during Runtime

Start the application in Debug mode
by selecting Debug ➪ Start
Debugging, or by pressing F5.
When the application starts, you’ll
see a Design Screen button in the
rightmost position of the
toolbar.


Customizing the Application’s UI during Runtime
Select the root node (Albums List Detail) in
the layout hierarchy, and change its Display
Name property in the Properties pane to
Albums List. As you change the layout
properties, you can see a preview of the
changes.


Technologies behind a LightSwitch Application
THE THREE-TIER APPLICATION ARCHITECTURE PATTERN
The Presentation Tier
Generally, the Presentation tier checks the input parameters of a task (for
example, whether the format of an e-mail address is valid), and sends the
request to the Logic tier only when the parameters are valid; otherwise,
the user is asked to ﬁ x any invalid values.


The Logic Tier
This tier (sometimes called the Business Logic tier) is responsible for
executing tasks (business functions) of the application.
Caching is a great practice to avoid unnecessary communication with the Data
tier. The results of queries about data that changes very infrequently (for
example, attributes of a certain customer) can be stored in the cache (for
example, the physical memory of the server) assigned to the Logic tier.
When a subsequent request arrives from the Presentation tier with the
same operation parameters, results can be retrieved from the cache,
without communicating with the Data tier.


The Data Tier
The Data tier understands the
requests coming from the Logic
layer, and translates them to a
protocol (or language) that is
suitable to communicate with the
data store. One realworld example
is the SQL language used by
relational database management
systems (RDBMSs) to query
underlying data.


LightSwitch and the Three-Tier Architecture Pattern

LightSwitch uses Silverlight 4 as the technology for the Presentation tier. This
choice is very beneﬁ cial, because Silverlight applications can be either hosted in
a web browser - including not only Internet Explorer, but also Firefox, Safari,
and Google Chrome -or run in their own separate windows just like any other
Windows desktop application. Silverlight also supports rich user interfaces and
asynchronous technologies that allow smooth integration with the Logic tier.


A component of the .NET Framework 4 Entity Framework (EF) is used to access
data stored in back-end databases. A new protocol named OData is used to
obtain and manipulate data accessible through standard HTTP web requests.
WCF Rich Internet Application (RIA) Services is a component that binds the
Silverlight 4 client with the Logic tier. It is a relatively new technology that
simpliﬁes the work of developers.
The Data tier is called the Storage tier in LightSwitch, emphasizing that the Logic
tier is responsible for requesting the data, and the Storage tier is responsible for
retrieving and persisting it. LightSwitch supports three kinds of data storage
components out-of-the-box:
➤ SQL Server 2008 (that is, an RDBMS)
➤ SharePoint 2010 lists
➤ Other storage services that provide an OData interface


Technologies used in a LightSwitch application


Layout
Silverlight uses a declarative approach to describe the UI element with a language
called Extensible Application Markup Language (XAML, pronounced “zamel”).
The nature of XAML allows an easy description of the layout strategy used by
Silverlight.

Data Binding
Data binding allows for two-way
synchronization and validation, and
automatically ensures that the UI and
the underlying data are consistent.
You can use data-binding techniques for
displaying and editing data entry as well.
When you use two-way binding, not only is the data arriving from the Logic tier shown in the
UI, but the data changed by the user is written back to its source object.


Styles and Templates
Templ ates in Silverlight provide a mechanism to replace the visual look of a control
entirely or change how data is displayed or laid out in a list box.

The data template of list box items has been
changed, and a button that uses a custom
template replaces the default one. These
templates are resources in a Silverlight
project, so you can use the same template
for several list boxes and buttons to provide
a consistent visual style. Changing the
template will cause the layout of all controls
that use it to change.


SQL SERVER 2008
SQL Server Features

Scalability
Handling transactions
Logging

Referential integrity constraints

Indexes

Stored procedures


SQL Server 2008 Express
You do not have to worry about how you can install SQL Server in your
development environment, because Visual Studio LightSwitch installs SQL Server
2008 Express on your machine. SQL Server 2008 Express is a lightweight (and free)
version of SQL Server that you can deﬁnitely use for small applications.


SHAREPOINT 2010
SharePoint 2010 Features

Sharing information with sites

Collaboration platform

Managing content

Enhanced search


SHAREPOINT 2010
SharePoint 2010 Lists and LightSwitch


Microsoft
Office
Application
Features


Microsoft Office Application Features
Exporting Information to Microsoft Excel
Visual Studio LightSwitch is designed with Microsoft Ofﬁce integration in
mind. You can easily export data to Microsoft Excel
Select Debug ➪ Start Debugging (or press F5) to start the application. After
your application starts, the Album List screen is displayed. Click the “Export to
Excel” button on the toolbar of the Album List screen, In a few seconds,
Microsoft Excel will open with the list of albums


Windows Azure and LightSwitch
Visual Studio LightSwitch provides a jumpstart for Azure development! Without
using the development fabric for software development, testing, and debugging,
with LightSwitch you can create Azure applications. Moreover, you do not need to
decide at the beginning of your projects to host the system in the cloud; you can
move to the cloud model later when the application is ready and works as
expected. LightSwitch has a deployment option that uploads the application
directly to Windows Azure.


Customizing LightSwitch Applications
CUSTOMIZING DATA
Connecting to an Existing Database


Changing Names and Types in the Existing Table


Changing Names and Types in an Attached Table
1. Double-click the Sea_Creature text in the header of the table within the Designer.
When the Sea_Creature text is highlighted, you can change it. Type Creature and press
Enter to change the name of the table.

2. Click the C_Name field (in the Name column). The C_Name text becomes highlighted,
indicating that you can edit it. Type Name and press Enter.

3. The focus moves automatically to the C_Price field. Enter the name Price. Pressing
Enter moves the focus to the C_Avoid_Group field.

4. Change C_Avoid_Group to AvoidGroup and C_Picture to Picture.

5. Click the drop-down arrow of the Picture fi eld’s Type column and click The Image
option to change the type of this fi eld to Image.


Changing Names and Types in an Attached Table


Creating the Cart Table
Creating a New Table Related to an Existing One

In Solution Explorer, right-click the Data Sources node and select the Add Table command.
In the Designer, a new table appears with Table1Item text highlighted in its header.

Type Cart to rename this new table. LightSwitch automatically creates one property for this
table named Id. As its name suggests, this property uniquely identiﬁes records in this table,
and you cannot change or delete it. Click the <Add Property> cell and type Quantity to set
the name of a new ﬁeld. move to the Type column and set it to Short Integer.



Click the Relationship button in the toolbar of the
Designer. The Add New Relationship dialog appears.
The upper part of the dialog contains a table with
columns, From and To, representing the source and
the destination of the relationship, respectively. The
source is ﬁlled With Cart, as the Name row of the
table shows. Use the drop-down arrow of the To
column in the Name row to select the Creature table.
This action speciﬁes that the destination of this
relationship is Creature. The dialog updates its
contents.



Setting up the relationship
between the Cart and
Creature tables


CUSTOMIZING SCREENS
Creating a Creature Catalog Creating a New Search Screen

Right-click the Screens nodes
in Solution Explorer and select
the Add Screen command
from the context menu. The
Add New Screen dialog opens.


CUSTOMIZING SCREENS
Creating a Creature Catalog Creating a New Search Screen

A simple search screen in
generated. Press F5 to start
your application. In a few
seconds, the Aquarium
application starts and displays
the ListCreatures screen.


CUSTOMIZING SCREENS
Changing the Grid Layout
To change the layout of the search screen, follow these steps:

1- select List from the options 2. select the Picture 3. Expand the Creature node to view
displayed This changes the and Text layout. the layout elements of an item. The
grid layout to a list layout. This sets up the small X icon and the Choose Content
items of the list text indicate that you must specify
layout so that they the ﬁelds to display.
will contain a
picture and a few
text elements
describing a
Creature record.


CUSTOMIZING SCREENS
Changing the Grid Layout
To change the layout of the search screen, follow these steps:

Selecting the ﬁeld for the item’s All items are set up
picture


CUSTOMIZING SCREENS

Press F5 to see how these changes
affect the screen layout. When the
application starts, you can
immediately recognize the result.


Creating a Shopping Cart Screen
Creating a Shopping Cart Screen with an Editable Grid
Double-click the Carts node in Solution Explorer to display the Cart table in the Designer.
Click the Screen button in the Designer toolbar to launch the Add New Screen dialog.
This is an alternative way to create a new screen; you can still use the context menu of
the Screens node in Solution Explorer to add a new screen.


Expand the Cart Data Grid Row node, right-click the Creature C Id item, and select the Delete
command to remove this ﬁeld from the layout.
Click the Creature node, but before releasing the mouse button, drag it before Quantity.
With this operation, you set the column order to Quantity, Price, and Creature.


Press F5 to start the application and select the ShoppingCart screen. Edit it by adding a few
items, and use the drop-down list of the Creature column


WRITING CODE
Setting a Default Property Value in Code
To set the default quantity for a cart item :
1. Double-click the Carts node in Solution Explorer. The Cart table
will be displayed in the Designer.
2. The rightmost command in the Designer toolbar is Write Code.
Click its drop-down arrow. In the list that appears are several
methods triggered by an event. Select
Cart_Created
3. The Cart.vb (Cart.cs,
if you use C#) ﬁ le is opened
in the IDE and an empty
Cart_Created method
is generated:


WRITING CODE
Setting the Startup Screen
To set ShoppingCart as the startup screen, follow these steps:
1. Right-click the Aquarium node and select Properties from the context menu.
2. The properties of the project are displayed in the Designer. You can see that this dialog has a
few tabs. Select Screen Navigation. The List Creatures item under Tasks


WRITING CODE
Managing Price Information
Double-click the Carts node in Solution Explorer to display it in the Designer. On the left side,
select the Creature ﬁeld
In the Designer toolbar, click the drop-down arrow of the
Write Code command, and select the Creature_Changed
property method


WRITING CODE
Managing Price Information
In Solution Explorer, double-click the Carts node. When the Cart table opens in the
Designer, add a new property to the table named Subtotal, and set its type to
Money. While this new property is selected in the Designer, in the Properties
window, click the Is Computed check box

PART II
Creating Applications with Visual
Studio LightSwitch


Preparing to Develop a LightSwitch Application
Working with Simple Data Screens
Working with Master-Detail Data Screens
Using Existing SQL Server Data
Building and Customizing Screens
Validation and Business Rules
Authentication and Access Control
Microsoft Office Integration


Designing Databases
ProjectTrek Entities


LIGHTSWITCH APPLICATION DEVELOPMENT LIFE CYCLE
Construction: Design and Implementation
LightSwitch was designed with data-centric LOB applications in mind

1. Create data — Design and create your data structures, including
new entities, and entities based on existing data. Then you
establish the relationships between them.
2. Create screens — Create screens based on the data you’ve
created, and establish their basic layout.
3. Build logic — Declare simple rules characterizing the business
logic of your application, and write code for more complex
business rules, and for user-interaction logic.
4. Customize — Perform some visual tuning to enhance the user
experience, and, if necessary, make slight modiﬁcations to data
structures and related business logic. Create Screens Build Logic


Deployment
You do not need to manually write installation tools or scripts. With the help of
the deployment function built into the integrated development environment
(IDE), you can choose from client and application server topology options, and
the IDE will guide you through the whole deployment process.
➤ Desktop client — The application runs on the end-user’s desktop.
➤ Browser client — The application runs in the end-user’s browser.


Extending a LightSwitch Application


Team Foundation Server Support
Visual Studio LightSwitch fully supports Microsoft Team Foundation
Server (TFS) 2010 integration, just like other Visual Studio 2010 editions.
You can store the source code of your solutions in a Team Foundation
Server 2010 team project and use all the teamwork techniques that it
offers, including source code control, work item management, automatic
builds, and more.

Working with Simple
Data Screens


Creating The ProjectTrek Project


Creating the TimeCategory Table


Field Types


Setting Up TimeCategory Properties
TimeCategory table
properties displayed in
the Properties window

List of TimeCategory
table ﬁelds in the Changing the Maximum
Properties window Length property


CREATING SCREENS right-clicking the Screens folder
and selecting Add Screen from
The Add New Screen Dialog the context menu.


Predeﬁned Screen Types


Creating a Search Screen for TimeCategory

LightSwitch generates a screen for
adding new records

The command bar of
DataGrid after adding
Adding the Save button
three new buttons
to the screen command
bar


Creating a Search Screen for TimeCategory

The modiﬁed records have
not yet been saved

Search results


The Layout Structure of a Screen

The structure of the screen Designer


The Layout Structure of a Screen
Screen Designer Toolbar Elements


INSERTING, EDITING, AND DELETING DATA
Creating a Details Screen

The summary column is
represented as a link

Default edit screen for
a time category entry


Creating a Details Screen Creating a New Details
Screen for TimeCategory

The new TimeCategory detail screen


Creating a New Data Screen
Right-click the Screens node in Solution Explorer and select Add Screen from the context menu.
In the Add New Screen dialog, select the New Data Screen template

The new data screen to add a TimeCategory entry


Creating an Editable Grid Screen
Right-click the Screens node in Solution Explorer and then click Add Screen in the context menu.
When the Add New Screen dialog appears, choose the Editable Grid Screen template.

Removing the Add button
from the command bar
EditableTimeCategoryGrid in action


Deleting a Record

Deleted entry is marked with an icon


Finalizing the EditableTimeCategeory Screen
To establish the final form of the EditableTimeCategory screen:
1. Double-click TimeCategories in Solution Explorer to open this
table in the Designer.
2. Select the DisplayName field and change it to Category.
3. Select the Active field and change its Display Name
property to Active? in the Properties window.

The final polished
form of the The Choice List dialog
EditableTimeCategoriesGrid

Working with Master-Detail
Data Screens


One-to-Many Relationship

Implementing the one-to-many relationship
between Order and OrderDetail tables

Hierarchies and Self-Referencing Relationships
Implementing the self-referencing relationship of
the ProjectTask table


Many-to-Many Relationship

Implementing the many-to-many relationship
between User and Group tables

One-to-One Relationship

Implementing the one-to-one relationship
between Person and ContactPerson tables


CREATING MASTER-DETAIL SCREENS
Right-click Screens in Solution Explorer and use the Add Screen command. In the Add New
Screen dialog, select the List and Details Screen template, and choose Projects from the
Screen Data drop-down list. Leave the screen name and the options beneath the “Additional
Data to Include” heading at their defaults


Creating a Master-Detail Screen, Including Project and ProjectTask Data


QUERIES
Changing the Query of a Screen
In the Screen Designer, click the Edit Query task link near the Projects data item on the
left side of the screen. The Designer opens the query


QUERIES
Creating New Queries
In Solution Explorer, right-click the Projects node and select the Add Query command. A
new query opens in the Designer with the name Query1 highlighted in its header

Add a new ﬁlter condition to the query that states
Where Closed = False, and a new sort order
declaration SortBy StartDate Descending


QUERIES
Binding Query Parameters with Screen Data

Thank you

Prepared by :
Eng. Muhammad Alaa
Eng.Muhammad_alaa@yahoo.com

Lightswitch

Recommended

More Related Content

What's hot (20)

Similar to Lightswitch (20)

More from Muhammad Younis (11)

Recently uploaded (20)

Lightswitch