You are here:   Blog
Register   |  Login

 

Dec 8

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

image

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

image

Select File then New Project.

image

Create a LightSwitch HTML Application.

image

The application will be created.

image

Select Add Table.

image

Create the table and save it.

image

Add a Screen.

image

Create a Browse Data Screen.

image

Add another Screen.

image

Create a Add/Edit Details Screen.

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

image

Open the Browse screen and add a New Button.

image

Select addAndEditNew for the Method.

image

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

image

Click OK.

image

The Button will show.

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

image

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

image

Select editSelected for the Method.

image

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

Click OK.

image

Press F5 to run the application.

image

You will be able to Add students.

image

You will be able to Edit existing records.

 

Install Wijmo

image

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)

image

in the Solution Explorer, switch to File View.

image

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).

image

Search for Wijmo and install Wijmo Complete.

image

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

image

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

image

Open the Default.htm page.

 

image

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" />

 

image

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>

 

image

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

image

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).

 

image

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

image

Switch back to Logical View.

image

Open the Add/Edit Detail Screen.

image

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

Add a second instance of Test Score.

image

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

image

In the Properties of the control:

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

image

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

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

image

 

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);
};

 

image

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);
    });    

 

image

 

 

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)

4 comment(s) so far...


Gravatar

Re: Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

Michael,

Just to be clear, is this done with (1) the ComponentOne Wijmo ASP.NET Controls (which based on the date of your article is likely the case), or is it done with (2) the ComponentOne Studio for LightSwitch HTML/Wijmos (which is a more recent release)? I have the older Wijmo ASP.NET Controls (complete/professional) and I am not sure of the advantages for their newer Studio for LightSwitch HTML plugins, if the older ASP.NET Wijmos can be this easily customized (as per your article) for LightSwitch. Please comment (pros and cons) on the two approaches.

Thanks

By Larry T. on   8/14/2013 2:31 PM
Gravatar

Re: Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

@ Larry T - This article uses (1) the ComponentOne Wijmo JavaScript Controls. The ComponentOne Studio for LightSwitch HTML/Wijmo plug-ins use the same JavaScript controls but make things MUCH easier because it writes most of the integration code for you.

By Michael Washington on   8/14/2013 4:02 PM
Gravatar

Re: Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

Hey Michael,

I'm on the verge of being able to create a custom control in the HTML Client for LightSwitch. The line in the render fuction CreateRadialContrl()... How does that fire anything off? Where is that method at?

By Chris Smith on   12/13/2013 6:44 PM
Gravatar

Re: Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client

@Chris Smith - I don't know you will want to check the ComponentOne site.

By Michael Washington on   12/13/2013 6:45 PM

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