HTML5 Everywhere : Part 2 Wijmo in LightSwitch CTP

March 25 2013

Script 2: Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client Original complete post is Written by ComponentOne Influencer: MVP Michael WashingtonGuess, What? LightSwitch now has a HTML client!Prerequisite: LightSwitch HTML Client CTP (now included in Visual Studio 2012 Update 2 CTP) Not sure? Check your about box in Visual Studio 2012 and it should look something like this:

Starter Solution Download

Download this starter solution above or follow Michaels’ blog to build the project to this point.If you download the starter solution, before unzipping, right click on the zip file in Windows Explorer, select Properties, press the Unblock button and press OK and then unzip. The starter solution already has a LightSwitch app completed and we will modify it to use the Wijmo Gauge control. If you would like to see how this app was built using the LightSwitch CTP, then see Michael’s blog.

1) Rebuild the solution in VS 2012 and Press F5 to run the application.

2) You will be able to Add students.

3) You will be able to Edit existing records.

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

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

6) Search for Wijmo and install Wijmo Complete.

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

8) Select the JavaScript files that were added, right-click on them and select Include in Project if not already included.

9) Open the Default.htm page.

Note: you can turn on line numbers in the editor Tools | Options | Text Editor | All Languages

10) Insert the following to the .css section:

11) Add the following to the JavaScript section

(after : <script type="text/javascript" src="Scripts/Generated/generatedAssets.js">></script>)

<script src="Scripts/jquery.wijmo-open.all.2.3.5.min.js" type="text/javascript">></script> <script src="Scripts/jquery.wijmo-complete.all.2.3.5.min.js" type="text/javascript">></script>

12)Insert the following to the JavaScript section

(after: <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>. Also note, my code had 1.8.2 generated by VS 2012 and I needed to change this to 1.8.3)

13) 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, this reusable JavaScript class can be created (right-click on the link and select Save Target As and save it as GaugeControl.js (rename from GuageControl.js) and put it in the Scripts folder of the Client project).

Here is the code for GaugeControl.js

14) Add GaugeControl.js to Client/Scripts folder

15) Insert the following to the JavaScript section in default.htm page right below the Wijmo references.

    16) **Default.htm** should now look like this:

<!DOCTYPE HTML>

WijmoRadialGauge

16) Switch back to Logical View.

17) Open the Add/Edit Detail Screen by double clicking WijmoStudentDetail.

18) We want to bind the control to the value of the Test Score and Add a second instance of Test Score.

19) Select drop down arrow and change the second instance of Test Score to a Custom Control.

20) Drag custom control Test Score down and the left, so it is under Rows layout – Details (Tab).

21) In the Properties of the control:

§ Set Label Position to Hidden

§ Set Height to Fixed Size

§ Set Pixels to 240

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

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

23) Add code to look as follows:

/// myapp.WijmoStudentDetail.TestScore1_render = function (element, contentItem) { // Write code here. var radialContrl = $('

');

radialContrl.appendTo($(element)); // Create the control CreateRadialContrl(radialContrl, contentItem.value);

};

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

25) 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 when enter is pressed or the text box for the test score has lost focus, without having to save it first:

contentItem.dataBind("value", function (newValue) {

    UpdateRadialContrl(radialContrl, newValue)
});

Completed Soultion Download

MESCIUS inc.