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: SNAGHTML6dacc4

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

image

2) You will be able to Add students.

SNAGHTML6a0021

3) You will be able to Edit existing records.

image

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

image

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

image

6) Search for Wijmo and install Wijmo Complete.

SNAGHTML2053ed64

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

image

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

image

9) Open the Default.htm page.

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

SNAGHTML83cd3f

10) Insert the following to the .css section:

<!-- added Wijmo Widgets CSS-->

11) Add the following to the JavaScript section

(after : )

<!-- Added Wijmo Widgets and guagecontrol JavaScript-->

12)Insert the following to the JavaScript section

(after: . 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

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, 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

function sector(cx, cy, r, startAngle, endAngle, params) { var x1 = cx + r Math.cos(-startAngle rad), x2 = cx + r Math.cos(-endAngle rad), y1 = cy + r Math.sin(-startAngle rad), y2 = cy + r Math.sin(-endAngle rad); return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params); } function UpdateRadialContrl(radialContrl, intRadialValue) { // This only updates the value radialContrl.wijradialgauge({ value: intRadialValue, // The value for the Radial Control }) }; function CreateRadialContrl(radialContrl, intRadialValue) { // This creates the control and sets all values radialContrl.wijradialgauge({ value: intRadialValue, // The value for the Radial Control max: 100, min: 0, startAngle: 10, sweepAngle: 160, radius: 190, islogarithmic: false, origin: { x: 0.5, y: 0.5 }, labels: { offset: 27, style: { fill: "#1E395B", "font-size": 12, "font-weight": "800" } }, tickMinor: { position: "inside", offset: 30, style: { "height": 3, "width": 10, fill: "#1E395B", stroke: "#E7EFF8" }, interval: 5, visible: true }, tickMajor: { position: "inside", offset: 27, style: { fill: "#1E395B", "height": 4, "width": 20, stroke: "#E7EFF8", "stroke-width": 1.5 }, interval: 25, visible: true }, ranges: [{ startWidth: 2, endWidth: 5, startValue: 0, endValue: 10, startDistance: 0.6, endDistance: 0.58, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": 0 } }, { startWidth: 5, endWidth: 20, startValue: 10, endValue: 125, startDistance: 0.58, endDistance: 0.54, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": 0 } }, { startWidth: 20, endWidth: 25, startValue: 125, endValue: 150, startDistance: 0.54, endDistance: 0.5, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": 0 } }], face: { template: function (ui) { var a = ui.canvas.path($.wijraphael.sector( ui.origin.x, ui.origin.y, ui.r, 0, 180)), b = ui.canvas.path($.wijraphael.sector( ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)), style = { fill: "#E0E8EF", stroke: "#E0E8EF" }; a.attr(style); b.attr(style); } }, pointer: { length: 0.8, offset: 0, width: 6, style: { fill: "#1E395B", stroke: "#1E395B" } }, cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" } } }); };

14) Add GaugeControl.js to Client/Scripts folder

image

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 <!-- Change light-theme.css and msls-light.css to dark-theme.css and msls-dark.css respectively to use the dark theme. Alternatively, you may replace light-theme.css with a custom jQuery Mobile theme. --> <!-- added Wijmo Widgets CSS--> <!-- Default font, header, and icon styles can be overriden in user-customization.css -->
WijmoRadialGauge
<!-- Added Wijmo Widgets and gaugecontrol JavaScript-->

16) Switch back to Logical View.

image

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

image

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

image

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

image

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

image

21) In the Properties of the control:

§ Set Label Position to Hidden

§ Set Height to Fixed Size

§ Set Pixels to 240

image

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

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

image

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.

image

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

image

Completed Soultion Download