You are here:   Blog
Register   |  Login

 

Nov 29

Written by: Michael Washington
11/29/2012 4:05 PM  RssIcon

image

When you are creating HTML 5 pages using the LightSwitch HTML Client Preview 2, you will realize that to get it to do exactly what you desire, you will need to write some custom JavaScript. At the time of this writing the LightSwitch release that creates HTML 5 pages is still in beta so there is not a lot of documentation.

Basically the LightSwitch HTML Client references some JavaScript libraries (JQuery Mobile, WinJS Promise, DataJS, ect) and creates custom JavaScript code (for example classes to communicate with your  tables). It communicates with the LightSwitch back-end using OData.

 

The Sample Application

image

We will start with a simple application used in Creating JavaScript Using TypeScript in Visual Studio LightSwitch.

image

This application contains one simple table.

image

It is a complete application that allows inserts, edits, and deletes with full validation and security.

It takes less than two minutes to create from scratch.

 

The JavaScript That Is Deployed

image

To see the application that LightSwitch creates, we need to first publish the application.

clip_image001

When we look in the Client/Scripts directory, we see the referenced JavaScript libraries (JQuery Mobile, WinJS Promise, DataJS, ect). When you create custom code you will usually call JavaScript methods contained in this code. In a later section we will show how you can locate documentation on what methods are available.

 

image

When we look in the Client/Scripts/Generated directory we see custom JavaScript that LightSwitch creates based on what we have created using the LightSwitch designer in Visual Studio.

For example, the Data.js file contains a class that will be used to represent the Person entity type that we created. The viewModel.js file contains a function called BrowsePeople that invokes the WinJS Promise code. The functionality is similar to the example in the article: A Full CRUD DataJs and KnockoutJs LightSwitch Example Using Only An .Html Page but LightSwitch is creating all that complex code for you (in fact that article also uses DataJs but it uses KockoutJs for the View Model).

 

image

When we look in the Client/UserCode directory we see the custom JavaScript code we created in the LightSwitch code designer (see: Creating JavaScript Using TypeScript in Visual Studio LightSwitch for a walk-thru of that process).

 

The JavaScript Documentation

image

To see the documentation for the JavaScript libraries that LightSwitch uses, we return to Visual Studio and switch to File View.

image

We also want to click on the Client project in the Solution Explorer then click Show All Files.

image

The files with intellisense or vsdoc in their names contain the most complete documentation you will find for now. The majority of the documentation that you will be interested in, is in the msls-1.0.0.-vsdoc.js file.

image

The comments in green is the documentation.

image

This is the documentation that shows up as the intellisense in the code editing windows.

 

Start Here

The most up to date article regarding JavaScript and LightSwitch is:

New LightSwitch HTML Client APIs (Stephen Provine)

You will want to start there. Next, you will want to read every blog post in the LightSwitch HTML Client Forum that contains a code sample by a LightSwitch team member.

 

Special Thanks

A special thanks to LightSwitch team member Stephen Provine for his assistance.

 

Additional Links

Creating Screens with the LightSwitch HTML Client (Joe Binder)

The LightSwitch HTML Client: An Architectural Overview (Stephen Provine)

Writing JavaScript Code in LightSwitch (Joe Binder)

New LightSwitch HTML Client APIs (Stephen Provine)

A New API for LightSwitch Server Interaction: The ServerApplicationContext

Building a LightSwitch HTML Client: eBay Daily Deals (Andy Kung)

 

Learn JavaScript/JQuery

http://www.w3schools.com/jquery/default.asp

https://tutsplus.com/course/30-days-to-learn-jquery/

http://www.codecademy.com


Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation