Dec 8

Written by: Michael Washington
12/8/2012 6:35 PM 

ComponentOne provides a set of free and commercial controls called Wijmo that can be consumed in the Visual Studio LightSwitch HTML Client.

For this tutorial, I am using the LightSwitch HTML Client Preview 2.

The Sample Application

Select File then New Project.

Create a LightSwitch HTML Application.

The application will be created.

Select Add Table.

Create the table and save it.

Add a Screen.

Create a Browse Data Screen.

Add another Screen.

Create a Add/Edit Details Screen.

Now, we need to make a Button to allow a user to Add records.

Open the Browse screen and add a New Button.

Select addAndEditNew for the Method.

Then select the Add/Edit Detail Screen for Navigate To.

Click OK.

The Button will show.

Now, we need to allow a user to Edit an existing record.

Click on the List control, and in Properties click on the link next to Item Tap.

Select editSelected for the Method.

Then select the Add/Edit Detail Screen for Navigate To.

Click OK.

Press F5 to run the application.

You will be able to Add students.

You will be able to Edit existing records.

 

Install Wijmo

Wijmo comes in two versions. A commercial version of 40+ widgets, and a free version that contains the following widgets:

• Accordion
• Calendar
• Dialog
• Expander
• Form Decorator
  • Radio Button
  • TextBox
  • DropDown
  • CheckBox
• List
• Menu
• Popup
• ProgressBar
• Slider
• Splitter
• SuperPanel
• Tabs
• Tooltip
• Video Player

In this article we will implement a control from Wijmo Complete (it is free to try and then when you are ready you purchase a license)

in the Solution Explorer, switch to File View.

Right-click on the Client project and select Manage NuGet Packages (ensure you have the latest NuGet Manager installed because a bug that caused crashes was fixed).

Search for Wijmo and install Wijmo Complete.

Select Show All Files in the Solution Explorer to see all the files.

Select the JavaScript files that were added, right-click on them and select Include in Project.

Open the Default.htm page.

 

Add the following to the .css section:

 

    <!--Wijmo Widgets CSS-->
    <link href="Content/jquery.wijmo-complete.all.2.3.1.min.css" rel="stylesheet" type="text/css" />

 

Add the following to the JavaScript section:

 

    <!--Wijmo Widgets JavaScript-->
    <script src="Scripts/jquery.wijmo-open.all.2.3.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.wijmo-complete.all.2.3.1.min.js" type="text/javascript"></script>

 

Add the following to the JavaScript section:

 

    <!--jQuery References-->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>

 

Implement the Wijmo Radial Gauge

When we go to this link, we can find documentation on the Wijmo Radial Gauge. You can get the full documentation at this link.

Using that documentation, I created this reusable JavaScript class (right-click on the link and select Save Target As and save it as GuageControl.js (yes I used ‘creative spelling’ for the name of the JavaScript file) and put it in the Scripts folder of the Client project).

 

Add a reference to the file in the default.htm page.

Switch back to Logical View.

Open the Add/Edit Detail Screen.

We want to bind the control to the value of the Test Score.

Add a second instance of Test Score.

Change the second instance of Test Score to a Custom Control.

In the Properties of the control:

• Set Label Position to Hidden
• Set Height to Fixed Size
• Set Pixels to 240

In the Properties for the control, select Edit Render Code.

A method will be created for you to enter custom JavaScript code.

 

Change the code to the following:

 

myapp.WijmoStudentDetail.TestScore1_render = function (element, contentItem) {
    // Write code here.
    var radialContrl = $('<div id="gaugeDIV"></div>');
    radialContrl.appendTo($(element));
    // Create the control
    CreateRadialContrl(radialContrl, contentItem.value);
};

 

When you run the application, the Gauge will display and match the value entered for Test Score.

However, when you change the Test Score, you have to save the record and return to it to see the Gauge change.

If we close the web browser and return to the JavaScript method and add the following code to the method, the Gauge will automatically update:

 

    contentItem.dataBind("value", function (newValue) {
        UpdateRadialContrl(radialContrl, newValue);
    });    

 

 

 

LightSwitch Help Website Articles

Writing JavaScript In LightSwitch HTML Client Preview

Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Theming Your LightSwitch Website Using JQuery ThemeRoller

Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

 

LightSwitch Team HTML and JavaScript Articles

Custom Controls and Data Binding in the LightSwitch HTML Client (Joe Binder)

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)

 

Special Thanks

A special thanks to LightSwitch team members Joe Binder and Stephen Provine for their valuable assistance.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have HTML Client Preview 2 or higher installed to run the code)