Localizing a LightSwitch Application Using LightSwitch : Part 1

Localizing a LightSwitch Application

This article shows creation of a LightSwitch application then how to localize it.

If we are localizing a Silverlight client then we need to upgrade it first. Go to the menu bar, choose Project, then Upgrade Project. If the Upgrade Project command doesn't appear then the project is already upgraded.

We need Microsoft LightSwitch for Visual Studio Update 2 to localize a LightSwitch application. 

update 2.jpg

Creating the LightSwitch HTML Application using Visual Studio 2012 - Part 1

Procedure for creating a LightSwitch HTML Application

Step 1

Getting Started

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

New project.jpg

Step 2

The Application Designer appears.

app designer appear.jpg

Step 3

Right-click on the Server or Application data to add a table.


addtab.jpg

Step 4

In the table add the following fields and name it "Employee".

table.jpg

Step 5

Now the Solution Explorer consists of the following items:

solu.jpg

Step 6

In the Solution Explorer, right-click or double-click on "HTML Client" and choose "Add Screen".

add screens.jpg

Step 7

The Add New Screen Dialog box will appear.

add new screen dialog.jpg

Step 8

Add a Browse Data screen that's named "BrowseEmployee", and then choose "Employee" as the Screen Data.

browse employee.jpg

Step 9

Now the solution consists of the following items:

solu1.jpg

Step 10

Again form the Solution Explorer, right-click or double-click on "HTML Client" and choose "Add Screen".

add screens.jpg

Step 11

Add an "Add/Edit Details" screen that's named "AddEditEmployee" and then choose Employee as the Screen Data

addedit.jpg

Step 12

In the Solution Explorer, under HTML Client, right-click or double-click on the "BrowseEmployee" Screen.

browse1open.jpg

Step 13

The Screen Designer for the BrowseEmployee Screen appears.

browsescreen designer.jpg

Step 14

In the Screen Designer, open the "Rows Layout" | "Contact List" node, and then choose the "Add" Button.

browsescreen designer button.jpg

Step 15

The Add button dialog box appears on the screen.

add button dialog.jpg

Step 16

In the Add Button dialog box, in the showTab list choose "showAddEditEmployee".

choose show tab.jpg

Step 17

In the Employee field enter "New Employee", and then choose the "OK" button.


New Control.jpg

Step 18

In Solution Explorer, right-click on the Application Name, and then choose "Add Client".

add client.jpg

Step 19

The Add Client dialog box appears on the screen.


add client dialog.jpg

Step 20

Select the Desktop Client and click "OK".

select desktop client.jpg

Step 21

In the Solution Explorer, right-click or double-click on the DesktopClient to open it.

add desktop screen.jpg

Step 22

The Add new screen dialog box appears.

add new screen desktop.jpg

Step 23

Select a New Data Screen that's named "NewEmployee" and then choose "Employee" as the Screen Data.

add new screen desktop dialog.jpg

Step 24

In the Screen Designer, choose the "Add" node.

add node.jpg

Step 25

Click on the "Add" option and choose "Add text".

add text.jpg

Step 26

In the Edit Text dialog box, enter a new employee here.

edit text.jpg